@extends ('layouts.patient')
@section('inner-content')
    <div class="">
        <div class="d-flex align-items-end pb-3">
            <h4 class="font-weight-bold m-0 font-size-16">Appointments</h4>
            <span class="mx-2 text-secondary">|</span>
            <a href="/patients/view/{{$patient->uid}}/calendar">Calendar</a>
            <select class="ml-auto max-width-200px form-control form-control-sm"
                    onchange="fastLoad('/patients/view/{{$patient->uid}}/appointments/' + this.value + '/{{$status}}', true, false, false)">
                <option value="all" {{ $forPro === 'all' ? 'selected' : '' }}>All Pros</option>
                @foreach($appointmentPros as $appointmentPro)
                    <option value="{{$appointmentPro->uid}}" {{ $forPro === $appointmentPro->uid ? 'selected' : '' }}>{{$appointmentPro->displayName()}}</option>
                @endforeach
            </select>
            <select class="ml-2 max-width-200px form-control form-control-sm"
                    onchange="fastLoad('/patients/view/{{$patient->uid}}/appointments/{{$forPro}}/' + this.value, true, false, false)">
                <option value="all" {{ $status === 'all' ? 'selected' : '' }}>All Appointments</option>
                <option value="created" {{ $status === 'created' ? 'selected' : '' }}>New Appointments</option>
                <option value="confirmed" {{ $status === 'confirmed' ? 'selected' : '' }}>Confirmed Appointments</option>
                <option value="cancelled" {{ $status === 'cancelled' ? 'selected' : '' }}>Cancelled Appointments</option>
                <option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Completed Appointments</option>
                <option value="abandoned" {{ $status === 'abandoned' ? 'selected' : '' }}>Abandoned Appointments</option>
                <option value="rejected" {{ $status === 'rejected' ? 'selected' : '' }}>Rejected Appointments</option>
            </select>
        </div>
        <table class="table table-striped table-sm table-bordered mb-0">
            @if($appointments && count($appointments))
                <thead>
                <tr>
                    <th class="px-2 text-secondary border-bottom-0">Date & Time</th>
                    <th class="px-2 text-secondary border-bottom-0">Pro</th>
                    <th class="px-2 text-secondary border-bottom-0">Title</th>
                    <th class="px-2 text-secondary border-bottom-0">Description</th>
                    <th class="px-2 text-secondary border-bottom-0">Status</th>
                    <th class="px-2 text-secondary border-bottom-0">Confirmation</th>
                </tr>
                </thead>
                <tbody>
                @foreach($appointments as $appointment)
                    <tr>
                        <td class="px-2">
                            <a href="/patients/view/{{$patient->uid}}/calendar/{{$appointment->uid}}" class="font-weight-bold">
                                {{ $appointment->raw_date }}&nbsp;&nbsp;{{ $appointment->raw_start_time }}
                            </a>
                        </td>
                        <td class="px-2">{{ $appointment->pro->displayName() }}</pre></td>
                        <td class="px-2">{{ $appointment->title }}</td>
                        <td class="px-2">{{ $appointment->description }}</td>
                        <td class="px-2">{{ $appointment->status }}</td>
                        <td class="px-2">
                            @include('app.patient.partials.appointment-confirmation')
                        </td>
                    </tr>
                @endforeach
                </tbody>
            @else
                <tbody>
                    <tr>
                        <td class="text-secondary p-3">No appointments</td>
                    </tr>
                </tbody>
            @endif
        </table>
    </div>
@endsection
