<!DOCTYPE html>
<html lang="en" ng-app="telecomApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Joy Telecom Distribution | Telecom Sales, Inventory &amp; Due Management System</title>
    <link id="app-favicon" rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Fast Global CDN with local fallback -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>window.angular || document.write('<script src="assets/js/angular.php"><\/script>')</script>
    <script src="assets/js/app.php"></script>
</head>
<body ng-controller="MainController" ng-cloak>

    <!-- Global Floating Toast Container -->
    <div class="toast-container">
        <div class="toast" ng-repeat="t in toasts" ng-class="{'toast-success': t.type==='success', 'toast-error': t.type==='error', 'toast-info': t.type==='info'}">
            <span>{{ t.message }}</span>
        </div>
    </div>

    <!-- ====================================================================
         1. DIRECT LOGIN PAGE VIEW (Rendered immediately when unauthenticated)
         ==================================================================== -->
    <div class="login-wrapper" ng-if="!currentUser || currentView === 'login'">
        <div class="login-card">
            <div class="login-header">
                <img ng-src="{{ settings.logo_url || 'assets/images/logo.svg' }}" alt="Logo" class="login-brand-logo">
                <h1 class="login-title">{{ settings.site_name || 'Joy Telecom Distribution' }}</h1>
                <p class="login-subtitle">{{ settings.site_tagline || 'Telecom Sales, Inventory & Due Management System' }}</p>
            </div>

            <!-- 1-Click Demo Credentials Quick Switcher -->
            <div class="demo-account-pills">
                <div class="demo-pills-title">Quick Demo Login (Click to Fill):</div>
                <div class="pills-group">
                    <button type="button" class="pill-btn" ng-click="fillDemo('admin')">👑 Admin</button>
                    <button type="button" class="pill-btn" ng-click="fillDemo('hr')">👔 HR Manager</button>
                    <button type="button" class="pill-btn" ng-click="fillDemo('employee')">🚴 RSO Employee</button>
                </div>
            </div>

            <form ng-submit="login()">
                <div class="form-group">
                    <label class="form-label">Username / RSO Code</label>
                    <input type="text" class="form-input" ng-model="loginForm.username" placeholder="e.g. admin, hr, or RS057069" required autofocus>
                </div>

                <div class="form-group">
                    <label class="form-label">Password</label>
                    <input type="password" class="form-input" ng-model="loginForm.password" placeholder="Enter your password" required>
                </div>

                <button type="submit" class="btn-primary" ng-disabled="isSubmitting" style="margin-top: 10px;">
                    <span ng-if="!isSubmitting">Sign In to Dashboard →</span>
                    <span ng-if="isSubmitting">Authenticating...</span>
                </button>
            </form>
        </div>
    </div>

    <!-- ====================================================================
         2. AUTHENTICATED APP WORKSPACE (Admin / HR / Employee Dashboards)
         ==================================================================== -->
    <div class="app-container" ng-if="currentUser && currentView !== 'login'">

        <!-- Sidebar Navigation -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <img ng-src="{{ settings.logo_url || 'assets/images/logo.svg' }}" alt="Logo" class="sidebar-logo">
            </div>

            <div class="sidebar-nav">
                <div class="nav-section-title">Core Operations</div>
                
                <div class="nav-item" ng-class="{'active': currentView === 'dashboard'}" ng-click="setView('dashboard')">
                    <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
                    <span>Dashboard</span>
                </div>

                <div class="nav-item" ng-class="{'active': currentView === 'daily_entry'}" ng-click="setView('daily_entry')">
                    <svg class="nav-icon" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                    <span>Daily Sales Entry</span>
                </div>

                <div class="nav-item" ng-class="{'active': currentView === 'sales'}" ng-click="setView('sales')">
                    <svg class="nav-icon" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                    <span>Sales Statements</span>
                </div>

                <div class="nav-item" ng-class="{'active': currentView === 'dues'}" ng-click="setView('dues')">
                    <svg class="nav-icon" viewBox="0 0 24 24"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
                    <span>Due Ledger (DUE)</span>
                </div>

                <!-- Stock & Warehouse (Admin / HR view matrix, Employee views my stock) -->
                <div class="nav-item" ng-if="currentUser.role !== 'employee'" ng-class="{'active': currentView === 'products'}" ng-click="setView('products')">
                    <svg class="nav-icon" viewBox="0 0 24 24"><path d="M20 13V4.83C20 3.82 19.18 3 18.17 3H5.83C4.82 3 4 3.82 4 4.83V13h16zM4 15v4.17C4 20.18 4.82 21 5.83 21h12.34c1.01 0 1.83-.82 1.83-1.83V15H4zm8-10c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"/></svg>
                    <span>Product & Stock</span>
                </div>

                <div class="nav-item" ng-if="currentUser.role === 'employee'" ng-class="{'active': currentView === 'my_stock'}" ng-click="setView('my_stock')">
                    <svg class="nav-icon" viewBox="0 0 24 24"><path d="M20 13V4.83C20 3.82 19.18 3 18.17 3H5.83C4.82 3 4 3.82 4 4.83V13h16zM4 15v4.17C4 20.18 4.82 21 5.83 21h12.34c1.01 0 1.83-.82 1.83-1.83V15H4z"/></svg>
                    <span>My In-Hand Stock</span>
                </div>

                <!-- Administration & HR Sections -->
                <div class="nav-section-title" ng-if="currentUser.role === 'admin' || currentUser.role === 'hr'">Management</div>

                <div class="nav-item" ng-if="currentUser.role === 'admin' || currentUser.role === 'hr'" ng-class="{'active': currentView === 'users'}" ng-click="setView('users')">
                    <svg class="nav-icon" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
                    <span>{{ currentUser.role === 'admin' ? 'Users & RSOs' : 'RSO Employees' }}</span>
                </div>

                <!-- System Settings (ADMIN ONLY) -->
                <div class="nav-section-title" ng-if="currentUser.role === 'admin'">Configuration</div>

                <div class="nav-item" ng-if="currentUser.role === 'admin'" ng-class="{'active': currentView === 'settings'}" ng-click="setView('settings')">
                    <svg class="nav-icon" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
                    <span>System Settings</span>
                </div>
            </div>

            <!-- Sidebar User Profile Footer -->
            <div class="sidebar-footer">
                <div class="user-mini-badge">
                    <div class="user-avatar">{{ currentUser.name.charAt(0) }}</div>
                    <div class="user-info-text">
                        <div class="user-name-label">{{ currentUser.name }}</div>
                        <span class="user-role-badge" ng-class="{'role-admin': currentUser.role==='admin', 'role-hr': currentUser.role==='hr', 'role-employee': currentUser.role==='employee'}">
                            {{ currentUser.role }} {{ currentUser.rso_code ? '('+currentUser.rso_code+')' : '' }}
                        </span>
                    </div>
                </div>
                <button type="button" class="btn-sm btn-secondary" title="Logout" ng-click="logout()" style="padding: 6px 8px;">
                    <svg style="width:14px;height:14px;fill:currentColor" viewBox="0 0 24 24"><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
                </button>
            </div>
        </aside>

        <!-- Main Content Area -->
        <div class="main-content-wrapper">
            
            <!-- Topbar Header -->
            <header class="top-navbar">
                <div class="page-breadcrumb">
                    <span>{{ settings.site_name || 'Telecom DMS' }}</span>
                    <span style="color:var(--text-muted)">/</span>
                    <span style="color:var(--primary);text-transform:capitalize;">{{ currentView }}</span>
                </div>

                <div class="top-navbar-actions">
                    <button class="btn-primary btn-sm" ng-click="setView('daily_entry')">
                        <span>+ Daily Statement</span>
                    </button>
                    <button class="btn-secondary btn-sm" ng-click="logout()">
                        <span>Sign Out</span>
                    </button>
                </div>
            </header>

            <!-- View Container -->
            <main class="content-body">

                <!-- ========================================================
                     VIEW: DASHBOARD (ADMIN, HR, EMPLOYEE)
                     ======================================================== -->
                <div ng-if="currentView === 'dashboard'">
                    
                    <!-- Admin Dashboard View -->
                    <div ng-if="currentUser.role === 'admin'">
                        <div class="kpi-grid">
                            <div class="stat-card card-orange">
                                <div class="stat-info">
                                    <span class="stat-label">Month Total Sales</span>
                                    <span class="stat-value">{{ settings.currency_symbol }} {{ overview.month_metrics.month_sales | number:2 }}</span>
                                    <span class="stat-sub">iTopUp: {{ settings.currency_symbol }} {{ overview.month_metrics.month_itop_sale | number:0 }}</span>
                                </div>
                                <div class="stat-icon-badge badge-orange">৳</div>
                            </div>

                            <div class="stat-card card-blue">
                                <div class="stat-info">
                                    <span class="stat-label">Month Cash Received</span>
                                    <span class="stat-value">{{ settings.currency_symbol }} {{ overview.month_metrics.month_cash_rcv | number:2 }}</span>
                                    <span class="stat-sub">Route Cost: {{ settings.currency_symbol }} {{ overview.month_metrics.month_route_cost | number:0 }}</span>
                                </div>
                                <div class="stat-icon-badge badge-blue">💳</div>
                            </div>

                            <div class="stat-card card-red">
                                <div class="stat-info">
                                    <span class="stat-label">Total Outstanding Due</span>
                                    <span class="stat-value">{{ settings.currency_symbol }} {{ overview.total_net_due | number:2 }}</span>
                                    <span class="stat-sub">Cumulative Balance</span>
                                </div>
                                <div class="stat-icon-badge badge-red">⚠️</div>
                            </div>

                            <div class="stat-card card-green">
                                <div class="stat-info">
                                    <span class="stat-label">Warehouse Stock Value</span>
                                    <span class="stat-value">{{ settings.currency_symbol }} {{ overview.stock_stats.total_house_value | number:2 }}</span>
                                    <span class="stat-sub">{{ overview.stock_stats.total_house_stock | number:0 }} Items in House</span>
                                </div>
                                <div class="stat-icon-badge badge-green">📦</div>
                            </div>
                        </div>

                        <!-- Top RSOs & Recent Activity Grid -->
                        <div style="display:grid;grid-template-columns: 2fr 1fr;gap:24px;">
                            <div class="card">
                                <div class="card-header">
                                    <div>
                                        <h3 class="card-title">Recent Daily Sales Statements</h3>
                                        <p class="card-subtitle">Latest settlements submitted by RSOs</p>
                                    </div>
                                    <button class="btn-secondary btn-sm" ng-click="setView('sales')">View All →</button>
                                </div>
                                <div class="table-responsive">
                                    <table class="custom-table">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>RSO Code & Name</th>
                                                <th>Route</th>
                                                <th class="text-right">Sales Total</th>
                                                <th class="text-right">Cash Received</th>
                                                <th class="text-right">Daily Due</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="s in overview.recent_sales">
                                                <td><strong>{{ s.sale_date }}</strong></td>
                                                <td>{{ s.rso_code }} - {{ s.rso_name }}</td>
                                                <td><span class="table-pill pill-neutral">{{ s.route_name }}</span></td>
                                                <td class="text-right font-weight-bold">{{ settings.currency_symbol }} {{ s.total_amount | number:2 }}</td>
                                                <td class="text-right text-success">{{ settings.currency_symbol }} {{ s.cash_received | number:2 }}</td>
                                                <td class="text-right" ng-class="{'text-danger': s.due_amount > 0, 'text-success': s.due_amount <= 0}">
                                                    {{ settings.currency_symbol }} {{ s.due_amount | number:2 }}
                                                </td>
                                                <td>
                                                    <span class="table-pill" ng-class="{'pill-success': s.status==='approved', 'pill-warning': s.status==='pending'}">
                                                        {{ s.status }}
                                                    </span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Top Performing RSOs</h3>
                                    <p class="card-subtitle">Highest sales generators</p>
                                </div>
                                <div class="card-body" style="padding:16px;">
                                    <div ng-repeat="r in overview.top_rsos" style="display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-light)">
                                        <div>
                                            <div style="font-weight:700;">{{ r.name }}</div>
                                            <div style="font-size:12px;color:var(--text-muted)">{{ r.rso_code }} • {{ r.route_name }}</div>
                                        </div>
                                        <div style="font-weight:800;color:var(--primary)">
                                            {{ settings.currency_symbol }} {{ r.total_sales | number:0 }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- HR Dashboard View -->
                    <div ng-if="currentUser.role === 'hr'">
                        <div class="kpi-grid">
                            <div class="stat-card card-blue">
                                <div class="stat-info">
                                    <span class="stat-label">Active RSO Field Staff</span>
                                    <span class="stat-value">{{ overview.active_employees }} / {{ overview.total_employees }}</span>
                                    <span class="stat-sub">14 Assigned Routes</span>
                                </div>
                                <div class="stat-icon-badge badge-blue">👥</div>
                            </div>

                            <div class="stat-card card-orange">
                                <div class="stat-info">
                                    <span class="stat-label">Today's Field Submissions</span>
                                    <span class="stat-value">{{ overview.today_submissions }}</span>
                                    <span class="stat-sub">Daily report entries</span>
                                </div>
                                <div class="stat-icon-badge badge-orange">📝</div>
                            </div>

                            <div class="stat-card card-purple">
                                <div class="stat-info">
                                    <span class="stat-label">Month Route Cost Allowance</span>
                                    <span class="stat-value">{{ settings.currency_symbol }} {{ overview.month_route_cost | number:2 }}</span>
                                    <span class="stat-sub">Disbursed to RSOs</span>
                                </div>
                                <div class="stat-icon-badge badge-purple">🚗</div>
                            </div>
                        </div>

                        <!-- Route RSO Directory Table -->
                        <div class="card">
                            <div class="card-header">
                                <div>
                                    <h3 class="card-title">RSO Route Assignments & Daily Allowances</h3>
                                    <p class="card-subtitle">Employee route costs and attendance activity</p>
                                </div>
                                <button class="btn-primary btn-sm" ng-click="openCreateUserModal()">+ Add Employee</button>
                            </div>
                            <div class="table-responsive">
                                <table class="custom-table">
                                    <thead>
                                        <tr>
                                            <th>RSO Code</th>
                                            <th>Employee Name</th>
                                            <th>Mobile SIM</th>
                                            <th>Route Assigned</th>
                                            <th class="text-right">Base Daily Cost</th>
                                            <th class="text-right">Month Disbursed</th>
                                            <th class="text-center">Active Days</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="r in overview.routes">
                                            <td><strong>{{ r.rso_code }}</strong></td>
                                            <td>{{ r.name }}</td>
                                            <td>{{ r.mobile }}</td>
                                            <td><span class="table-pill pill-neutral">{{ r.route_name }}</span></td>
                                            <td class="text-right">{{ settings.currency_symbol }} {{ r.base_route_cost | number:2 }}</td>
                                            <td class="text-right">{{ settings.currency_symbol }} {{ r.month_route_cost_spent | number:2 }}</td>
                                            <td class="text-center"><span class="table-pill pill-info">{{ r.active_days }} Days</span></td>
                                            <td>
                                                <span class="table-pill" ng-class="{'pill-success': r.status==='active', 'pill-danger': r.status==='inactive'}">
                                                    {{ r.status }}
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Employee (RSO) Dashboard View -->
                    <div ng-if="currentUser.role === 'employee'">
                        <div class="kpi-grid">
                            <div class="stat-card card-orange">
                                <div class="stat-info">
                                    <span class="stat-label">My Month Sales</span>
                                    <span class="stat-value">{{ settings.currency_symbol }} {{ overview.month_summary.my_month_sales | number:2 }}</span>
                                    <span class="stat-sub">iTopUp: {{ settings.currency_symbol }} {{ overview.month_summary.my_month_itop_sale | number:0 }}</span>
                                </div>
                                <div class="stat-icon-badge badge-orange">৳</div>
                            </div>

                            <div class="stat-card card-blue">
                                <div class="stat-info">
                                    <span class="stat-label">My Cash Deposited</span>
                                    <span class="stat-value">{{ settings.currency_symbol }} {{ overview.month_summary.my_month_cash_rcv | number:2 }}</span>
                                    <span class="stat-sub">Route Allowance: {{ settings.currency_symbol }} {{ overview.month_summary.my_month_route_cost | number:0 }}</span>
                                </div>
                                <div class="stat-icon-badge badge-blue">💵</div>
                            </div>

                            <div class="stat-card" ng-class="{'card-red': overview.net_due > 0, 'card-green': overview.net_due <= 0}">
                                <div class="stat-info">
                                    <span class="stat-label">My Net Due Balance</span>
                                    <span class="stat-value">{{ settings.currency_symbol }} {{ overview.net_due | number:2 }}</span>
                                    <span class="stat-sub">{{ overview.net_due > 0 ? 'Payable Due to House' : 'Advance / Balanced' }}</span>
                                </div>
                                <div class="stat-icon-badge" ng-class="{'badge-red': overview.net_due > 0, 'badge-green': overview.net_due <= 0}">⚖️</div>
                            </div>
                        </div>

                        <div style="display:grid;grid-template-columns: 1fr 1fr;gap:24px;">
                            <!-- My Current In Hand Stock -->
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">My In-Hand Product Stock</h3>
                                    <p class="card-subtitle">Current SIM & Scratch cards with you</p>
                                </div>
                                <div class="table-responsive">
                                    <table class="custom-table">
                                        <thead>
                                            <tr>
                                                <th>Product</th>
                                                <th>Category</th>
                                                <th class="text-right">Unit Price</th>
                                                <th class="text-right">Received</th>
                                                <th class="text-right">Sold</th>
                                                <th class="text-right">In Hand Stock</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="st in overview.stock">
                                                <td><strong>{{ st.product_name }}</strong></td>
                                                <td><span class="table-pill pill-neutral">{{ st.category }}</span></td>
                                                <td class="text-right">{{ settings.currency_symbol }} {{ st.unit_price }}</td>
                                                <td class="text-right">{{ st.received }}</td>
                                                <td class="text-right">{{ st.sold }}</td>
                                                <td class="text-right" style="font-weight:800;color:var(--primary)">{{ st.current_stock }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- My Recent Sales Activity -->
                            <div class="card">
                                <div class="card-header">
                                    <div>
                                        <h3 class="card-title">My Recent Statements</h3>
                                        <p class="card-subtitle">Daily settlements submitted</p>
                                    </div>
                                    <button class="btn-primary btn-sm" ng-click="setView('daily_entry')">+ Submit Today</button>
                                </div>
                                <div class="table-responsive">
                                    <table class="custom-table">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th class="text-right">Sales Total</th>
                                                <th class="text-right">Cash Deposited</th>
                                                <th class="text-right">Due</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="rs in overview.recent_sales">
                                                <td><strong>{{ rs.sale_date }}</strong></td>
                                                <td class="text-right">{{ settings.currency_symbol }} {{ rs.total_amount | number:2 }}</td>
                                                <td class="text-right text-success">{{ settings.currency_symbol }} {{ rs.cash_received | number:2 }}</td>
                                                <td class="text-right" ng-class="{'text-danger': rs.due_amount > 0, 'text-success': rs.due_amount <= 0}">
                                                    {{ settings.currency_symbol }} {{ rs.due_amount | number:2 }}
                                                </td>
                                                <td>
                                                    <span class="table-pill" ng-class="{'pill-success': rs.status==='approved', 'pill-warning': rs.status==='pending'}">
                                                        {{ rs.status }}
                                                    </span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ========================================================
                     VIEW: SYSTEM SETTINGS (ADMIN ONLY)
                     Requirements: Site Name, Logo, Favicon, Commission
                     ======================================================== -->
                <div ng-if="currentView === 'settings' && currentUser.role === 'admin'">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="card-title">⚙️ System & Branding Settings</h2>
                                <p class="card-subtitle">Configure application name, branding logos, favicon, and business commission rates</p>
                            </div>
                            <button class="btn-secondary btn-sm" ng-click="resetBranding()">Restore Defaults</button>
                        </div>
                        <div class="card-body">
                            <div class="settings-grid">
                                
                                <!-- Left Column: Text & Commission Configurations -->
                                <div>
                                    <form ng-submit="saveSettings()">
                                        <div class="form-group">
                                            <label class="form-label">System / Company Name</label>
                                            <input type="text" class="form-input" ng-model="editSettings.site_name" placeholder="e.g. Joy Telecom Distribution" required>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label">System Tagline</label>
                                            <input type="text" class="form-input" ng-model="editSettings.site_tagline" placeholder="e.g. Telecom Sales, Inventory & Due Management System">
                                        </div>

                                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                                            <div class="form-group">
                                                <label class="form-label">iTopUp Commission Rate (%)</label>
                                                <input type="number" step="0.01" class="form-input" ng-model="editSettings.commission_rate" placeholder="2.75" required>
                                                <small style="color:var(--text-muted);font-size:11px;">Standard default is 2.75%</small>
                                            </div>

                                            <div class="form-group">
                                                <label class="form-label">Currency Symbol</label>
                                                <input type="text" class="form-input" ng-model="editSettings.currency_symbol" placeholder="৳" required>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label">Helpline / Contact Phone</label>
                                            <input type="text" class="form-input" ng-model="editSettings.company_phone" placeholder="+880 1908-000000">
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label">Office Address</label>
                                            <input type="text" class="form-input" ng-model="editSettings.company_address" placeholder="Rajshahi, Bangladesh">
                                        </div>

                                        <button type="submit" class="btn-primary" ng-disabled="isSavingSettings">
                                            <span ng-if="!isSavingSettings">Save System Settings</span>
                                            <span ng-if="isSavingSettings">Saving changes...</span>
                                        </button>
                                    </form>
                                </div>

                                <!-- Right Column: Logo & Favicon Upload Handlers -->
                                <div>
                                    <!-- Logo Upload Box -->
                                    <div class="card" style="margin-bottom:20px;border:1px solid var(--border-color);">
                                        <div class="card-header" style="padding:12px 18px;">
                                            <h4 class="card-title" style="font-size:14px;">Site Logo</h4>
                                        </div>
                                        <div class="card-body" style="padding:18px;">
                                            <div class="preview-box">
                                                <img ng-src="{{ settings.logo_url || 'assets/images/logo.svg' }}" class="preview-image" alt="Logo Preview">
                                                <span style="font-size:12px;color:var(--text-muted);">Current Active Logo</span>
                                            </div>
                                            <div style="margin-top:14px;display:flex;gap:10px;">
                                                <input type="file" class="form-input" file-model="logoFile" accept="image/png, image/jpeg, image/svg+xml, image/webp" style="padding:6px;">
                                                <button type="button" class="btn-primary btn-sm" ng-click="uploadLogo()" style="width:auto;white-space:nowrap;">Upload Logo</button>
                                            </div>
                                            <small style="color:var(--text-muted);font-size:11px;display:block;margin-top:6px;">Recommended: Transparent PNG or SVG (340x70px)</small>
                                        </div>
                                    </div>

                                    <!-- Favicon Upload Box -->
                                    <div class="card" style="border:1px solid var(--border-color);">
                                        <div class="card-header" style="padding:12px 18px;">
                                            <h4 class="card-title" style="font-size:14px;">Site Favicon (Browser Tab Icon)</h4>
                                        </div>
                                        <div class="card-body" style="padding:18px;">
                                            <div class="preview-box">
                                                <img ng-src="{{ settings.favicon_url || 'assets/images/favicon.svg' }}" class="preview-favicon" alt="Favicon Preview">
                                                <span style="font-size:12px;color:var(--text-muted);">Current Active Favicon</span>
                                            </div>
                                            <div style="margin-top:14px;display:flex;gap:10px;">
                                                <input type="file" class="form-input" file-model="faviconFile" accept="image/x-icon, image/png, image/svg+xml" style="padding:6px;">
                                                <button type="button" class="btn-primary btn-sm" ng-click="uploadFavicon()" style="width:auto;white-space:nowrap;">Upload Favicon</button>
                                            </div>
                                            <small style="color:var(--text-muted);font-size:11px;display:block;margin-top:6px;">Recommended: Square PNG, ICO, or SVG (64x64px)</small>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <!-- ========================================================
                     VIEW: DAILY SALES ENTRY (FORM WITH REAL-TIME CALCS)
                     ======================================================== -->
                <div ng-if="currentView === 'daily_entry'">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="card-title">📝 Daily Sales & Settlement Statement Entry</h2>
                                <p class="card-subtitle">Automated iTopUp sale, 2.75% commission deduction, route cost, product items, and due calculation</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <form ng-submit="submitDailyEntry()">
                                
                                <!-- Meta Row: Date & RSO Selection -->
                                <div style="display:grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap:18px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border-color);">
                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">Statement Date</label>
                                        <input type="date" class="form-input" ng-model="entryForm.sale_date" required>
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;" ng-if="currentUser.role !== 'employee'">
                                        <label class="form-label">Select RSO Employee</label>
                                        <select class="form-input" ng-model="entryForm.user_id" ng-change="onRsoChangeInEntry()" required>
                                            <option ng-repeat="r in rsos" ng-value="r.id">{{ r.rso_code }} - {{ r.name }} ({{ r.route_name }})</option>
                                        </select>
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;" ng-if="currentUser.role === 'employee'">
                                        <label class="form-label">Employee</label>
                                        <input type="text" class="form-input" value="{{ currentUser.rso_code }} - {{ currentUser.name }}" readonly style="background:#F1F5F9;">
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">Route Allowance / Cost (Tk)</label>
                                        <input type="number" step="0.01" class="form-input" ng-model="entryForm.route_cost" ng-change="calcDailyEntry()" required>
                                    </div>
                                </div>

                                <!-- Section 1: iTopUp Sales Block -->
                                <h4 style="font-size:15px;font-weight:700;margin-bottom:12px;color:var(--secondary)">1. iTopUp Allocation & Sales</h4>
                                <div style="display:grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap:16px;background:#F8FAFC;padding:18px;border-radius:var(--radius-md);margin-bottom:24px;">
                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">iTop 1st Received</label>
                                        <input type="number" step="0.01" class="form-input" ng-model="entryForm.itop_1st" ng-change="calcDailyEntry()">
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">iTop 2nd Received</label>
                                        <input type="number" step="0.01" class="form-input" ng-model="entryForm.itop_2nd" ng-change="calcDailyEntry()">
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">iTop 3rd Received</label>
                                        <input type="number" step="0.01" class="form-input" ng-model="entryForm.itop_3rd" ng-change="calcDailyEntry()">
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">Total iTop Received</label>
                                        <input type="text" class="form-input" value="{{ entryCalc.itop_receive | number:2 }}" readonly style="background:#E2E8F0;font-weight:700;">
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">Closing iTop Stock</label>
                                        <input type="number" step="0.01" class="form-input" ng-model="entryForm.itop_stock" ng-change="calcDailyEntry()" placeholder="0">
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">Net iTop Sold</label>
                                        <input type="text" class="form-input" value="{{ entryCalc.itop_sale | number:2 }}" readonly style="background:#E2E8F0;font-weight:700;color:var(--primary)">
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">Commission ({{ settings.commission_rate }}%)</label>
                                        <input type="text" class="form-input" value="{{ entryCalc.commission_amount | number:2 }}" readonly style="background:#E2E8F0;color:var(--success);font-weight:700;">
                                    </div>

                                    <div class="form-group" style="margin-bottom:0;">
                                        <label class="form-label">Net iTop Receivable</label>
                                        <input type="text" class="form-input" value="{{ entryCalc.itop_net_amount | number:2 }}" readonly style="background:#FEF3C7;font-weight:800;color:#92400E;">
                                    </div>
                                </div>

                                <!-- Section 2: Products Sold Today -->
                                <h4 style="font-size:15px;font-weight:700;margin-bottom:12px;color:var(--secondary)">2. Products Sold (SIM Cards & Scratch Cards)</h4>
                                <div class="table-responsive" style="margin-bottom:24px;">
                                    <table class="custom-table">
                                        <thead>
                                            <tr>
                                                <th>Product Code & Name</th>
                                                <th class="text-right">Unit Price</th>
                                                <th style="width:160px;" class="text-right">Quantity Sold</th>
                                                <th class="text-right">Total Price</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="item in entryForm.items">
                                                <td><strong>{{ item.code }}</strong> - {{ item.name }}</td>
                                                <td class="text-right">{{ settings.currency_symbol }} {{ item.unit_price }}</td>
                                                <td class="text-right">
                                                    <input type="number" min="0" class="form-input" ng-model="item.quantity" ng-change="calcDailyEntry()" style="width:120px;text-align:right;display:inline-block;padding:6px 10px;">
                                                </td>
                                                <td class="text-right" style="font-weight:700;">
                                                    {{ settings.currency_symbol }} {{ (item.quantity * item.unit_price) | number:2 }}
                                                </td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr style="background:#F1F5F9;font-weight:800;">
                                                <td colspan="3" class="text-right">Total Product Sales Value:</td>
                                                <td class="text-right" style="color:var(--primary);font-size:15px;">
                                                    {{ settings.currency_symbol }} {{ entryCalc.product_total_amount | number:2 }}
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>

                                <!-- Section 3: Final Settlement & Cash Collection -->
                                <h4 style="font-size:15px;font-weight:700;margin-bottom:12px;color:var(--secondary)">3. Cash Collection & Due Settlement</h4>
                                <div style="display:grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap:20px;background:#FEF2F2;padding:20px;border-radius:var(--radius-md);margin-bottom:24px;border:1.5px solid #FECACA;">
                                    <div>
                                        <div style="font-size:12px;font-weight:700;color:#991B1B;text-transform:uppercase;">Grand Total Payable</div>
                                        <div style="font-size:26px;font-weight:800;color:#991B1B;margin-top:4px;">
                                            {{ settings.currency_symbol }} {{ entryCalc.total_amount | number:2 }}
                                        </div>
                                        <small style="color:var(--text-muted);font-size:11px;">(Net iTop: {{ entryCalc.itop_net_amount }} + Products: {{ entryCalc.product_total_amount }})</small>
                                    </div>

                                    <div>
                                        <label class="form-label" style="color:#991B1B;font-weight:700;">Actual Cash Received (Tk)</label>
                                        <input type="number" step="0.01" class="form-input" ng-model="entryForm.cash_received" ng-change="calcDailyEntry()" placeholder="0" required style="font-size:18px;font-weight:700;">
                                    </div>

                                    <div>
                                        <div style="font-size:12px;font-weight:700;text-transform:uppercase;" ng-class="{'text-danger': entryCalc.due_amount > 0, 'text-success': entryCalc.due_amount <= 0}">
                                            Daily Due / Balance
                                        </div>
                                        <div style="font-size:26px;font-weight:800;margin-top:4px;" ng-class="{'text-danger': entryCalc.due_amount > 0, 'text-success': entryCalc.due_amount <= 0}">
                                            {{ settings.currency_symbol }} {{ entryCalc.due_amount | number:2 }}
                                        </div>
                                        <small style="font-size:11px;color:var(--text-muted)">
                                            {{ entryCalc.due_amount > 0 ? 'Pending Collection' : (entryCalc.due_amount < 0 ? 'Advance Cash Deposited' : 'Fully Balanced') }}
                                        </small>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="form-label">Remarks / Route Notes</label>
                                    <textarea class="form-input" rows="2" ng-model="entryForm.notes" placeholder="Optional notes for today's route and closing"></textarea>
                                </div>

                                <button type="submit" class="btn-primary" ng-disabled="isSubmittingEntry" style="padding:14px;font-size:15px;">
                                    <span ng-if="!isSubmittingEntry">✓ Save & Submit Daily Statement</span>
                                    <span ng-if="isSubmittingEntry">Saving and updating stock...</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- ========================================================
                     VIEW: SALES STATEMENTS LIST
                     ======================================================== -->
                <div ng-if="currentView === 'sales'">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="card-title">📊 RSO Daily Sale Statements</h2>
                                <p class="card-subtitle">Complete log of all daily submissions and settlement summaries</p>
                            </div>
                            <button class="btn-primary btn-sm" ng-click="setView('daily_entry')">+ New Statement</button>
                        </div>
                        <div class="card-body">
                            
                            <!-- Filter Bar -->
                            <div class="filter-bar">
                                <div style="display:flex;align-items:center;gap:8px;">
                                    <label style="font-weight:600;font-size:12px;">Date:</label>
                                    <input type="date" class="form-input" ng-model="salesFilter.date" ng-change="loadSales()" style="padding:6px 10px;width:auto;">
                                </div>

                                <div style="display:flex;align-items:center;gap:8px;" ng-if="currentUser.role !== 'employee'">
                                    <label style="font-weight:600;font-size:12px;">RSO:</label>
                                    <select class="form-input" ng-model="salesFilter.user_id" ng-change="loadSales()" style="padding:6px 10px;width:auto;">
                                        <option value="">All RSOs</option>
                                        <option ng-repeat="r in rsos" ng-value="r.id">{{ r.rso_code }} - {{ r.name }}</option>
                                    </select>
                                </div>

                                <button class="btn-secondary btn-sm" ng-click="salesFilter={};loadSales()">Clear Filter</button>
                            </div>

                            <div class="table-responsive">
                                <table class="custom-table">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>RSO</th>
                                            <th class="text-right">iTop Sale</th>
                                            <th class="text-right">Comm (2.75%)</th>
                                            <th class="text-right">Route Cost</th>
                                            <th class="text-right">Net iTop</th>
                                            <th class="text-right">Products Value</th>
                                            <th class="text-right">Total Payable</th>
                                            <th class="text-right">Cash Received</th>
                                            <th class="text-right">Daily Due</th>
                                            <th>Status</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="s in salesList">
                                            <td><strong>{{ s.sale_date }}</strong></td>
                                            <td>
                                                <div><strong>{{ s.rso_code }}</strong></div>
                                                <div style="font-size:12px;color:var(--text-muted)">{{ s.rso_name }}</div>
                                            </td>
                                            <td class="text-right">{{ s.itop_sale | number:0 }}</td>
                                            <td class="text-right text-success">{{ s.commission_amount | number:2 }}</td>
                                            <td class="text-right">{{ s.route_cost | number:0 }}</td>
                                            <td class="text-right">{{ s.itop_net_amount | number:2 }}</td>
                                            <td class="text-right">{{ s.product_total_amount | number:2 }}</td>
                                            <td class="text-right font-weight-bold" style="color:var(--primary)">{{ settings.currency_symbol }} {{ s.total_amount | number:2 }}</td>
                                            <td class="text-right text-success font-weight-bold">{{ settings.currency_symbol }} {{ s.cash_received | number:2 }}</td>
                                            <td class="text-right font-weight-bold" ng-class="{'text-danger': s.due_amount > 0, 'text-success': s.due_amount <= 0}">
                                                {{ settings.currency_symbol }} {{ s.due_amount | number:2 }}
                                            </td>
                                            <td>
                                                <span class="table-pill" ng-class="{'pill-success': s.status==='approved', 'pill-warning': s.status==='pending'}">
                                                    {{ s.status }}
                                                </span>
                                            </td>
                                            <td class="text-center" style="white-space:nowrap;">
                                                <button class="btn-sm btn-secondary" ng-click="viewStatementDetails(s)" title="View Details" style="padding:4px 8px;">🔍 Slip</button>
                                                <button class="btn-sm btn-success" ng-if="s.status==='pending' && (currentUser.role==='admin' || currentUser.role==='hr')" ng-click="approveStatement(s)" title="Approve" style="padding:4px 8px;margin-left:4px;">✓ Approve</button>
                                                <button class="btn-sm btn-danger" ng-if="currentUser.role==='admin'" ng-click="deleteStatement(s)" title="Delete" style="padding:4px 8px;margin-left:4px;">🗑</button>
                                            </td>
                                        </tr>
                                        <tr ng-if="salesList.length === 0">
                                            <td colspan="12" class="text-center" style="padding:32px;color:var(--text-muted)">
                                                No daily statements found matching filter criteria.
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot ng-if="salesList.length > 0">
                                        <tr style="background:#F1F5F9;font-weight:800;">
                                            <td colspan="2">TOTALS ({{ salesList.length }} entries):</td>
                                            <td class="text-right">{{ salesTotals.itop_sale | number:0 }}</td>
                                            <td class="text-right text-success">{{ salesTotals.commission_amount | number:2 }}</td>
                                            <td class="text-right">{{ salesTotals.route_cost | number:0 }}</td>
                                            <td class="text-right">{{ salesTotals.itop_net_amount | number:2 }}</td>
                                            <td class="text-right">{{ salesTotals.product_total_amount | number:2 }}</td>
                                            <td class="text-right" style="color:var(--primary)">{{ settings.currency_symbol }} {{ salesTotals.total_amount | number:2 }}</td>
                                            <td class="text-right text-success">{{ settings.currency_symbol }} {{ salesTotals.cash_received | number:2 }}</td>
                                            <td class="text-right" ng-class="{'text-danger': salesTotals.due_amount > 0, 'text-success': salesTotals.due_amount <= 0}">
                                                {{ settings.currency_symbol }} {{ salesTotals.due_amount | number:2 }}
                                            </td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ========================================================
                     VIEW: DUE LEDGER MATRIX (MATCHES DUE.xlsx)
                     ======================================================== -->
                <div ng-if="currentView === 'dues'">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="card-title">📋 RSO Daily Due Ledger (DUE.xlsx)</h2>
                                <p class="card-subtitle">Cross-tabulated date-by-date daily due tracking and net balance reconciliation</p>
                            </div>
                            <div style="display:flex;gap:10px;">
                                <button class="btn-success btn-sm" ng-click="openRecordPaymentModal()" ng-if="currentUser.role !== 'employee'">+ Record Due Collection</button>
                            </div>
                        </div>
                        <div class="card-body">
                            
                            <div class="filter-bar">
                                <label style="font-weight:700;font-size:12px;">Month:</label>
                                <input type="month" class="form-input" ng-model="dueMonthFilter" ng-change="loadDueMatrix()" style="padding:6px 10px;width:auto;">
                                <span style="margin-left:auto;font-weight:800;color:var(--danger)">
                                    Grand Outstanding Balance: {{ settings.currency_symbol }} {{ dueMatrixData.grand_total_due | number:2 }}
                                </span>
                            </div>

                            <div class="table-responsive">
                                <table class="custom-table" style="font-size:12.5px;">
                                    <thead>
                                        <tr>
                                            <th style="position:sticky;left:0;background:#F1F5F9;z-index:2;">RSO Code & Name</th>
                                            <th ng-repeat="d in dueMatrixData.dates" class="text-right">{{ d.substring(5) }}</th>
                                            <th class="text-right" style="background:#FEF2F2;color:#991B1B;">Month Dues</th>
                                            <th class="text-right" style="background:#ECFDF5;color:#065F46;">Total Paid</th>
                                            <th class="text-right" style="position:sticky;right:0;background:#F1F5F9;z-index:2;font-weight:800;">Net Balance</th>
                                            <th class="text-center" ng-if="currentUser.role !== 'employee'">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="r in dueMatrixData.matrix" ng-if="currentUser.role !== 'employee' || r.user_id == currentUser.id">
                                            <td style="position:sticky;left:0;background:#FFFFFF;z-index:1;white-space:nowrap;">
                                                <strong>{{ r.rso_code }}</strong> - {{ r.name }}
                                            </td>
                                            <td ng-repeat="d in dueMatrixData.dates" class="text-right" ng-class="{'text-danger font-weight-bold': r.daily_dues[d] > 0, 'text-success': r.daily_dues[d] < 0}">
                                                {{ r.daily_dues[d] !== 0 ? (r.daily_dues[d] | number:1) : '-' }}
                                            </td>
                                            <td class="text-right font-weight-bold" style="background:#FFF5F5;">
                                                {{ settings.currency_symbol }} {{ r.month_total_due | number:2 }}
                                            </td>
                                            <td class="text-right text-success font-weight-bold" style="background:#F0FDF4;">
                                                {{ settings.currency_symbol }} {{ r.total_paid | number:2 }}
                                            </td>
                                            <td class="text-right font-weight-bold" style="position:sticky;right:0;background:#FFFFFF;z-index:1;" ng-class="{'text-danger': r.net_outstanding_due > 0, 'text-success': r.net_outstanding_due <= 0}">
                                                {{ settings.currency_symbol }} {{ r.net_outstanding_due | number:2 }}
                                            </td>
                                            <td class="text-center" ng-if="currentUser.role !== 'employee'">
                                                <button class="btn-sm btn-secondary" ng-click="openRecordPaymentModal(r)" style="padding:3px 8px;">Pay</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ========================================================
                     VIEW: PRODUCTS & STOCK MATRIX (MATCHES Product Stock.xlsx)
                     ======================================================== -->
                <div ng-if="currentView === 'products' && currentUser.role !== 'employee'">
                    
                    <!-- House Central Warehouse Stock -->
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="card-title">🏢 House Product Stock (Central Warehouse)</h2>
                                <p class="card-subtitle">Master product catalog, pricing, and central inventory availability</p>
                            </div>
                            <div style="display:flex;gap:10px;">
                                <button class="btn-success btn-sm" ng-if="currentUser.role==='admin'" ng-click="openCreateProductModal()">+ Add New Product</button>
                                <button class="btn-primary btn-sm" ng-click="openReceiveStockModal()">+ Receive Stock into House</button>
                                <button class="btn-secondary btn-sm" ng-click="openDistributeModal()">→ Handover to RSO</button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="custom-table">
                                <thead>
                                    <tr>
                                        <th>Product Code</th>
                                        <th>Product Name</th>
                                        <th>Category</th>
                                        <th class="text-right">Unit Price</th>
                                        <th class="text-right">Warehouse House Stock</th>
                                        <th class="text-right">Stock Valuation</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="p in products">
                                        <td><strong>{{ p.code }}</strong></td>
                                        <td>{{ p.name }}</td>
                                        <td><span class="table-pill pill-neutral">{{ p.category }}</span></td>
                                        <td class="text-right">{{ settings.currency_symbol }} {{ p.unit_price }}</td>
                                        <td class="text-right" style="font-weight:800;color:var(--primary);font-size:15px;">
                                            {{ p.house_stock }}
                                        </td>
                                        <td class="text-right font-weight-bold">
                                            {{ settings.currency_symbol }} {{ (p.house_stock * p.unit_price) | number:2 }}
                                        </td>
                                        <td class="text-center">
                                            <button class="btn-sm btn-secondary" ng-click="openReceiveStockModal(p)">+ Add Stock</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- RSO Stock Cross-Matrix -->
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="card-title">🚴 RSO Product Stock Matrix</h2>
                                <p class="card-subtitle">Live stock held in the field across all 14 RSO routes</p>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="custom-table" style="font-size:12px;">
                                <thead>
                                    <tr>
                                        <th>RSO Code & Name</th>
                                        <th>Route</th>
                                        <th ng-repeat="mp in matrixProducts" class="text-center" style="border-left:1px solid var(--border-color)">
                                            {{ mp.code }}
                                            <div style="font-size:10px;color:var(--text-muted);font-weight:normal">Rcv | Sold | Stk</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="m in stockMatrix">
                                        <td><strong>{{ m.rso_code }}</strong> - {{ m.name }}</td>
                                        <td><span class="table-pill pill-neutral">{{ m.route_name }}</span></td>
                                        <td ng-repeat="mp in matrixProducts" class="text-center" style="border-left:1px solid var(--border-color)">
                                            <span style="color:#64748B;">{{ m.products[mp.id].received }}</span> /
                                            <span style="color:#10B981;">{{ m.products[mp.id].sold }}</span> /
                                            <strong style="color:var(--primary)">{{ m.products[mp.id].stock }}</strong>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                <!-- ========================================================
                     VIEW: MY IN-HAND PRODUCT STOCK (EMPLOYEE)
                     ======================================================== -->
                <div ng-if="currentView === 'my_stock'">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="card-title">📦 My In-Hand Product Stock</h2>
                                <p class="card-subtitle">Live in-hand balance of SIM cards, scratch cards, and kits in your custody</p>
                            </div>
                            <button class="btn-primary btn-sm" ng-click="setView('daily_entry')">+ Submit Today's Statement</button>
                        </div>
                        <div class="table-responsive">
                            <table class="custom-table">
                                <thead>
                                    <tr>
                                        <th>Product Code</th>
                                        <th>Product Name</th>
                                        <th>Category</th>
                                        <th class="text-right">Unit Price</th>
                                        <th class="text-right">Total Received</th>
                                        <th class="text-right">Total Sold</th>
                                        <th class="text-right">Current Stock In Hand</th>
                                        <th class="text-right">Stock Valuation</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="st in overview.stock">
                                        <td><strong>{{ st.product_code }}</strong></td>
                                        <td>{{ st.product_name }}</td>
                                        <td><span class="table-pill pill-neutral">{{ st.category }}</span></td>
                                        <td class="text-right">{{ settings.currency_symbol }} {{ st.unit_price }}</td>
                                        <td class="text-right">{{ st.received }}</td>
                                        <td class="text-right text-success font-weight-bold">{{ st.sold }}</td>
                                        <td class="text-right" style="font-weight:800;color:var(--primary);font-size:15px;">{{ st.current_stock }}</td>
                                        <td class="text-right font-weight-bold">{{ settings.currency_symbol }} {{ (st.current_stock * st.unit_price) | number:2 }}</td>
                                    </tr>
                                    <tr ng-if="!overview.stock || overview.stock.length === 0">
                                        <td colspan="8" class="text-center" style="padding:32px;color:var(--text-muted)">
                                            No products assigned or stock record found.
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- ========================================================
                     VIEW: USER & RSO DIRECTORY (ADMIN / HR)
                     ======================================================== -->
                <div ng-if="currentView === 'users' && currentUser.role !== 'employee'">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="card-title">👥 User & RSO Employee Management</h2>
                                <p class="card-subtitle">Manage accounts, assign field delivery routes, base allowances and passwords</p>
                            </div>
                            <button class="btn-primary btn-sm" ng-click="openCreateUserModal()">+ Add New User / RSO</button>
                        </div>
                        <div class="table-responsive">
                            <table class="custom-table">
                                <thead>
                                    <tr>
                                        <th>Role</th>
                                        <th>RSO Code</th>
                                        <th>Name</th>
                                        <th>Username</th>
                                        <th>Mobile SIM</th>
                                        <th>Route</th>
                                        <th class="text-right">Base Cost</th>
                                        <th>Status</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="u in allUsers">
                                        <td>
                                            <span class="user-role-badge" ng-class="{'role-admin': u.role==='admin', 'role-hr': u.role==='hr', 'role-employee': u.role==='employee'}">
                                                {{ u.role }}
                                            </span>
                                        </td>
                                        <td><strong>{{ u.rso_code || '-' }}</strong></td>
                                        <td>{{ u.name }}</td>
                                        <td><code>{{ u.username }}</code></td>
                                        <td>{{ u.mobile || '-' }}</td>
                                        <td>{{ u.route_name || '-' }}</td>
                                        <td class="text-right">{{ settings.currency_symbol }} {{ u.base_route_cost || 0 }}</td>
                                        <td>
                                            <span class="table-pill" ng-class="{'pill-success': u.status==='active', 'pill-danger': u.status==='inactive'}">
                                                {{ u.status }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <button class="btn-sm btn-secondary" ng-click="openEditUserModal(u)" style="margin-right:4px;">Edit</button>
                                            <button class="btn-sm btn-secondary" ng-click="resetPassword(u)" style="margin-right:4px;">Reset Pass</button>
                                            <button class="btn-sm" ng-if="currentUser.role==='admin'" ng-class="{'btn-danger': u.status==='active', 'btn-success': u.status==='inactive'}" ng-click="toggleUserStatus(u)">
                                                {{ u.status==='active' ? 'Deactivate' : 'Activate' }}
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </main>
        </div>
    </div>

    <!-- ====================================================================
         MODALS (Add User, House Stock, Distribute Stock, Due Payment)
         ==================================================================== -->

    <!-- Modal: Add / Edit User -->
    <div class="modal-backdrop" ng-if="userModalOpen">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">{{ modalUser.id ? 'Edit User Details' : 'Add New User / RSO' }}</h3>
                <button type="button" class="modal-close" ng-click="$parent.userModalOpen = false">&times;</button>
            </div>
            <div class="modal-body">
                <form ng-submit="saveUser()">
                    <div class="form-group">
                        <label class="form-label">Full Name</label>
                        <input type="text" class="form-input" ng-model="modalUser.name" required>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div class="form-group">
                            <label class="form-label">Username</label>
                            <input type="text" class="form-input" ng-model="modalUser.username" ng-disabled="modalUser.id" required>
                        </div>

                        <div class="form-group" ng-if="!modalUser.id">
                            <label class="form-label">Default Password</label>
                            <input type="text" class="form-input" ng-model="modalUser.password" required>
                        </div>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div class="form-group">
                            <label class="form-label">Role</label>
                            <select class="form-input" ng-model="modalUser.role" required>
                                <option value="employee">Employee / RSO</option>
                                <option value="hr">HR Manager</option>
                                <option value="admin">System Admin</option>
                            </select>
                        </div>

                        <div class="form-group" ng-if="modalUser.role === 'employee'">
                            <label class="form-label">RSO Code</label>
                            <input type="text" class="form-input" ng-model="modalUser.rso_code" placeholder="e.g. RS057075">
                        </div>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div class="form-group">
                            <label class="form-label">Mobile Number</label>
                            <input type="text" class="form-input" ng-model="modalUser.mobile" placeholder="01908446074">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Route Name / Territory</label>
                            <input type="text" class="form-input" ng-model="modalUser.route_name" placeholder="Route-01">
                        </div>
                    </div>

                    <div class="form-group" ng-if="modalUser.role === 'employee'">
                        <label class="form-label">Base Daily Route Cost (Tk)</label>
                        <input type="number" step="0.01" class="form-input" ng-model="modalUser.base_route_cost">
                    </div>

                    <div class="modal-footer" style="padding:0;margin-top:20px;border-top:none;background:none;">
                        <button type="button" class="btn-secondary" ng-click="$parent.userModalOpen = false">Cancel</button>
                        <button type="submit" class="btn-primary">Save User</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal: Receive House Stock -->
    <div class="modal-backdrop" ng-if="houseStockModalOpen">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Receive Stock into Central Warehouse</h3>
                <button type="button" class="modal-close" ng-click="$parent.houseStockModalOpen = false">&times;</button>
            </div>
            <div class="modal-body">
                <form ng-submit="saveHouseStock()">
                    <div class="form-group">
                        <label class="form-label">Select Product</label>
                        <select class="form-input" ng-model="houseStockForm.product_id" required>
                            <option ng-repeat="p in products" ng-value="p.id">{{ p.code }} - {{ p.name }} (Current: {{ p.house_stock }})</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Quantity to Receive</label>
                        <input type="number" min="1" class="form-input" ng-model="houseStockForm.quantity" required>
                    </div>

                    <div class="modal-footer" style="padding:0;margin-top:20px;border-top:none;background:none;">
                        <button type="button" class="btn-secondary" ng-click="$parent.houseStockModalOpen = false">Cancel</button>
                        <button type="submit" class="btn-primary">Add to Warehouse Stock</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal: Distribute Stock to RSO -->
    <div class="modal-backdrop" ng-if="distributeModalOpen">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Issue Product Stock to RSO</h3>
                <button type="button" class="modal-close" ng-click="$parent.distributeModalOpen = false">&times;</button>
            </div>
            <div class="modal-body">
                <form ng-submit="saveDistribution()">
                    <div class="form-group">
                        <label class="form-label">Issue Date</label>
                        <input type="date" class="form-input" ng-model="distributeForm.date" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Select RSO</label>
                        <select class="form-input" ng-model="distributeForm.user_id" required>
                            <option ng-repeat="r in rsos" ng-value="r.id">{{ r.rso_code }} - {{ r.name }}</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Select Product to Issue</label>
                        <select class="form-input" ng-model="distributeForm.product_id" required>
                            <option ng-repeat="p in products" ng-value="p.id">{{ p.code }} - {{ p.name }} (Warehouse Stock: {{ p.house_stock }})</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Quantity</label>
                        <input type="number" min="1" class="form-input" ng-model="distributeForm.quantity" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Remarks / Voucher No</label>
                        <input type="text" class="form-input" ng-model="distributeForm.notes" placeholder="e.g. Morning route issue">
                    </div>

                    <div class="modal-footer" style="padding:0;margin-top:20px;border-top:none;background:none;">
                        <button type="button" class="btn-secondary" ng-click="$parent.distributeModalOpen = false">Cancel</button>
                        <button type="submit" class="btn-primary">Confirm Issue to RSO</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal: Record Due Collection / Payment -->
    <div class="modal-backdrop" ng-if="paymentModalOpen">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Record Due Collection / Payment</h3>
                <button type="button" class="modal-close" ng-click="$parent.paymentModalOpen = false">&times;</button>
            </div>
            <div class="modal-body">
                <form ng-submit="saveDuePayment()">
                    <div class="form-group">
                        <label class="form-label">Select RSO</label>
                        <select class="form-input" ng-model="paymentForm.user_id" required>
                            <option ng-repeat="r in rsos" ng-value="r.id">{{ r.rso_code }} - {{ r.name }}</option>
                        </select>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div class="form-group">
                            <label class="form-label">Payment Date</label>
                            <input type="date" class="form-input" ng-model="paymentForm.payment_date" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Amount Collected (Tk)</label>
                            <input type="number" step="0.01" class="form-input" ng-model="paymentForm.amount" required>
                        </div>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div class="form-group">
                            <label class="form-label">Payment Method</label>
                            <select class="form-input" ng-model="paymentForm.payment_type">
                                <option value="cash">Cash Collection</option>
                                <option value="bank">Bank Deposit / MFS</option>
                                <option value="adjustment">Commission Adjustment</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Reference / Slip No</label>
                            <input type="text" class="form-input" ng-model="paymentForm.reference" placeholder="e.g. SLIP-102">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Notes</label>
                        <input type="text" class="form-input" ng-model="paymentForm.notes" placeholder="Previous due clearance">
                    </div>

                    <div class="modal-footer" style="padding:0;margin-top:20px;border-top:none;background:none;">
                        <button type="button" class="btn-secondary" ng-click="$parent.paymentModalOpen = false">Cancel</button>
                        <button type="submit" class="btn-primary">Save Due Payment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal: Statement Details Slip -->
    <div class="modal-backdrop" ng-if="statementDetailsModalOpen">
        <div class="modal-content" style="max-width:750px;">
            <div class="modal-header">
                <div>
                    <h3 class="modal-title">📄 Daily Statement Slip #{{ selectedSale.id }}</h3>
                    <div style="font-size:12px;color:var(--text-muted)">
                        Date: <strong>{{ selectedSale.sale_date }}</strong> | RSO: <strong>{{ selectedSale.rso_code }} - {{ selectedSale.rso_name }}</strong> ({{ selectedSale.route_name }})
                    </div>
                </div>
                <button type="button" class="modal-close" ng-click="$parent.statementDetailsModalOpen = false">&times;</button>
            </div>
            <div class="modal-body">
                <!-- iTopUp Summary Box -->
                <div style="background:#F8FAFC;padding:14px;border-radius:var(--radius-md);margin-bottom:18px;">
                    <h4 style="font-size:13px;font-weight:700;margin-bottom:8px;text-transform:uppercase;color:var(--secondary)">1. iTopUp Computation</h4>
                    <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));gap:10px;font-size:12px;">
                        <div>iTop Received: <strong>{{ settings.currency_symbol }} {{ selectedSale.itop_receive | number:2 }}</strong></div>
                        <div>Closing Stock: <strong>{{ settings.currency_symbol }} {{ selectedSale.itop_stock | number:2 }}</strong></div>
                        <div>iTop Sold: <strong style="color:var(--primary)">{{ settings.currency_symbol }} {{ selectedSale.itop_sale | number:2 }}</strong></div>
                        <div>Commission ({{ selectedSale.commission_rate }}%): <strong class="text-success">{{ settings.currency_symbol }} {{ selectedSale.commission_amount | number:2 }}</strong></div>
                        <div>Route Cost: <strong>{{ settings.currency_symbol }} {{ selectedSale.route_cost | number:2 }}</strong></div>
                        <div style="grid-column: span 2;background:#FEF3C7;padding:6px;border-radius:4px;font-weight:800;color:#92400E;">
                            Net iTop Payable: {{ settings.currency_symbol }} {{ selectedSale.itop_net_amount | number:2 }}
                        </div>
                    </div>
                </div>

                <!-- Product Items Sold -->
                <h4 style="font-size:13px;font-weight:700;margin-bottom:8px;text-transform:uppercase;color:var(--secondary)">2. Products Sold (Physical SIM & Scratch Cards)</h4>
                <div class="table-responsive" style="margin-bottom:18px;">
                    <table class="custom-table" style="font-size:12px;">
                        <thead>
                            <tr>
                                <th>Product Item</th>
                                <th class="text-right">Unit Price</th>
                                <th class="text-right">Qty Sold</th>
                                <th class="text-right">Total Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="it in selectedSaleItems">
                                <td><strong>{{ it.product_code }}</strong> - {{ it.product_name }}</td>
                                <td class="text-right">{{ settings.currency_symbol }} {{ it.unit_price }}</td>
                                <td class="text-right font-weight-bold">{{ it.quantity }}</td>
                                <td class="text-right font-weight-bold">{{ settings.currency_symbol }} {{ it.total_price | number:2 }}</td>
                            </tr>
                            <tr ng-if="!selectedSaleItems || selectedSaleItems.length === 0">
                                <td colspan="4" class="text-center" style="padding:12px;color:var(--text-muted)">No physical products were sold on this date.</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr style="background:#F1F5F9;font-weight:800;">
                                <td colspan="3" class="text-right">Total Product Value:</td>
                                <td class="text-right" style="color:var(--primary)">{{ settings.currency_symbol }} {{ selectedSale.product_total_amount | number:2 }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Financial Settlement Box -->
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;background:#FEF2F2;padding:14px;border-radius:var(--radius-md);border:1px solid #FECACA;font-size:13px;">
                    <div>
                        <div style="font-size:11px;font-weight:700;color:#991B1B;">GRAND TOTAL PAYABLE</div>
                        <div style="font-size:18px;font-weight:800;color:#991B1B;">{{ settings.currency_symbol }} {{ selectedSale.total_amount | number:2 }}</div>
                    </div>
                    <div>
                        <div style="font-size:11px;font-weight:700;color:#065F46;">CASH DEPOSITED</div>
                        <div style="font-size:18px;font-weight:800;color:#065F46;">{{ settings.currency_symbol }} {{ selectedSale.cash_received | number:2 }}</div>
                    </div>
                    <div>
                        <div style="font-size:11px;font-weight:700;" ng-class="{'text-danger': selectedSale.due_amount > 0, 'text-success': selectedSale.due_amount <= 0}">DAILY DUE</div>
                        <div style="font-size:18px;font-weight:800;" ng-class="{'text-danger': selectedSale.due_amount > 0, 'text-success': selectedSale.due_amount <= 0}">{{ settings.currency_symbol }} {{ selectedSale.due_amount | number:2 }}</div>
                    </div>
                </div>

                <div ng-if="selectedSale.notes" style="margin-top:14px;font-size:12px;background:#F8FAFC;padding:10px;border-radius:4px;">
                    <strong>Remarks:</strong> {{ selectedSale.notes }}
                </div>

                <div class="modal-footer" style="padding:0;margin-top:20px;border-top:none;background:none;display:flex;justify-content:space-between;align-items:center;">
                    <span class="table-pill" ng-class="{'pill-success': selectedSale.status==='approved', 'pill-warning': selectedSale.status==='pending'}">
                        Status: {{ selectedSale.status }}
                    </span>
                    <div>
                        <button type="button" class="btn-success btn-sm" ng-if="selectedSale.status==='pending' && (currentUser.role==='admin' || currentUser.role==='hr')" ng-click="approveStatement(selectedSale);$parent.statementDetailsModalOpen=false" style="margin-right:8px;">✓ Approve Statement</button>
                        <button type="button" class="btn-secondary btn-sm" ng-click="$parent.statementDetailsModalOpen = false">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Add New Product (Admin) -->
    <div class="modal-backdrop" ng-if="newProductModalOpen">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Add New Product to Catalog</h3>
                <button type="button" class="modal-close" ng-click="$parent.newProductModalOpen = false">&times;</button>
            </div>
            <div class="modal-body">
                <form ng-submit="saveNewProduct()">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div class="form-group">
                            <label class="form-label">Product Code</label>
                            <input type="text" class="form-input" ng-model="newProductForm.code" placeholder="e.g. Sim-250" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Category</label>
                            <select class="form-input" ng-model="newProductForm.category" required>
                                <option value="SIM">SIM Card</option>
                                <option value="ScratchCard">Scratch Card</option>
                                <option value="Kit">Registration Kit</option>
                                <option value="Other">Other Material</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Product Name / Description</label>
                        <input type="text" class="form-input" ng-model="newProductForm.name" placeholder="e.g. Banglalink Special SIM 250" required>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        <div class="form-group">
                            <label class="form-label">Unit Price (Tk)</label>
                            <input type="number" step="0.01" min="0" class="form-input" ng-model="newProductForm.unit_price" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Initial Warehouse Stock</label>
                            <input type="number" min="0" class="form-input" ng-model="newProductForm.house_stock" required>
                        </div>
                    </div>

                    <div class="modal-footer" style="padding:0;margin-top:20px;border-top:none;background:none;">
                        <button type="button" class="btn-secondary" ng-click="$parent.newProductModalOpen = false">Cancel</button>
                        <button type="submit" class="btn-primary">Save Product</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>
</html>
