@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="bg-blue-50 border border-blue-100 rounded-xl p-3 flex items-start gap-3">
        <span class="material-symbols-outlined text-blue-500">info</span>
        <p class="text-xs text-blue-700 leading-relaxed">
            <span class="font-bold">Recordatorio:</span> Solo los pagos marcados como <span class="font-bold">Validados</span>
            reducen el saldo pendiente del chofer.
        </p>
    </div>
    <div
        class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden active:scale-[0.98] transition-transform">
        <div class="p-4">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center gap-3">
                    <div
                        class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 font-bold overflow-hidden">
                        <img alt="avatar" class="w-full h-full object-cover"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIr80tD7I_mJDJ3fAOtiLRLLkRor6Kq9tK-fHrCCVEMhJb01edQjf5iFqWGoWCt-4q5pJxfAD-Gl5DnUgoIW8H4miXz1bjOO3YiczqP3YItFbNWXdUGl5vA2-pgqTKm8Li8JGMJILl07H2UL00D1lZci3IYkShxCEVOKL-HctitcwYvee_px9FTUDkHw-msRvOSG4IrLUQkZXN3DGW-yd0vAAgApR1hH0Aa9TqQlwlIkttLZx0yK0BuCqCfcgNUFJNpbmvySnaQWs" />
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900">Juan Pérez</h3>
                        <p class="text-xs text-slate-500">Unidad: <span class="font-semibold text-slate-700">T-204</span>
                        </p>
                    </div>
                </div>
                <div class="flex flex-col items-end gap-1.5">
                    <span
                        class="px-2 py-1 rounded-md bg-warning/10 text-warning text-[10px] font-bold uppercase tracking-wider">Pendiente</span>
                    <div
                        class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-danger/10 text-danger text-[10px] font-bold">
                        <span class="material-symbols-outlined text-[12px]">warning</span>
                        SOSPECHOSO
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between py-3 border-y border-slate-50">
                <div>
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">Monto Reportado</p>
                    <p class="text-xl font-black text-slate-900">$1,250.00</p>
                </div>
                <div class="text-right">
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">Fecha</p>
                    <p class="text-sm font-semibold text-slate-700">Hoy, 14:20</p>
                </div>
            </div>
            <div class="mt-3 flex gap-3">
                <div
                    class="relative w-16 h-16 rounded-lg bg-slate-100 border border-slate-200 overflow-hidden flex-shrink-0">
                    <img alt="ticket" class="w-full h-full object-cover opacity-80"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIr80tD7I_mJDJ3fAOtiLRLLkRor6Kq9tK-fHrCCVEMhJb01edQjf5iFqWGoWCt-4q5pJxfAD-Gl5DnUgoIW8H4miXz1bjOO3YiczqP3YItFbNWXdUGl5vA2-pgqTKm8Li8JGMJILl07H2UL00D1lZci3IYkShxCEVOKL-HctitcwYvee_px9FTUDkHw-msRvOSG4IrLUQkZXN3DGW-yd0vAAgApR1hH0Aa9TqQlwlIkttLZx0yK0BuCqCfcgNUFJNpbmvySnaQWs" />
                    <div class="absolute inset-0 flex items-center justify-center bg-black/20">
                        <span class="material-symbols-outlined text-white text-lg">zoom_in</span>
                    </div>
                </div>
                <div class="flex-1 flex flex-col justify-center gap-1">
                    <div class="flex items-center gap-1.5 text-xs text-danger font-medium">
                        <span class="material-symbols-outlined text-sm">error_outline</span>
                        Imagen parece recortada
                    </div>
                    <div class="flex items-center gap-1.5 text-xs text-slate-500">
                        <span class="material-symbols-outlined text-sm">account_balance</span>
                        Transferencia bancaria
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-slate-50 px-4 py-3 flex gap-2">
            <button
                class="flex-1 h-10 bg-success text-white text-sm font-bold rounded-lg flex items-center justify-center gap-1">
                <span class="material-symbols-outlined text-sm">check_circle</span> Validar
            </button>
            <button
                class="flex-1 h-10 bg-observation text-white text-sm font-bold rounded-lg flex items-center justify-center gap-1">
                <span class="material-symbols-outlined text-sm">visibility</span> Observar
            </button>
            <button
                class="w-12 h-10 border border-danger/20 text-danger bg-danger/5 rounded-lg flex items-center justify-center">
                <span class="material-symbols-outlined">block</span>
            </button>
        </div>
    </div>
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden opacity-90">
        <div class="p-4">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center gap-3">
                    <div
                        class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 font-bold overflow-hidden">
                        <img alt="avatar" class="w-full h-full object-cover"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIr80tD7I_mJDJ3fAOtiLRLLkRor6Kq9tK-fHrCCVEMhJb01edQjf5iFqWGoWCt-4q5pJxfAD-Gl5DnUgoIW8H4miXz1bjOO3YiczqP3YItFbNWXdUGl5vA2-pgqTKm8Li8JGMJILl07H2UL00D1lZci3IYkShxCEVOKL-HctitcwYvee_px9FTUDkHw-msRvOSG4IrLUQkZXN3DGW-yd0vAAgApR1hH0Aa9TqQlwlIkttLZx0yK0BuCqCfcgNUFJNpbmvySnaQWs" />
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900">Miguel Rodríguez</h3>
                        <p class="text-xs text-slate-500">Unidad: <span class="font-semibold text-slate-700">M-105</span>
                        </p>
                    </div>
                </div>
                <div class="flex flex-col items-end gap-1.5">
                    <span
                        class="px-2 py-1 rounded-md bg-warning/10 text-warning text-[10px] font-bold uppercase">Pendiente</span>
                    <div
                        class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-success/10 text-success text-[10px] font-bold">
                        <span class="material-symbols-outlined text-[12px]">verified_user</span>
                        ALTA CONFIANZA
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between py-3 border-y border-slate-50">
                <div>
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">Monto Reportado</p>
                    <p class="text-xl font-black text-slate-900">$850.00</p>
                </div>
                <div class="text-right">
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">Fecha</p>
                    <p class="text-sm font-semibold text-slate-700">Hoy, 13:45</p>
                </div>
            </div>
            <div class="mt-3 flex gap-3">
                <div
                    class="relative w-16 h-16 rounded-lg bg-slate-100 border border-slate-200 overflow-hidden flex-shrink-0">
                    <img alt="ticket" class="w-full h-full object-cover"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIr80tD7I_mJDJ3fAOtiLRLLkRor6Kq9tK-fHrCCVEMhJb01edQjf5iFqWGoWCt-4q5pJxfAD-Gl5DnUgoIW8H4miXz1bjOO3YiczqP3YItFbNWXdUGl5vA2-pgqTKm8Li8JGMJILl07H2UL00D1lZci3IYkShxCEVOKL-HctitcwYvee_px9FTUDkHw-msRvOSG4IrLUQkZXN3DGW-yd0vAAgApR1hH0Aa9TqQlwlIkttLZx0yK0BuCqCfcgNUFJNpbmvySnaQWs" />
                    <div class="absolute inset-0 flex items-center justify-center bg-black/10">
                        <span class="material-symbols-outlined text-white text-lg">zoom_in</span>
                    </div>
                </div>
                <div class="flex-1 flex flex-col justify-center gap-1">
                    <div class="flex items-center gap-1.5 text-xs text-success font-medium">
                        <span class="material-symbols-outlined text-sm">done_all</span>
                        Datos legibles detectados
                    </div>
                    <div class="flex items-center gap-1.5 text-xs text-slate-500">
                        <span class="material-symbols-outlined text-sm">payments</span>
                        Depósito OXXO
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-slate-50 px-4 py-3 flex gap-2">
            <button
                class="flex-1 h-10 bg-success text-white text-sm font-bold rounded-lg flex items-center justify-center gap-1">
                <span class="material-symbols-outlined text-sm">check_circle</span> Validar
            </button>
            <button
                class="px-3 h-10 bg-white border border-slate-200 text-slate-400 rounded-lg flex items-center justify-center">
                <span class="material-symbols-outlined">more_horiz</span>
            </button>
        </div>
    </div>
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden opacity-60">
        <div class="p-4">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center gap-3">
                    <div
                        class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 font-bold overflow-hidden">
                        <img alt="avatar" class="w-full h-full object-cover"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIr80tD7I_mJDJ3fAOtiLRLLkRor6Kq9tK-fHrCCVEMhJb01edQjf5iFqWGoWCt-4q5pJxfAD-Gl5DnUgoIW8H4miXz1bjOO3YiczqP3YItFbNWXdUGl5vA2-pgqTKm8Li8JGMJILl07H2UL00D1lZci3IYkShxCEVOKL-HctitcwYvee_px9FTUDkHw-msRvOSG4IrLUQkZXN3DGW-yd0vAAgApR1hH0Aa9TqQlwlIkttLZx0yK0BuCqCfcgNUFJNpbmvySnaQWs" />
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900">Carlos Sánchez</h3>
                        <p class="text-xs text-slate-500">Unidad: <span class="font-semibold text-slate-700">S-901</span>
                        </p>
                    </div>
                </div>
                <span class="px-2 py-1 rounded-md bg-danger/10 text-danger text-[10px] font-bold uppercase">Rechazado</span>
            </div>
            <div class="flex justify-between items-center bg-danger/5 border border-danger/10 p-2 rounded-lg">
                <span class="text-[10px] text-danger font-bold uppercase">Motivo:</span>
                <span class="text-[11px] text-danger-700">Comprobante ilegible</span>
            </div>
        </div>
    </div>
@endsection