@extends('layouts.panel-tamplate')

@section('header-content')
    <div class="flex items-center gap-4">
        <button onclick="history.back()"
            class="text-slate-500 hover:bg-slate-100 transition-colors p-2 rounded-full active:scale-95 duration-200">
            <span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
        </button>
        <h1 class="font-['Inter'] text-[20px] font-bold tracking-tight text-[#248aeb]">Detalles de conductor</h1>
    </div>
@endsection

@section('main-content')
    <!-- Profile Header -->
    <section class="flex flex-col items-center text-center space-y-4 pl-5 pr-5">
        <div class="relative">
            <div class="size-28 rounded-full border-4 border-white dark:border-slate-800 shadow-lg overflow-hidden bg-slate-200"
                data-alt="Professional portrait of a male taxi driver"
                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBza0LFr3IO207ioe-9fGU866tvsKUjybv4h9hTeCFTxJQVP39dTI90hwuR2qvQ2cXDNNBSPdcGCtOqvv8URi55mA0ZeH77_sYUEBE7iHbYJeaNPK8z71Iny9tbdEAKx1ofIDo-9AOBkx0Mb7c2nnQ7XMU-29-8f7XcyagHV8w01JBivbmFCt59tx5HipO_oSckMFh9yOD353EG8ShESrXDTGmc96k_DrqL-0n2hHqcjw3WdnDhIsPjUWSMZSzwpGNwtwYR7LLSoWQ')">
            </div>
            <span
                class="absolute bottom-1 right-1 bg-green-500 border-2 border-white dark:border-slate-800 size-5 rounded-full"></span>
        </div>
        <div class="space-y-1">
            <h2 class="text-2xl font-bold">Ricardo Alarcón</h2>
            <div class="flex items-center justify-center gap-2">
                <span
                    class="px-2.5 py-0.5 rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 text-xs font-bold uppercase tracking-wider">Activo</span>
                <span class="text-slate-500 dark:text-slate-400 text-sm">ID: 55421</span>
            </div>
        </div>
        <div class="flex gap-3 w-full">
            <button
                class="flex-1 flex items-center justify-center gap-2 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 font-bold hover:bg-slate-200 transition-colors">
                <span class="material-symbols-outlined text-lg">call</span>
                Llamar
            </button>
            <button
                class="flex-1 flex items-center justify-center gap-2 h-12 rounded-xl bg-primary text-white font-bold hover:opacity-90 transition-opacity">
                <span class="material-symbols-outlined text-lg">chat</span>
                WhatsApp
            </button>
        </div>
    </section>
    <!-- Datos Personales -->
    <section class="space-y-3 pl-5 pr-5">
        <h3 class="text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest px-1">Datos Personales
        </h3>
        <div
            class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800 space-y-4">
            <div class="flex items-start gap-3">
                <span class="material-symbols-outlined text-primary mt-0.5">phone_iphone</span>
                <div>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Teléfono</p>
                    <p class="font-medium">+52 55 1234 5678</p>
                </div>
            </div>
            <div class="flex items-start gap-3">
                <span class="material-symbols-outlined text-primary mt-0.5">badge</span>
                <div>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Licencia (Tipo A)</p>
                    <p class="font-medium">A-1234567-EXP25</p>
                </div>
            </div>
            <div class="flex items-start gap-3">
                <span class="material-symbols-outlined text-primary mt-0.5">location_on</span>
                <div>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Dirección</p>
                    <p class="font-medium leading-tight">Av. Insurgentes Sur 123, Col. Roma, CDMX</p>
                </div>
            </div>
        </div>
    </section>
    <!-- Unidad Actual -->
    <section class="space-y-3 pl-5 pr-5">
        <h3 class="text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest px-1">Unidad Actual</h3>
        <div
            class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div
                    class="size-14 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center overflow-hidden">
                    <img class="object-cover w-full h-full" data-alt="Small thumbnail of a white modern sedan taxi"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_vVJz5nTxEIn7lNbplUtyMQTHIUq8TrOMDQXpPiECyleBEMq8t5asEvlQFatEnIf0th4rOIQda3bSdqaMNvtWkL50lSWiCLZGVjEVA6ajMczPTf-B3x4zsrv03wDnc34b7xLWhVVugSYf1zMbxLZmIeIe-6_HXitD4At-UBfOr0kt1zXlO_QS76zl3jP8yTwbGcL_ibdmN_hpoGeY2J-r11fJIMVVKp8skmG5UTinX6x40eq3y_-AmZaFqx3JRoke6sLtkqVnxTM" />
                </div>
                <div>
                    <p class="text-lg font-bold">TX-402</p>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Nissan Versa 2023</p>
                </div>
            </div>
            <span class="material-symbols-outlined text-slate-400">chevron_right</span>
        </div>
    </section>
    <!-- Resumen Financiero -->
    <section class="space-y-3 pl-5 pr-5">
        <h3 class="text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest px-1">Resumen Financiero
        </h3>
        <div class="grid grid-cols-2 gap-3">
            <div class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
                <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">Adeudo Pendiente</p>
                <p class="text-xl font-bold text-red-500">$2,450.00</p>
            </div>
            <div class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800">
                <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">Cuota Semanal</p>
                <p class="text-xl font-bold">$1,800.00</p>
            </div>
        </div>
    </section>
    <!-- Historial de Pagos -->
    <section class="space-y-3 pl-5 pr-5">
        <h3 class="text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest px-1">Historial de Pagos
        </h3>
        <div
            class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-100 dark:border-slate-800 overflow-hidden divide-y divide-slate-100 dark:divide-slate-800">
            <div class="p-4 flex justify-between items-center">
                <div>
                    <p class="font-semibold text-slate-900 dark:text-slate-100">$1,800.00</p>
                    <p class="text-xs text-slate-500 dark:text-slate-400">12 Oct 2023 • Pago Semanal</p>
                </div>
                <span class="text-green-500 material-symbols-outlined">check_circle</span>
            </div>
            <div class="p-4 flex justify-between items-center">
                <div>
                    <p class="font-semibold text-slate-900 dark:text-slate-100">$1,800.00</p>
                    <p class="text-xs text-slate-500 dark:text-slate-400">05 Oct 2023 • Pago Semanal</p>
                </div>
                <span class="text-green-500 material-symbols-outlined">check_circle</span>
            </div>
            <div class="p-4 text-center">
                <button class="text-sm font-bold text-primary">Ver todo el historial</button>
            </div>
        </div>
    </section>
    <!-- Historial de Asignaciones -->
    <section class="space-y-3 pl-5 pr-5">
        <h3 class="text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest px-1">Asignaciones</h3>
        <div class="relative pl-4 space-y-4">
            <div class="absolute left-[7px] top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-slate-800"></div>
            <div class="relative flex items-center gap-4">
                <div
                    class="absolute -left-[13px] size-3 bg-primary rounded-full border-2 border-white dark:border-background-dark">
                </div>
                <div class="bg-white dark:bg-slate-900 p-3 rounded-lg border border-slate-100 dark:border-slate-800 flex-1">
                    <p class="text-sm font-bold">Unidad TX-402</p>
                    <p class="text-xs text-slate-500">Activo desde 15 Ago 2023</p>
                </div>
            </div>
            <div class="relative flex items-center gap-4">
                <div
                    class="absolute -left-[13px] size-3 bg-slate-300 dark:bg-slate-700 rounded-full border-2 border-white dark:border-background-dark">
                </div>
                <div
                    class="bg-white dark:bg-slate-900 p-3 rounded-lg border border-slate-100 dark:border-slate-800 flex-1 opacity-70">
                    <p class="text-sm font-bold">Unidad TX-105</p>
                    <p class="text-xs text-slate-500">Mar 2022 - Ago 2023</p>
                </div>
            </div>
        </div>
    </section>
    <!-- Observaciones -->
    <section class="space-y-3 pl-5 pr-5">
        <h3 class="text-sm font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest px-1">Observaciones</h3>
        <textarea
            class="w-full bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-xl p-4 text-sm focus:ring-primary focus:border-primary"
            placeholder="Notas sobre el desempeño, incidentes o mantenimiento..." rows="4"></textarea>
    </section>
@endsection