<!DOCTYPE html>
<html lang="id" class="h-full bg-gray-50">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Teknisi') — Service Center</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            50:  '#eff6ff',
                            100: '#dbeafe',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                        }
                    }
                }
            }
        }
    </script>

    {{-- Alpine.js --}}
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>

    {{-- SweetAlert2 --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        const AppToast = Swal.mixin({
            toast: true, position: 'top-end',
            showConfirmButton: false, timerProgressBar: true,
            timer: 3500,
            didOpen: t => { t.onmouseenter = Swal.stopTimer; t.onmouseleave = Swal.resumeTimer; }
        });
        window.showSuccess = msg => AppToast.fire({ icon: 'success', title: msg });
        window.showError   = msg => AppToast.fire({ icon: 'error',   title: msg, timer: 5500 });
        window.showInfo    = msg => AppToast.fire({ icon: 'info',    title: msg });
    </script>

    <style>
        [x-cloak] { display: none !important }

        @media (max-width: 420px) {
            .mobile-compact .text-lg {
                font-size: 1rem;
                line-height: 1.35rem;
            }

            .mobile-compact .text-sm {
                font-size: 0.8125rem;
                line-height: 1.15rem;
            }

            .mobile-compact .text-xs {
                font-size: 0.7rem;
                line-height: 1rem;
            }
        }
    </style>

    @stack('head')
</head>
<body class="h-full bg-gray-100 text-[12px] sm:text-[13px] mobile-compact" x-data>

{{-- ── Mobile App Bar ─────────────────────────────────── --}}
<header class="sticky top-0 z-40 bg-emerald-700 text-white shadow-md">
    <div class="max-w-md mx-auto px-4 py-3 flex items-center justify-between">
        <div class="min-w-0">
            <p class="text-[11px] uppercase tracking-wider text-emerald-100">Service App</p>
            <h1 class="text-sm font-bold truncate">Panel Teknisi</h1>
        </div>
        <div class="flex items-center gap-2">
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500">Teknisi</span>
            @auth
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-emerald-600 hover:bg-emerald-500 transition" title="Keluar">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                    </svg>
                </button>
            </form>
            @endauth
        </div>
    </div>
</header>

{{-- ── Flash messages ───────────────────────────────────── --}}
<div class="max-w-md mx-auto px-4 pt-4"></div>

<main class="max-w-md mx-auto px-4 pb-24">
    @yield('content')
</main>

{{-- ── Bottom Tab Navigation ─────────────────────────── --}}
<nav class="fixed bottom-0 inset-x-0 z-40 bg-white border-t border-gray-200 shadow-[0_-6px_20px_rgba(0,0,0,0.06)]">
    <div class="max-w-md mx-auto grid grid-cols-4">
        <a href="{{ route('technician.home') }}"
           class="flex flex-col items-center justify-center py-2 text-[11px] font-semibold transition {{ request()->routeIs('technician.home') ? 'text-emerald-700 bg-emerald-50' : 'text-gray-500 hover:bg-gray-50' }}">
            <svg class="w-4 h-4 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10l9-7 9 7v10a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1V10z"/>
            </svg>
            Home
        </a>
        <a href="{{ route('technician.tickets.index') }}"
           class="flex flex-col items-center justify-center py-2 text-[11px] font-semibold transition {{ request()->routeIs('technician.tickets.index') || request()->routeIs('technician.book') ? 'text-emerald-700 bg-emerald-50' : 'text-gray-500 hover:bg-gray-50' }}">
            <svg class="w-4 h-4 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/>
            </svg>
            List
        </a>
        <a href="{{ route('technician.scanner') }}"
           class="flex flex-col items-center justify-center py-2 text-[11px] font-semibold transition {{ request()->routeIs('technician.scanner') || request()->routeIs('technician.scanner.manual') ? 'text-emerald-700 bg-emerald-50' : 'text-gray-500 hover:bg-gray-50' }}">
            <svg class="w-4 h-4 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4"/>
            </svg>
            Scan
        </a>
        <a href="{{ route('technician.sop') }}"
           class="flex flex-col items-center justify-center py-2 text-[11px] font-semibold transition {{ request()->routeIs('technician.sop') ? 'text-emerald-700 bg-emerald-50' : 'text-gray-500 hover:bg-gray-50' }}">
            <svg class="w-4 h-4 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.483 9.246 5 7.5 5 4.462 5 2 6.343 2 8v10c0-1.657 2.462-3 5.5-3 1.746 0 3.332.483 4.5 1.253m0-10C13.168 5.483 14.754 5 16.5 5c3.038 0 5.5 1.343 5.5 3v10c0-1.657-2.462-3-5.5-3-1.746 0-3.332.483-4.5 1.253"/>
            </svg>
            SOP
        </a>
    </div>
</nav>

{{-- ── SweetAlert2 session flash triggers ──── --}}
@if(session('success'))
<script>document.addEventListener('DOMContentLoaded', () => window.showSuccess(@js(session('success'))));</script>
@endif
@if(session('error'))
<script>document.addEventListener('DOMContentLoaded', () => window.showError(@js(session('error'))));</script>
@endif
@if(! session('success') && ! session('error') && $errors->any())
<script>
document.addEventListener('DOMContentLoaded', () => {
    const errs = @js($errors->all());
    const msg  = errs[0] + (errs.length > 1 ? ` (+${errs.length - 1} lainnya)` : '');
    window.showError(msg);
});
</script>
@endif

@stack('scripts')
</body>
</html>
