<!DOCTYPE html>
<html lang="en">
<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 Panel') - {{ \App\Models\Setting::get('site_name', 'KiyoKart') }}</title>

    <!-- Bootstrap 5 CSS -->
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/bootstrap-icons.css') }}">
    <link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">
    
    <!-- Modern Admin CSS -->
    <link rel="stylesheet" href="{{ asset('css/admin.css') }}">

    @stack('styles')
</head>
<body class="admin-body sidebar-collapsed">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg admin-navbar fixed-top">
        <div class="container-fluid">
            
            <button class="btn btn-outline-light btn-sm d-none d-md-inline-flex sidebar-toggle" type="button" id="sidebarToggle" aria-expanded="false" aria-label="Toggle sidebar">
                 <span class="navbar-toggler-icon"></span>
            </button>
            <button class="navbar-toggler d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#adminSidebar" aria-controls="adminSidebar">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="d-flex align-items-center gap-2 ms-auto">
                @can('reports.sales')
                <a href="{{ route('admin.reports.sales', ['period' => 'day', 'start_date' => now()->format('Y-m-d'), 'end_date' => now()->format('Y-m-d')]) }}" class="admin-navbar-icon-btn" title="Sales 360 (Today)">
                    <i class="bi bi-graph-up-arrow"></i> <span class="d-none d-sm-inline">Sales 360</span>
                </a>
                @endcan
                @if(auth()->user()->isAdmin() || auth()->user()->isStaff() || auth()->user()->can('reports.day-ledger.view'))
                <a href="{{ route('admin.reports.day-ledger', ['date' => now()->format('Y-m-d')]) }}" class="admin-navbar-icon-btn" title="Day Ledger">
                    <i class="bi bi-journal-check"></i> <span class="d-none d-sm-inline">Day Ledger</span>
                </a>
                @endif
                @can('manage shipping')
                <a href="{{ route('admin.pickup-requests.send') }}" class="admin-navbar-icon-btn" title="Delhivery Pick Ups">
                    <i class="bi bi-truck"></i> <span class="d-none d-sm-inline">Pick Ups</span>
                </a>
                @endcan
                @can('pos_access')
                <a href="{{ route('admin.pos.index') }}" target="_blank" class="admin-navbar-icon-btn" title="Open POS">
                    <i class="bi bi-cash-stack"></i> <span class="d-none d-sm-inline">POS</span>
                </a>
                @endcan
                <a href="{{ route('home') }}" class="admin-navbar-icon-btn" title="View Site">
                   <i class="bi bi-globe"></i> <span class="d-none d-sm-inline">View Site</span>
                </a>
                
                <!-- Notification Bell -->
                @php
                    $adminTicketAlertCount = 0;
                    $adminMyTicketAlertCount = 0;
                    if (auth()->user()->can('tickets.view')) {
                        $adminTicketAlertCount = \App\Models\Ticket::query()
                            ->whereIn('status', [
                                \App\Models\Ticket::STATUS_OPEN_UNASSIGNED,
                                \App\Models\Ticket::STATUS_REOPENED,
                            ])
                            ->count();

                        $adminMyTicketAlertCount = \App\Models\Ticket::query()
                            ->where('assigned_to', auth()->id())
                            ->where('status', \App\Models\Ticket::STATUS_REOPENED)
                            ->count();
                    }
                @endphp
                <div class="dropdown notification-badge">
                    <button class="admin-navbar-icon-btn" type="button" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Notifications">
                        <i class="bi bi-bell"></i>
                        @if($adminTicketAlertCount > 0)
                            <span class="badge rounded-pill bg-danger position-absolute top-0 start-100 translate-middle" style="font-size: 0.65rem;">
                                {{ $adminTicketAlertCount > 99 ? '99+' : $adminTicketAlertCount }}
                            </span>
                        @endif
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notificationDropdown" style="min-width: 300px; max-width: 400px;">
                        <li class="px-3 py-2 border-bottom">
                            <h6 class="mb-0">Notifications</h6>
                        </li>
                        @if($adminTicketAlertCount > 0)
                            <li>
                                <a class="dropdown-item" href="{{ route('admin.tickets.index', ['queue' => 'open_unassigned']) }}">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small>Open/Unassigned Tickets</small>
                                        <span class="badge bg-danger">{{ $adminTicketAlertCount }}</span>
                                    </div>
                                </a>
                            </li>
                            @if($adminMyTicketAlertCount > 0)
                                <li>
                                    <a class="dropdown-item" href="{{ route('admin.tickets.index', ['queue' => 'my']) }}">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <small>My Reopened Tickets</small>
                                            <span class="badge bg-warning text-dark">{{ $adminMyTicketAlertCount }}</span>
                                        </div>
                                    </a>
                                </li>
                            @endif
                        @else
                            <li><a class="dropdown-item" href="#"><small class="text-muted">No new ticket notifications</small></a></li>
                        @endif
                    </ul>
                </div>
                
                <!-- Profile Dropdown -->
                <div class="dropdown">
                    <button class="admin-navbar-icon-btn admin-profile-btn" type="button" id="adminProfileDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <div class="d-flex align-items-center gap-2">
                            <div class="rounded-circle bg-white text-primary d-flex align-items-center justify-content-center admin-header-avatar" style="width: 32px; height: 32px; font-weight: 600; font-size: 0.875rem; overflow: hidden;">
                                @if(auth()->user()->avatar_url)
                                    <img src="{{ auth()->user()->avatar_url }}" alt="{{ auth()->user()->name }}" class="admin-header-avatar-img">
                                @else
                                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                                @endif
                            </div>
                            <div class="d-none d-md-flex flex-column align-items-start">
                                <span style="font-size: 0.875rem; font-weight: 600;">{{ auth()->user()->name }}</span>
                                <small style="font-size: 0.75rem; opacity: 0.8;">
                                    @php
                                        $roles = auth()->user()->roles->pluck('name')->map(function ($role) {
                                            return ucwords(str_replace('_', ' ', $role));
                                        });
                                    @endphp

                                    {{ $roles->join(', ') }}
                                </small>
                            </div>
                            <i class="bi bi-chevron-down d-none d-md-inline" style="font-size: 0.75rem;"></i>
                        </div>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end admin-profile-dropdown" aria-labelledby="adminProfileDropdown">
                        <li class="px-3 py-2 border-bottom">
                            <small class="text-muted d-block">Logged in as</small>
                            <strong>{{ auth()->user()->name }}</strong>
                            <small class="text-muted d-block mt-1">{{ auth()->user()->email }}</small>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item" href="{{ route('customer.profile') }}">
                                <i class="bi bi-person me-2"></i> Profile
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="{{ route('admin.settings.index', ['tab' => 'general']) }}">
                                <i class="bi bi-gear me-2"></i> Settings
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <form action="{{ route('logout') }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="dropdown-item text-danger">
                                    <i class="bi bi-box-arrow-right me-2"></i> Logout
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- Sidebar -->
    <nav class="admin-sidebar" id="adminSidebar">
        <div class="sidebar-sticky">
            <!-- Logo Section -->
            <div class="admin-sidebar-logo">
                <div class="admin-sidebar-logo-container">
                    <a class="navbar-brand" href="{{ route('admin.dashboard') }}">
                        @php
                            $logoUrl = \App\Models\Setting::getLogoUrl('light');
                            $siteName = \App\Models\Setting::get('site_name', 'KiyoKart');
                        @endphp
                        @if($logoUrl)
                            <img src="{{ $logoUrl }}" alt="{{ $siteName }}" height="32" style="max-height: 32px; width: auto; margin-right: 0.5rem;">
                        @else
                            <div class="kiyo-brand-icon">
                                <span>K</span>
                            </div>
                        @endif                 
                    </a>
                </div>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}" href="{{ route('admin.dashboard') }}">
                        <i class="bi bi-speedometer2"></i> <span class="link-text">Dashboard</span>
                    </a>
                </li>
                @canany(['products.view','products.create','products.restock','categories.view','brands.view','attributes.view'])
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.products.*') || request()->routeIs('admin.categories.*') || request()->routeIs('admin.brands.*') || request()->routeIs('admin.attributes.*') ? 'active' : '' }}" 
                       data-bs-toggle="collapse" 
                       data-bs-target="#productsSubmenu" 
                       aria-expanded="{{ request()->routeIs('admin.products.*') || request()->routeIs('admin.categories.*') || request()->routeIs('admin.brands.*') || request()->routeIs('admin.attributes.*') ? 'true' : 'false' }}"
                       aria-controls="productsSubmenu">
                        <i class="bi bi-box"></i> <span class="link-text">Products</span>
                        <i class="bi bi-chevron-down ms-auto submenu-arrow"></i>
                    </a>
                    <div class="collapse {{ request()->routeIs('admin.products.*') || request()->routeIs('admin.categories.*') || request()->routeIs('admin.brands.*') || request()->routeIs('admin.attributes.*') ? 'show' : '' }}" id="productsSubmenu">
                        <ul class="nav flex-column submenu">
                            @can('products.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.products.index') ? 'active' : '' }}" href="{{ route('admin.products.index') }}">
                                    <i class="bi bi-list-ul"></i> <span class="link-text">All Products</span>
                                </a>
                            </li>
                            @endcan
                            @if(auth()->user()->isAdmin())
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.products.import*') ? 'active' : '' }}" href="{{ route('admin.products.import.show') }}">
                                    <i class="bi bi-upload"></i> <span class="link-text">Import</span>
                                </a>
                            </li>
                            @endif
                            @can('products.restock')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.products.restock*') ? 'active' : '' }}" href="{{ route('admin.products.restock') }}">
                                    <i class="bi bi-box-arrow-in-down"></i> <span class="link-text">Restock</span>
                                </a>
                            </li>
                            @endcan
                            @can('categories.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.categories.*') ? 'active' : '' }}" href="{{ route('admin.categories.index') }}">
                                    <i class="bi bi-tags"></i> <span class="link-text">Categories</span>
                                </a>
                            </li>
                            @endcan
                            @can('brands.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.brands.*') ? 'active' : '' }}" href="{{ route('admin.brands.index') }}">
                                    <i class="bi bi-award"></i> <span class="link-text">Brands</span>
                                </a>
                            </li>
                            @endcan
                            @can('attributes.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.attributes.*') ? 'active' : '' }}" href="{{ route('admin.attributes.index') }}">
                                    <i class="bi bi-list-check"></i> <span class="link-text">Attributes</span>
                                </a>
                            </li>
                            @endcan
                        </ul>
                    </div>
                </li>
                @endcanany
                @canany(['products.restock','stock-audit.view','stock-audit.create','stock-adjustments.manage','stock-adjustments.view'])
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.stock-audit.*') || request()->routeIs('admin.stock-adjustments.*') ? 'active' : '' }}"
                       data-bs-toggle="collapse"
                       data-bs-target="#inventorySubmenu"
                       aria-expanded="{{ request()->routeIs('admin.stock-audit.*') || request()->routeIs('admin.stock-adjustments.*') ? 'true' : 'false' }}"
                       aria-controls="inventorySubmenu">
                        <i class="fa-solid fa-layer-group"></i> <span class="link-text">Inventory</span>
                        <i class="bi bi-chevron-down ms-auto submenu-arrow"></i>
                    </a>
                    <div class="collapse {{ request()->routeIs('admin.stock-audit.*') || request()->routeIs('admin.stock-adjustments.*') ? 'show' : '' }}" id="inventorySubmenu">
                        <ul class="nav flex-column submenu">
                            @can('products.restock')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.products.restock*') ? 'active' : '' }}" href="{{ route('admin.products.restock') }}">
                                    <i class="bi bi-box-arrow-in-down"></i> <span class="link-text">Restock</span>
                                </a>
                            </li>
                            @endcan
                            @can('stock-audit.create')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.stock-audit.create') ? 'active' : '' }}" href="{{ route('admin.stock-audit.create') }}">
                                    <i class="bi bi-plus-circle"></i> <span class="link-text">Create Audit</span>
                                </a>
                            </li>
                            @endcan
                            @can('stock-audit.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.stock-audit.index') || request()->routeIs('admin.stock-audit.show') ? 'active' : '' }}" href="{{ route('admin.stock-audit.index') }}">
                                    <i class="bi bi-list-ul"></i> <span class="link-text">Audit List</span>
                                </a>
                            </li>
                            @endcan
                            @can('stock-adjustments.manage')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.stock-adjustments.manual') ? 'active' : '' }}" href="{{ route('admin.stock-adjustments.manual') }}">
                                    <i class="bi bi-pencil-square"></i> <span class="link-text">Manual Adjustment</span>
                                </a>
                            </li>
                            @endcan
                            @can('stock-adjustments.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.stock-adjustments.index') ? 'active' : '' }}" href="{{ route('admin.stock-adjustments.index') }}">
                                    <i class="bi bi-clock-history"></i> <span class="link-text">Adjustment History</span>
                                </a>
                            </li>
                            @endcan
                        </ul>
                    </div>
                </li>
                @endcanany
                @can('orders.view')
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.orders.*') ? 'active' : '' }}" href="{{ route('admin.orders.index') }}?status=placed">
                        <i class="bi bi-cart-check"></i> <span class="link-text">Orders</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.making.orders.*') ? 'active' : '' }}" href="{{ route('admin.making.orders.view') }}?status=placed">
                        <i class="bi bi-card-list"></i> <span class="link-text">Making / Packing</span>
                    </a>
                </li>
                @endcan
                @can('tickets.view')
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.tickets.*') ? 'active' : '' }}" href="{{ route('admin.tickets.index') }}">
                        <i class="bi bi-life-preserver"></i> <span class="link-text">Tickets</span>
                        @if(isset($adminTicketAlertCount) && $adminTicketAlertCount > 0)
                            <span class="badge-modern badge-modern-danger ms-2">{{ $adminTicketAlertCount > 99 ? '99+' : $adminTicketAlertCount }}</span>
                        @endif
                    </a>
                </li>
                @endcan
                @can('manage reviews')
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.reviews.*') ? 'active' : '' }}" href="{{ route('admin.reviews.index') }}">
                        <i class="bi bi-star"></i> <span class="link-text">Reviews</span>
                        @php
                            $pendingCount = \App\Models\ProductReview::where('is_approved', false)->count();
                        @endphp
                        @if($pendingCount > 0)
                            <span class="badge-modern badge-modern-warning ms-2">{{ $pendingCount }}</span>
                        @endif
                    </a>
                </li>
                @endcan
                @can('coupons.view')
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.coupons.*') ? 'active' : '' }}" href="{{ route('admin.coupons.index') }}">
                        <i class="bi bi-ticket-perforated"></i> <span class="link-text">Coupons</span>
                    </a>
                </li>
                @endcan
                @canany(['customers.view','staff.view','roles.view'])
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.users.*') || request()->routeIs('admin.roles.*') ? 'active' : '' }}"
                       data-bs-toggle="collapse"
                       data-bs-target="#usersSubmenu"
                       aria-expanded="{{ request()->routeIs('admin.users.*') || request()->routeIs('admin.roles.*') ? 'true' : 'false' }}"
                       aria-controls="usersSubmenu">
                        <i class="bi bi-people"></i> <span class="link-text">Users</span>
                        <i class="bi bi-chevron-down ms-auto submenu-arrow"></i>
                    </a>
                    <div class="collapse {{ request()->routeIs('admin.users.*') || request()->routeIs('admin.roles.*') ? 'show' : '' }}" id="usersSubmenu">
                        <ul class="nav flex-column submenu">
                            @can('customers.view')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.users.index') && request()->get('tab', 'customers') === 'customers') || request()->routeIs('admin.users.customers') ? 'active' : '' }}"
                                   href="{{ route('admin.users.customers') }}">
                                    <i class="bi bi-people-fill"></i> <span class="link-text">Customers</span>
                                </a>
                            </li>
                            @endcan
                            @can('staff.view')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.users.index') && request()->get('tab') === 'staff') || request()->routeIs('admin.users.staff') ? 'active' : '' }}"
                                   href="{{ route('admin.users.staff') }}">
                                    <i class="bi bi-person-badge"></i> <span class="link-text">Staff</span>
                                </a>
                            </li>
                            @endcan
                            @can('roles.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.roles.*') ? 'active' : '' }}" href="{{ route('admin.roles.index') }}">
                                    <i class="bi bi-shield-lock"></i> <span class="link-text">Roles</span>
                                </a>
                            </li>
                            @endcan
                        </ul>
                    </div>
                </li>
                @endcanany
                @canany(['settings.general','settings.payment','settings.sms','settings.ticket','settings.carriers','banners.view','announcements.view','shipping-methods.view','settings.countries','settings.states','settings.cities','units.view','taxes.view'])
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.settings.*') || request()->routeIs('admin.banners.*') || request()->routeIs('admin.announcements.*') || request()->routeIs('admin.shipping-methods.*') || request()->routeIs('admin.settings.shipping.*') || request()->routeIs('admin.units.*') || request()->routeIs('admin.taxes.*') || request()->routeIs('admin.pickup-requests.*') ? 'active' : '' }}" 
                       data-bs-toggle="collapse" 
                       data-bs-target="#settingsSubmenu" 
                       aria-expanded="{{ request()->routeIs('admin.settings.*') || request()->routeIs('admin.sms-templates.*') || request()->routeIs('admin.banners.*') || request()->routeIs('admin.announcements.*') || request()->routeIs('admin.shipping-methods.*') || request()->routeIs('admin.settings.shipping.*') || request()->routeIs('admin.units.*') || request()->routeIs('admin.taxes.*') || request()->routeIs('admin.pickup-requests.*') ? 'true' : 'false' }}"
                       aria-controls="settingsSubmenu">
                        <i class="bi bi-gear"></i><span class="link-text">Settings</span>
                        <i class="bi bi-chevron-down ms-auto submenu-arrow"></i>
                    </a>
                    <div class="collapse {{ request()->routeIs('admin.settings.*') || request()->routeIs('admin.sms-templates.*') || request()->routeIs('admin.banners.*') || request()->routeIs('admin.announcements.*') || request()->routeIs('admin.shipping-methods.*') || request()->routeIs('admin.settings.shipping.*') || request()->routeIs('admin.units.*') || request()->routeIs('admin.taxes.*') || request()->routeIs('admin.pickup-requests.*') ? 'show' : '' }}" id="settingsSubmenu">
                        <ul class="nav flex-column submenu">
                            @can('settings.general')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.settings.index') && request()->get('tab') == 'general' ? 'active' : '' }}" href="{{ route('admin.settings.index', ['tab' => 'general']) }}">
                                    <i class="bi bi-sliders"></i> <span class="link-text">General Settings</span>
                                </a>
                            </li>
                            @endcan
                            @can('settings.payment')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.settings.index') && request()->get('tab') == 'payment') ? 'active' : '' }}" href="{{ route('admin.settings.index', ['tab' => 'payment']) }}">
                                    <i class="bi bi-credit-card"></i> <span class="link-text">Payment Settings</span>
                                </a>
                            </li>
                            @endcan
                            @can('settings.sms')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.settings.index') && request()->get('tab') == 'sms') ? 'active' : '' }}" href="{{ route('admin.settings.index', ['tab' => 'sms']) }}">
                                    <i class="bi bi-chat-dots"></i> <span class="link-text">SMS Configuration</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.sms-templates.*') ? 'active' : '' }}" href="{{ route('admin.sms-templates.index') }}">
                                    <i class="bi bi-card-text"></i> <span class="link-text">SMS Templates</span>
                                </a>
                            </li>
                            @endcan
                            @can('settings.ticket')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.settings.index') && request()->get('tab') == 'ticket') ? 'active' : '' }}" href="{{ route('admin.settings.index', ['tab' => 'ticket']) }}">
                                    <i class="bi bi-life-preserver"></i> <span class="link-text">Ticket Settings</span>
                                </a>
                            </li>
                            @endcan
                            @can('settings.carriers')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.settings.index') && request()->get('tab') == 'carriers') ? 'active' : '' }}" href="{{ route('admin.settings.index', ['tab' => 'carriers']) }}">
                                    <i class="bi bi-truck"></i> <span class="link-text">Carriers</span>
                                </a>
                            </li>
                            @endcan
                            @can('banners.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.banners.*') ? 'active' : '' }}" href="{{ route('admin.banners.index') }}">
                                    <i class="bi bi-images"></i> <span class="link-text">Banners</span>
                                </a>
                            </li>
                            @endcan
                            @can('announcements.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.announcements.*') ? 'active' : '' }}" href="{{ route('admin.announcements.index') }}">
                                    <i class="bi bi-megaphone"></i> <span class="link-text">Announcements</span>
                                </a>
                            </li>
                            @endcan
                            @can('shipping-methods.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.shipping-methods.*') ? 'active' : '' }}" href="{{ route('admin.shipping-methods.index') }}">
                                    <i class="bi bi-truck"></i> <span class="link-text">Shipping Methods</span>
                                </a>
                            </li>
                            @endcan
                            @can('settings.countries')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.settings.shipping.countries') ? 'active' : '' }}" href="{{ route('admin.settings.shipping.countries') }}">
                                    <i class="bi bi-flag"></i> <span class="link-text">Countries</span>
                                </a>
                            </li>
                            @endcan
                            @can('settings.states')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.settings.shipping.states') ? 'active' : '' }}" href="{{ route('admin.settings.shipping.states') }}">
                                    <i class="bi bi-map"></i> <span class="link-text">States</span>
                                </a>
                            </li>
                            @endcan
                            @can('settings.cities')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.settings.shipping.cities') ? 'active' : '' }}" href="{{ route('admin.settings.shipping.cities') }}">
                                    <i class="bi bi-buildings"></i> <span class="link-text">Cities</span>
                                </a>
                            </li>
                            @endcan
                            @can('units.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.units.*') ? 'active' : '' }}" href="{{ route('admin.units.index') }}">
                                    <i class="bi bi-rulers"></i> <span class="link-text">Units</span>
                                </a>
                            </li>
                            @endcan
                            @can('taxes.view')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.taxes.*') ? 'active' : '' }}" href="{{ route('admin.taxes.index') }}">
                                    <i class="bi bi-percent"></i> <span class="link-text">Tax Settings</span>
                                </a>
                            </li>
                            @endcan
                            @can('manage shipping')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.pickup-requests.*') ? 'active' : '' }}" href="{{ route('admin.pickup-requests.index') }}">
                                    <i class="bi bi-truck"></i> <span class="link-text">Delhivery Pick Ups</span>
                                </a>
                            </li>
                            @endcan
                        </ul>
                    </div>
                </li>
                @endcanany
                @if(auth()->user()->canAny(['whatsapp.credits','whatsapp.templates','whatsapp.logs']))
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.whatsapp.*') ? 'active' : '' }}"
                       data-bs-toggle="collapse"
                       data-bs-target="#whatsappSubmenu"
                       aria-expanded="{{ request()->routeIs('admin.whatsapp.*') ? 'true' : 'false' }}"
                       aria-controls="whatsappSubmenu">
                        <i class="bi bi-whatsapp"></i> <span class="link-text">Whatsapp</span>
                        <i class="bi bi-chevron-down ms-auto submenu-arrow"></i>
                    </a>
                    <div class="collapse {{ request()->routeIs('admin.whatsapp.*') ? 'show' : '' }}" id="whatsappSubmenu">
                        <ul class="nav flex-column submenu">
                            @if(auth()->user()->isAdmin())
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.whatsapp.config')) ? 'active' : '' }}"
                                   href="{{ route('admin.whatsapp.config') }}">
                                    <i class="bi bi-gear-fill"></i> <span class="link-text">Configuration</span>
                                </a>
                            </li>
                            @endif
                            @can('whatsapp.credits')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.whatsapp.credits')) ? 'active' : '' }}"
                                   href="{{ route('admin.whatsapp.credits') }}">
                                    <i class="bi bi-currency-dollar"></i> <span class="link-text">Credits</span>
                                </a>
                            </li>
                            @endcan
                            @can('whatsapp.templates')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.whatsapp.templates')) ? 'active' : '' }}"
                                   href="{{ route('admin.whatsapp.templates') }}">
                                    <i class="bi bi-card-checklist"></i> <span class="link-text">Templates</span>
                                </a>
                            </li>
                            @endcan
                            @can('whatsapp.logs')
                            <li class="nav-item">
                                <a class="nav-link {{ (request()->routeIs('admin.whatsapp.logs')) ? 'active' : '' }}"
                                   href="{{ route('admin.whatsapp.logs') }}">
                                    <i class="bi bi-list-check"></i> <span class="link-text">Logs</span>
                                </a>
                            </li>
                            @endcan
                        </ul>
                    </div>
                </li>
                @endif
                @if(auth()->user()->isAdmin() || auth()->user()->canAny(['reports.sales','reports.top-products','reports.payments','reports.gst','reports.delivery','reports.stock-audit','reports.stock-adjustments','reports.profit','reports.salesman','reports.day-ledger.view']))
                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('admin.reports.*') ? 'active' : '' }}"
                       data-bs-toggle="collapse"
                       data-bs-target="#reportsSubmenu"
                       aria-expanded="{{ request()->routeIs('admin.reports.*') ? 'true' : 'false' }}"
                       aria-controls="reportsSubmenu">
                        <i class="bi bi-file-earmark-text"></i> <span class="link-text">Reports</span>
                        <i class="bi bi-chevron-down ms-auto submenu-arrow"></i>
                    </a>
                    <div class="collapse {{ request()->routeIs('admin.reports.*') ? 'show' : '' }}" id="reportsSubmenu">
                        <ul class="nav flex-column submenu">
                            @can('reports.sales')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.sales') ? 'active' : '' }}" href="{{ route('admin.reports.sales') }}">
                                    <i class="bi bi-graph-up"></i> <span class="link-text">Sales Report</span>
                                </a>
                            </li>
                            @endcan
                            @can('reports.salesman')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.salesman') ? 'active' : '' }}" href="{{ route('admin.reports.salesman') }}">
                                    <i class="bi bi-person-lines-fill"></i> <span class="link-text">Salesman Reports</span>
                                </a>
                            </li>
                            @endcan
                            @can('reports.profit')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.profit*') ? 'active' : '' }}" href="{{ route('admin.reports.profit') }}">
                                    <i class="bi bi-cash-coin"></i> <span class="link-text">Profit Reports</span>
                                </a>
                            </li>
                            @endcan
                            @can('reports.top-products')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.top-products') ? 'active' : '' }}" href="{{ route('admin.reports.top-products') }}">
                                    <i class="bi bi-star"></i> <span class="link-text">Top Products</span>
                                </a>
                            </li>
                            @endcan
                            @can('reports.payments')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.payments') ? 'active' : '' }}" href="{{ route('admin.reports.payments') }}">
                                    <i class="bi bi-cash"></i> <span class="link-text">Payment Summary</span>
                                </a>
                            </li>
                            @endcan
                            @if(auth()->user()->isAdmin() || auth()->user()->can('reports.day-ledger.view'))
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.day-ledger*') ? 'active' : '' }}" href="{{ route('admin.reports.day-ledger') }}">
                                    <i class="bi bi-journal-check"></i> <span class="link-text">Day Ledger</span>
                                </a>
                            </li>
                            @endif
                            @can('reports.gst')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.gst*') ? 'active' : '' }}" href="{{ route('admin.reports.gst') }}">
                                    <i class="bi bi-receipt"></i> <span class="link-text">GST Reports</span>
                                </a>
                            </li>
                            @endcan
                            @can('reports.delivery')
                            @if(Route::has('admin.reports.delivery'))
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.delivery*') ? 'active' : '' }}" href="{{ route('admin.reports.delivery') }}">
                                    <i class="bi bi-truck"></i> <span class="link-text">Delivery Reports</span>
                                </a>
                            </li>
                            @endif
                            @endcan
                            @can('reports.stock-audit')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.stock-audit') ? 'active' : '' }}" href="{{ route('admin.reports.stock-audit') }}">
                                    <i class="bi bi-clipboard-check"></i> <span class="link-text">Stock Audit Report</span>
                                </a>
                            </li>
                            @endcan
                            @can('reports.stock-adjustments')
                            <li class="nav-item">
                                <a class="nav-link {{ request()->routeIs('admin.reports.adjustment-history') ? 'active' : '' }}" href="{{ route('admin.reports.adjustment-history') }}">
                                    <i class="bi bi-pencil-square"></i> <span class="link-text">Adjustment History</span>
                                </a>
                            </li>
                            @endcan
                        </ul>
                    </div>
                </li>
                @endif
            </ul>
        </div>
    </nav>

    <!-- Main content -->
    <main class="admin-main">
        @if(session('success'))
            <div class="alert alert-success admin-alert alert-dismissible fade show toast-modern toast-modern-success" role="alert" style="position: fixed; top: 80px; right: 20px; z-index: 1050; max-width: 400px;">
                <i class="bi bi-check-circle-fill toast-modern-icon"></i>
                <div class="toast-modern-content">
                    <div class="toast-modern-title">Success</div>
                    <div class="toast-modern-message">{{ session('success') }}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger admin-alert alert-dismissible fade show toast-modern toast-modern-error" role="alert" style="position: fixed; top: 80px; right: 20px; z-index: 1050; max-width: 400px;">
                <i class="bi bi-exclamation-triangle-fill toast-modern-icon"></i>
                <div class="toast-modern-content">
                    <div class="toast-modern-title">Error</div>
                    <div class="toast-modern-message">{{ session('error') }}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger admin-alert alert-dismissible fade show toast-modern toast-modern-error" role="alert" style="position: fixed; top: 80px; right: 20px; z-index: 1050; max-width: 400px;">
                <i class="bi bi-exclamation-triangle-fill toast-modern-icon"></i>
                <div class="toast-modern-content">
                    <div class="toast-modern-title">Validation Error</div>
                    <div class="toast-modern-message">
                        <ul class="mb-0" style="padding-left: 1.25rem;">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @yield('content')
    </main>

    <!-- jQuery & Bootstrap 5 JS -->
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('js/select2.min.js') }}"></script>
    
    <!-- Alpine.js -->
    <script defer src="{{ asset('js/alpine.min.js') }}"></script>

    @stack('scripts')
    
    <!-- Kiyo Branding Footer -->
    <footer class="admin-footer d-none d-md-block">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center py-2">
                <small class="text-muted">
                    &copy; {{ date('Y') }} <strong>Kiyo Solutions Pvt Ltd.</strong>. All rights reserved.
                </small>
                <small class="text-muted">
                    Powered by <strong style="color: var(--admin-secondary);">KiyoKart</strong>
                    <span class="ms-2">Version {{ config('app.version', '3.0.0') }}</span>
                </small>
            </div>
        </div>
    </footer>
    <script>
        setTimeout(function () {
            let alerts = document.querySelectorAll('.admin-alert');
            alerts.forEach(function(alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 2000); // 2 seconds
    </script>
    <script>
    // Global handler to prepend +91 to mobile numbers before form submission
    document.addEventListener('DOMContentLoaded', function() {
        const body = document.body;
        const sidebar = document.getElementById('adminSidebar');
        const toggle = document.getElementById('sidebarToggle');
        const storageKey = 'adminSidebarCollapsed';

        const applyState = (collapsed) => {
            body.classList.toggle('sidebar-collapsed', collapsed);
            if (toggle) {
                toggle.setAttribute('aria-expanded', (!collapsed).toString());
                toggle.classList.toggle('is-active', !collapsed);
            }
            localStorage.setItem(storageKey, collapsed ? 'true' : 'false');
        };

        const stored = localStorage.getItem(storageKey);
        const shouldCollapse = stored === null ? true : stored === 'true';
        if (window.innerWidth <= 992) {
            applyState(true);
        } else {
           applyState(shouldCollapse);
        }
        

        if (toggle) {
            toggle.addEventListener('click', function() {
                const nextState = !body.classList.contains('sidebar-collapsed');
                applyState(nextState);
            });
        }

        document.addEventListener('shown.bs.collapse', function(event) {
            if (event.target === sidebar) {
                applyState(false);
                // Add class to body to hide navbar right items on mobile
                if (window.innerWidth <= 768) {
                    body.classList.add('sidebar-open-mobile');
                }
            }
        });

        document.addEventListener('hidden.bs.collapse', function(event) {
            if (event.target === sidebar) {
                applyState(true);
                // Remove class when sidebar closes
                body.classList.remove('sidebar-open-mobile');
            }
        });
        
        // Handle window resize
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                body.classList.remove('sidebar-open-mobile');
            } else if (sidebar && sidebar.classList.contains('show')) {
                body.classList.add('sidebar-open-mobile');
            }
        });

        // document.querySelectorAll('form').forEach(function(form) {
        //     form.addEventListener('submit', function(e) {
        //         const mobileInputs = form.querySelectorAll('input[name="mobile"]');
        //         mobileInputs.forEach(function(input) {
        //             if (input.value && !input.disabled) {
        //                 // Remove any existing +91 prefix and add it back
        //                 let mobile = input.value.replace(/^\+91/, '').trim();
        //                 if (mobile && /^[6-9]\d{9}$/.test(mobile)) {
        //                     input.value = '+91' + mobile;
        //                 }
        //             }
        //         });
        //     });
        // });
    });

    // Global Select2 initializer for all dropdowns
    $(function() {
        const formatOption = (state) => {
            if (!state.id) return state.text;
            const $el = $(state.element);
            const image = $el.data('image');
            const barcode = $el.data('barcode');
            const stock = $el.data('stock');
            if (image || barcode || stock) {
                const name = state.text;
                return $(`
                    <div class="product-option d-flex align-items-center gap-2">
                        ${image ? `<img src="${image}" alt="${name}" style="width:32px;height:32px;object-fit:cover;border-radius:6px;">` : ''}
                        <div class="d-flex flex-column lh-sm">
                            <span class="fw-semibold">${name}</span>
                            ${barcode || stock ? `<small class="text-muted">${barcode ? `Barcode: ${barcode}` : ''}${barcode && stock ? ' · ' : ''}${stock ? `Stock: ${stock}` : ''}</small>` : ''}
                        </div>
                    </div>
                `);
            }
            return state.text;
        };

        $('select').each(function() {
            const $select = $(this);
            if ($select.hasClass('no-select2') || $select.data('select2')) return;
            $select.select2({
                width: '100%',
                placeholder: $select.data('placeholder') || $select.attr('placeholder') || '',
                allowClear: !$select.prop('multiple'),
                minimumResultsForSearch: 10,
                dropdownCssClass: 'select2-dropdown-compact',
                templateResult: formatOption,
                templateSelection: formatOption
            });
        });
    });
    </script>
    <link rel="stylesheet" href="{{ asset('fontawesome/css/all.min.css') }}">
</body>
</html>
