<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'ATK'); ?></title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">

    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .glass-nav {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
        #logoutModal { transition: opacity 0.3s ease; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .toast-enter { transform: translateX(100%); opacity: 0; }
        .toast-visible { transform: translateX(0); opacity: 1; }

        #page-flip-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            pointer-events: none;
            perspective: 1400px;
        }
        #flip-page-left {
            position: absolute;
            top: 0; left: 0;
            width: 50%; height: 100%;
            background: #fff5f7;
            transform-origin: right center;
            transform: rotateY(0deg);
            backface-visibility: hidden;
            will-change: transform;
            transition: none;
        }
        #flip-page-right {
            position: absolute;
            top: 0; right: 0;
            width: 50%; height: 100%;
            background: #fff5f7;
            transform-origin: left center;
            transform: rotateY(0deg);
            backface-visibility: hidden;
            will-change: transform;
            transition: none;
        }
        #flip-spine {
            position: absolute;
            top: 0;
            left: calc(50% - 1px);
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(219, 39, 119, 0.25), transparent);
            opacity: 0;
            transition: opacity 0.1s;
        }
        #flip-page-left::after,
        #flip-page-right::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, transparent 60%, rgba(219, 39, 119, 0.08) 100%);
            pointer-events: none;
        }
        #flip-page-right::after {
            background: linear-gradient(to left, transparent 60%, rgba(219, 39, 119, 0.08) 100%);
        }
        #page-flip-overlay.flip-active #flip-page-left {
            transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
            transform: rotateY(-90deg);
        }
        #page-flip-overlay.flip-active #flip-page-right {
            transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.05s;
            transform: rotateY(90deg);
        }
        #page-flip-overlay.flip-active #flip-spine {
            opacity: 1;
        }
        @keyframes page-enter {
            from { opacity: 0; transform: scale(0.98); }
            to   { opacity: 1; transform: scale(1); }
        }
        .page-entered {
            animation: page-enter 0.35s ease forwards;
        }
    </style>
</head>

