<!DOCTYPE html>
<html class="light" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo $__env->yieldContent('title', 'Saai Cards - Management System'); ?></title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com" rel="preconnect"/>
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
    
    <!-- Material Symbols -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "error": "#ba1a1a",
                        "surface-variant": "#d3e4fe",
                        "on-secondary-fixed": "#131b2e",
                        "primary-container": "#2563eb",
                        "inverse-on-surface": "#eaf1ff",
                        "on-primary": "#ffffff",
                        "background": "#f8f9ff",
                        "surface-container-low": "#eff4ff",
                        "inverse-primary": "#b4c5ff",
                        "on-tertiary-container": "#ffede6",
                        "tertiary": "#943700",
                        "on-primary-fixed": "#00174b",
                        "on-secondary-container": "#5c647a",
                        "outline": "#737686",
                        "on-tertiary-fixed-variant": "#7d2d00",
                        "tertiary-container": "#bc4800",
                        "secondary": "#565e74",
                        "on-surface-variant": "#434655",
                        "inverse-surface": "#213145",
                        "outline-variant": "#c3c6d7",
                        "primary-fixed": "#dbe1ff",
                        "on-secondary-fixed-variant": "#3f465c",
                        "on-secondary": "#ffffff",
                        "surface-container": "#e5eeff",
                        "on-surface": "#0b1c30",
                        "on-error": "#ffffff",
                        "error-container": "#ffdad6",
                        "tertiary-fixed": "#ffdbcd",
                        "surface-bright": "#f8f9ff",
                        "on-tertiary-fixed": "#360f00",
                        "surface-dim": "#cbdbf5",
                        "surface": "#f8f9ff",
                        "secondary-container": "#dae2fd",
                        "surface-tint": "#0053db",
                        "on-tertiary": "#ffffff",
                        "on-primary-fixed-variant": "#003ea8",
                        "on-background": "#0b1c30",
                        "secondary-fixed-dim": "#bec6e0",
                        "surface-container-high": "#dce9ff",
                        "secondary-fixed": "#dae2fd",
                        "surface-container-highest": "#d3e4fe",
                        "primary": "#004ac6",
                        "primary-fixed-dim": "#b4c5ff",
                        "on-primary-container": "#eeefff",
                        "tertiary-fixed-dim": "#ffb596",
                        "on-error-container": "#93000a",
                        "surface-container-lowest": "#ffffff"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "margin-mobile": "16px",
                        "2xl": "48px",
                        "lg": "24px",
                        "sm": "12px",
                        "xs": "8px",
                        "container-max": "1440px",
                        "md": "16px",
                        "xl": "32px",
                        "base": "4px",
                        "gutter": "24px"
                    },
                    "fontFamily": {
                        "label-md": ["Inter"],
                        "headline-sm": ["Inter"],
                        "display-lg-mobile": ["Inter"],
                        "body-md": ["Inter"],
                        "label-sm": ["Inter"],
                        "body-lg": ["Inter"],
                        "headline-md": ["Inter"],
                        "display-lg": ["Inter"]
                    },
                    "fontSize": {
                        "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
                        "headline-sm": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
                        "display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
                        "body-md": ["14px", {"lineHeight": "22px", "fontWeight": "400"}],
                        "label-sm": ["11px", {"lineHeight": "14px", "fontWeight": "600"}],
                        "body-lg": ["16px", {"lineHeight": "26px", "fontWeight": "400"}],
                        "headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
                        "display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
                    }
                },
            },
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .neat-shadow, .custom-shadow, .ambient-shadow, .master-card {
            box-shadow: 0px 1px 3px rgba(0,0,0,0.05), 0px 10px 15px -3px rgba(0,0,0,0.08);
        }
        /* Custom scrollbar */
        .custom-scrollbar::-webkit-scrollbar, ::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb { background: #dbe1ff; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
        
        .toggle-checkbox:checked + .toggle-label { background-color: #2563eb; }
        .toggle-checkbox:checked + .toggle-label:after { left: calc(100% - 2px); transform: translateX(-100%); }
        .toggle-label:after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: white; border-radius: 90px; transition: 0.3s; }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #2563eb !important;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
        }
        
        /* Select2 Tailwind Overrides */
        .select2-container .select2-selection--single {
            height: 42px !important;
            border: 1px solid rgba(195, 198, 215, 0.5) !important;
            border-radius: 0.5rem !important;
            background-color: #f8f9ff !important;
            font-size: 0.875rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #1a1b21 !important;
            line-height: 40px !important;
            padding-left: 1rem !important;
            padding-right: 2rem !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
            right: 0.5rem !important;
            top: 1px !important;
        }
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #2563eb !important;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
        }
        .select2-dropdown {
            border: 1px solid rgba(195, 198, 215, 0.5) !important;
            border-radius: 0.5rem !important;
            box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.08) !important;
            overflow: hidden;
            z-index: 9999 !important;
        }
        .select2-results__option {
            padding: 0.5rem 1rem !important;
            font-size: 0.875rem;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #2563eb !important;
        }
        .select2-search--dropdown .select2-search__field {
            border: 1px solid rgba(195, 198, 215, 0.5) !important;
            border-radius: 0.25rem !important;
            padding: 0.3rem 0.5rem !important;
        }
        
        /* Global DataTables Tailwind Overrides (Neat UI) */
        .dataTables_wrapper .dataTables_length { margin-bottom: 1.5rem; padding-left: 0.5rem; }
        .dataTables_wrapper .dataTables_length label { 
            display: inline-flex; align-items: center; gap: 0.75rem; 
            font-size: 0.875rem; color: #64748b; font-weight: 500; white-space: nowrap;
        }
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.5rem 2rem 0.5rem 1rem;
            background-color: #f8fafc; font-size: 0.875rem; color: #0f172a; font-weight: 600;
            cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
            min-width: 80px; text-align: center;
        }
        .dataTables_wrapper .dataTables_length select:hover { border-color: #cbd5e1; }
        
        .dataTables_wrapper .dataTables_filter { margin-bottom: 1.5rem; padding-right: 0.5rem; }
        .dataTables_wrapper .dataTables_filter label { 
            display: inline-flex; align-items: center; gap: 0.75rem; 
            font-size: 0.875rem; color: #64748b; font-weight: 500;
        }
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.4rem 1rem;
            background-color: #f8fafc; font-size: 0.875rem; color: #0f172a; outline: none;
            min-width: 200px; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        }
        .dataTables_wrapper .dataTables_filter input:focus {
            background-color: white; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .dataTables_wrapper .dataTables_info {
            padding-top: 1.5rem; padding-left: 0.5rem; font-size: 0.875rem; color: #64748b; font-weight: 500;
        }
        
        .dataTables_wrapper .dataTables_paginate {
            padding-top: 1.5rem; padding-right: 0.5rem; display: flex; align-items: center; gap: 0.25rem;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.35rem 0.85rem !important; margin: 0 !important; border-radius: 0.5rem !important;
            border: 1px solid transparent !important; background: transparent !important; color: #64748b !important;
            font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #f1f5f9 !important; color: #0f172a !important; border-color: transparent !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            opacity: 0.4; cursor: not-allowed; background: transparent !important;
        }
        
        /* Make sure table header looks clean */
        table.dataTable thead th { border-bottom: 2px solid #f1f5f9; padding: 1rem; color: #64748b; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
        table.dataTable.no-footer { border-bottom: 1px solid #f1f5f9; }

        
        .whitespace-nowrap { white-space: nowrap; }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body class="bg-background text-on-background min-h-screen overflow-x-hidden">
    <!-- SideNavBar Anchor -->
    <aside class="w-64 h-screen fixed left-0 top-0 bg-surface-container-lowest dark:bg-surface-container-low shadow-sm dark:shadow-none z-30 transition-transform duration-200 ease-in-out flex flex-col py-lg px-md custom-scrollbar overflow-y-auto" id="sidebar">
        <div class="mb-xl px-sm flex items-center gap-xs">
            <span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">print</span>
            <div>
                <h1 class="font-headline-sm text-headline-sm font-bold text-primary dark:text-primary-fixed leading-tight">Saai Cards</h1>
                <p class="text-[10px] uppercase tracking-wider text-secondary font-semibold">Management System</p>
            </div>
        </div>
        
        <nav class="flex-grow space-y-1">
            <!-- Dashboard -->
            <a href="<?php echo e(route('dashboard')); ?>" class="flex items-center gap-md p-md rounded-lg transition-colors duration-200 <?php echo e(request()->is('/') ? 'text-primary font-bold border-r-4 border-primary bg-surface-container' : 'text-secondary hover:bg-surface-container'); ?>">
                <span class="material-symbols-outlined" <?php echo request()->is('/') ? 'style="font-variation-settings: \'FILL\' 1;"' : ''; ?>>dashboard</span>
                <span class="font-label-md text-label-md">Dashboard</span>
            </a>
            
            <!-- Bookings -->
            <a href="<?php echo e(route('bookings.index')); ?>" class="flex items-center gap-md p-md rounded-lg transition-colors duration-200 <?php echo e(request()->is('bookings*') ? 'text-primary font-bold border-r-4 border-primary bg-surface-container' : 'text-secondary hover:bg-surface-container group'); ?>">
                <span class="material-symbols-outlined" <?php echo request()->is('bookings*') ? 'style="font-variation-settings: \'FILL\' 1;"' : ''; ?>>calendar_today</span>
                <span class="font-label-md text-label-md">Quotation Booking</span>
            </a>

            <!-- Customers -->
            <a href="<?php echo e(route('customers.index')); ?>" class="flex items-center gap-md p-md rounded-lg transition-colors duration-200 <?php echo e(request()->is('customers*') ? 'text-primary font-bold border-r-4 border-primary bg-surface-container' : 'text-secondary hover:bg-surface-container group'); ?>">
                <span class="material-symbols-outlined" <?php echo request()->is('customers*') ? 'style="font-variation-settings: \'FILL\' 1;"' : ''; ?>>group</span>
                <span class="font-label-md text-label-md">Customers</span>
            </a>

            <!-- Job List -->
            <a href="<?php echo e(route('jobs.index')); ?>" class="flex items-center gap-md p-md rounded-lg transition-colors duration-200 <?php echo e(request()->is('jobs*') ? 'text-primary font-bold border-r-4 border-primary bg-surface-container' : 'text-secondary hover:bg-surface-container group'); ?>">
                <span class="material-symbols-outlined" <?php echo request()->is('jobs*') ? 'style="font-variation-settings: \'FILL\' 1;"' : ''; ?>>work</span>
                <span class="font-label-md text-label-md">Job List</span>
            </a>
            
            <div class="mt-4 mb-2 px-md font-label-sm text-secondary uppercase tracking-widest text-[10px]">Masters</div>
            
            <?php
                $masters = [
                    'booking-categories' => ['name' => 'Categories', 'icon' => 'category'],
                    'paper-sizes' => ['name' => 'Paper Sizes', 'icon' => 'straighten'],
                    'paper-gsms' => ['name' => 'GSM Levels', 'icon' => 'line_weight'],
                    'print-types' => ['name' => 'Print Types', 'icon' => 'print'],
                    'laminations' => ['name' => 'Laminations', 'icon' => 'layers'],
                    'lamination-sides' => ['name' => 'Lamination Sides', 'icon' => 'flip_to_back'],
                    'bindings' => ['name' => 'Bindings', 'icon' => 'book'],
                    'carbon-copies' => ['name' => 'Carbon Copies', 'icon' => 'content_copy'],
                ];
            ?>
            <?php $__currentLoopData = $masters; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $slug => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(url('master/'.$slug)); ?>" class="flex items-center gap-md p-md rounded-lg transition-colors duration-200 <?php echo e(request()->is('master/'.$slug) ? 'text-primary font-bold border-r-4 border-primary bg-surface-container-low' : 'text-secondary hover:bg-surface-container group'); ?>">
                    <span class="material-symbols-outlined" <?php echo request()->is('master/'.$slug) ? 'style="font-variation-settings: \'FILL\' 1;"' : ''; ?>><?php echo e($data['icon']); ?></span>
                    <span class="font-label-md text-label-md"><?php echo e($data['name']); ?></span>
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </nav>
        
        <div class="mt-auto pt-lg">
            <a href="<?php echo e(route('bookings.create')); ?>" class="w-full bg-primary-container text-on-primary font-bold py-md px-lg rounded-xl neat-shadow flex items-center justify-center gap-sm hover:brightness-110 transition-all active:scale-95">
                <span class="material-symbols-outlined">add</span>
                <span>New Booking</span>
            </a>
        </div>
    </aside>

    <!-- TopAppBar Anchor -->
    <header class="h-16 fixed top-0 right-0 left-64 bg-surface dark:bg-surface-dim flex justify-between items-center px-lg h-16 z-10 shadow-sm transition-all duration-200">
        <div class="flex items-center gap-md max-w-md w-full">
            <div class="relative w-full">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
                <input class="w-full bg-surface-container-low border-none rounded-full py-xs pl-10 pr-md font-body-md text-body-md focus:ring-2 focus:ring-primary/20" placeholder="Search orders, clients, or jobs..." type="text"/>
            </div>
        </div>
        <div class="flex items-center gap-lg">
            <button class="relative text-secondary hover:text-primary transition-colors">
                <span class="material-symbols-outlined">notifications</span>
                <span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full border-2 border-surface"></span>
            </button>
            <button class="text-secondary hover:text-primary transition-colors">
                <span class="material-symbols-outlined">help_outline</span>
            </button>
            <div class="flex items-center gap-sm pl-md border-l border-outline-variant relative group">
                <div class="text-right hidden sm:block">
                    <p class="font-label-md text-label-md font-bold text-on-surface">Admin User</p>
                    <p class="font-label-sm text-label-sm text-secondary">Manager</p>
                </div>
                <img class="w-10 h-10 rounded-full border-2 border-surface-container-highest cursor-pointer object-cover" src="https://ui-avatars.com/api/?name=Admin&background=0d6efd&color=fff" alt="User Profile"/>
                
                <!-- Simple Dropdown -->
                <div class="absolute top-full right-0 mt-2 w-48 bg-white rounded-lg shadow-lg hidden group-hover:block border border-surface-container overflow-hidden z-50">
                    <form action="<?php echo e(route('logout')); ?>" method="POST" class="m-0">
                        <?php echo csrf_field(); ?>
                        <button type="submit" class="w-full text-left px-4 py-3 text-sm text-error hover:bg-surface-container flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">logout</span> Logout
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content Area -->
    <main class="ml-64 mt-16 p-lg bg-background min-h-[calc(100vh-4rem)] relative">
        <?php if(session('success')): ?>
            <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-4 text-green-700">
                <p><?php echo e(session('success')); ?></p>
            </div>
        <?php endif; ?>
        <?php if(session('error')): ?>
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4 text-red-700">
                <p><?php echo e(session('error')); ?></p>
            </div>
        <?php endif; ?>
        
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <!-- Dependencies -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    
    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Setup CSRF token for all AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Initialize Select2 if present
        $(document).ready(function() {
            if($('.select2-tw').length) {
                $('.select2-tw').select2({
                    width: '100%'
                });
            }
        });

        // Smooth hover effect for sidebar items
        const navItems = document.querySelectorAll('aside nav a');
        navItems.forEach(item => {
            item.addEventListener('mouseenter', () => {
                if (!item.classList.contains('text-primary')) {
                    const icon = item.querySelector('span:first-child');
                    if(icon) icon.style.fontVariationSettings = "'FILL' 1";
                }
            });
            item.addEventListener('mouseleave', () => {
                if (!item.classList.contains('text-primary')) {
                    const icon = item.querySelector('span:first-child');
                    if(icon) icon.style.fontVariationSettings = "'FILL' 0";
                }
            });
        });

        // Toggle search bar focus state
        const searchInput = document.querySelector('input[type="text"]');
        if (searchInput) {
            const searchIcon = searchInput.previousElementSibling;
            searchInput.addEventListener('focus', () => {
                if(searchIcon) searchIcon.classList.add('text-primary');
            });
            searchInput.addEventListener('blur', () => {
                if(searchIcon) searchIcon.classList.remove('text-primary');
            });
        }
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH E:\xampp\htdocs\saai-cards\resources\views/layouts/app.blade.php ENDPATH**/ ?>