@extends('layouts.appDispositivo')

@section('title', 'Detalle de Unidad')

@php
    $active = 'dispositivos';
    $searchPlaceholder = 'Buscar en unidad...';

    // Lógica de Tiempo y Horarios
    $diasMap = [
        'Monday' => 'Lunes',
        'Tuesday' => 'Martes',
        'Wednesday' => 'Miércoles',
        'Thursday' => 'Jueves',
        'Friday' => 'Viernes',
        'Saturday' => 'Sábado',
        'Sunday' => 'Domingo',
    ];
    $now = \Carbon\Carbon::now('America/Lima');
    $diaActual = $diasMap[$now->format('l')];
    $horarios = json_decode($device['horarios'], true);
    $configHoy = $horarios[$diaActual] ?? ['start' => '09:00', 'end' => '16:00', 'isOpen' => false];

    $ultimoPing = \Carbon\Carbon::parse($device['ultimo_ping'])->setTimezone('America/Lima')->locale('es');
    $estado = strtolower($device['estado'] ?? 'offline');
    $bateria = (int) $device['estado_bateria'];
@endphp

@section('content')
    <div class="flex flex-col gap-6">
        <header class="flex flex-col md:flex-row md:items-end justify-between gap-4 shrink-0">
            <div>
                <div
                    class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-muted-gray uppercase font-bold tracking-widest mb-1">
                    <span>Dispositivos</span> / <span>Detalle de Unidad</span>
                </div>
                <div class="flex items-center gap-4">
                    <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-none uppercase">
                        ESP32-{{ $device['id_dispositivo'] }}
                    </h1>
                    <span
                        class="px-3 py-1 bg-orange-500/10 text-orange-600 dark:text-orange-400 text-[10px] font-black uppercase rounded-full border border-orange-500/30 flex items-center gap-2">
                        <span
                            class="w-1.5 h-1.5 rounded-full bg-orange-500 dark:bg-orange-400 @if ($estado == 'offline') animate-pulse @endif"></span>
                        {{ strtoupper($estado) }}: {{ $ultimoPing->diffForHumans() }}
                    </span>
                </div>
            </div>
        </header>

        <div class="grid grid-cols-12 gap-6">
            <div class="col-span-12 lg:col-span-8 flex flex-col gap-6">

                <div
                    class="bg-white dark:bg-[#131c25] rounded-xl border border-slate-200 dark:border-white/5 flex flex-col shadow-sm transition-colors">
                    <div class="p-5 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
                        <div>
                            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Horario de
                                la Sucursal</h3>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400">Rango operativo:
                                {{ $configHoy['start'] }} AM - {{ $configHoy['end'] }} PM</p>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex items-center gap-1.5">
                                <span class="w-2.5 h-2.5 rounded-full bg-primary"></span>
                                <span
                                    class="text-[10px] text-slate-600 dark:text-slate-400 font-medium uppercase">Trabajo</span>
                            </div>
                            <div class="flex items-center gap-1.5">
                                <span class="w-2.5 h-2.5 rounded-full bg-primary/40"></span>
                                <span
                                    class="text-[10px] text-slate-600 dark:text-slate-400 font-medium uppercase">Cierre</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-8 flex flex-col justify-center gap-8">
                        <div class="relative w-full">
                            <div
                                class="flex justify-between text-[10px] text-slate-400 dark:text-slate-500 font-mono mb-3 px-1 uppercase tracking-wider">
                                <span>00:00</span>
                                <span>08:00</span>
                                <span class="text-primary font-bold italic">Ahora: {{ $now->format('H:i') }}</span>
                                <span>16:00</span>
                                <span>23:59</span>
                            </div>

                            <div class="relative h-3 bg-slate-100 dark:bg-[#2d363f]/50 rounded-full overflow-hidden">
                                @php
                                    $startStr = \Carbon\Carbon::createFromTimeString($configHoy['start']);
                                    $endStr = \Carbon\Carbon::createFromTimeString($configHoy['end']);
                                    $posLeft = (($startStr->hour * 60 + $startStr->minute) / 1440) * 100;
                                    $width =
                                        (($endStr->hour * 60 +
                                            $endStr->minute -
                                            ($startStr->hour * 60 + $startStr->minute)) /
                                            1440) *
                                        100;
                                @endphp
                                <div class="absolute h-full bg-primary border-x border-primary shadow-[0_0_10px_rgba(19,127,236,0.3)]"
                                    style="left: {{ $posLeft }}%; width: {{ $width }}%">
                                </div>
                            </div>
                        </div>

                        <div
                            class="p-4 bg-orange-500/5 dark:bg-orange-500/10 rounded-lg border-l-4 border-orange-500 flex items-start gap-4">
                            <span
                                class="material-symbols-outlined text-orange-600 dark:text-orange-500 text-xl">history</span>
                            <div class="text-[13px] leading-relaxed text-slate-700 dark:text-slate-300">
                                <span
                                    class="text-orange-600 dark:text-orange-500 font-bold uppercase mr-2">Desconexión:</span>
                                La última señal recibida fue el {{ $ultimoPing->format('d/m \a \l\a\s H:i') }} (Hace
                                {{ \Carbon\Carbon::parse($device['ultimo_ping'])->setTimezone('America/Lima')->locale('es')->diffForHumans()}}).
                            </div>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white dark:bg-[#131c25] rounded-xl border border-slate-200 dark:border-white/5 p-6 shadow-sm transition-colors">
                    <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-6">Especificaciones Técnicas
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
                        <div class="space-y-1">
                            <p class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-black tracking-wider">
                                MAC Address</p>
                            <p class="text-sm text-slate-900 dark:text-white font-mono uppercase">{{ $device['mac'] }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-black tracking-wider">
                                Última Carga</p>
                            <div class="flex items-center gap-3">
                                <span class="text-sm font-bold text-slate-900 dark:text-white">{{ $bateria }}%</span>
                                @if ($bateria <= 20)
                                    <span
                                        class="px-2 py-0.5 bg-red-100 dark:bg-red-500/20 text-[9px] text-red-600 dark:text-red-500 rounded font-bold border border-red-500/20 uppercase">Batería
                                        Baja</span>
                                @endif
                            </div>
                        </div>
                        <div class="space-y-1">
                            <p class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-black tracking-wider">
                                Referencia</p>
                            <p class="text-sm text-slate-900 dark:text-white font-semibold">Mesa 
                                {{ $device['mesa_nombre'] }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-12 lg:col-span-4 flex flex-col gap-6">

                <div
                    class="bg-red-50 dark:bg-[#2d363f]/40 p-5 rounded-xl border border-red-200 dark:border-red-500/30 flex items-center gap-5 shadow-xl transition-colors">
                    <div
                        class="w-12 h-12 bg-red-100 dark:bg-red-500/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-500 border border-red-200 dark:border-red-500/20">
                        <span class="material-symbols-outlined text-2xl">error_med</span>
                    </div>
                    <div>
                        <p class="text-[10px] text-red-600 dark:text-red-500 uppercase tracking-[0.2em] font-black mb-1">
                            Estado Crítico</p>
                        <p class="text-sm font-bold text-slate-900 dark:text-white leading-tight">Falla de conexión activa
                        </p>
                    </div>
                </div>

                <div
                    class="bg-white dark:bg-[#131c25] rounded-xl border border-slate-200 dark:border-white/5 overflow-hidden flex flex-col shadow-sm transition-colors">
                    <div class="p-5 border-b border-slate-100 dark:border-white/5 bg-slate-50 dark:bg-white/5">
                        <h3
                            class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-xl">info</span>
                            Ubicación del Dispositivo
                        </h3>
                    </div>
                    <div class="p-6 space-y-6">
                        <div class="space-y-4">
                            <div>
                                <p
                                    class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-black mb-1 tracking-wider">
                                    Empresa</p>
                                <p class="text-sm text-slate-900 dark:text-white font-medium">
                                    {{ $device['empresa_nombre'] }}</p>
                            </div>
                            <div>
                                <p
                                    class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-black mb-1 tracking-wider">
                                    Sucursal</p>
                                <p class="text-sm text-slate-900 dark:text-white font-medium">
                                    {{ $device['sucursal_nombre'] }}</p>
                            </div>
                            <div>
                                <p
                                    class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-black mb-1 tracking-wider">
                                    Ubicación Física</p>
                                <div class="flex items-center justify-between gap-2">
                                    <p class="text-sm text-slate-900 dark:text-white font-medium truncate">
                                        {{ $device['direccion'] }}</p>
                                    <button onclick="toggleMapModal()"
                                        class="shrink-0 flex items-center gap-1.5 text-[10px] font-bold text-primary hover:underline transition-colors uppercase tracking-widest">
                                        <span class="material-symbols-outlined text-sm">map</span> Ver Mapa
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="pt-6 border-t border-slate-100 dark:border-white/10">
                            <p
                                class="text-[10px] text-slate-400 dark:text-slate-500 uppercase font-black mb-4 tracking-wider">
                                Contacto Responsable</p>
                            <div
                                class="flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-[#060f18] border border-slate-200 dark:border-white/5">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-xs text-primary font-bold border border-primary/20">
                                        {{ substr($device['gerente_nombre'] ?? 'SN', 0, 2) }}
                                    </div>
                                    <div>
                                        <p
                                            class="text-sm text-slate-900 dark:text-white font-bold leading-tight line-clamp-1">
                                            {{ $device['gerente_nombre'] ?? 'Sin Asignar' }}</p>
                                        <p class="text-[10px] text-slate-500 uppercase font-medium">Gerente de Sede</p>
                                    </div>
                                </div>
                                @php $phone = $device['gerente_telefono'] ?? $device['sucursal_telefono']; @endphp
                                @if ($phone)
                                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $phone) }}" target="_blank"
                                        class="w-9 h-9 rounded-full bg-emerald-500 flex items-center justify-center text-white shadow-lg shadow-emerald-500/20 hover:scale-110 transition-transform">
                                        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                                            <path
                                                d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                                        </svg>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modals')
    <div id="mapModal"
        class="hidden fixed inset-0 z-[100] bg-slate-900/80 backdrop-blur-sm flex items-center justify-center p-4">
        <div
            class="bg-[#131c25] rounded-3xl border border-white/10 w-full max-w-4xl overflow-hidden shadow-2xl flex flex-col">
            <div class="p-5 border-b border-white/5 flex justify-between items-center bg-white/5">
                <div class="flex items-center gap-3 text-primary">
                    <span class="material-symbols-outlined">location_on</span>
                    <h3 class="text-white font-bold text-sm uppercase">Mapa: {{ $device['sucursal_nombre'] }}</h3>
                </div>
                <button onclick="toggleMapModal()"
                    class="size-8 flex items-center justify-center rounded-full hover:bg-white/10 text-slate-500 transition-all">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="h-[500px] w-full">
                <iframe width="100%" height="100%" frameborder="0"
                    style="border:0; filter: grayscale(0.5) contrast(1.1) invert(0.05);"
                    src="https://maps.google.com/maps?q={{ $device['latitud'] }},{{ $device['longitud'] }}&hl=es&z=16&output=embed"
                    allowfullscreen loading="lazy">
                </iframe>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function toggleMapModal() {
            const modal = document.getElementById('mapModal');
            modal.classList.toggle('hidden');
        }
    </script>
@endpush