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

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

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <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="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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

    <link rel="preload" as="image" href="{{ asset('assets/new-asset/asset-sample-plossa.webp') }}">
    <link rel="preload" as="image" href="{{ asset('assets/new-asset/bg-mobile.webp') }}" fetchpriority="high">

    <style>
        a {
            text-decoration: none !important;
        }

        body {
            background-color: #fff;
            font-family: 'Poppins', sans-serif;
        }

        /* BACKGROUND */
        .bg-pattern {
            background: url('{{ asset('assets/new-asset/bg-mobile.webp') }}') no-repeat center top;
            background-size: cover;
        }

        /* ✅ header sticky + z-index bener (biar gak random di tablet) */
        .mobile-header {
            position: sticky;
            top: 0;
            z-index: 1020;
            background: #fff;
        }

        /* container wajib punya stacking context aman */
        .page-wrap {
            position: relative;
            z-index: 1;
        }

        .btn-round {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid #000;
            background: #fff;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-round.active {
            background-color: #00A6FF;
            color: #fff;
            border-color: #00A6FF;
        }

        .btn-checkout {
            width: 100%;
            background-color: #00A6FF;
            color: #fff;
            font-weight: 600;
            font-size: 20px;
            padding: 15px;
            border-radius: 17px;
        }

        .preview-box {
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
            aspect-ratio: 16 / 10;
            margin: 20px auto;
            position: relative;
            background-size: cover;
            background-position: center;
        }

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

        .tab-button {
            border: 2px solid #29B4FF;
            background-color: white;
            color: #000;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
        }

        .tab-button.active {
            background-color: #29B4FF;
            color: white;
        }

        #previewLabelLayer {
            position: absolute !important;
            width: 100%;
            aspect-ratio: 16 / 10;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 5;
        }

        #previewHeading,
        #previewSubtitle,
        #captureHeading,
        #captureSubtitle {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            z-index: 2;
        }

        #previewHeading,
        #previewSubtitle {
            position: absolute;
            width: 100%;
            text-align: center;
            color: white;
        }

        #previewHeading {
            top: 50%;
            font-size: 25px;
        }

        #previewSubtitle {
            top: 62%;
            font-size: 15px;
        }

        #previewHeadingStroke,
        #captureHeadingStroke {
            position: absolute;
            width: 100%;
            text-align: center;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            z-index: 1;
            color: transparent;
            -webkit-text-stroke-width: 5px;
            -webkit-text-stroke-color: #000;
            text-shadow: none;
            pointer-events: none;
            user-select: none;
        }

        #previewSubtitleStroke,
        #captureSubtitleStroke {
            position: absolute;
            width: 100%;
            text-align: center;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            z-index: 1;
            color: transparent;
            -webkit-text-stroke-width: 4px;
            -webkit-text-stroke-color: #000;
            text-shadow: none;
            pointer-events: none;
            user-select: none;
        }

        #previewHeadingStroke {
            top: 50%;
            font-size: 25px;
        }

        #previewSubtitleStroke {
            top: 62%;
            font-size: 15px;
        }

        #finalCaptureArea {
            position: fixed;
            top: -10000px;
            left: -10000px;
            margin-top: 20px;
            width: 100%;
            aspect-ratio: 16 / 10;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            background-size: cover;
            background-position: center;
        }

        #captureLabelLayer {
            position: absolute !important;
            width: 100%;
            aspect-ratio: 16 / 10;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 5;
        }

        #canvasTemplateWrapper {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        #captureHeading,
        #captureSubtitle {
            position: absolute;
            width: 100%;
            text-align: center;
            color: white;
            text-shadow: 1px 1px 2px black;
        }

        #captureHeading {
            top: 50%;
            font-size: 25px;
        }

        #captureSubtitle {
            top: 62%;
            font-size: 15;
        }

        .color-input,
        .size-input {
            width: 100%;
            margin-top: 5px;
        }

        .template-button {
            border: none;
            background: none;
            padding: 5px;
        }

        .template-button img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }

        .overlay-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .text-layer {
            position: absolute;
            z-index: 2;
            width: 100%;
            text-align: center;
        }

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

        @media (max-width: 380px) {
            .user-name {
                display: none;
            }
        }

        /* ✅ GLOBAL TABLET POLISH */
        @media (min-width: 768px) and (max-width: 1199.98px) {

            body {
                font-size: 16px;
            }

            .container {
                max-width: 720px;
                /* nyaman di tablet */
            }

            .btn {
                padding: .45rem .75rem;
                font-size: .95rem;
            }

            .btn-checkout {
                font-size: 18px;
                padding: 14px;
            }

            .card-body {
                padding: 1rem;
            }

            .table td,
            .table th {
                padding: .55rem;
                vertical-align: middle;
            }

            /* ✅ jaga-jaga kalau ada dekorasi overlay random */
            img.position-absolute {
                pointer-events: none;
            }
        }
    </style>

    @stack('styles')
</head>

<body class="bg-pattern">

    {{-- Header --}}
    <div class="w-100 py-3 px-3 shadow-sm mobile-header">
        <div class="row align-items-center">
            <div class="col-3 d-flex align-items-center">
                @if (!Request::is('/'))
                    <a href="javascript:history.back()" class="text-dark">
                        <i class="fa-solid fa-arrow-left" style="font-size:20px;"></i>
                    </a>
                @else
                    <span style="width:20px;"></span>
                @endif
            </div>

            <div class="col-6 text-center">
                <a href="{{ route('index') }}">
                    <img src="{{ env('LOGO_IMG') }}" alt="Plossa" style="height:15px; object-fit:contain;">
                </a>
            </div>

            @php
                $isLoggedIn = session()->has('token');
                $displayName = session('name');
                $initials = $displayName
                    ? collect(explode(' ', trim($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">
                <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>

                @if (request()->routeIs('*template*'))
                    <a href="#" id="startEditorTourMobile" class="text-dark" title="Panduan Editor">
                        <i class="fa-solid fa-circle-info" style="font-size:20px;"></i>
                    </a>
                @endif

                @if ($isLoggedIn && $initials)
                    <div class="dropdown user-menu">
                        <span class="dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown"
                            aria-expanded="false" style="cursor:pointer;">
                            <span class="avatar-initial">{{ $initials }}</span>
                        </span>
                        <ul class="dropdown-menu">
                            <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)
                    <a href="{{ route('login.page', ['nexturl' => url()->full()]) }}"
                        class="btn-icon d-inline-flex d-md-none" aria-label="Login">
                        <i class="fa-solid fa-user"></i>
                    </a>
                @endif
            </div>
        </div>
    </div>

    @yield('background')

    <div class="container pt-2 page-wrap">
        @yield('content')
    </div>

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