<!DOCTYPE html>
<html lang="id" class="h-full bg-gray-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Admin') — {{ \App\Models\Setting::get('company_name') }}</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>

    @stack('head')
</head>
<body class="h-full bg-gray-100" x-data="{ sidebarOpen: false }">
@php
    $authUser = auth()->user();
    $roleLabel = match ($authUser?->role) {
        'admin' => 'Admin',
        'cashier' => 'Kasir',
        'technician' => 'Teknisi',
        'courier' => 'Kurir',
        default => 'User',
    };
    $isAdmin = $authUser?->isAdmin();
    $canBilling = $authUser?->hasRole(['admin', 'cashier']);
    $menuClass = 'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition';
    $menuActive = 'bg-brand-100 text-brand-700';
    $menuIdle = 'text-gray-600 hover:bg-gray-100 hover:text-gray-900';
@endphp

<div class="min-h-screen flex">
    {{-- Mobile backdrop --}}
    <div x-show="sidebarOpen" x-transition.opacity class="fixed inset-0 z-30 bg-black/30 lg:hidden" @click="sidebarOpen = false"></div>

    {{-- Sidebar --}}
    <aside class="fixed lg:static inset-y-0 left-0 z-40 w-72 bg-white border-r border-gray-200 shadow-sm transform transition-transform duration-200 lg:translate-x-0"
           :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
        <div class="h-16 px-4 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-3 min-w-0">
                <div class="w-9 h-9 rounded-lg bg-brand-600 text-white grid place-items-center font-bold">SC</div>
                <div class="min-w-0">
                    <p class="text-sm font-semibold text-gray-900 truncate">{{ \App\Models\Setting::get('company_name') }}</p>
                    <p class="text-xs text-gray-500">Role: {{ $roleLabel }}</p>
                </div>
            </div>
            <button class="lg:hidden text-gray-500" @click="sidebarOpen = false">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <div class="p-4 overflow-y-auto h-[calc(100vh-4rem)]">
            <p class="text-[11px] uppercase tracking-wider text-gray-400 font-semibold mb-2">Operasional</p>
            @if($isAdmin)
            <a href="{{ route('admin.tickets.index') }}" class="{{ $menuClass }} {{ request()->routeIs('admin.tickets.*') ? $menuActive : $menuIdle }}">
                <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/></svg>
                Service Tickets
            </a>
            <a href="{{ route('tickets.create') }}" class="{{ $menuClass }} {{ request()->routeIs('tickets.create') ? $menuActive : $menuIdle }}">
                <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="M12 4v16m8-8H4"/></svg>
                Tiket Baru
            </a>
            @endif

            @if($canBilling)
            <p class="text-[11px] uppercase tracking-wider text-gray-400 font-semibold mt-5 mb-2">Billing</p>
            <a href="{{ route('admin.invoices.index') }}" class="{{ $menuClass }} {{ request()->routeIs('admin.invoices.*') ? $menuActive : $menuIdle }}">
                <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="M9 14l2-2 4 4m6-10v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2h4l2 2h8a2 2 0 012 2z"/></svg>
                Invoice
            </a>
            <a href="{{ route('admin.customers.index') }}" class="{{ $menuClass }} {{ request()->routeIs('admin.customers.*') ? $menuActive : $menuIdle }}">
                <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 20h5V4H2v16h5m10 0v-2a4 4 0 00-8 0v2m8 0H9m4-10a4 4 0 110-8 4 4 0 010 8z"/></svg>
                Pelanggan
            </a>
            @endif

            @if($isAdmin)
            <p class="text-[11px] uppercase tracking-wider text-gray-400 font-semibold mt-5 mb-2">Manajemen</p>
            <a href="{{ route('admin.reports.index') }}" class="{{ $menuClass }} {{ request()->routeIs('admin.reports.*') ? $menuActive : $menuIdle }}">
                <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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                Laporan
            </a>
            <a href="{{ route('admin.users.index') }}" class="{{ $menuClass }} {{ request()->routeIs('admin.users.*') ? $menuActive : $menuIdle }}">
                <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197"/></svg>
                Users
            </a>
            <a href="{{ route('admin.settings.index') }}" class="{{ $menuClass }} {{ request()->routeIs('admin.settings.*') ? $menuActive : $menuIdle }}">
                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0"/></svg>
                Pengaturan
            </a>
            @endif

            @auth
            <div class="mt-6 pt-4 border-t border-gray-100">
                <p class="text-xs text-gray-500">Login sebagai</p>
                <p class="text-sm font-semibold text-gray-900 truncate">{{ auth()->user()->name }}</p>
                <p class="text-xs text-gray-400 capitalize mb-3">{{ auth()->user()->role }}</p>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="w-full {{ $menuClass }} justify-center bg-red-50 text-red-600 hover:bg-red-100">
                        <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>
                        Keluar
                    </button>
                </form>
            </div>
            @endauth
        </div>
    </aside>

    {{-- Content area --}}
    <div class="flex-1 min-w-0">
        <header class="h-16 bg-white border-b border-gray-200 px-4 sm:px-6 flex items-center justify-between sticky top-0 z-20">
            <div class="flex items-center gap-3">
                <button class="lg:hidden text-gray-600" @click="sidebarOpen = true">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                </button>
                <div>
                    <p class="text-xs uppercase tracking-wider text-gray-400">ERP Panel</p>
                    <h1 class="text-sm sm:text-base font-semibold text-gray-900">@yield('title', 'Dashboard')</h1>
                </div>
            </div>
            <p class="text-xs text-gray-500 hidden sm:block">{{ now()->format('d M Y H:i') }}</p>
        </header>

        <main class="p-4 sm:p-6 lg:p-8">
            @yield('content')
        </main>
    </div>
</div>

{{-- ── 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>
