@extends('layouts.panel-tamplate')

@section('tabs')
    <nav class="bg-white dark:bg-background-dark border-b border-slate-200 dark:border-slate-800 sticky top-[65px] z-10">
        <div class="flex max-w-md mx-auto px-4">
            <a class="flex-1 text-center py-3 border-b-2 border-primary text-primary font-semibold text-sm"
                href="#">Activas</a>
            <a class="flex-1 text-center py-3 border-b-2 border-transparent text-slate-500 dark:text-slate-400 font-medium text-sm"
                href="#">Historial</a>
        </div>
    </nav>
@endsection

@section('main-content')
    <div class="space-y-6">
        <!-- Timeline Item 1 (Active) -->
        <div class="relative flex gap-4">
            <!-- Timeline Line -->
            <div class="absolute left-6 top-10 bottom-[-24px] w-0.5 bg-slate-200 dark:bg-slate-800"></div>
            <!-- Driver Avatar -->
            <div class="relative z-10 flex-shrink-0">
                <img alt="Driver"
                    class="w-12 h-12 rounded-full object-cover ring-4 ring-white dark:ring-background-dark shadow-sm"
                    data-alt="Professional driver male portrait closeup"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDbymiQwFCuT6E3HCtLXJPTrXXKlA9Z4hr0V_ymTgxaPJcCOI-gvNM9hDGSq4FSA4NZKpKKn8Ux-MFDplWiied5tWvfr856FieoUh193pT9lXEZJqR7aFKH0jz5xuJmCJcgD8-WUdu-zrA3lZdnleET8WZr9l2JZOZuf85XXZxGBlZmY8HQhsS5TnQ7OurRk9jVlSOZkHYzwbLw0_3Z3cbn5wQlx3YYtnNOswBT_wyzYK6V38JbckPyloQxNLAPfUSu9AHfo5cFhPw" />
                <div
                    class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 border-2 border-white dark:border-background-dark rounded-full">
                </div>
            </div>
            <!-- Content Card -->
            <div
                class="flex-1 bg-white dark:bg-slate-900 rounded-xl p-4 shadow-sm border border-slate-100 dark:border-slate-800">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <h3 class="font-bold text-slate-900 dark:text-slate-100">Juan Pérez</h3>
                        <span
                            class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-primary/10 text-primary">Unidad
                            TX-402</span>
                    </div>
                    <span
                        class="text-[10px] font-bold uppercase tracking-wider text-green-600 bg-green-50 px-2 py-1 rounded">Activa</span>
                </div>
                <div class="space-y-1 mb-4">
                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                        <span class="material-symbols-outlined text-sm">calendar_today</span>
                        <span>Inicio: 12/10/2023</span>
                    </div>
                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                        <span class="material-symbols-outlined text-sm">event_repeat</span>
                        <span>Fin: <span class="text-primary font-medium italic">Actual</span></span>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button
                        class="flex-1 py-2 text-xs font-semibold rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 transition-colors">Finalizar</button>
                    <button
                        class="flex-1 py-2 text-xs font-semibold rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors">Reasignar</button>
                </div>
            </div>
        </div>
        <!-- Timeline Item 2 (Completed) -->
        <div class="relative flex gap-4 opacity-75">
            <!-- Timeline Line -->
            <div class="absolute left-6 top-10 bottom-[-24px] w-0.5 bg-slate-200 dark:bg-slate-800"></div>
            <!-- Driver Avatar -->
            <div class="relative z-10 flex-shrink-0">
                <img alt="Driver"
                    class="w-12 h-12 rounded-full object-cover ring-4 ring-white dark:ring-background-dark shadow-sm grayscale"
                    data-alt="Female professional worker portrait"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFuLOo4uURakDQPEwpaI38jyYTfsJ5JjiY-xowdsJTZ6CPtdGEXZUq90ckuTMqdSiVJxlCwvtGuQJ-B2Qjf5qVyqkuWBjkjQKzV1fJFp5WID2Je5pIU-iPzbIq1pQOXaNE9KKXNZQX53ycjZAKWbJ3ZpgoWMXQBccvSPYmsZ4viMHQGtoJgjg5C8CVD9VqS_nupIbp2d6yy0c97JFNph-YiNjZGyJp_2BIzryfaCUgM9dLrfTYb62NJDevcWzljH2vI2r6bZG0N3c" />
            </div>
            <!-- Content Card -->
            <div
                class="flex-1 bg-white dark:bg-slate-900/50 rounded-xl p-4 shadow-sm border border-slate-100 dark:border-slate-800">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <h3 class="font-bold text-slate-900 dark:text-slate-100">Maria García</h3>
                        <span
                            class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-500">Unidad
                            TX-115</span>
                    </div>
                    <span
                        class="text-[10px] font-bold uppercase tracking-wider text-slate-400 bg-slate-100 px-2 py-1 rounded">Finalizada</span>
                </div>
                <div class="space-y-1">
                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                        <span class="material-symbols-outlined text-sm">calendar_today</span>
                        <span>Del 01/10/23 al 11/10/23</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Timeline Item 3 (Completed) -->
        <div class="relative flex gap-4 opacity-75">
            <!-- No more line after last element -->
            <!-- Driver Avatar -->
            <div class="relative z-10 flex-shrink-0">
                <img alt="Driver"
                    class="w-12 h-12 rounded-full object-cover ring-4 ring-white dark:ring-background-dark shadow-sm grayscale"
                    data-alt="Male driver portrait with neutral expression"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUVTwsGMGwagwePjZy_lmylBzu5pFRWLHRqZwCNHUaHdiHAK1Jd_h-4QN7jVeyTzN49JK3yA1P5-LHyrbTyoWvzjyRwk5SbO_2R27ZiChMkw8hOYTQTMZwo0tE64PVKrHn_t90eZX-A1R2T0yiTrpqWGeC_PIQHsHEhaoHhQNe4_XCx3W_pMIhgQ10rOifpNh5QC9TqzEpyWAsh-LAO5UAl1j3BTHfpfybOJAeoNOa37SRDykwhp4nNTL1a6yEzPTfgcvTQKCEgzI" />
            </div>
            <!-- Content Card -->
            <div
                class="flex-1 bg-white dark:bg-slate-900/50 rounded-xl p-4 shadow-sm border border-slate-100 dark:border-slate-800">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <h3 class="font-bold text-slate-900 dark:text-slate-100">Roberto Ruiz</h3>
                        <span
                            class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 dark:bg-slate-800 text-slate-500">Unidad
                            TX-308</span>
                    </div>
                    <span
                        class="text-[10px] font-bold uppercase tracking-wider text-slate-400 bg-slate-100 px-2 py-1 rounded">Finalizada</span>
                </div>
                <div class="space-y-1">
                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                        <span class="material-symbols-outlined text-sm">calendar_today</span>
                        <span>Del 15/09/23 al 30/09/23</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <a href="{{ route('assignment.create') }}"
        class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-white rounded-full shadow-lg shadow-primary/30 flex items-center justify-center hover:scale-105 transition-transform z-30">
        <span class="material-symbols-outlined text-3xl">add</span>
    </a>
@endsection