@extends('dashboard.doctor.layouts.master')

@section('title', trans('doctor.nav.dashboard'))

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('doctor.nav.dashboard') }}</h1>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="row g-5 g-xl-8 mb-5">
            <div class="col-xl-4">
                <div class="card card-flush h-md-100">
                    <div class="card-body d-flex flex-column">
                        <span class="fs-7 text-muted fw-semibold">{{ trans('doctor.dashboard.today_bookings') }}</span>
                        <span class="fs-2hx fw-bold text-primary mt-2">{{ $todaysBookings->count() }}</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card card-flush h-md-100">
                    <div class="card-body d-flex flex-column">
                        <span class="fs-7 text-muted fw-semibold">{{ trans('doctor.dashboard.upcoming_bookings') }}</span>
                        <span class="fs-2hx fw-bold text-info mt-2">{{ $upcomingCount }}</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card card-flush h-md-100">
                    <div class="card-body d-flex flex-column">
                        <span class="fs-7 text-muted fw-semibold">{{ trans('doctor.dashboard.total_patients') }}</span>
                        <span class="fs-2hx fw-bold text-success mt-2">{{ $patientsCount }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Bookings calendar (FullCalendar): click a booking to open the visit. --}}
        <link rel="stylesheet" href="{{ asset('assets/plugins/custom/fullcalendar/fullcalendar.bundle' . (app()->getLocale() === 'ar' ? '.rtl' : '') . '.css') }}">
        <div class="card mb-5">
            <div class="card-header align-items-center">
                <h3 class="card-title">{{ trans('doctor.dashboard.calendar_title') }}</h3>
                <div class="card-toolbar gap-4">
                    @foreach (['pending' => 'warning', 'confirmed' => 'success', 'completed' => 'primary'] as $status => $color)
                        <span class="d-flex align-items-center gap-1 fs-7 text-gray-600"><span class="bullet bullet-dot bg-{{ $color }} h-8px w-8px"></span>{{ trans('doctor.schedule.statuses.' . $status) }}</span>
                    @endforeach
                    <label class="form-check form-switch form-check-custom form-check-solid form-check-sm">
                        <input class="form-check-input" type="checkbox" id="calendarShowCancelled">
                        <span class="form-check-label fs-7">{{ trans('doctor.dashboard.show_cancelled') }}</span>
                    </label>
                </div>
            </div>
            <div class="card-body">
                <div id="doctorCalendar"></div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ trans('doctor.dashboard.today_title') }}</h3>
            </div>
            <div class="card-body py-4">
                @if($todaysBookings->isEmpty())
                    <div class="py-10 text-center text-muted">{{ trans('doctor.dashboard.today_empty') }}</div>
                @else
                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5">
                            <thead>
                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                    <th>{{ trans('doctor.schedule.time') }}</th>
                                    <th>{{ trans('doctor.patients.title') }}</th>
                                    <th>{{ trans('doctor.schedule.branch') }}</th>
                                    <th>{{ trans('doctor.schedule.status') }}</th>
                                    <th class="text-end">{{ trans('clinic.common.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold">
                                @foreach($todaysBookings as $booking)
                                    <tr>
                                        <td>{{ $booking->scheduled_at->format('H:i') }}</td>
                                        <td>{{ $booking->patient->name }}</td>
                                        <td>{{ $booking->branch->name }}</td>
                                        <td>
                                            @php
                                                $statusBadge = match($booking->status) {
                                                    'pending' => 'warning',
                                                    'confirmed' => 'success',
                                                    'completed' => 'info',
                                                    'cancelled' => 'danger',
                                                    default => 'secondary',
                                                };
                                            @endphp
                                            <span class="badge badge-light-{{ $statusBadge }}">{{ trans('doctor.schedule.statuses.'.$booking->status) }}</span>
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('doctor.visits.show', $booking) }}" class="btn btn-sm btn-light-primary">{{ trans('doctor.visits.open') }}</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif

                <div class="d-flex gap-3 mt-4">
                    <a class="btn btn-primary" href="{{ route('doctor.schedule') }}">{{ trans('doctor.nav.schedule') }}</a>
                    <a class="btn btn-light-primary" href="{{ route('doctor.patients') }}">{{ trans('doctor.nav.patients') }}</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/plugins/custom/fullcalendar/fullcalendar.bundle.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var showCancelled = document.getElementById('calendarShowCancelled');
            var isRtl = document.documentElement.getAttribute('dir') === 'rtl';
            var calendar = new FullCalendar.Calendar(document.getElementById('doctorCalendar'), {
                locale: @json(app()->getLocale()),
                direction: isRtl ? 'rtl' : 'ltr',
                initialView: 'dayGridMonth',
                headerToolbar: {start: 'prev,next today', center: 'title', end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'},
                height: 'auto',
                nowIndicator: true,
                dayMaxEvents: 3,
                slotMinTime: '07:00:00',
                slotMaxTime: '23:00:00',
                eventTimeFormat: {hour: '2-digit', minute: '2-digit', hour12: true},
                events: function (info, success, failure) {
                    var params = new URLSearchParams({start: info.startStr, end: info.endStr, cancelled: showCancelled.checked ? 1 : 0});
                    fetch(@json(route('doctor.calendar-events')) + '?' + params, {headers: {Accept: 'application/json'}, credentials: 'same-origin'})
                        .then(function (r) { return r.json(); }).then(success).catch(failure);
                },
                eventDidMount: function (info) {
                    var p = info.event.extendedProps;
                    info.el.title = [info.event.title, p.type, p.status, p.clinic, p.phone].filter(Boolean).join(' · ');
                }
            });
            calendar.render();
            showCancelled.addEventListener('change', function () { calendar.refetchEvents(); });
        });
    </script>
@endsection