<body class="bg-[#fff5f7] text-slate-800 antialiased">

    
    <div id="global-loader" class="fixed inset-0 z-[9998] flex flex-col items-center justify-center bg-white/90 backdrop-blur-md transition-opacity duration-500">
        <div class="relative">
            <div class="w-20 h-20 rounded-full border-4 border-slate-100 border-t-pink-500 animate-spin"></div>
            <div class="absolute inset-0 m-auto w-12 h-12 rounded-full border-4 border-transparent border-t-slate-900 border-b-slate-900 animate-[spin_1.5s_linear_infinite_reverse]"></div>
            <div class="absolute inset-0 flex items-center justify-center">
                <i data-lucide="sparkles" class="w-6 h-6 text-pink-500 animate-pulse"></i>
            </div>
        </div>
        <div class="mt-6 flex flex-col items-center">
            <span class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400 animate-pulse">ATK</span>
        </div>
    </div>

    
    <div id="page-flip-overlay">
        <div id="flip-page-left"></div>
        <div id="flip-spine"></div>
        <div id="flip-page-right"></div>
    </div>

    
    <nav class="fixed top-6 left-1/2 -translate-x-1/2 w-[95%] max-w-7xl z-[100] glass-nav rounded-[32px] px-6 py-4 shadow-xl shadow-pink-100/50">
        <div class="flex items-center justify-between gap-8">

            
            <a href="<?php echo e(route('welcome')); ?>" class="flex items-center gap-2 group">
                <div class="w-10 h-10 bg-pink-500 rounded-2xl flex items-center justify-center shadow-lg shadow-pink-200 group-hover:rotate-12 transition-transform duration-300">
                    <i data-lucide="sparkles" class="w-6 h-6 text-white"></i>
                </div>
                <span class="text-xl font-black tracking-tighter text-slate-900 group-hover:text-pink-500 transition-colors">ATK</span>
            </a>

            
            <?php if(auth()->guard()->check()): ?>
            <div class="hidden md:flex items-center gap-2 bg-slate-100/50 p-1.5 rounded-2xl">

                <?php if(Auth::user()->role === 'admin'): ?>
                    <a href="<?php echo e(route('admin.dashboard')); ?>"
                       class="px-4 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('admin.dashboard') ? 'bg-slate-900 text-white shadow-md' : 'text-slate-500 hover:text-pink-600'); ?>">
                        <i data-lucide="layout-dashboard" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Dashboard</span>
                    </a>
                    <a href="<?php echo e(route('admin.financial.index')); ?>"
                       class="px-4 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('admin.financial.*') ? 'bg-white text-pink-600 shadow-sm' : 'text-slate-500 hover:text-pink-600'); ?>">
                        <i data-lucide="bar-chart-2" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Keuangan</span>
                    </a>
                    <a href="<?php echo e(route('admin.address.edit')); ?>"
                       class="px-4 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('admin.address.edit') ? 'bg-slate-900 text-white shadow-md' : 'text-slate-500 hover:text-pink-600'); ?>">
                        <i data-lucide="map-pin" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Lokasi Toko</span>
                    </a>
                    <a href="<?php echo e(route('admin.products.index')); ?>"
                       class="px-4 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('admin.products.*') ? 'bg-white text-pink-600 shadow-sm' : 'text-slate-500 hover:text-pink-600'); ?>">
                        <i data-lucide="package" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Produk</span>
                    </a>
                    <a href="<?php echo e(route('admin.categories.index')); ?>"
                       class="px-4 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('admin.categories.*') ? 'bg-white text-pink-600 shadow-sm' : 'text-slate-500 hover:text-pink-600'); ?>">
                        <i data-lucide="tag" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Kategori</span>
                    </a>
                    <a href="<?php echo e(route('admin.orders.index')); ?>"
                       class="px-4 py-2 rounded-xl transition flex items-center gap-2 relative
                       <?php echo e(request()->routeIs('admin.orders.*') ? 'bg-pink-600 text-white shadow-md' : 'text-slate-500 hover:text-pink-600'); ?>">
                        <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Pesanan</span>
                        <?php if(isset($pendingOrdersCount) && $pendingOrdersCount > 0): ?>
                            <span class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[8px] font-black text-white border border-white animate-pulse">
                                <?php echo e($pendingOrdersCount); ?>

                            </span>
                        <?php endif; ?>
                    </a>
                    
                    <a href="<?php echo e(route('admin.courier-salary.index')); ?>"
                       class="px-4 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('admin.courier-salary.*') ? 'bg-white text-pink-600 shadow-sm' : 'text-slate-500 hover:text-pink-600'); ?>">
                        <i data-lucide="wallet" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Gaji Kurir</span>
                    </a>

                <?php elseif(Auth::user()->role === 'courier'): ?>
                    <a href="<?php echo e(route('courier.dashboard')); ?>"
                       class="px-5 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('courier.dashboard') ? 'bg-slate-900 text-white shadow-md' : 'text-slate-500 hover:text-pink-500 hover:bg-white'); ?>">
                        <i data-lucide="layout-dashboard" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Dashboard</span>
                    </a>
                    
                    <a href="<?php echo e(route('courier.salary')); ?>"
                       class="px-5 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('courier.salary') ? 'bg-white text-pink-600 shadow-sm' : 'text-slate-500 hover:text-pink-500 hover:bg-white'); ?>">
                        <i data-lucide="wallet" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Gaji Saya</span>
                    </a>
                    <div class="px-4 py-2 rounded-xl bg-pink-50 border border-pink-100 flex items-center gap-2">
                        <i data-lucide="truck" class="w-4 h-4 text-pink-500"></i>
                        <span class="text-xs font-bold text-pink-500">Kurir Aktif</span>
                    </div>

                <?php else: ?>
                    <a href="<?php echo e(route('user.dashboard')); ?>"
                       class="px-5 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('user.dashboard') ? 'bg-white text-pink-600 shadow-sm' : 'text-slate-500 hover:text-pink-500'); ?>">
                        <i data-lucide="layout-dashboard" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Dashboard</span>
                    </a>
                    <a href="<?php echo e(route('user.products.index')); ?>"
                       class="px-5 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('user.products.*') ? 'bg-white text-pink-600 shadow-sm' : 'text-slate-500 hover:text-pink-500'); ?>">
                        <i data-lucide="shopping-bag" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Produk</span>
                    </a>
                    <a href="<?php echo e(route('user.orders.index')); ?>"
                       class="px-5 py-2 rounded-xl transition flex items-center gap-2
                       <?php echo e(request()->routeIs('user.orders.*') ? 'bg-white text-pink-600 shadow-sm' : 'text-slate-500 hover:text-pink-500'); ?>">
                        <i data-lucide="package" class="w-4 h-4"></i>
                        <span class="text-xs font-bold">Pesanan</span>
                    </a>
                <?php endif; ?>

            </div>
            <?php endif; ?>

            
            <?php if(auth()->guard()->check()): ?>
            <div class="flex items-center gap-4">

                
                <?php if(Auth::user()->role === 'user'): ?>
                <a href="<?php echo e(route('user.cart.index')); ?>"
                   class="relative group p-2.5 bg-slate-50 rounded-xl hover:bg-pink-50 transition-all duration-300 border border-transparent hover:border-pink-100 shadow-sm">
                    <i data-lucide="shopping-cart" class="w-5 h-5 text-slate-600 group-hover:text-pink-500 transition-colors"></i>
                    <?php if(session('cart') && count(session('cart')) > 0): ?>
                        <span class="absolute -top-1.5 -right-1.5 bg-pink-500 text-white text-[10px] font-black h-5 w-5 flex items-center justify-center rounded-full border-2 border-white shadow-sm animate-bounce">
                            <?php echo e(count(session('cart'))); ?>

                        </span>
                    <?php endif; ?>
                </a>
                <?php endif; ?>

                <div class="h-6 w-[1px] bg-slate-200 mx-1"></div>

                <button onclick="openLogoutModal()"
                    class="text-[10px] font-black uppercase tracking-widest text-slate-400 hover:text-red-500 transition">
                    Logout
                </button>

                <div class="h-8 w-[1px] bg-slate-200 hidden sm:block"></div>

                
                <?php if(Auth::user()->role === 'user'): ?>
                <a href="<?php echo e(route('user.profile.edit')); ?>" class="flex items-center gap-3 group">
                    <div class="text-right hidden sm:block">
                        <p class="text-[10px] font-black text-slate-900 leading-none group-hover:text-pink-500 transition"><?php echo e(Auth::user()->name); ?></p>
                        <p class="text-[9px] text-pink-500 font-bold uppercase mt-1">Member</p>
                    </div>
                    <img src="<?php echo e(Auth::user()->avatar ? asset('storage/' . Auth::user()->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode(Auth::user()->name) . '&background=fce7f3&color=db2777'); ?>"
                         class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm group-hover:ring-2 group-hover:ring-pink-300 transition-all">
                </a>
                <?php else: ?>
                <div class="flex items-center gap-3">
                    <div class="text-right hidden sm:block">
                        <p class="text-[10px] font-black text-slate-900 leading-none"><?php echo e(Auth::user()->name); ?></p>
                        <p class="text-[9px] text-pink-500 font-bold uppercase mt-1">
                            <?php echo e(Auth::user()->role === 'admin' ? 'Admin' : 'Kurir'); ?>

                        </p>
                    </div>
                    <img src="<?php echo e(Auth::user()->avatar ? asset('storage/' . Auth::user()->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode(Auth::user()->name) . '&background=fce7f3&color=db2777'); ?>"
                         class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm hover:rotate-3 transition-transform">
                </div>
                <?php endif; ?>

            </div>
            <?php endif; ?>
        </div>
    </nav>

    
    <main id="main-content" class="pt-32 pb-12 px-6 min-h-screen">
        <div class="max-w-7xl mx-auto">
            <?php echo $__env->yieldContent('content'); ?>
        </div>
    </main>

    
    <div id="notification-wrapper" class="fixed bottom-10 right-10 z-[9999] flex flex-col gap-4 pointer-events-none">
        <?php if(session('success')): ?>
            <div class="notification-item pointer-events-auto flex items-center gap-4 bg-white border-l-4 border-green-500 shadow-2xl rounded-2xl px-6 py-4 transition-all duration-500 transform translate-x-full opacity-0">
                <div class="w-10 h-10 bg-green-50 text-green-600 rounded-xl flex items-center justify-center shrink-0">
                    <i data-lucide="check-circle" class="w-6 h-6"></i>
                </div>
                <div class="pr-4">
                    <p class="text-[10px] font-black uppercase tracking-widest text-slate-400">Berhasil</p>
                    <p class="text-sm font-bold text-slate-800 leading-tight"><?php echo e(session('success')); ?></p>
                </div>
            </div>
        <?php endif; ?>

        <?php if(session('error') || $errors->any()): ?>
            <div class="notification-item pointer-events-auto flex items-center gap-4 bg-white border-l-4 border-red-500 shadow-2xl rounded-2xl px-6 py-4 transition-all duration-500 transform translate-x-full opacity-0">
                <div class="w-10 h-10 bg-red-50 text-red-600 rounded-xl flex items-center justify-center shrink-0">
                    <i data-lucide="alert-circle" class="w-6 h-6"></i>
                </div>
                <div class="pr-4">
                    <p class="text-[10px] font-black uppercase tracking-widest text-slate-400">Peringatan</p>
                    <p class="text-sm font-bold text-slate-800 leading-tight">
                        <?php if($errors->any()): ?> Harap periksa kembali inputan Anda.
                        <?php else: ?> <?php echo e(session('error')); ?>

                        <?php endif; ?>
                    </p>
                </div>
            </div>
        <?php endif; ?>
    </div>

    
    <?php if(auth()->guard()->check()): ?>
    <div id="logoutModal"
         class="fixed inset-0 hidden items-center justify-center bg-black/40 backdrop-blur-sm z-[999] opacity-0 transition-opacity duration-300">
        <div class="bg-white rounded-[28px] p-8 w-full max-w-sm shadow-2xl text-center transform scale-95 transition-transform duration-300" id="modalContent">
            <div class="w-14 h-14 mx-auto mb-4 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center">
                <i data-lucide="log-out" class="w-6 h-6"></i>
            </div>
            <h3 class="text-lg font-black text-slate-900 mb-1">Mau pergi sekarang?</h3>
            <p class="text-sm text-slate-500 mb-6 font-bold">Sampai jumpa lagi di ATK!</p>
            <div class="flex gap-3">
                <button onclick="closeLogoutModal()"
                        class="flex-1 py-2 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 transition font-bold uppercase text-[10px] tracking-widest">
                    Batal
                </button>
                <form action="<?php echo e(route('logout')); ?>" method="POST" class="flex-1" id="logoutForm">
                    <?php echo csrf_field(); ?>
                    <button type="submit"
                            class="w-full py-2 rounded-xl bg-pink-500 text-white font-bold hover:bg-pink-600 shadow-lg shadow-pink-100 transition uppercase text-[10px] tracking-widest">
                        Keluar
                    </button>
                </form>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <script>
    const loader = document.getElementById('global-loader');
    window.addEventListener('load', () => {
        loader.classList.add('opacity-0');
        setTimeout(() => loader.classList.add('hidden'), 500);
    });

    const overlay   = document.getElementById('page-flip-overlay');
    const pageLeft  = document.getElementById('flip-page-left');
    const pageRight = document.getElementById('flip-page-right');
    let isFlipping  = false;

    function triggerFlip(href) {
        if (isFlipping) return;
        isFlipping = true;
        pageLeft.style.opacity  = '1';
        pageRight.style.opacity = '1';
        overlay.style.pointerEvents = 'all';
        requestAnimationFrame(() => {
            overlay.classList.add('flip-active');
            setTimeout(() => { window.location.href = href; }, 240);
        });
    }

    document.addEventListener('click', function (e) {
        const link = e.target.closest('a');
        if (!link) return;
        const href = link.getAttribute('href');
        if (!href) return;
        if (
            href.startsWith('#') ||
            href.startsWith('javascript:') ||
            href.startsWith('http') ||
            href.startsWith('mailto:') ||
            link.getAttribute('target') === '_blank'
        ) return;
        e.preventDefault();
        triggerFlip(href);
    });

    document.addEventListener('submit', function (e) {
        const form = e.target;
        if (form.id === 'logoutForm') return;
        if (isFlipping) return;
        isFlipping = true;
        pageLeft.style.opacity  = '1';
        pageRight.style.opacity = '1';
        overlay.style.pointerEvents = 'all';
        requestAnimationFrame(() => { overlay.classList.add('flip-active'); });
    });

    window.addEventListener('pageshow', function () {
        isFlipping = false;
        overlay.classList.remove('flip-active');
        overlay.style.pointerEvents = 'none';
        pageLeft.style.opacity  = '0';
        pageRight.style.opacity = '0';
        const main = document.getElementById('main-content');
        if (main) {
            main.classList.add('page-entered');
            main.addEventListener('animationend', () => main.classList.remove('page-entered'), { once: true });
        }
    });

    document.addEventListener('DOMContentLoaded', () => {
        const toasts = document.querySelectorAll('.notification-item');
        toasts.forEach((toast, index) => {
            setTimeout(() => {
                toast.classList.remove('translate-x-full', 'opacity-0');
                toast.classList.add('translate-x-0', 'opacity-100');
            }, 100 * (index + 1));
            setTimeout(() => {
                toast.classList.remove('translate-x-0', 'opacity-100');
                toast.classList.add('translate-x-full', 'opacity-0');
                setTimeout(() => toast.remove(), 500);
            }, 5000);
        });
        lucide.createIcons();
    });

    function openLogoutModal() {
        const modal   = document.getElementById('logoutModal');
        const content = document.getElementById('modalContent');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        setTimeout(() => {
            modal.classList.add('opacity-100');
            content.classList.remove('scale-95');
            content.classList.add('scale-100');
        }, 10);
    }

    function closeLogoutModal() {
        const modal   = document.getElementById('logoutModal');
        const content = document.getElementById('modalContent');
        modal.classList.remove('opacity-100');
        content.classList.remove('scale-100');
        content.classList.add('scale-95');
        setTimeout(() => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }, 300);
    }
    </script>

</body>
</html><?php /**PATH C:\laragon\www\SwiftCart\resources\views/layouts/app.blade.php ENDPATH**/ ?>