@extends('layouts.appointment')
@section('content')      
<style>
    .appointment-container {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
        --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
    }

    .appointment-header {
        background: var(--degradado-azul);
        color: white;
        border-radius: 15px;
        padding: 2rem;
        margin: 1rem 0;
        box-shadow: 0 4px 20px rgba(42, 78, 109, 0.1);
    }

    .alert-custom {
        border-radius: 12px;
        border: none;
        box-shadow: 0 4px 15px rgba(42, 78, 109, 0.1);
        padding: 1.5rem;
        margin: 1rem 0;
    }

    .alert-custom.success {
        background: #e8f6ef;
        color: #1a7555;
        border-left: 4px solid #1a7555;
    }

    .alert-custom.error {
        background: #fce8e6;
        color: #c0342d;
        border-left: 4px solid #c0342d;
    }

    .appointment-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 4px 30px rgba(42, 78, 109, 0.08);
        padding: 2rem;
        margin: 2rem 0;
        border: 1px solid var(--azul-suave);
    }

    @media (max-width: 768px) {
        .appointment-header {
            padding: 1.5rem;
            margin: 0.5rem 0;
        }
        
        .appointment-card {
            padding: 0rem;
            margin: 1rem 0;
        }
    }
</style>

<div class="container-fluid appointment-container p-0">
    <!-- Notificaciones -->
    <div class="row">
        <div class="col-12 p-3">
            @if (session('success'))
                <div class="alert-custom success">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert-custom error">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    {{ session('error') }}
                </div>
            @endif
        </div>
    </div>

    <!-- Contenido principal -->
    <div class="row justify-content-center">
        <div class="col-md-11 col-lg-11">
            <div class="appointment-header text-center">
                <h1 class="h2 mb-3">{{ __('create-appointment.titleView') }}</h1>
                <p class="mb-0">Complete el formulario para agendar su cita</p>
            </div>

            <div class="appointment-card">
                <x-AppointmentForm 
                    :appointment="$appointment"
                    :patients="$patients" 
                    :especialities="$especialities"
                    :calendar="$calendar"
                    :doctors="$doctors"
                    :isExternal="true">
                </x-AppointmentForm>
            </div>
        </div>
    </div>
</div>

{!! $calendar->script() !!}
<script src="{{ asset('js/create-appointment-external.js') }}"></script>

<!-- Animación de entrada -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        gsap.from('.appointment-header', {
            duration: 0.8,
            y: 20,
            opacity: 0,
            ease: 'power2.out'
        });
        
        gsap.from('.appointment-card', {
            duration: 0.8,
            y: 30,
            opacity: 0,
            delay: 0.2,
            ease: 'power2.out'
        });
    });
</script>
@endsection