@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="p-4">
        <div
            class="flex flex-col items-start justify-between gap-4 rounded-xl border border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-900/30 p-4">
            <div class="flex items-start gap-3">
                <div class="mt-1 bg-red-500 text-white rounded-full p-1 flex items-center justify-center">
                    <span class="material-symbols-outlined text-sm">priority_high</span>
                </div>
                <div class="flex flex-col gap-1">
                    <p class="text-red-900 dark:text-red-400 text-sm font-bold leading-tight">Mantenimientos Vencidos</p>
                    <p class="text-red-700 dark:text-red-300 text-xs font-normal leading-normal">
                        Hay 3 unidades con servicios críticos pendientes (Frenos y Motor).
                    </p>
                </div>
            </div>
            <button
                class="w-full flex cursor-pointer items-center justify-center overflow-hidden rounded-lg h-9 px-4 bg-red-600 text-white text-xs font-bold leading-normal">
                Ver Urgentes
            </button>
        </div>
    </div>
    <!-- Tabs -->
    <div class="px-4">
        <div class="flex border-b border-slate-200 dark:border-slate-800 gap-8">
            <a class="flex flex-col items-center justify-center border-b-2 border-primary text-primary pb-3 pt-2"
                href="#">
                <p class="text-sm font-bold leading-normal">Programados</p>
            </a>
            <a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 pb-3 pt-2"
                href="#">
                <p class="text-sm font-medium leading-normal">Realizados</p>
            </a>
        </div>
    </div>
    <!-- List Section -->
    <div class="flex flex-col gap-4 p-4 mb-20">
        <h3 class="text-slate-900 dark:text-slate-100 text-base font-bold leading-tight">Servicios Próximos</h3>
        <!-- Maintenance Card 1 - Pending -->
        <div class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 shadow-sm">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined">local_taxi</span>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-slate-900 dark:text-slate-100">Unidad #402</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Cambio de Aceite</p>
                    </div>
                </div>
                <span
                    class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
                    Pendiente
                </span>
            </div>
            <div class="space-y-2 border-t border-slate-50 dark:border-slate-800 pt-3">
                <div class="flex items-center text-xs text-slate-600 dark:text-slate-400">
                    <span class="material-symbols-outlined text-sm mr-2">calendar_today</span>
                    <span>Programado: 15 Oct, 2023</span>
                </div>
                <div class="flex items-center text-xs text-slate-600 dark:text-slate-400">
                    <span class="material-symbols-outlined text-sm mr-2">notes</span>
                    <span class="italic truncate">Revisión de filtros y niveles.</span>
                </div>
            </div>
        </div>
        <!-- Maintenance Card 2 - In Process -->
        <div class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 shadow-sm">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined">local_taxi</span>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-slate-900 dark:text-slate-100">Unidad #128</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Sistema de Frenos</p>
                    </div>
                </div>
                <span
                    class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                    En proceso
                </span>
            </div>
            <div class="space-y-2 border-t border-slate-50 dark:border-slate-800 pt-3">
                <div class="flex items-center text-xs text-slate-600 dark:text-slate-400">
                    <span class="material-symbols-outlined text-sm mr-2">calendar_today</span>
                    <span>Programado: 12 Oct, 2023</span>
                </div>
                <div class="flex items-center text-xs text-slate-600 dark:text-slate-400">
                    <span class="material-symbols-outlined text-sm mr-2">notes</span>
                    <span class="italic truncate">Cambio de pastillas delanteras.</span>
                </div>
            </div>
        </div>
        <!-- Maintenance Card 3 - Completed (Example from Realizados concept) -->
        <div
            class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 shadow-sm opacity-80">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center gap-3">
                    <div
                        class="h-10 w-10 bg-slate-100 dark:bg-slate-800 rounded-lg flex items-center justify-center text-slate-400">
                        <span class="material-symbols-outlined">local_taxi</span>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-slate-900 dark:text-slate-100">Unidad #215</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Afinamiento Mayor</p>
                    </div>
                </div>
                <span
                    class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400">
                    Completado
                </span>
            </div>
            <div class="space-y-2 border-t border-slate-50 dark:border-slate-800 pt-3">
                <div class="flex items-center text-xs text-slate-600 dark:text-slate-400">
                    <span class="material-symbols-outlined text-sm mr-2">calendar_today</span>
                    <span>Finalizado: 10 Oct, 2023</span>
                </div>
            </div>
        </div>
    </div>
@endsection