@extends('layouts.app')

@section('title', 'Mi Ruta Hoy')

@section('content')
    <!-- Mobile optimized container -->
    <div class="max-w-md mx-auto bg-white min-h-[calc(100vh-6rem)] shadow-lg rounded-xl overflow-hidden">

        <!-- Header Route Info -->
        <div class="bg-slate-800 text-white p-6">
            <h2 class="text-xl font-bold">Ruta Norte Mañana</h2>
            <div class="flex justify-between items-center mt-2">
                <span class="text-sm bg-slate-700 px-3 py-1 rounded-full">3 Entregas pendientes</span>
                <span class="text-xs text-slate-400">01 Ene, 2026</span>
            </div>
            <!-- Progress Bar -->
            <div class="w-full bg-slate-700 h-2 rounded-full mt-4">
                <div class="bg-brand-green h-2 rounded-full" style="width: 40%"></div>
            </div>
        </div>

        <!-- Order List -->
        <div class="divide-y divide-slate-100">

            <!-- Active Order (Highlight) -->
            <div class="p-6 bg-amber-50 border-l-4 border-amber-500">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold text-lg text-slate-800">#ORD-001</h3>
                    <span class="bg-amber-100 text-amber-700 text-xs font-bold px-2 py-1 rounded">PRÓXIMA</span>
                </div>
                <div class="mt-2 space-y-1">
                    <p class="text-slate-800 font-medium">Maria Jose</p>
                    <p class="text-slate-600 text-sm flex items-start">
                        <svg class="w-4 h-4 mr-1 mt-0.5 text-slate-400" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                            </path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        Calle 5 # 23-45, Barrio El Peñon
                    </p>
                    <p class="text-slate-600 text-sm flex items-center">
                        <svg class="w-4 h-4 mr-1 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                            </path>
                        </svg>
                        <a href="tel:+573001234567" class="underline decoration-slate-300">300 123 4567</a>
                    </p>
                </div>

                <div class="mt-4 p-3 bg-white rounded-lg border border-amber-100">
                    <p class="text-sm font-bold text-amber-800 mb-1">Cobrar: $120.000</p>
                    <p class="text-xs text-amber-600">Pago Contraentrega (Efectivo)</p>
                </div>

                <div class="mt-4 grid grid-cols-2 gap-3">
                    <button
                        class="bg-white border border-slate-300 text-slate-700 py-3 rounded-lg font-medium text-sm hover:bg-slate-50">
                        Cómo legar
                    </button>
                    <button
                        class="bg-brand-green text-white py-3 rounded-lg font-bold text-sm shadow-md hover:bg-green-600">
                        Marcar Entrega
                    </button>
                </div>
            </div>

            <!-- Pending Order -->
            <div class="p-6 hover:bg-slate-50">
                <div class="flex justify-between items-start opacity-60">
                    <h3 class="font-bold text-lg text-slate-800">#ORD-005</h3>
                    <span class="bg-slate-100 text-slate-500 text-xs font-bold px-2 py-1 rounded">PENDIENTE</span>
                </div>
                <div class="mt-2 space-y-1 opacity-60">
                    <p class="text-slate-800 font-medium">Marta Gomez</p>
                    <p class="text-slate-600 text-sm">Av 6N # 12-34</p>
                </div>
                <div class="mt-4">
                    <button
                        class="w-full bg-slate-100 text-slate-400 py-2 rounded-lg text-sm font-medium cursor-not-allowed">
                        Iniciar / En Camino
                    </button>
                </div>
            </div>

            <!-- Pending Order -->
            <div class="p-6 hover:bg-slate-50">
                <div class="flex justify-between items-start opacity-60">
                    <h3 class="font-bold text-lg text-slate-800">#ORD-008</h3>
                    <span class="bg-slate-100 text-slate-500 text-xs font-bold px-2 py-1 rounded">PENDIENTE</span>
                </div>
                <div class="mt-2 space-y-1 opacity-60">
                    <p class="text-slate-800 font-medium">Juan Perez</p>
                    <p class="text-slate-600 text-sm">Cra 100 # 11-22</p>
                </div>
                <div class="mt-4">
                    <button
                        class="w-full bg-slate-100 text-slate-400 py-2 rounded-lg text-sm font-medium cursor-not-allowed">
                        Iniciar / En Camino
                    </button>
                </div>
            </div>

            <!-- Finished Order -->
            <div class="p-6 bg-slate-50">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold text-slate-400 line-through">#ORD-002</h3>
                    <span class="text-brand-green font-bold text-xl">✓</span>
                </div>
                <div class="mt-1">
                    <p class="text-slate-400 text-sm">Entregado a las 11:30 AM</p>
                </div>
            </div>

        </div>
    </div>
@endsection