@extends('layouts.admin')
@section('content')

    <!-- Executive Welcome Hero Banner -->
    <div class="welcome-hero-banner">
        <div>
            <h2 class="hero-title">
                <i class="bi bi-heart-pulse-fill text-danger mr-2"></i>
                Panel Clínico DevMedic
            </h2>
            <div class="hero-subtitle">
                <span>Bienvenido, <strong>{{ Auth::user()->name }}</strong></span>
                <span class="role-badge-pill">
                    <i class="bi bi-shield-lock-fill mr-1"></i>
                    {{ Auth::user() && Auth::user()->roles->isNotEmpty() ? Auth::user()->roles->pluck('name')->first() : 'Personal' }}
                </span>
                <span class="d-none d-sm-inline">
                    <i class="bi bi-clock-history mr-1"></i>
                    Sistema Operativo y Activo
                </span>
            </div>
        </div>
        <div class="d-none d-lg-flex align-items-center">
            @can('admin.farmacia.dashboard')
            <a href="{{ route('admin.farmacia.dashboard') }}" class="btn btn-outline-light mr-2 font-weight-bold" style="border-radius: 10px;">
                <i class="bi bi-capsule-pill mr-1"></i> Farmacia
            </a>
            @endcan
            @can('admin.pacientes.create')
            <a href="{{url('admin/pacientes/create')}}" class="btn btn-outline-light mr-2 font-weight-bold" style="border-radius: 10px;">
                <i class="bi bi-person-plus-fill"></i> Nuevo Paciente
            </a>
            @endcan
            @can('cargar_datos_consultorios')
            <button type="button" class="btn btn-light text-primary font-weight-bold shadow-sm" data-toggle="modal" data-target="#exampleModal" style="border-radius: 10px;">
                <i class="bi bi-calendar-plus text-primary"></i> Reservar Cita
            </button>
            @endcan
        </div>
    </div>

    <!-- Metric KPI Widgets -->
    <div class="row">
        @can('admin.usuarios.index')
            <div class="col-xl-3 col-lg-4 col-sm-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{$total_usuarios}}</h3>
                        <p>Usuarios</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-people-fill"></i>
                    </div>
                    <a href="{{url('admin/usuarios')}}" class="small-box-footer">
                        Ver Usuarios <i class="fas fa-arrow-circle-right ml-1"></i>
                    </a>
                </div>
            </div>
        @endcan

        @can('admin.secretarias.index')
            <div class="col-xl-3 col-lg-4 col-sm-6">
                <div class="small-box bg-gradient-lightblue">
                    <div class="inner">
                        <h3>{{$total_secretarias}}</h3>
                        <p>Secretarias</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-person-badge-fill"></i>
                    </div>
                    <a href="{{url('admin/secretarias')}}" class="small-box-footer">
                        Ver Secretarias <i class="fas fa-arrow-circle-right ml-1"></i>
                    </a>
                </div>
            </div>
        @endcan

        @can('admin.consultorios.index')
            <div class="col-xl-3 col-lg-4 col-sm-6">
                <div class="small-box bg-gradient-navy">
                    <div class="inner">
                        <h3>{{$total_consultorios}}</h3>
                        <p>Consultorios</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-hospital"></i>
                    </div>
                    <a href="{{url('admin/consultorios')}}" class="small-box-footer">
                        Ver Consultorios <i class="fas fa-arrow-circle-right ml-1"></i>
                    </a>
                </div>
            </div>
        @endcan

        @can('admin.pacientes.index')
            <div class="col-xl-3 col-lg-4 col-sm-6">
                <div class="small-box bg-gradient-lime">
                    <div class="inner">
                        <h3>{{$total_pacientes}}</h3>
                        <p>Pacientes</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-heart-pulse"></i>
                    </div>
                    <a href="{{url('admin/pacientes')}}" class="small-box-footer">
                        Ver Pacientes <i class="fas fa-arrow-circle-right ml-1"></i>
                    </a>
                </div>
            </div>
        @endcan

        @can('admin.doctores.index')
            <div class="col-xl-3 col-lg-4 col-sm-6">
                <div class="small-box bg-gradient-olive">
                    <div class="inner">
                        <h3>{{$total_doctores}}</h3>
                        <p>Doctores</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-person-vcard-fill"></i>
                    </div>
                    <a href="{{url('admin/doctores')}}" class="small-box-footer">
                        Ver Doctores <i class="fas fa-arrow-circle-right ml-1"></i>
                    </a>
                </div>
            </div>
        @endcan

        @can('admin.horarios.index')
            <div class="col-xl-3 col-lg-4 col-sm-6">
                <div class="small-box bg-gradient-maroon">
                    <div class="inner">
                        <h3>{{$total_horarios}}</h3>
                        <p>Horarios</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-clock-history"></i>
                    </div>
                    <a href="{{url('admin/horarios')}}" class="small-box-footer">
                        Ver Horarios <i class="fas fa-arrow-circle-right ml-1"></i>
                    </a>
                </div>
            </div>
        @endcan

        @can('admin.horarios.index')
            <div class="col-xl-3 col-lg-4 col-sm-6">
                <div class="small-box" style="background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);">
                    <div class="inner">
                        <h3>{{$total_eventos}}</h3>
                        <p>Reservas Médicas</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-calendar-check-fill"></i>
                    </div>
                    <a href="{{url('admin/horarios')}}" class="small-box-footer">
                        Ver Reservas <i class="fas fa-arrow-circle-right ml-1"></i>
                    </a>
                </div>
            </div>
        @endcan

        <!-- Módulo de Hospitalización -->
        <div class="col-xl-3 col-lg-4 col-sm-6">
            <div class="small-box bg-gradient-danger shadow-sm">
                <div class="inner">
                    <h3>{{ $total_hospitalizados }}</h3>
                    <p>Pacientes Hospitalizados</p>
                </div>
                <div class="icon">
                    <i class="fas fa-procedures"></i>
                </div>
                <a href="{{ route('admin.hospitalizaciones.index') }}" class="small-box-footer">
                    Ver Hospitalización ({{ $camas_libres }} libres) <i class="fas fa-arrow-circle-right ml-1"></i>
                </a>
            </div>
        </div>

        <!-- Módulo de Farmacia -->
        @can('admin.farmacia.dashboard')
        <div class="col-xl-3 col-lg-4 col-sm-6">
            <div class="small-box shadow-sm" style="background: linear-gradient(135deg, #0284c7 0%, #0d9488 100%); color: #fff;">
                <div class="inner">
                    <h3>{{ $total_medicamentos }}</h3>
                    <p>Medicamentos en Farmacia</p>
                </div>
                <div class="icon">
                    <i class="bi bi-capsule-pill"></i>
                </div>
                <a href="{{ route('admin.farmacia.dashboard') }}" class="small-box-footer" style="color: rgba(255,255,255,0.95); font-weight: 600;">
                    Dispensación & Stock (${{ number_format($total_ventas_farmacia, 2) }}) <i class="fas fa-arrow-circle-right ml-1"></i>
                </a>
            </div>
        </div>
        @endcan
    </div>

    @unlessrole('paciente')
    <!-- SECCIÓN GRÁFICO DE FACTURACIÓN: DÍA, MES Y AÑO -->
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-primary shadow-sm mb-4">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between py-3">
                    <div class="d-flex align-items-center mb-2 mb-md-0">
                        <div class="p-2 rounded mr-3 d-inline-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background: rgba(37,99,235,0.12);">
                            <i class="bi bi-graph-up-arrow" style="font-size: 1.4rem; color: #2563eb;"></i>
                        </div>
                        <div>
                            <h4 class="card-title font-weight-bold text-dark m-0" style="font-size: 1.25rem;">
                                Facturación Electrónica e Ingresos
                            </h4>
                            <p class="text-muted small mb-0">Valores facturados: Día de hoy, Mes actual y Año {{ Carbon\Carbon::now()->year }}</p>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap align-items-center">
                        <div class="btn-group btn-group-sm mr-2 mb-2 mb-sm-0" role="group" aria-label="Selector de Vista">
                            <button type="button" class="btn btn-primary active font-weight-bold" id="btnChartPeriodos">
                                <i class="bi bi-bar-chart-fill mr-1"></i> Día / Mes / Año
                            </button>
                            <button type="button" class="btn btn-outline-secondary font-weight-bold" id="btnChartMeses">
                                <i class="bi bi-calendar-range mr-1"></i> Meses {{ Carbon\Carbon::now()->year }}
                            </button>
                            <button type="button" class="btn btn-outline-secondary font-weight-bold" id="btnChartSemana">
                                <i class="bi bi-calendar-week mr-1"></i> Últimos 7 Días
                            </button>
                        </div>
                        <a href="{{ route('admin.facturas.index') }}" class="btn btn-sm btn-outline-primary font-weight-bold">
                            <i class="bi bi-receipt mr-1"></i> Listado de Facturas
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Tarjetas de Métricas: Día, Mes, Año -->
                    <div class="row mb-3">
                        <!-- Facturado Hoy -->
                        <div class="col-lg-4 col-md-6 mb-3 mb-lg-0">
                            <div class="p-3 rounded border shadow-xs h-100" style="background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%); border-left: 4px solid #f59e0b !important;">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <span class="text-uppercase font-weight-bold text-muted small d-block">
                                            <i class="bi bi-sun-fill text-warning mr-1"></i> Facturado Hoy (Día)
                                        </span>
                                        <h2 class="font-weight-bold text-dark mt-1 mb-1" style="font-size: 1.85rem;">
                                            ${{ number_format($facturado_dia, 2) }}
                                        </h2>
                                        <div class="d-flex align-items-center mt-2">
                                            <span class="badge badge-warning text-dark font-weight-bold px-2 py-1 mr-2">
                                                <i class="bi bi-receipt mr-1"></i> {{ $facturas_dia_count }} {{ Str::plural('factura', $facturas_dia_count) }}
                                            </span>
                                            <small class="text-muted">{{ Carbon\Carbon::today()->locale('es')->isoFormat('D [de] MMMM') }}</small>
                                        </div>
                                    </div>
                                    <div class="rounded-circle p-2 text-warning" style="background: rgba(245, 158, 11, 0.15);">
                                        <i class="bi bi-cash-coin" style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Facturado en el Mes -->
                        <div class="col-lg-4 col-md-6 mb-3 mb-lg-0">
                            <div class="p-3 rounded border shadow-xs h-100" style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.02) 100%); border-left: 4px solid #2563eb !important;">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <span class="text-uppercase font-weight-bold text-muted small d-block">
                                            <i class="bi bi-calendar2-check-fill text-primary mr-1"></i> Facturado en el Mes
                                        </span>
                                        <h2 class="font-weight-bold text-primary mt-1 mb-1" style="font-size: 1.85rem;">
                                            ${{ number_format($facturado_mes, 2) }}
                                        </h2>
                                        <div class="d-flex align-items-center mt-2">
                                            <span class="badge badge-primary font-weight-bold px-2 py-1 mr-2">
                                                <i class="bi bi-receipt mr-1"></i> {{ $facturas_mes_count }} {{ Str::plural('factura', $facturas_mes_count) }}
                                            </span>
                                            <small class="text-muted">{{ ucfirst(Carbon\Carbon::now()->locale('es')->isoFormat('MMMM YYYY')) }}</small>
                                        </div>
                                    </div>
                                    <div class="rounded-circle p-2 text-primary" style="background: rgba(37, 99, 235, 0.15);">
                                        <i class="bi bi-calendar-month" style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Facturado en el Año -->
                        <div class="col-lg-4 col-md-12">
                            <div class="p-3 rounded border shadow-xs h-100" style="background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%); border-left: 4px solid #10b981 !important;">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <span class="text-uppercase font-weight-bold text-muted small d-block">
                                            <i class="bi bi-wallet2 text-success mr-1"></i> Facturado en el Año
                                        </span>
                                        <h2 class="font-weight-bold text-success mt-1 mb-1" style="font-size: 1.85rem;">
                                            ${{ number_format($facturado_ano, 2) }}
                                        </h2>
                                        <div class="d-flex align-items-center mt-2">
                                            <span class="badge badge-success font-weight-bold px-2 py-1 mr-2">
                                                <i class="bi bi-graph-up mr-1"></i> {{ $facturas_ano_count }} {{ Str::plural('factura', $facturas_ano_count) }}
                                            </span>
                                            <small class="text-muted">Período Fiscal {{ Carbon\Carbon::now()->year }}</small>
                                        </div>
                                    </div>
                                    <div class="rounded-circle p-2 text-success" style="background: rgba(16, 185, 129, 0.15);">
                                        <i class="bi bi-cash-stack" style="font-size: 1.5rem;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Contenedor del Gráfico -->
                    <div class="p-3 bg-light rounded border">
                        <div class="d-flex justify-content-between align-items-center px-1 mb-2">
                            <span class="small font-weight-bold text-dark" id="chartTitle">
                                <i class="bi bi-bar-chart-fill text-primary mr-1"></i> Comparativo de Ingresos: Día vs Mes vs Año
                            </span>
                            <span class="badge badge-light border text-muted small">
                                <i class="bi bi-shield-check text-success mr-1"></i> Facturas SRI Válidas
                            </span>
                        </div>
                        <div class="position-relative" style="height: 310px; width: 100%;">
                            <canvas id="facturacionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Script de Chart.js para Facturación -->
    <script src="{{ url('plugins/chart.js/Chart.bundle.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var ctx = document.getElementById('facturacionChart');
            if (!ctx) return;

            var chartContext = ctx.getContext('2d');

            // Datos de los 3 Modos
            var dataPeriodos = {
                labels: [
                    'Día (Hoy: {{ Carbon\Carbon::today()->format("d/m") }})',
                    'Mes Actual ({{ ucfirst(Carbon\Carbon::now()->locale("es")->isoFormat("MMMM")) }})',
                    'Año Completo ({{ Carbon\Carbon::now()->year }})'
                ],
                datasets: [{
                    label: 'Total Facturado ($)',
                    data: [
                        {{ (float)$facturado_dia }},
                        {{ (float)$facturado_mes }},
                        {{ (float)$facturado_ano }}
                    ],
                    backgroundColor: [
                        'rgba(245, 158, 11, 0.85)',
                        'rgba(37, 99, 235, 0.85)',
                        'rgba(16, 185, 129, 0.85)'
                    ],
                    borderColor: [
                        '#d97706',
                        '#1d4ed8',
                        '#059669'
                    ],
                    borderWidth: 2,
                    barPercentage: 0.52
                }]
            };

            var dataMeses = {
                labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                datasets: [{
                    label: 'Facturado en el Mes ($)',
                    data: @json($facturacion_mensual),
                    backgroundColor: [
                        @for($i = 1; $i <= 12; $i++)
                            '{{ $i == Carbon\Carbon::now()->month ? "rgba(37, 99, 235, 0.88)" : "rgba(148, 163, 184, 0.65)" }}',
                        @endfor
                    ],
                    borderColor: [
                        @for($i = 1; $i <= 12; $i++)
                            '{{ $i == Carbon\Carbon::now()->month ? "#1d4ed8" : "#64748b" }}',
                        @endfor
                    ],
                    borderWidth: 1.5,
                    barPercentage: 0.65
                }]
            };

            var dataSemana = {
                labels: @json($ultimos_7_dias_labels),
                datasets: [{
                    label: 'Facturado por Día ($)',
                    data: @json($ultimos_7_dias_data),
                    backgroundColor: 'rgba(59, 130, 246, 0.22)',
                    borderColor: '#2563eb',
                    borderWidth: 2.5,
                    pointBackgroundColor: '#2563eb',
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    type: 'line',
                    fill: true,
                    tension: 0.35
                }]
            };

            // Opciones del gráfico
            var chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                tooltips: {
                    backgroundColor: 'rgba(15, 23, 42, 0.9)',
                    titleFontSize: 13,
                    titleFontColor: '#fff',
                    bodyFontSize: 13,
                    bodyFontColor: '#fff',
                    xPadding: 12,
                    yPadding: 10,
                    cornerRadius: 6,
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var val = Number(tooltipItem.yLabel || 0);
                            return ' Importe: $' + val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            fontColor: '#64748b',
                            fontSize: 12,
                            callback: function (value) {
                                return '$' + Number(value).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
                            }
                        },
                        gridLines: {
                            color: 'rgba(148, 163, 184, 0.18)',
                            drawBorder: false,
                            zeroLineColor: 'rgba(148, 163, 184, 0.3)'
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontColor: '#64748b',
                            fontSize: 12,
                            fontStyle: 'bold'
                        },
                        gridLines: {
                            display: false
                        }
                    }]
                }
            };

            // Inicialización de la instancia del gráfico
            var facturasChart = new Chart(chartContext, {
                type: 'bar',
                data: dataPeriodos,
                options: chartOptions
            });

            // Función para alternar botones activos
            function setActiveButton(btnActive) {
                $('#btnChartPeriodos, #btnChartMeses, #btnChartSemana')
                    .removeClass('btn-primary active')
                    .addClass('btn-outline-secondary');
                $(btnActive).removeClass('btn-outline-secondary').addClass('btn-primary active');
            }

            // Eventos de botones de cambio de vista
            $('#btnChartPeriodos').on('click', function () {
                setActiveButton(this);
                $('#chartTitle').html('<i class="bi bi-bar-chart-fill text-primary mr-1"></i> Comparativo de Ingresos: Día vs Mes vs Año');
                facturasChart.config.type = 'bar';
                facturasChart.data = dataPeriodos;
                facturasChart.update();
            });

            $('#btnChartMeses').on('click', function () {
                setActiveButton(this);
                $('#chartTitle').html('<i class="bi bi-calendar-range text-primary mr-1"></i> Facturación Mes a Mes (Año {{ Carbon\Carbon::now()->year }})');
                facturasChart.config.type = 'bar';
                facturasChart.data = dataMeses;
                facturasChart.update();
            });

            $('#btnChartSemana').on('click', function () {
                setActiveButton(this);
                $('#chartTitle').html('<i class="bi bi-calendar-week text-primary mr-1"></i> Evolución de Facturación en los Últimos 7 Días');
                facturasChart.config.type = 'line';
                facturasChart.data = dataSemana;
                facturasChart.update();
            });
        });
    </script>
    @endunlessrole

    @can('cargar_datos_consultorios')
        <!-- Calendario de Atención por Consultorio -->
        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-primary">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <h4 class="card-title mb-2 mb-md-0">
                            <i class="bi bi-calendar3-range text-primary mr-2"></i>
                            Calendario de Atención de Doctores por Consultorio
                        </h4>
                        <div class="d-flex align-items-center" style="min-width: 320px;">
                            <label for="consultorio_select" class="mr-2 mb-0 font-weight-bold text-nowrap">Consultorio:</label>
                            <select name="consultorio_id" id="consultorio_select" class="form-control">
                                <option value="">-- Seleccione Consultorio --</option>
                                @foreach($consultorios as $consultorio)
                                    <option value="{{$consultorio->id}}">{{$consultorio->nombre." - ".$consultorio->ubicacion}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <script>
                            $('#consultorio_select').on('change', function (){
                                var consultorio_id = $('#consultorio_select').val();
                                var url = "{{route('admin.horarios.cargar_datos_consultorios',':id')}}";
                                url = url.replace(':id', consultorio_id);

                                if(consultorio_id){
                                    $.ajax({
                                        url: "{{url('/consultorios/')}}" + '/' + consultorio_id,
                                        type: 'GET',
                                        beforeSend: function() {
                                            $('#consultorio_info').html('<div class="text-center py-4"><div class="spinner-border text-primary" role="status"></div><p class="mt-2 text-muted">Cargando datos del consultorio...</p></div>');
                                        },
                                        success: function (data){
                                            $('#consultorio_info').html(data);
                                        },
                                        error: function (){
                                            $('#consultorio_info').html('<div class="alert alert-danger">Error al obtener los datos del Consultorio</div>');
                                        }
                                    });
                                } else {
                                    $('#consultorio_info').html('<div class="alert alert-light border text-center text-muted py-3"><i class="bi bi-info-circle mr-1"></i> Seleccione un consultorio en el selector superior para ver su horario y capacidad.</div>');
                                }
                            });
                        </script>

                        <div id="consultorio_info">
                            <div class="alert alert-light border text-center text-muted py-3">
                                <i class="bi bi-info-circle mr-1"></i> Seleccione un consultorio en el selector superior para ver su horario y capacidad.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- FullCalendar: Calendario de Reserva de Citas -->
        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-warning">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <h4 class="card-title mb-2 mb-md-0">
                            <i class="bi bi-calendar-week-fill text-warning mr-2"></i>
                            Calendario de Reserva de Citas Médicas
                        </h4>
                        <div class="d-flex align-items-center" style="min-width: 320px;">
                            <label for="doctor_select" class="mr-2 mb-0 font-weight-bold text-nowrap">Doctor:</label>
                            <select name="doctor_id" id="doctor_select" class="form-control">
                                <option value="">-- Todos / Seleccionar Doctor --</option>
                                @foreach($doctores as $doctore)
                                    <option value="{{$doctore->id}}">{{$doctore->nombres." ".$doctore->apellidos." (".$doctore->especialidad.")"}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <button type="button" class="btn btn-primary mr-2" data-toggle="modal" data-target="#exampleModal">
                                <i class="bi bi-calendar-plus mr-1"></i> Reservar Cita
                            </button>
                            <a href="{{url('/admin/ver_reservas', Auth::user()->id)}}" class="btn btn-success">
                                <i class="bi bi-calendar-check mr-1"></i> Mis Reservas
                            </a>
                        </div>

                        <!-- Calendar Wrapper -->
                        <div id='calendar' style="min-height: 550px;"></div>

                        <script>
                            let calendarInstance = null;

                            document.addEventListener('DOMContentLoaded', function () {
                                var calendarEl = document.getElementById('calendar');
                                if (calendarEl) {
                                    calendarInstance = new FullCalendar.Calendar(calendarEl, {
                                        initialView: 'dayGridMonth',
                                        locale: 'es',
                                        headerToolbar: {
                                            left: 'prev,next today',
                                            center: 'title',
                                            right: 'dayGridMonth,timeGridWeek,timeGridDay'
                                        },
                                        buttonText: {
                                            today: 'Hoy',
                                            month: 'Mes',
                                            week: 'Semana',
                                            day: 'Día'
                                        },
                                        events: []
                                    });
                                    calendarInstance.render();
                                }

                                $('#doctor_select').on('change', function (){
                                    var doctor_id = $('#doctor_select').val();

                                    if(calendarInstance) {
                                        // Remove current event sources
                                        calendarInstance.removeAllEventSources();

                                        if(doctor_id){
                                            $.ajax({
                                                url: "{{url('/cargar_reserva_doctores/')}}" + '/' + doctor_id,
                                                type: 'GET',
                                                dataType: 'json',
                                                success: function (data){
                                                    calendarInstance.addEventSource(data);
                                                },
                                                error: function (){
                                                    alert('Error al obtener los datos de citas del Doctor seleccionado.');
                                                }
                                            });
                                        }
                                    }
                                });
                            });
                        </script>

                        <!-- Modal Reservar Cita -->
                        <form action="{{url('/admin/eventos/create')}}" method="post">
                            @csrf
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title font-weight-bold" id="exampleModalLabel">
                                                <i class="bi bi-calendar-plus text-primary mr-2"></i>
                                                Reserva de Cita Médica
                                            </h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="doctor_modal_select">Doctor Especialista <b>*</b></label>
                                                        <select name="doctor_id" id="doctor_modal_select" class="form-control" required>
                                                            <option value="">Seleccionar Doctor...</option>
                                                            @foreach($doctores as $doctor)
                                                                <option value="{{$doctor->id}}">{{$doctor->nombres." ".$doctor->apellidos." - ".$doctor->especialidad }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="fecha_reserva">Fecha de la Cita <b>*</b></label>
                                                        <input type="date" id="fecha_reserva" name="fecha_reserva" class="form-control" required>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="hora_reserva">Hora de la Cita (08:00 - 20:00) <b>*</b></label>
                                                        <input type="time" name="hora_reserva" id="hora_reserva" class="form-control" required>
                                                        @error('hora_reserva')
                                                        <small class="text-danger">{{$message}}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="bi bi-check-circle mr-1"></i> Guardar Cita
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <!-- Tabla Reservas para Doctor Autenticado -->
    @if(Auth::check() && Auth::user()->doctor)
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="bi bi-calendar-check text-primary mr-2"></i>
                        Mis Citas Médicas Programadas
                    </h4>
                </div>
                <div class="card-body">
                    <table id="example1" class="table table-bordered table-hover table-striped table-sm">
                        <thead>
                            <tr>
                                <th style="text-align:center" scope="col">Nro</th>
                                <th style="text-align:center" scope="col">Paciente / Usuario</th>
                                <th style="text-align:center" scope="col">Fecha de Reserva</th>
                                <th style="text-align:center" scope="col">Hora de Reserva</th>
                            </tr>
                        </thead>
                        <tbody>
                                                        @foreach($eventos as $evento)
                                @if(Auth::user()->doctor->id == $evento->doctor_id)
                                <tr>
                                    <td style="text-align:center">{{$contador++}}</td>
                                    <td><strong>{{$evento->user->name}}</strong></td>
                                    <td style="text-align: center">
                                        <span class="badge badge-primary px-2 py-1">
                                            {{Carbon\Carbon::parse($evento->start)->format('Y-m-d')}}
                                        </span>
                                    </td>
                                    <td style="text-align: center">
                                        <span class="badge badge-info px-2 py-1">
                                            {{Carbon\Carbon::parse($evento->start)->format('H:i')}}
                                        </span>
                                    </td>
                                </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif

@endsection