@extends('backoffice.doctor.layout')

@section('content')
<div class="iq-card iq-card-block iq-card-stretch iq-card-height">
    <div class="iq-card-body pb-0">
        <div class="row">
            <div class="col-sm-12">
                {{-- <div class="iq-card">
                    <div class="iq-card-body bg-primary rounded pt-2 pb-2 pr-2">
                        <div class="d-flex align-items-center justify-content-between">
                            <p class="mb-0">Advice! Connect your Apple Watch for better results.</p>
                            <div class="rounded iq-card-icon bg-white">
                                <img src="{{asset('assets/backoffice/images/page-img/37.png')}}"
                                    class="img-fluid" alt="icon">
                            </div>
                        </div>
                    </div>
                </div> --}}
                <div class="iq-card">
                    <div class="iq-header-title">
                        <h4 class="card-title text-primary">Tableau de bord</h4>
                    </div>
                    <div class="iq-card-body pl-0 pr-0 pb-0">
                        <div class="row">
                        <div class="col-md-6 col-lg-4">
                           <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                              <div class="iq-card-body iq-bg-warning rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-warning">
                                      <i class="ri-calendar-event-fill"></i>
                                    </div>
                                    <div class="text-right">
                                       <h2 class="mb-0"><span class="counter">{{ $count_pending_appointments ?? 0 }}</span></h2>
                                       <h5 class="">En cours</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                           <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                              <div class="iq-card-body iq-bg-success rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-success">
                                      <i class="ri-calendar-event-fill"></i>
                                    </div>
                                    <div class="text-right">
                                       <h2 class="mb-0"><span class="counter">{{ $count_scheduled_appointments ?? 0 }}</span></h2>
                                       <h5 class="">Terminées</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                           <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                              <div class="iq-card-body iq-bg-danger rounded">
                                 <div class="d-flex align-items-center justify-content-between">
                                    <div class="rounded-circle iq-card-icon bg-danger">
                                       <i class="ri-calendar-event-fill"></i>
                                    </div>
                                    <div class="text-right">
                                       <h2 class="mb-0"><span class="counter">{{ $count_cancelled_appointments ?? 0 }}</span></h2>
                                       <h5 class="">Annulées</h5>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>

                     </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="iq-card">
                    <div class="iq-card-header d-flex justify-content-between p-0 bg-white">
                        <div class="iq-header-title">
                            <h4 class="card-title text-primary">Rendez-vous récentes</h4>
                        </div>
                    </div>
                    <div class="iq-card-body p-0">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">N°</th>
                                        <th scope="col">Patient</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">Date</th>
                                        <th scope="col">Heure</th>
                                        <th scope="col">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($recent_appointments as $appointment)
                                    <tr>
                                            <th scope="row">{{ $loop->index + 1 }}</th>
                                            <td>{{ $appointment->patient->getFullName() ?? '' }}</td>
                                            <td>{{ $appointment->description ?? '' }}</td>
                                            <td>{{ $appointment->date->format('d/m/Y') }}</td>
                                            <td>{{ $appointment->between ?? '' }}</td>
                                            @switch($appointment->status)
                                                @case(\App\Enums\AppointmentStatus::SCHEDULED->value)
                                                <td><span class="badge badge-success">{{ $appointment->status ?? '' }}</span></td>
                                                @break
                                                @case(App\Enums\AppointmentStatus::CANCELLED->value)
                                                @case(App\Enums\AppointmentStatus::REJECTED->value)
                                                <td><span class="badge badge-danger">{{ $appointment->status ?? '' }}</span></td>
                                                @break
                                                @case(App\Enums\AppointmentStatus::PENDING->value)
                                                <td><span class="badge badge-warning">{{ $appointment->status ?? '' }}</span></td>
                                                @break
                                                @default
                                                <td><span class="badge badge-secondary">{{ $appointment->status ?? '' }}</span></td>
                                            @endswitch
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center">Aucun rendez vous</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 @endsection