@extends('layouts.yellow')
@section('content')
<style>
    :root {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
        --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
        --amarillo-primario: #FFD54F;
        --amarillo-secundario: #FFECB3;
        --naranja-destacado: #FF9800;
        --verde-exito: #4CAF50;
        --rojo-error: #F44336;
        --gris-claro: #F5F7FA;
        --gris-medio: #E1E5E9;
        --gris-oscuro: #6C757D;
        --borde-principal: #D0D7DE;
        --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.05);
        --sombra-media: 0 6px 16px rgba(0, 0, 0, 0.08);
        --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
        --transicion: all 0.3s ease;
        --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .appointment-view {
        font-family: var(--fuente-principal);
        color: #333;
        line-height: 1.5;
    }

    .calendar-card {
        background: #fff;
        border-radius: 12px;
        padding: 25px;
        border: 1px solid var(--gris-medio);
        box-shadow: var(--sombra-suave);
        transition: var(--transicion);
        position: relative;
        overflow: hidden;
        height: 100%;
    }
    
    .calendar-card:hover {
        box-shadow: var(--sombra-hover);
        transform: translateY(-2px);
    }
    
    /* Barra de color decorativa */
    .calendar-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: var(--degradado-azul);
    }

    .controls-card {
        background: #fff;
        border-radius: 12px;
        padding: 25px;
        border: 1px solid var(--gris-medio);
        box-shadow: var(--sombra-suave);
        transition: var(--transicion);
        position: relative;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }
    
    .controls-card:hover {
        box-shadow: var(--sombra-hover);
        transform: translateY(-2px);
    }
    
    .controls-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: var(--degradado-azul);
    }

    .btn-appointment {
        border-radius: 10px;
        padding: 0.75rem 1.25rem;
        transition: var(--transicion);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .btn-primary-appointment {
        background: var(--degradado-azul);
        color: white !important;
        border: none;
        box-shadow: 0 3px 8px rgba(42,78,109,0.2);
    }
    
    .btn-primary-appointment:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(42,78,109,0.3);
    }

    .btn-secondary-appointment {
        background: var(--azul-suave);
        color: var(--azul-primario);
        border: 2px solid var(--azul-primario);
    }

    .btn-secondary-appointment:hover {
        background: var(--azul-primario);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(42,78,109,0.2);
    }

    /* FullCalendar Customization */
    .fc .fc-toolbar.fc-header-toolbar {
        background: var(--gris-claro);
        padding: 1rem;
        border-radius: 10px;
        margin-bottom: 1.5rem !important;
        border: 1px solid var(--gris-medio);
    }
    
    .fc .fc-button-primary {
        background-color: var(--azul-primario);
        border-color: var(--azul-primario);
        box-shadow: none;
    }
    
    .fc .fc-button-primary:hover {
        background-color: var(--azul-secundario);
        border-color: var(--azul-secundario);
    }
    
    .fc .fc-button-primary:not(:disabled).fc-button-active, 
    .fc .fc-button-primary:not(:disabled):active {
        background-color: var(--azul-destacado);
        border-color: var(--azul-destacado);
    }
    
    .fc-theme-standard td, .fc-theme-standard th {
        border-color: var(--gris-medio);
    }
    
    .fc-theme-standard .fc-scrollgrid {
        border-color: var(--gris-medio);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .fc .fc-daygrid-day.fc-day-today {
        background-color: var(--azul-suave);
    }
    
    .fc-daygrid-event {
        border-radius: 8px !important;
        padding: 0.25rem 0.5rem;
        border-color: var(--azul-primario);
        background-color: var(--azul-destacado);
        color: white;
    }

    @media (max-width: 768px) {
        .calendar-card {
            margin-bottom: 1.5rem;
            height: auto;
        }
        
        .btn-group-responsive {
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .fc .fc-toolbar.fc-header-toolbar {
            flex-direction: column;
            gap: 1rem;
        }
        
        .fc .fc-toolbar-title {
            font-size: 1.2rem;
        }
    }
</style>

<div class="container-fluid appointment-view">
    <!-- Header -->
    <div class="row">
        <div class="col-12 p-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">{{ __('view-appointments.titleView') }}</h2>
                    <a href="{{URL::to('/admin/create-appointment')}}" class="btn btn-primary-appointment">
                        <i class="bi bi-plus-circle"></i>
                        {{__("view-appointments.create")}}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenido principal -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="container-fluid">
                <div class="row g-4">
                    <!-- Calendario -->
                    <div class="col-12 col-md-12 col-sm-12 col-lg-12">
                        <div class="calendar-card">
                            {!! $calendar->calendar() !!}
                        </div>
                    </div>

                    <!-- Controles y Tabla -->
                    <div class="col-12 col-md-12 col-sm-12 col-lg-12">
                        <div class="controls-card">
                            <div class="d-flex flex-wrap gap-2 btn-group-responsive">
                                @if($user::isADoctor(Auth::user()))
                                    <a href="{{URL::to('/admin/view-appointments?myAppointments=1')}}" 
                                       class="btn btn-secondary-appointment">
                                        <i class="bi bi-person-circle"></i>
                                        {{__("view-appointments.myAppointments")}}
                                    </a>
                                @endif
                                <a href="{{URL::to('/admin/view-appointments?today=1')}}" 
                                   class="btn btn-secondary-appointment">
                                    <i class="bi bi-calendar-day"></i>
                                    {{__("view-appointments.today")}}
                                </a>
                                <a href="{{URL::to('/admin/view-appointments')}}" 
                                   class="btn btn-secondary-appointment">
                                    <i class="bi bi-calendar3"></i>
                                    {{__("view-appointments.all")}}
                                </a>
                                <a href="{{URL::to('/admin/view-appointments/export')}}{{ Request::getQueryString() ? '?' . Request::getQueryString() : '' }}" 
                                   class="btn btn-secondary-appointment">
                                    <i class="bi bi-file-excel"></i>
                                    {{__("view-appointments.export")}}
                                </a>
                            </div>
                        </div>

                        <!-- Tabla de citas -->
                        <div class="livewire-table-container">
                            <livewire:appointment-table-view />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{!! $calendar->script() !!}

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Animaciones
    gsap.from(".calendar-card", {
        duration: 0.6,
        x: -50,
        opacity: 0,
        ease: "power2.out"
    });

    gsap.from(".controls-card", {
        duration: 0.6,
        x: 50,
        opacity: 0,
        delay: 0.2,
        ease: "power2.out"
    });
});
</script>
@endsection