@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Calendario de Citas'])

    <div class="container-fluid py-4">
        <!-- Stats Cards -->
        @include('components.appointments.stats')

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">Calendario de Citas</h6>
                            <div>
                                <button type="button" class="btn btn-sm btn-primary" id="btnNewAppointment">
                                    <i class="fas fa-plus me-1"></i> Nueva Cita
                                </button>
                                <a href="{{ route('appointments.index') }}" class="btn btn-sm btn-secondary">
                                    <i class="fas fa-list me-1"></i> Vista de Lista
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Calendar Container -->
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Appointment Detail Modal -->
    <div class="modal fade" id="appointmentDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detalles de la Cita</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="appointmentDetailContent">
                    <!-- Content loaded dynamically -->
                </div>
                <div class="modal-footer flex-column px-3 pb-3 pt-2">
                    {{-- Status transition actions --}}
                    <div class="d-flex flex-wrap gap-2 w-100 justify-content-center mb-2">
                        <button type="button" class="btn btn-sm btn-outline-success" id="btnConfirmAppointment">
                            <i class="fas fa-check me-1"></i>Confirmar
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btnCompleteAppointment">
                            <i class="fas fa-check-double me-1"></i>Completar
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-warning" id="btnRescheduleAppointment">
                            <i class="fas fa-calendar-alt me-1"></i>Reagendar
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-dark" id="btnNoShowAppointment">
                            <i class="fas fa-user-slash me-1"></i>No Show
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" id="btnCancelAppointment">
                            <i class="fas fa-ban me-1"></i>Cancelar
                        </button>
                    </div>
                    <hr class="w-100 my-1">
                    {{-- Management actions --}}
                    <div class="d-flex w-100 justify-content-between">
                        <button type="button" class="btn btn-sm btn-outline-danger" id="btnDeleteAppointment">
                            <i class="fas fa-trash me-1"></i>Eliminar
                        </button>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-sm btn-primary" id="btnEditAppointment">
                                <i class="fas fa-edit me-1"></i>Editar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reschedule Modal -->
    <div class="modal fade" id="appointmentRescheduleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reagendar Cita</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nueva fecha</label>
                        <input type="date" class="form-control" id="rescheduleDate">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Horario Disponible</label>
                        <select class="form-select" id="rescheduleTime">
                            <option value="">Seleccione primero la fecha...</option>
                        </select>
                        <small class="text-muted">
                            <i class="fas fa-check-circle text-success"></i>
                            Validado contra Google Calendar
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Motivo (opcional)</label>
                        <textarea class="form-control" id="rescheduleReason" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btnSubmitReschedule">Guardar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Appointment Form Modal Component -->
    @include('components.appointments.form-modal')
@endsection

@push('css')
<!-- FullCalendar CSS -->
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css' rel='stylesheet' />
<style>
    #calendar {
        max-width: 100%;
        margin: 0 auto;
    }
    /* Override Argon theme defaults */
    .fc-daygrid-block-event .fc-event-time,
    .fc-daygrid-block-event .fc-event-title {
        padding: 0 !important;
        font-weight: normal !important;
    }
    .fc-h-event {
        border: none !important;
    }
    .fc-event.fc-daygrid-event {
        border-radius: 8px !important;
        cursor: pointer;
        padding: 6px 10px 6px 12px !important;
        margin-bottom: 3px !important;
    }
    .fc-event-custom {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.82rem;
        white-space: nowrap;
        overflow: hidden;
    }
    .fc-event-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        display: inline-block;
    }
    .fc-event-time-text {
        font-weight: 600;
        flex-shrink: 0;
        letter-spacing: 0.02em;
    }
    .fc-event-name {
        font-weight: 400;
        color: #344767!important;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 2px;
    }
</style>
@endpush

@push('js')
<!-- FullCalendar JS -->
<script>
    // Set business ID for JavaScript
    window.businessId = {{ auth()->user()->business_id }};
</script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/locales/es.global.min.js'></script>
<script src="{{ asset('js/appointment-common.js') }}"></script>
<script src="{{ asset('js/appointment-calendar.js') }}"></script>
@endpush