<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8" />
    <title>{{ $title ?? 'Plossa Experience' }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- ✅ favicon --}}
    <link rel="icon" type="image/x-icon" href="{{ asset('assets/favicon.ico') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    <link rel="preload" href="/fonts/ColumbiaSerial-RegularItalic.ttf" as="font" type="font/ttf"
        crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css" />

    <style>
        body {
            background: #fff;
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        @font-face {
            font-family: 'ColumbiaSerial';
            src: url('/fonts/ColumbiaSerial-RegularItalic.ttf') format('truetype');
            font-display: swap;
        }

        /* header */
        .app-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: #fff;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
        }

        .app-header .row {
            height: 60px
        }

        .header-center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header-center img {
            height: 15px;
            object-fit: contain
        }

        .container-desktop {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 12px 60px 12px;
            position: relative;
        }

        /* avatar initial */
        .avatar-initial {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #f0f2f5;
            color: #111;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 12px;
        }
    </style>

    @stack('styles')
</head>

<body class="bg-pattern">

    {{-- HEADER --}}
    <div class="app-header">
        <div class="container-fluid px-4">
            <div class="row align-items-center">
                {{-- kiri: back (hanya jika bukan /) --}}
                <div class="col-3 d-flex align-items-center">
                    @if (!Request::is('/'))
                        <a href="javascript:history.back()" class="text-dark" title="Back">
                            <i class="fa-solid fa-arrow-left" style="font-size:20px;"></i>
                        </a>
                    @else
                        <span style="width:20px;"></span>
                    @endif
                </div>

                {{-- tengah: logo --}}
                <div class="col-6 position-relative">
                    <div class="header-center">
                        <a href="{{ route('index') }}">
                            <img src="{{ env('LOGO_IMG') }}" alt="Plossa" />
                        </a>
                    </div>
                </div>

                {{-- kanan --}}
                @php
                    $isLoggedIn = session()->has('token');
                    $displayName = trim((string) session('name'));
                    $initials = collect(explode(' ', $displayName))
                        ->filter()
                        ->take(2)
                        ->map(fn($p) => mb_strtoupper(mb_substr($p, 0, 1)))
                        ->implode('');
                    $routeName = optional(request()->route())->getName() ?? '';
                    $onAuthPage = Str::contains($routeName, ['login', 'register']);

                @endphp
                <div class="col-3 d-flex justify-content-end align-items-center gap-3">
                    {{-- Cart selalu tampil --}}
                    <a href="{{ route('cart.show') }}" class="position-relative" title="Cart">
                        <img src="{{ asset('assets/shopping_cart.png') }}" alt="Cart" style="width:20px;">
                        @if (!empty($totalQty ?? 0))
                            <span
                                class="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-danger"
                                style="font-size:10px;">
                                {{ $totalQty }}
                            </span>
                        @endif
                    </a>

                    {{-- Info tampil di editor --}}
                    @if (Str::contains($routeName, ['template', 'editor']))
                        <a href="#" id="startEditorTour" class="text-dark" title="Panduan Editor">
                            <i class="fa-solid fa-circle-info" style="font-size:20px;"></i>
                        </a>
                    @endif

                    {{-- Avatar saat login --}}
                    {{-- Avatar saat login / tombol login --}}
                    @if ($isLoggedIn && $initials)
                        <div class="dropdown">
                            <a class="d-flex align-items-center text-dark dropdown-toggle" href="#" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="avatar-initial">{{ $initials }}</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="{{ route('orders.index') }}">
                                        📦 My Orders
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <form action="{{ route('logout') }}" method="POST">
                                        @csrf
                                        <button type="submit" class="dropdown-item text-danger">
                                            <i class="fa-solid fa-right-from-bracket"></i> Logout
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    @elseif (!$onAuthPage)
                        {{-- Kalau belum login --}}
                        <a href="{{ route('login.page') }}" class="btn btn-sm btn-primary rounded-pill px-3">Login</a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- spacer untuk header fixed --}}
    <div style="height:60px;"></div>

    {{-- background dinamis (SEKARANG mulai setelah header) --}}
    @yield('background')

    {{-- konten utama --}}
    <div class="container-desktop">
        @yield('content')
    </div>

    {{-- scripts --}}
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    @stack('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @include('sweetalert::alert')
    @stack('modals')

</body>

</html>
