<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confirmación de Cita</title>
    <style>
        :root {
            --primary: #3a8dff;
            --secondary: #2c3e50;
            --light: #f1f8ff;
            --gray: #6c757d;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        .header {
            background: linear-gradient(135deg, #3a8dff 0%, #2c6de8 100%);
            color: white;
            padding: 30px 20px;
            text-align: center;
        }
        .header img {
            max-width: 180px;
            height: auto;
            margin-bottom: 15px;
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }
        .content {
            padding: 30px 25px;
        }
        .greeting {
            font-size: 18px;
            margin-bottom: 25px;
            color: var(--secondary);
        }
        .appointment-card {
            background-color: var(--light);
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 25px;
            border-left: 4px solid var(--primary);
        }
        .appointment-card h2 {
            margin-top: 0;
            color: var(--primary);
            font-size: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e1e8f0;
            padding-bottom: 10px;
        }
        .appointment-details {
            margin-bottom: 5px;
        }
        .appointment-details strong {
            color: var(--secondary);
            width: 120px;
            display: inline-block;
        }
        .status {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            margin-top: 5px;
        }
        .status-confirmed {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success);
        }
        .status-pending {
            background-color: rgba(255, 193, 7, 0.1);
            color: var(--warning);
        }
        .status-cancelled {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--danger);
        }
        .doctor-info {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            border: 1px solid #e1e8f0;
        }
        .doctor-info h3 {
            margin-top: 0;
            color: var(--secondary);
            font-size: 18px;
        }
        .alert {
            background-color: #fff8e1;
            border-left: 4px solid #ffb300;
            padding: 15px;
            margin-bottom: 25px;
            border-radius: 4px;
        }
        .alert-title {
            font-weight: 600;
            color: #e65100;
            margin-top: 0;
            margin-bottom: 10px;
        }
        .instructions {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 25px;
        }
        .instructions h3 {
            margin-top: 0;
            color: var(--secondary);
        }
        .instructions ul {
            padding-left: 20px;
        }
        .instructions li {
            margin-bottom: 8px;
        }
        .footer {
            background-color: #f8f9fa;
            padding: 20px;
            text-align: center;
            color: var(--gray);
            font-size: 14px;
            border-top: 1px solid #e1e8f0;
        }
        .social-links {
            margin-top: 15px;
        }
        .social-links a {
            display: inline-block;
            margin: 0 10px;
            color: var(--primary);
            text-decoration: none;
        }
        .code {
            background-color: var(--light);
            padding: 10px 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 15px;
            color: var(--primary);
            border: 1px dashed #bbd6ff;
            display: inline-block;
        }
        .btn {
            display: inline-block;
            background-color: var(--primary);
            color: white;
            text-decoration: none;
            padding: 12px 25px;
            border-radius: 50px;
            font-weight: 600;
            text-align: center;
            margin-top: 15px;
        }
        .clinic-info {
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid #e1e8f0;
        }
        .clinic-info p {
            margin: 5px 0;
        }
    </style>
</head>

<body>
    @php
        $patient = $appointment->patient()->first();
        $specialty = $appointment->especiality()->first();
        $doctor = $appointment->getDoctor();
        $name = ucwords(strtolower($patient->firstname)) . " " . ucwords(strtolower($patient->lastname));

    @endphp
    <div class="container">
        <div class="header">
            @if(isset($clinicIdentity) && !empty($clinicIdentity->logo_path))
                <img src="{{ asset('storage/' . trim($clinicIdentity->logo_path)) }}" alt="Logo {{ $clinicIdentity->name }}">
            @else
                <img src="{{ asset('images/default-logo-white.png') }}" alt="Logo">
            @endif
            <h1>Confirmación de Cita Médica</h1>
        </div>
        
        <div class="content">
           
            <p class="greeting">Estimado(a) <strong>{{ $name }}</strong>,</p>
            
            <p>Le confirmamos que su cita médica ha sido registrada con éxito. A continuación encontrará los detalles:</p>
            
            @if(isset($appointment->code))
            <div class="code">
                <strong>ID de Cita:</strong> {{ $appointment->code }}
            </div>
            @endif
            
            <div class="appointment-card">
                <h2>Detalles de la Cita</h2>
                <p class="appointment-details">
                    <strong>Fecha:</strong> {{ date('d/m/Y', strtotime($appointment->date)) }}
                </p>
                <p class="appointment-details">
                    <strong>Hora:</strong> {{ date('g:i A', strtotime($appointment->date)) }}
                </p>
                <p class="appointment-details">
                    <strong>Especialidad:</strong> {{ $specialty->name }}
                </p>
                
                <p class="appointment-details">
                    <strong>Estado:</strong> 
                    @php
                        $statusClass = 'status-confirmed';
                        $status = 'Confirmada';
                    @endphp
                    <span class="status {{ $statusClass }}">{{ $status }}</span>
                </p>
            </div>
            
            @if(isset($doctor) && $doctor)
            <div class="doctor-info">
                <h3>Información del Doctor</h3>
                <p><strong>Nombre:</strong> {{ $doctor->firstname }} {{ $doctor->lastname }}</p>
                @if(isset($doctor->specialty))
                <p><strong>Especialidad:</strong> {{ $doctor->specialty }}</p>
                @endif
            </div>
            @endif
            
            <div class="alert">
                <h4 class="alert-title">¡Importante!</h4>
                <p>Por favor llegue 15 minutos antes de la hora programada para completar los trámites administrativos necesarios.</p>
            </div>
            
            <div class="instructions">
                <h3>Instrucciones para su Cita</h3>
                <ul>
                    <li>Traiga su documento de identidad.</li>
                    <li>Si tiene exámenes médicos previos relacionados con su consulta, tráigalos consigo.</li>
                    <li>Si tiene alguna condición especial o alergia, informe al médico.</li>
                    <li>Para cancelar o reprogramar, por favor hágalo con al menos 24 horas de anticipación.</li>
                </ul>
            </div>
            
            <p>Si necesita modificar o cancelar su cita, puede comunicarse con nosotros a través de los siguientes canales:</p>
            
            @if(isset($clinicIdentity))
            <div class="clinic-info">
                @if($clinicIdentity->phone)
                <p><strong>Teléfono:</strong> {{ $clinicIdentity->phone }}</p>
                @endif
                @if($clinicIdentity->email)
                <p><strong>Email:</strong> {{ $clinicIdentity->email }}</p>
                @endif
                @if($clinicIdentity->address)
                <p><strong>Dirección:</strong> {{ $clinicIdentity->address }}</p>
                @endif
                @if($clinicIdentity->working_hours)
                <p><strong>Horario de Atención:</strong> {{ $clinicIdentity->working_hours }}</p>
                @endif
            </div>
            @endif
            
            <p>Agradecemos su confianza en nuestros servicios médicos.</p>
            
            {{-- <div style="text-align: center;">
                <a href="#" class="btn">Ver Mis Citas</a>
            </div> --}}
        </div>
        
        <div class="footer">
            <p>© {{ date('Y') }} 
            @if(isset($clinicIdentity) && $clinicIdentity->name)
                {{ $clinicIdentity->name }}
            @else
                Centro Médico
            @endif
            - Todos los derechos reservados</p>
            
            <div class="social-links">
                <a href="#" target="_blank">Facebook</a>
                <a href="#" target="_blank">Instagram</a>
                <a href="#" target="_blank">Twitter</a>
            </div>
        </div>
    </div>
</body>

</html>