{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}SwiftPOS{% endblock %}</title>
    <link rel="icon" type="image/x-icon" href="{% static 'core/icons/favicon.ico' %}">
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="manifest" href="{% static 'core/manifest.webmanifest' %}">
    <link rel="apple-touch-icon" href="{% static 'core/icons/icon-192.png' %}">
    
    <!-- Poppins Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- SwiftPOS CSS -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}?v=11">
    <!-- Responsive nav patch: top-nav on desktop, sidebar on mobile -->
    <link rel="stylesheet" href="{% static 'css/responsive_nav_patch.css' %}?v=1">



    
    <link rel="manifest" href="{% static 'core/manifest.webmanifest' %}">
<link rel="apple-touch-icon" href="{% static 'core/icons/icon-192.png' %}">
<meta name="theme-color" content="#4b2c89">
<style>
/* ── Premium Nav/Sidebar Design Override ── */

/* Brand logo */
.brand-logo-img {
  height: 38px; width: auto; display: block;
  object-fit: contain; border-radius: 10px;
}

/* Sidebar brand title */
.brand-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
}

/* Sidebar section labels — colored accent */
.sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding: 0.85rem 1rem 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sidebar-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
}

/* Sidebar links — pill shaped */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1px 0.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.835rem;
  font-weight: 500;
  transition: background .15s, color .15s, transform .1s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateX(2px);
}
.sidebar-link.active {
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: #a78bfa;
  border-radius: 0 3px 3px 0;
}
.sidebar-link .icon {
  width: 20px;
  text-align: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.sidebar-link.active .icon { opacity: 1; }

/* Logout link */
.sidebar-link.logout-link {
  color: rgba(255,150,150,0.8);
}
.sidebar-link.logout-link:hover {
  background: rgba(220,38,38,0.18);
  color: #fca5a5;
}

/* Sidebar user card */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background: rgba(255,255,255,0.07);
  border-radius: 12px;
  margin: 0 0.6rem 0.5rem;
}
.user-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.user-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.user-role {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
}

/* === TOPBAR === */
.swiftpos-topbar {
  height: 58px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e7eb;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.topbar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}
.topbar-title::before {
  content: '';
  display: inline-block;
  width: 3px; height: 1em;
  background: #7c3aed;
  border-radius: 2px;
  margin-right: 0.5rem;
  vertical-align: middle;
}


/* Quick-action POS pill button (topbar + nav) */
.sp-pos-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  background: #7c3aed;
  color: #fff !important;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.sp-pos-quick-btn:hover {
  background: #6d28d9;
  transform: translateY(-1px);
}


