@php
$appointmentPendingConfirmation = $performer->pro->appointmentsPendingConfirmationRecordsAsDna();
@endphp
<div class="p-3">
    <div class="card">
        <div class="card-body p-0">
            @if(@$appointmentPendingConfirmation && count($appointmentPendingConfirmation))
            <table class="mb-0 table table-sm table-striped appointments">
                <thead class="bg-light">
                    <tr>
                        <th class="border-0">Patient</th>
                        <th class="border-0">Status</th>
                        <th class="border-0">Coverage</th>
                    </tr>
                </thead>
                @foreach($appointmentPendingConfirmation as $appointment)
                <tr class="{{$appointment->bgColor}}">
                    <td>
                        <a native target="_blank" href="/patients/view/{{$appointment->clientUid}}" class="font-weight-bold d-block">
                            {{$appointment->client->name_first }} {{$appointment->client->name_last }}
                        </a>
                        <div class="mt-1">
                            <a native target="_blank" href="/patients/view/{{$appointment->clientUid}}/calendar/{{$appointment->uid}}">
                                {{ friendly_date_time($appointment->start_time) }} - {{ friendly_date_time($appointment->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>
                        <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 center>
                                    <a href="#" start show><i class="fa fa-edit"></i></a>
                                    <form url="/api/appointment/updateStatus" hook="refreshDashboardAppointments" center>
                                        <input type="hidden" name="uid" value="{{$appointment->uid}}">
                                        <p class="text-nowrap mb-3 font-weight-bold text-secondary">Change appointment status</p>
                                        <div class="mb-3 border bg-light p-2">
                                            <div class="d-flex align-items-baseline mb-1">
                                                <span class="width-70px">Patient</span>
                                                <b>{{$appointment->clientName }}</b>
                                            </div>
                                            <div class="d-flex align-items-baseline mb-1">
                                                <span class="width-70px">Pro</span>
                                                <b>{{$appointment->proName}}</b>
                                            </div>
                                            <div class="d-flex align-items-baseline mb-1">
                                                <span class="width-70px">Date</span>
                                                <b>{{friendly_date($appointment->raw_date)}}</b>
                                            </div>
                                            <div class="d-flex align-items-baseline mb-1">
                                                <span class="width-70px">Time</span>
                                                <span>
                                                    <b>{{ $appointment->friendlyStartTime }}</b> - <b>{{ $appointment->friendlyEndTime }}</b>
                                                    <span class="text-secondary">{{ friendly_timezone($appointment->timezone) }}</span>
                                                </span>
                                            </div>
                                            <div class="d-flex align-items-baseline ">
                                                <span class="width-70px">Status</span>
                                                <b>{{ucwords(strtolower($appointment->status))}}</b>
                                            </div>
                                        </div>
                                        <label for="" class="mb-2">New Status</label>
                                        <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>
                    <td>
                        @include('app.patient.coverage_column_renderer', ['patient'=>$appointment->client])
                    </td>
                </tr>
                @endforeach
            </table>
            @else
            <div class="bg-light p-3 text-secondary">
                <span>You have no appointments pending confirmation.</span>
            </div>

            @endif
        </div>
    </div>
</div>