<div class="mt-0 pb-1">
    <div class="d-flex align-items-center mb-2 pt-2">
        <h6 class="my-0 font-weight-bold">Appointments</h6>
        <span class="mx-2 text-secondary">|</span>
        <a href="/patients/view/{{$patient->uid}}/calendar">Calendar</a>
    </div>
    @if(!$patient->appointmentsFromLastWeek || count($patient->appointmentsFromLastWeek) === 0)
        <div>
            <td class="text-secondary p-0 border-0">
                No recent appointments
            </td>
        </div>
    @else
        <table class="mb-0 table table-sm table-bordered appointments">
            @foreach($patient->appointmentsFromLastWeek as $appointment)
                <?php
                $bgColor = 'bg-white';
                if($appointment->status === 'COMPLETED') {
                    $bgColor = 'event-bg-green';
                }
                else if($appointment->status === 'CANCELLED') {
                    $bgColor = 'event-bg-gray';
                }
                ?>
                <tr class="{{$bgColor}}">
                    <td class="align-middle">
                        <b>{{$appointment->pro->displayName() }}</b>
                        <div class="mt-1">
                            <a href="/patients/view/{{$appointment->client->uid}}/calendar/{{$appointment->uid}}">
                                <b>{{friendly_date($appointment->raw_date)}}</b>
                                {{ friendly_time($appointment->raw_start_time) }} - {{ friendly_time($appointment->raw_end_time) }}</a>
                            <span class="text-secondary">{{ friendly_timezone($appointment->timezone) }}</span>
                        </div>
                        @if($appointment->title)
                            <span class="d-inline-block mt-1 text-secondary text-sm">
                            {{ $appointment->title }}
                        </span>
                        @endif
                    </td>
                    <td class="align-middle">
                        <div class="d-flex flex-column">
                            <div class="d-flex align-items-baseline flex-nowrap">
                                @if($appointment->status === 'PENDING')
                                    <div class="text-warning-mellow font-weight-bold text-nowrap">
                                        <i class="fa fa-exclamation-triangle"></i>
                                        Pending
                                    </div>
                                @elseif($appointment->status === 'CONFIRMED')
                                    <div class="text-success font-weight-bold text-nowrap">
                                        <i class="fa fa-check"></i>
                                        Confirmed
                                    </div>
                                @elseif($appointment->status === 'CANCELLED')
                                    <div class="text-danger font-weight-bold text-nowrap">
                                        <i class="fa fa-stop"></i>
                                        Cancelled
                                    </div>
                                @elseif($appointment->status === 'COMPLETED')
                                    <div class="text-success font-weight-bold text-nowrap">
                                        <i class="far fa-calendar-check"></i>
                                        Completed
                                    </div>
                                @endif
                                <div class="ml-2" moe relative>
                                    <a href="#" start show><i class="fa fa-edit"></i></a>
                                    <form url="/api/appointment/updateStatus">
                                        <input type="hidden" name="uid" value="{{$appointment->uid}}">
                                        <p class="text-nowrap mb-2 font-weight-bold text-secondary">Change appointment
                                            status</p>
                                        <select name="status"
                                                class="form-control form-control-sm input-sm bg-light mb-2">
                                            <option value="PENDING" {{$appointment->status === 'PENDING' ? 'selected' : ''}}>
                                                PENDING
                                            </option>
                                            <option value="CONFIRMED" {{$appointment->status === 'CONFIRMED' ? 'selected' : ''}}>
                                                CONFIRMED
                                            </option>
                                            <option value="CANCELLED" {{$appointment->status === 'CANCELLED' ? 'selected' : ''}}>
                                                CANCELLED
                                            </option>
                                            <option value="COMPLETED" {{$appointment->status === 'COMPLETED' ? 'selected' : ''}}>
                                                COMPLETED
                                            </option>
                                        </select>
                                        <div class="mb-0">
                                            <button class="btn btn-primary btn-sm" submit>Submit</button>
                                            <button class="btn btn-default border btn-sm" cancel>Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            @endforeach
        </table>
    @endif
    <div class="mt-2">
        <div class="text-secondary pt-2 px-0 border-0">
            <a href="/patients/view/{{$patient->uid}}/appointments/all/all">See all appointments</a>
        </div>
    </div>
</div>