/* Topbar user button */
.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition: background .15s;
}
.topbar-user-btn:hover { background: #f8fafc; }
.topbar-user-avatar {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* Sidebar toggle btn */
.sidebar-toggle-btn {
  width: 28px; height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  transition: background .15s;
}
.sidebar-toggle-btn:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* Modal overlay (existing, keep unchanged) */
.swiftpos-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 999999;
}
.swiftpos-modal-overlay.d-none { display: none !important; }
.swiftpos-modal {
    background: #fff; width: 90%; max-width: 380px;
    border-radius: 14px; padding: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    animation: fadeIn 0.25s ease-out;
}
.modal-header-area { text-align: center; margin-bottom: 10px; }
.modal-title { font-size: 1.25rem; font-weight: 700; color: #4b2c89; }
.modal-body-area { text-align: center; font-size: 1rem; margin-bottom: 15px; padding: 0 5px; }
.modal-footer-area { text-align: center; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
</style>

    {% block extra_css %}{% endblock %}
</head>
<body class="swiftpos-body">

<!-- ══ GLOBAL TOASTS (from Django messages) ══ -->
<!-- <div class="swiftpos-toast-container" id="swiftpos-global-toast-container">
    {% if messages %}
        {% for message in messages %}
            <div class="swiftpos-toast swiftpos-toast-{{ message.tags }}" onclick="this.remove()">
                <div class="toast-icon">
                    {% if 'success' in message.tags %}<i class="fas fa-check-circle"></i>
                    {% elif 'error' in message.tags or 'danger' in message.tags %}<i class="fas fa-exclamation-circle"></i>
                    {% elif 'warning' in message.tags %}<i class="fas fa-exclamation-triangle"></i>
                    {% else %}<i class="fas fa-info-circle"></i>{% endif %}
                </div>
                <div class="toast-text">{{ message }}</div>
            </div>
        {% endfor %}
    {% endif %}
</div> -->

<div class="swiftpos-app d-flex">

    <!-- SIDEBAR -->
    <aside id="swiftposSidebar" class="swiftpos-sidebar">
        <div class="sidebar-inner d-flex flex-column h-100">

            <!-- Brand -->
            <div class="sidebar-header d-flex align-items-center justify-content-between">
                <a href="{% url 'dashboard' %}" class="sidebar-brand d-flex align-items-center text-decoration-none">
                    <div class=" d-flex align-items-center justify-content-center">
                        {% load static %}
                      <img
                        src="{% static 'core/icons/icon-192.png' %}"
                        alt="SwiftPOS logo"
                        class="brand-logo-img me-2"
                      />
                    </div>
                   <div>  <!--  class="brand-text ms-2" -->
                        <span  class="brand-title">SwiftPOS</span>
                        <!-- <span class="brand-subtitle">Fast. Simple. Clear.</span> -->
                    </div>
                </a>

                <!-- Desktop collapse -->
                <button id="sidebarToggle"
                        class="btn btn-sm btn-outline-light d-none d-lg-inline-flex sidebar-toggle-btn"
                        type="button">
                    <i class="fas fa-chevron-left"></i>
                </button>
            </div>

            <!-- User -->
            <div class="sidebar-user mt-2">
                <div class="user-avatar" id="sidebar-user-avatar">
                    {{ user.get_full_name|default:user.username|slice:':2'|upper }}
                </div>
                <div class="user-meta">
                    <div class="user-name">{{ user.get_full_name|default:user.username }}</div>
                    {% if user.get_role_display %}
                        <div class="user-role">{{ user.get_role_display }}</div>
                    {% endif %}
                </div>
            </div>

            {% with current_url_name=request.resolver_match.url_name %}

            <!-- NAV -->
            <nav class="sidebar-nav flex-grow-1 mt-2">

                <div class="sidebar-section-label">Overview</div>
                {% if user.role == 'admin' or user.role == 'manager' %}
                <a href="{% url 'dashboard' %}"
                   class="sidebar-link {% if current_url_name == 'dashboard' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-gauge"></i></span>
                    <span class="label">Dashboard</span>
                </a>

                <a href="{% url 'sales:yesterday_summary' %}"
                   class="sidebar-link {% if current_url_name == 'yesterday_summary' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-history"></i></span>
                    <span class="label">Yesterday Summary</span>
                </a>

                <!-- <a href="{% url 'sales:payment_summary' %}"
                   class="sidebar-link {% if current_url_name == 'payment_summary' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-wallet"></i></span>
                    <span class="label">Payment Summary</span>
                </a> -->


                <a href="{% url 'sales:pnl_report' %}"
                   class="sidebar-link {% if current_url_name == 'pnl_report' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-chart-line"></i></span>
                    <span class="label">P&amp;L Report</span>
                </a>

                {% endif %}

                {% if user.role == 'admin' or user.role == 'manager' or user.role == 'cashier' %}
                <div class="sidebar-section-label mt-3">Sales</div>

                {% if pos_interface_mode == 'grid' %}
                <a href="{% url 'sales:pos_grid' %}"
                   class="sidebar-link {% if current_url_name == 'pos_grid' %}active{% endif %}">
                    <span class="icon"><i class="fa-solid fa-border-all"></i></span>
                    <span class="label">Smart POS Grid</span>
                </a>
                {% else %}
                <a href="{% url 'sales:pos' %}"
                   class="sidebar-link {% if current_url_name == 'pos' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-cash-register"></i></span>
                    <span class="label">POS Terminal</span>
                </a>
                {% endif %}

                <a href="{% url 'sales:daily_dashboard' %}"
                   class="sidebar-link {% if current_url_name == 'daily_dashboard' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-chart-line"></i></span>
                    <span class="label">Today Dashboard</span>
                </a>

                <a href="{% url 'sales:barcode_pos' %}"
                   class="sidebar-link {% if current_url_name == 'barcode_pos' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-barcode"></i></span>
                    <span class="label">Barcode POS</span>
                </a>

                <a href="{% url 'sales:customer_list' %}"
                   class="sidebar-link {% if current_url_name == 'customer_list' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-address-book"></i></span>
                    <span class="label">Customers</span>
                </a>
                {% endif %}

                {% if user.role == 'admin' or user.role == 'manager' %}
                <div class="sidebar-section-label mt-3">Inventory</div>

                <a href="{% url 'inventory:dashboard' %}"
                   class="sidebar-link {% if request.resolver_match.namespace == 'inventory' and current_url_name == 'dashboard' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-clipboard-list"></i></span>
                    <span class="label">Inventory Dashboard</span>
                </a>

                <a href="{% url 'inventory:product_list' %}"
                   class="sidebar-link {% if current_url_name == 'product_list' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-box"></i></span>
                    <span class="label">Products</span>
                </a>

                <a href="{% url 'inventory:category_list' %}"
                   class="sidebar-link {% if current_url_name == 'category_list' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-tags"></i></span>
                    <span class="label">Categories</span>
                </a>
                <a href="{% url 'inventory:product_bulk_import' %}"
                   class="sidebar-link">
                    <span class="icon"><i class="fas fa-file-import"></i></span>
                    <span class="label">Import Products</span>
                </a>
                

                <a href="{% url 'inventory:export_center' %}"
                   class="sidebar-link {% if current_url_name == 'export_center' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-file-export"></i></span>
                    <span class="label">Data Export</span>
                </a>

                                

                
                

                <a href="{% url 'inventory:stock_adjustment_history' %}"
                   class="sidebar-link {% if current_url_name == 'stock_adjustment_history' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-rotate"></i></span>
                    <span class="label">Stock History</span>
                </a>
                {% endif %}

                <!-- End of Day (admin/manager/cashier) -->
                {% if user.role == 'admin' or user.role == 'manager' or user.role == 'cashier' %}
                <div class="sidebar-section-label mt-3">Day Close</div>
                <a href="{% url 'sales:end_of_day' %}"
                   class="sidebar-link {% if current_url_name == 'end_of_day' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-moon"></i></span>
                    <span class="label">End of Day</span>
                </a>
                {% endif %}

                {% if user.role == 'admin' %}
                <div class="sidebar-section-label mt-3">Admin</div>

                 <a href="{% url 'sales:transaction_history' %}"
                   class="sidebar-link {% if current_url_name == 'transaction_history' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-list"></i></span>
                    <span class="label">All Transactions</span>
                </a>
                <a href="{% url 'inventory:supplier_list' %}"
                   class="sidebar-link {% if current_url_name == 'supplier_list' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-truck-loading"></i></span>
                    <span class="label">Suppliers</span>
                </a>

                <a href="{% url 'user_list' %}"
                   class="sidebar-link {% if current_url_name == 'user_list' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-users"></i></span>
                    <span class="label">Staff</span>
                </a>

                <a href="{% url 'sales:staff_performance' %}"
                   class="sidebar-link">
                    <span class="icon"><i class="fas fa-id-badge"></i></span>
                    <span class="label">Staff Performance</span>
                </a>

                <a href="{% url 'audit_log' %}"
                   class="sidebar-link {% if current_url_name == 'audit_log' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-clipboard-check"></i></span>
                    <span class="label">Audit Log</span>
                </a>

                <a href="{% url 'sales:suspicious_activity' %}"
                   class="sidebar-link {% if current_url_name == 'suspicious_activity' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
                    <span class="label">Suspicious Activity</span>
                </a>

                <a href="{% url 'system_settings' %}"
                   class="sidebar-link {% if current_url_name == 'system_settings' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-sliders-h"></i></span>
                    <span class="label">Settings</span>
                </a>

                <a href="{% url 'branch_list' %}"
                   class="sidebar-link {% if current_url_name == 'branch_list' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-code-branch"></i></span>
                    <span class="label">Branches</span>
                </a>

                <a href="{% url 'field_builder' %}"
                   class="sidebar-link {% if current_url_name == 'field_builder' %}active{% endif %}">
                    <span class="icon"><i class="fas fa-layer-group"></i></span>
                    <span class="label">Field Builder</span>
                </a>

                {% endif %}

            </nav>
            {% endwith %}

            <!-- LOGOUT -->
            <button id="install-app-btn"
        class="btn btn-sm btn-outline-light d-none"
        type="button">
    Install App
</button>
            <div class="sidebar-footer mt-auto p-2">
                <a href="{% url 'logout' %}" class="sidebar-link logout-link">
                    <span class="icon"><i class="fas fa-sign-out-alt"></i></span>
                    <span class="label">Logout</span>
                </a>
            </div>
        </div>
    </aside>

    <!-- MAIN -->
    <div class="swiftpos-main d-flex flex-column flex-grow-1">

        <!-- TOPBAR -->
        <header class="swiftpos-topbar">
            <div class="d-flex align-items-center gap-2">
                <!-- Mobile Hamburger -->
                <button id="mobileSidebarToggle"
                        class="btn btn-sm btn-outline-secondary d-inline-flex d-lg-none"
                        type="button" style="border-radius:8px;">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="topbar-title">
                    {% block topbar_title %}Dashboard{% endblock %}
                </div>
            </div>

            <!-- Right side -->
            <div class="d-flex align-items-center gap-2">
                <!-- Quick POS shortcut -->
                {% if user.role == 'admin' or user.role == 'manager' or user.role == 'cashier' %}
                <a href="{% if pos_interface_mode == 'grid' %}{% url 'sales:pos_grid' %}{% else %}{% url 'sales:pos' %}{% endif %}"
                   class="sp-pos-quick-btn d-none d-sm-flex">
                    <i class="fas fa-cash-register"></i> POS
                </a>
                {% endif %}

                <!-- Today shortcut -->
                <a href="{% url 'sales:daily_dashboard' %}" class="btn btn-sm btn-light d-none d-md-flex align-items-center gap-1" style="border-radius:8px;font-size:.78rem;">
                    <i class="fas fa-calendar-day" style="color:#7c3aed"></i>
                    <span>Today</span>
                </a>

                <!-- User dropdown -->
                <div class="dropdown">
                    <button class="topbar-user-btn" data-bs-toggle="dropdown">
                        <div class="topbar-user-avatar">
                            {{ user.get_full_name|default:user.username|slice:':2'|upper }}
                        </div>
                        <span class="d-none d-sm-inline" style="font-size:.82rem;font-weight:600;color:#374151;">{{ user.username }}</span>
                        <i class="fas fa-chevron-down" style="font-size:.6rem;color:#9ca3af;"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow" style="border-radius:12px;border-color:#e5e7eb;min-width:200px;">
                        <li class="px-3 py-2">
                            <div style="font-weight:600;font-size:.85rem;color:#0f172a;">{{ user.get_full_name|default:user.username }}</div>
                            {% if user.get_role_display %}
                            <div style="font-size:.72rem;color:#9ca3af;">{{ user.get_role_display }}</div>
                            {% endif %}
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        {% if user.role == 'admin' %}
                        <li>
                            <a class="dropdown-item d-flex align-items-center gap-2" href="{% url 'system_settings' %}" style="font-size:.82rem;">
                                <i class="fas fa-sliders-h" style="width:14px;color:#9ca3af;"></i> Settings
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center gap-2" href="{% url 'sales:end_of_day' %}" style="font-size:.82rem;">
                                <i class="fas fa-cash-register" style="width:14px;color:#9ca3af;"></i> End of Day
                            </a>
                        </li>
                        {% endif %}
                        <li>
                            <a class="dropdown-item d-flex align-items-center gap-2 text-danger" href="{% url 'logout' %}" style="font-size:.82rem;">
                                <i class="fas fa-sign-out-alt" style="width:14px;"></i> Logout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <!-- ══ DESKTOP TOP NAV (lg+) ══ -->
        <nav class="sp-topnav" id="sp-topnav">

            {% if user.role == 'admin' or user.role == 'manager' %}
            <!-- Overview -->
            <div class="sp-topnav-item">
                <button class="sp-topnav-link {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
                    <i class="fas fa-chart-pie"></i> Overview
                    <i class="fas fa-chevron-down ms-1" style="font-size:0.6rem;opacity:0.5"></i>
                </button>
                <div class="sp-topnav-dropdown">
                    <a href="{% url 'dashboard' %}"><i class="fas fa-gauge"></i> Dashboard</a>
                    <a href="{% url 'sales:daily_dashboard' %}"><i class="fas fa-chart-line"></i> Today</a>
                    <a href="{% url 'sales:yesterday_summary' %}"><i class="fas fa-history"></i> Yesterday</a>
                    <!-- <a href="{% url 'sales:payment_summary' %}"><i class="fas fa-wallet"></i> Payment Summary</a> -->
                </div>
            </div>
            {% endif %}

            {% if user.role == 'admin' or user.role == 'manager' or user.role == 'cashier' %}
            <!-- Sales -->
            <div class="sp-topnav-item">
                <button class="sp-topnav-link">
                    <i class="fas fa-cash-register"></i> Sales
                    <i class="fas fa-chevron-down ms-1" style="font-size:0.6rem;opacity:0.5"></i>
                </button>
                <div class="sp-topnav-dropdown">
                    {% if pos_interface_mode == 'grid' %}
                    <a href="{% url 'sales:pos_grid' %}"><i class="fa-solid fa-border-all"></i> Smart POS Grid</a>
                    {% else %}
                    <a href="{% url 'sales:pos' %}"><i class="fas fa-cash-register"></i> POS Terminal</a>
                    {% endif %}
                    {% if plan_allow_barcode %}
                    <a href="{% url 'sales:barcode_pos' %}"><i class="fas fa-barcode"></i> Barcode POS</a>
                    {% else %}
                    <a href="{% url 'upgrade_required' %}?feature=Barcode+POS&required_plan=Standard" class="sp-lock-item">
                        <i class="fas fa-lock"></i> Barcode POS
                        <span class="badge bg-warning text-dark ms-auto" style="font-size:0.65rem;">Upgrade</span>
                    </a>
                    {% endif %}
                    <a href="{% url 'sales:customer_list' %}"><i class="fas fa-address-book"></i> Customers</a>
                    <a href="{% url 'sales:transaction_history' %}"><i class="fas fa-list"></i> Transactions</a>
                    <a href="{% url 'sales:end_of_day' %}"><i class="fas fa-moon"></i> End of Day</a>
                </div>
            </div>
            {% endif %}

            {% if user.role == 'admin' or user.role == 'manager' %}
            <!-- Inventory -->
            <div class="sp-topnav-item">
                <button class="sp-topnav-link">
                    <i class="fas fa-boxes-stacked"></i> Inventory
                    <i class="fas fa-chevron-down ms-1" style="font-size:0.6rem;opacity:0.5"></i>
                </button>
                <div class="sp-topnav-dropdown">
                    <a href="{% url 'inventory:dashboard' %}"><i class="fas fa-clipboard-list"></i> Inventory Dashboard</a>
                    <a href="{% url 'inventory:product_list' %}"><i class="fas fa-box"></i> Products</a>
                    <a href="{% url 'inventory:category_list' %}"><i class="fas fa-tags"></i> Categories</a>
                    <a href="{% url 'inventory:product_bulk_import' %}"><i class="fas fa-file-import"></i> Import Products</a>
                    <a href="{% url 'inventory:export_center' %}"><i class="fas fa-file-export"></i> Data Export</a>
                    <a href="{% url 'inventory:stock_adjustment_history' %}"><i class="fas fa-rotate"></i> Stock History</a>
                </div>
            </div>

            <!-- Reports -->
            <div class="sp-topnav-item">
                <button class="sp-topnav-link">
                    <i class="fas fa-chart-bar"></i> Reports
                    <i class="fas fa-chevron-down ms-1" style="font-size:0.6rem;opacity:0.5"></i>
                </button>
                <div class="sp-topnav-dropdown">
                    {% if plan_allow_pnl %}
                    <a href="{% url 'sales:pnl_report' %}"><i class="fas fa-chart-line"></i> P&amp;L Report</a>
                    {% else %}
                    <a href="{% url 'upgrade_required' %}?feature=P%26L+Report&required_plan=Standard" class="sp-lock-item">
                        <i class="fas fa-lock"></i> P&amp;L Report <span class="badge bg-warning text-dark ms-auto" style="font-size:0.65rem;">Upgrade</span>
                    </a>
                    {% endif %}
                    <a href="{% url 'sales:staff_performance' %}"><i class="fas fa-id-badge"></i> Staff Performance</a>
                </div>
            </div>
            {% endif %}

            {% if user.role == 'admin' %}
            <!-- Admin -->
            <div class="sp-topnav-item">
                <button class="sp-topnav-link">
                    <i class="fas fa-shield-alt"></i> Admin
                    <i class="fas fa-chevron-down ms-1" style="font-size:0.6rem;opacity:0.5"></i>
                </button>
                <div class="sp-topnav-dropdown">
                    <a href="{% url 'user_list' %}"><i class="fas fa-users"></i> Staff</a>
                    <a href="{% url 'inventory:supplier_list' %}"><i class="fas fa-truck-loading"></i> Suppliers</a>
                    {% if plan_allow_audit %}
                    <a href="{% url 'audit_log' %}"><i class="fas fa-clipboard-check"></i> Audit Log</a>
                    {% else %}
                    <a href="{% url 'upgrade_required' %}?feature=Audit+Log&required_plan=Standard" class="sp-lock-item">
                        <i class="fas fa-lock"></i> Audit Log <span class="badge bg-warning text-dark ms-auto" style="font-size:0.65rem;">Upgrade</span>
                    </a>
                    {% endif %}
                    <a href="{% url 'sales:suspicious_activity' %}"><i class="fas fa-exclamation-triangle"></i> Suspicious Activity</a>
                    <a href="{% url 'system_settings' %}"><i class="fas fa-sliders-h"></i> Settings</a>
                    <a href="{% url 'branch_list' %}"><i class="fas fa-code-branch"></i> Branches</a>
                    <a href="{% url 'field_builder' %}"><i class="fas fa-layer-group"></i> Field Builder</a>
                </div>
            </div>
            {% endif %}

            <!-- Quick POS button in nav bar -->
            {% if user.role == 'admin' or user.role == 'manager' or user.role == 'cashier' %}
            <a href="{% if pos_interface_mode == 'grid' %}{% url 'sales:pos_grid' %}{% else %}{% url 'sales:pos' %}{% endif %}"
               class="sp-pos-quick-btn ms-auto">
                <i class="fas fa-cash-register"></i> Open POS
            </a>
            {% endif %}

        </nav><!-- /sp-topnav -->

        <!-- ══ PAGE CONTENT ══ -->
        <main class="swiftpos-content flex-grow-1">
            <div class="container-fluid py-3">
               

                {% block content %}{% endblock %}
            </div>
        </main>

        <!-- FOOTER -->
        <footer class="swiftpos-footer py-2">
            <div class="container-fluid d-flex justify-content-between small">
                <span>&copy; {% now "Y" %} SwiftPOS</span>
                <span class="text-muted">Fast. Simple & Clear.</span>
            </div>
        </footer>

    </div>
</div>

<!-- Mobile Overlay -->
<div id="sidebarOverlay" class="swiftpos-overlay d-lg-none"></div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Add these lines inside the <head> section of base.html -->
<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>

<!-- SIDEBAR SCRIPT -->

<script>
document.addEventListener('DOMContentLoaded', function () {
    const toasts = document.querySelectorAll('.swiftpos-toast');
    toasts.forEach((toast) => {
        setTimeout(() => {
            toast.style.animation = 'toast-out 0.25s ease-in forwards';
            setTimeout(() => toast.remove(), 250);
        }, 2000); // 2 seconds
    });
});
</script>

<script>
(function () {
    const sidebar = document.getElementById("swiftposSidebar");
    const desktopToggle = document.getElementById("sidebarToggle");
    const mobileToggle = document.getElementById("mobileSidebarToggle");
    const overlay = document.getElementById("sidebarOverlay");
    const KEY = "swiftpos_sidebar_collapsed";

    if (desktopToggle) {
        desktopToggle.addEventListener("click", function () {
            sidebar.classList.toggle("collapsed");
            try {
                localStorage.setItem(KEY, sidebar.classList.contains("collapsed") ? "1" : "0");
            } catch (e) {}
        });
    }

    try {
        if (localStorage.getItem(KEY) === "1") {
            sidebar.classList.add("collapsed");
        }
    } catch (e) {}

    if (mobileToggle) {
        mobileToggle.addEventListener("click", function () {
            document.body.classList.toggle("sidebar-mobile-open");
        });
    }

    if (overlay) {
        overlay.addEventListener("click", function () {
            document.body.classList.remove("sidebar-mobile-open");
        });
    }
})();
</script>

<script>
(function () {
    const contentSections = document.querySelectorAll(".swiftpos-content");
    const cards = document.querySelectorAll(".swiftpos-content .card, .swiftpos-content .metric-card");

    // Mark containers & cards for animation
    contentSections.forEach(section => {
        section.classList.add("sp-animate-section");
    });

    cards.forEach((card, index) => {
        card.classList.add("sp-animate-card");
        // we store an index so we can stagger the delay
        card.dataset.spAnimIndex = String(index);
    });

    function revealImmediately() {
        contentSections.forEach(section => {
            section.classList.add("sp-animate-visible");
        });
        cards.forEach(card => {
            card.classList.add("sp-animate-visible");
        });
    }

    if (!("IntersectionObserver" in window)) {
        // Old browsers: show immediately, no animation logic
        revealImmediately();
        return;
    }

    // Observe cards for staggered reveal
    const cardObserver = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (!entry.isIntersecting) return;

                const el = entry.target;
                const idx = parseInt(el.dataset.spAnimIndex || "0", 10);
                const delayMs = Math.min(idx * 50, 400); // max 0.4s

                el.style.transitionDelay = delayMs + "ms";
                el.classList.add("sp-animate-visible");
                cardObserver.unobserve(el);
            });
        },
        {
            threshold: 0.15
        }
    );

    cards.forEach((card) => cardObserver.observe(card));

    // Observe main content containers
    const sectionObserver = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (!entry.isIntersecting) return;
                entry.target.classList.add("sp-animate-visible");
                sectionObserver.unobserve(entry.target);
            });
        },
        {
            threshold: 0.1
        }
    );

    contentSections.forEach((section) => sectionObserver.observe(section));
})();
</script>
 <script src="{% static 'js/pwa.js' %}"></script>

