@props(['cita'])

<div class="bg-white shadow-lg rounded-2xl p-6 text-sm border border-gray-100">
    <h3 class="text-lg font-bold mb-2 text-center text-indigo-700">
        📆 Detalles de la Cita para Cotejo de Documentos
    </h3>

    <p class="text-gray-500 text-sm text-center mb-6">
        Revise la información correspondiente a su cita programada para la verificación de documentos.
    </p>

    @if($cita)
        <ul class="space-y-3">
            <li>
                📌 <strong>Estado:</strong>
                <span class="ml-1 inline-block px-3 py-1 text-xs font-semibold rounded-full 
                    {{ match($cita->estado) {
                        'Pendiente' => 'bg-yellow-100 text-yellow-800',
                        'Cotejada' => 'bg-green-100 text-green-800',
                        'Cancelada' => 'bg-red-100 text-red-800',
                        default => 'bg-gray-200 text-gray-600',
                    } }}">
                    {{ $cita->estado }}
                </span>
            </li>
            <li>📅 <strong>Fecha:</strong> {{ \Carbon\Carbon::parse($cita->fecha)->translatedFormat('d \d\e F \d\e Y') }}</li>
            <li>⏰ <strong>Hora:</strong> {{ \Carbon\Carbon::parse($cita->hora)->format('h:i A') }}</li>
            <li>💼 <strong>Motivo:</strong> {{ $cita->motivo }}</li>
            <li>👥 <strong>Técnico asignado:</strong> {{ $cita->user->name ?? 'Sin asignar' }}</li>
            <li>📥 <strong>Registrada el:</strong> {{ \Carbon\Carbon::parse($cita->created_at)->translatedFormat('d/m/Y H:i') }}</li>
            <li>
                📍 <strong>Ubicación:</strong>
                <p class="text-gray-600 mt-1">C. Broberg 804, Panamá, Provincia de Panamá</p>
                <div class="mt-3 rounded-lg overflow-hidden shadow-md">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d252245.8200916258!2d-79.668045!3d8.9406967!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8faca61f92bf070f%3A0x41c6ee17ec503d6d!2sMi%20AMBIENTE%20%7C%20Ministerio%20de%20Ambiente%20de%20Panam%C3%A1%20%7C%20Edificio%20804!5e0!3m2!1ses-419!2spa!4v1757098548958!5m2!1ses-419!2spa" 
                        width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </li>
        </ul>
    @else
        <p class="text-center text-gray-400 text-base mt-8 mb-8">
            📭 Aún no tiene una cita asignada.
        </p>
    @endif
</div>