<?php
    // Software Version - Bump this whenever you release a new update
    $v = "1.2.1"; 
?>
<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>بابا نوید ٹریڈرز — غلہ منڈی اوکاڑہ</title>
    
    <script>
        // Global Version for JS cache busting
        const APP_VERSION = "<?php echo $v; ?>";
    </script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <!-- Main CSS Bundle -->
    <link rel="stylesheet" href="css/variables.css?v=<?php echo $v; ?>">
    <link rel="stylesheet" href="css/base.css?v=<?php echo $v; ?>">
    <link rel="stylesheet" href="css/layout.css?v=<?php echo $v; ?>">
    <link rel="stylesheet" href="css/components.css?v=<?php echo $v; ?>">
    <link rel="stylesheet" href="css/forms.css?v=<?php echo $v; ?>">
    <link rel="stylesheet" href="css/toast.css?v=<?php echo $v; ?>">
    <link rel="stylesheet" href="css/print.css?v=<?php echo $v; ?>">
    
</head>
<body>

    <div class="wrapper">
        <!-- Sidebar Overlay (Mobile) -->
        <div class="sidebar-overlay" id="sidebarOverlay"></div>

        <!-- Sidebar Navigation -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <img src="assets/logo.png" alt="Logo" class="sidebar-logo" id="mainLogo">
                <div class="sidebar-brand">
                    <h2>بابا نوید ٹریڈرز</h2>
                    <p>غلہ منڈی، اوکاڑہ</p>
                </div>
            </div>

            <nav class="sidebar-nav">
                <div class="nav-group-title">مین مینیو</div>
                <div class="nav-item" data-module="dashboard" data-action="view">
                    <a href="#dashboard" class="nav-link active" data-page="dashboard">
                        <i class="fas fa-home"></i> ڈیش بورڈ
                    </a>
                </div>

                <div class="nav-group-title">خرید و فروخت</div>
                <div class="nav-item-group">
                    <div class="nav-item" data-module="purchase" data-action="view">
                        <a href="#purchase" class="nav-link" data-page="purchase">
                            <i class="fas fa-plus"></i> کچی پرچی (آمد)
                        </a>
                    </div>
                    <div class="nav-item" data-module="purchase" data-action="view">
                        <a href="#purchase-list" class="nav-link" data-page="purchase-list">
                            <i class="fas fa-history"></i> آمد مینیو / ہسٹری
                        </a>
                    </div>
                </div>

                <div class="nav-item-group mt-2">
                    <div class="nav-item" data-module="sale" data-action="view">
                        <a href="#sale" class="nav-link" data-page="sale">
                            <i class="fas fa-plus"></i> پکی پرچی (بکری)
                        </a>
                    </div>
                    <div class="nav-item" data-module="sale" data-action="view">
                        <a href="#sale-list" class="nav-link" data-page="sale-list">
                            <i class="fas fa-history"></i> بکری مینیو / ہسٹری
                        </a>
                    </div>
                </div>

                <div class="nav-group-title">کھاتے اور رپورٹس</div>
                <div class="nav-item" data-module="ledger" data-action="view">
                    <a href="#ledger" class="nav-link" data-page="ledger">
                        <i class="fas fa-book"></i> لیجر (کھاتہ)
                    </a>
                </div>
                <div class="nav-item" data-module="ledger" data-action="view">
                    <a href="#all-balances" class="nav-link" data-page="all-balances">
                        <i class="fas fa-list-numeric"></i> تمام بیلنس رپورٹ
                    </a>
                </div>
                <div class="nav-item" data-module="ledger" data-action="view">
                    <a href="#item-ledger" class="nav-link" data-page="item-ledger">
                        <i class="fas fa-wheat-awn"></i> اجناس کا کھاتہ
                    </a>
                </div>
                <div class="nav-item" data-module="cashBank" data-action="view">
                    <a href="#cash-bank" class="nav-link" data-page="cash-bank">
                        <i class="fas fa-university"></i> روزنامچہ (نقد/بینک)
                    </a>
                </div>
                <div class="nav-item" data-module="ledger" data-action="create">
                    <a href="#opening-voucher" class="nav-link" data-page="opening-voucher">
                        <i class="fas fa-hand-holding-usd"></i> نیا سرمایہ ڈالیں
                    </a>
                </div>

                <div class="nav-group-title">سیٹ اپ</div>
                <div class="nav-item" data-module="setup" data-action="view">
                    <a href="#setup-party" class="nav-link" data-page="setup-party">
                        <i class="fas fa-users"></i> پارٹیوں کا اندراج
                    </a>
                </div>
                <div class="nav-item" data-module="setup" data-action="view">
                    <a href="#setup-account" class="nav-link" data-page="setup-account">
                        <i class="fas fa-piggy-bank"></i> بینک/کیش اکاؤنٹس
                    </a>
                </div>
                <div class="nav-item" data-module="setup" data-action="view">
                    <a href="#setup-item" class="nav-link" data-page="setup-item">
                        <i class="fas fa-seedling"></i> اجناس (Items)
                    </a>
                </div>

                <div class="nav-item" data-module="users" data-action="view">
                    <a href="#users" class="nav-link" data-page="users">
                        <i class="fas fa-user-lock"></i> صارفین اور اختیارات
                    </a>
                </div>
            </nav>
        </aside>

        <!-- Main Content Wrapper -->
        <main class="main-content">
            <!-- Header Bar -->
            <header class="header">
                <div class="d-flex align-center gap-4">
                    <div class="mobile-toggle" id="mobileToggle">
                        <i class="fas fa-bars"></i>
                    </div>
                    <div class="header-title">
                        <h1 id="pageTitle">ڈیش بورڈ</h1>
                    </div>
                </div>

                <div class="header-meta d-flex align-center gap-4">
                    <div id="currentDate">منگل، 31 مارچ 2026</div>
                    
                    <div class="user-profile" id="userProfile">
                        <div class="user-avatar text-accent">
                            <i class="fas fa-user-circle"></i>
                            <span class="status-indicator"></span>
                        </div>
                        <div class="user-details">
                            <span class="user-name" id="userName">لوڈنگ...</span>
                            <span class="user-role" id="userRole">...</span>
                        </div>
                    </div>

                    <button class="btn btn-icon btn-outline btn-sm" id="logoutBtn" onclick="API.logout()" title="لاگ آؤٹ">
                        <i class="fas fa-sign-out-alt"></i>
                    </button>
                </div>
            </header>

            <!-- Page Content Injection Point -->
            <div class="content-area" id="app-content">
                <!-- Pages will be loaded here via AJAX -->
            </div>
        </main>
    </div>

    <!-- Toast Notifications Container -->
    <div id="toast-container"></div>

    <!-- Essential Scripts -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <!-- SPA Custom Scripts -->
    <!-- Reusable Print/View Modal -->
    <div id="printModal" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 800px; padding: 0;">
            <div class="modal-header no-print">
                <h3 class="modal-title">پرچی رسید (Voucher View)</h3>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary btn-sm" onclick="window.print()">
                        <i class="fas fa-print"></i> پرنٹ کریں
                    </button>
                    <span class="close-modal" onclick="closePrintModal()">&times;</span>
                </div>
            </div>
            <div class="modal-body" id="printArea" style="padding: 20px;">
                <!-- Data injected here -->
            </div>
        </div>
    </div>

    <style>
        @media print {
            body > *:not(#printModal) { display: none !important; }
            #printModal { display: block !important; position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
            .no-print { display: none !important; }
            .modal-content { border: none !important; box-shadow: none !important; margin: 0 !important; max-width: 100% !important; }
            #printArea { padding: 0 !important; }
        }
        .print-paper { 
            background: white; 
            color: black; 
            padding: 20px; 
            border: 1px solid #eee;
            font-family: 'Outfit', 'Segoe UI', Tahoma, sans-serif;
            direction: rtl;
        }
        .print-header { text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 15px; }
        .print-header h1 { margin: 0; font-size: 24px; color: #000; }
        .print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
        .print-label { font-weight: bold; font-size: 14px; color: #555; }
        .print-value { font-size: 16px; font-weight: bold; border-bottom: 1px dotted #ccc; padding-bottom: 2px; }
        .print-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .print-table th, .print-table td { border: 1px solid #000; padding: 6px 10px; text-align: center; }
        .print-table th { background: #f0f0f0; }
        .print-footer { margin-top: 40px; display: flex; justify-content: space-between; }
        .sig-box { border-top: 1px solid #000; width: 150px; text-align: center; margin-top: 10px; padding-top: 5px; }
    </style>

    <script src="js/api.js?v=<?php echo $v; ?>"></script>
    <script src="js/data.js?v=<?php echo $v; ?>"></script>
    <script src="js/utils.js?v=<?php echo $v; ?>"></script>
    <script src="js/toast.js?v=<?php echo $v; ?>"></script>
    <script src="js/sidebar.js?v=<?php echo $v; ?>"></script>
    <script src="js/app.js?v=<?php echo $v; ?>"></script>
    
</body>
</html>