<!-- <script src="{% static 'js/html2canvas.min.js' %}"></script>
<script src="{% static 'js/receipt_actions.js' %}"></script>
 -->


<script>
// GLOBAL SwiftPOS Modal Function
window.swiftposAlert = function(message) {
    const overlay = document.getElementById("swiftpos-modal-overlay");
    const msgBox = document.getElementById("swiftpos-modal-message");
    const btn = document.getElementById("swiftpos-modal-btn");

    msgBox.textContent = message;
    overlay.classList.remove("d-none");

    btn.onclick = () => overlay.classList.add("d-none");
};
</script>

{% block extra_js %}{% endblock %}

<script>
// ══ Global SwiftPOS JS Variables (injected from settings) ══
window.swiftposCurrencySymbol = "{{ currency_symbol|escapejs }}";
window.swiftposVatRate = {{ vat_rate|floatformat:2 }};
window.swiftposDecimalPlaces = {{ decimal_places }};
// Auto-dismiss toasts after 4 seconds
document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('swiftpos-global-toast-container');
    if (!container) return;
    const toasts = container.querySelectorAll('.swiftpos-toast');
    toasts.forEach((toast, i) => {
        setTimeout(() => {
            toast.style.animation = 'toast-out 0.3s ease-in forwards';
            setTimeout(() => toast.remove(), 300);
        }, 3500 + i * 500);
    });
});
</script>

<!-- SwiftPOS Modal -->
<div id="swiftpos-modal-overlay" class="swiftpos-modal-overlay d-none">
    <div id="swiftpos-modal" class="swiftpos-modal">
        <div class="modal-header-area">
            <span class="modal-title">SwiftPOS</span>
        </div>
        <div class="modal-body-area">
            <p id="swiftpos-modal-message"></p>
        </div>
        <div class="modal-footer-area">
            <button id="swiftpos-modal-btn" class="btn btn-primary w-100">OK</button>
        </div>
    </div>
</div>
</body>
</html>