@extends('layouts.app')

@section('title', __('prescriptions::messages.protocols.title'))

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h1 class="px-title">{{ __('prescriptions::messages.protocols.title') }}</h1>
            <p class="px-subtitle">{{ __('prescriptions::messages.protocols.subtitle') }}</p>
        </div>
    </div>

    <div class="px-panel p-3 p-md-4 mb-4">
        <form method="GET" action="{{ route('protocols.index') }}" data-clinic-filter class="row g-3 align-items-end">
            <div class="col-12 col-md-6 col-xl-4">
                <label for="search" class="px-field-label">{{ __('common.search') }}</label>
                <div class="px-search">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <input type="search" id="search" name="search" class="form-control px-input"
                           value="{{ $filters['search'] }}"
                           placeholder="{{ __('prescriptions::messages.protocols.search_placeholder') }}">
                </div>
            </div>
        </form>
    </div>

    <x-results>
        <div class="px-layout">
            <div class="min-w-0">
                <div class="px-panel overflow-hidden">
                    @if ($protocols->isEmpty())
                        <div class="px-empty">
                            <div class="px-empty__art" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                     stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M6 3h9l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                                    <path d="M15 3v5h5M9 13h6M9 17h4" />
                                </svg>
                            </div>

                            <p class="px-empty__title">{{ __('prescriptions::messages.protocols.empty_title') }}</p>
                            <p class="px-empty__text">{{ __('prescriptions::messages.protocols.empty_text') }}</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table px-table px-table--cards align-middle">
                                <thead>
                                    <tr>
                                        <th scope="col">{{ __('prescriptions::messages.protocols.name') }}</th>
                                        <th scope="col">{{ __('prescriptions::messages.protocols.category') }}</th>
                                        <th scope="col">{{ __('common.status') }}</th>
                                        <th scope="col" class="text-end">{{ __('common.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($protocols as $protocol)
                                        <tr>
                                            <td data-label="{{ __('prescriptions::messages.protocols.name') }}">
                                                <span class="fw-semibold d-block">{{ $protocol->title }}</span>
                                                @if ($protocol->summary)
                                                    <span class="small text-body-secondary">{{ $protocol->summary }}</span>
                                                @endif
                                            </td>

                                            <td data-label="{{ __('prescriptions::messages.protocols.category') }}">
                                                @if ($protocol->category)
                                                    <span class="px-pill px-pill--violet">{{ $protocol->category }}</span>
                                                @else
                                                    <span class="text-body-secondary small">—</span>
                                                @endif
                                            </td>

                                            <td data-label="{{ __('common.status') }}">
                                                <span class="px-pill {{ $protocol->is_active ? 'px-pill--green' : 'px-pill--grey' }}">
                                                    <span class="px-dot" aria-hidden="true"></span>
                                                    {{ $protocol->is_active ? __('common.active') : __('common.inactive') }}
                                                </span>
                                            </td>

                                            <td data-label="{{ __('common.actions') }}" class="text-end">
                                                <div class="dropdown d-inline-block">
                                                    <button type="button" class="px-action" data-bs-toggle="dropdown"
                                                            aria-expanded="false"
                                                            aria-label="{{ __('prescriptions::messages.protocols.actions_for', ['name' => $protocol->title]) }}">
                                                        <i class="bi bi-three-dots-vertical" aria-hidden="true"></i>
                                                    </button>

                                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                                        <li>
                                                            <button type="button" class="dropdown-item d-flex align-items-center gap-2"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#protocol-{{ $protocol->id }}">
                                                                <i class="bi bi-eye" aria-hidden="true"></i>
                                                                {{ __('prescriptions::messages.protocols.preview') }}
                                                            </button>
                                                        </li>

                                                        @can('formulary.manage')
                                                            @if ($protocol->is_active)
                                                                <li><hr class="dropdown-divider"></li>
                                                                <li>
                                                                    <form method="POST" action="{{ route('protocols.retire', $protocol) }}">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit" class="dropdown-item d-flex align-items-center gap-2">
                                                                            <i class="bi bi-archive" aria-hidden="true"></i>
                                                                            {{ __('prescriptions::messages.protocols.retire') }}
                                                                        </button>
                                                                    </form>
                                                                </li>
                                                            @endif
                                                        @endcan
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr class="collapse" id="protocol-{{ $protocol->id }}">
                                            <td colspan="4">
                                                {{-- Escaped and rendered as lines. The body is plain text by
                                                     design; this is the page that gets printed and handed to
                                                     a patient, and it is no place for markup. --}}
                                                <ul class="small mb-0 ps-3">
                                                    @foreach (preg_split('/\r\n|\r|\n/', $protocol->body) ?: [] as $line)
                                                        @if (trim($line) !== '')
                                                            <li>{{ trim($line) }}</li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        @if ($protocols->hasPages())
                            <div class="px-pagination d-flex justify-content-center justify-content-md-end px-3 px-md-4 py-3 border-top"
                                 style="border-color: var(--px-border) !important;">
                                {{ $protocols->links() }}
                            </div>
                        @endif
                    @endif
                </div>
            </div>

            @can('formulary.manage')
                <aside class="px-aside" aria-label="{{ __('prescriptions::messages.protocols.add') }}">
                    <div class="px-aside__card">
                        <p class="px-aside__title">{{ __('prescriptions::messages.protocols.add') }}</p>

                        <form method="POST" action="{{ route('protocols.store') }}">
                            @csrf

                            <div class="mb-3">
                                <label for="title" class="px-field-label">{{ __('prescriptions::messages.protocols.name') }}</label>
                                <input type="text" id="title" name="title" maxlength="190" required
                                       class="form-control px-input" value="{{ old('title') }}"
                                       placeholder="{{ __('prescriptions::messages.protocols.name_placeholder') }}">
                            </div>

                            <div class="mb-3">
                                <label for="category" class="px-field-label">{{ __('prescriptions::messages.protocols.category') }}</label>
                                <input type="text" id="category" name="category" maxlength="60"
                                       class="form-control px-input" value="{{ old('category') }}"
                                       placeholder="{{ __('prescriptions::messages.protocols.category_placeholder') }}">
                            </div>

                            <div class="mb-3">
                                <label for="summary" class="px-field-label">{{ __('prescriptions::messages.protocols.summary') }}</label>
                                <input type="text" id="summary" name="summary" maxlength="255"
                                       class="form-control px-input" value="{{ old('summary') }}">
                            </div>

                            <div class="mb-3">
                                <label for="body" class="px-field-label">{{ __('prescriptions::messages.protocols.body') }}</label>
                                <textarea id="body" name="body" rows="10" required maxlength="20000"
                                          class="form-control px-input"
                                          placeholder="{{ __('prescriptions::messages.protocols.body_placeholder') }}">{{ old('body') }}</textarea>
                                <span class="px-hint">{{ __('prescriptions::messages.protocols.body_hint') }}</span>
                            </div>

                            <button type="submit" class="btn px-btn-primary w-100">
                                {{ __('common.save') }}
                            </button>
                        </form>
                    </div>

                    <div class="px-aside__card">
                        <p class="px-aside__title">{{ __('prescriptions::messages.protocols.editing_title') }}</p>
                        <p class="small text-body-secondary mb-0">
                            {{ __('prescriptions::messages.protocols.editing_text') }}
                        </p>
                    </div>
                </aside>
            @endcan
        </div>
    </x-results>
@endsection