<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>G zavod PRO — Tovar, Tarix va Statistika Tizimi</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary: #0f172a;
            --accent: #2563eb;
            --bg-body: #f8fafc;
        }
        body {
            background-color: var(--bg-body);
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            color: #334155;
        }
        .app-header {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.12);
        }
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 18px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            height: 100%;
        }
        .stat-value {
            font-size: 1.35rem;
            font-weight: 700;
        }
        .table-responsive {
            background: white;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }
        .table th {
            background-color: #f1f5f9;
            color: #475569;
            font-size: 0.78rem;
            text-transform: uppercase;
        }
        .inp-calc {
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            padding: 4px 8px;
            width: 100%;
            font-size: 0.9rem;
        }
        .inp-calc:focus {
            border-color: #2563eb;
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }
        .nav-tabs .nav-link {
            font-weight: 600;
            color: #64748b;
            border: none;
            border-bottom: 3px solid transparent;
            padding: 12px 20px;
        }
        .nav-tabs .nav-link.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            background: transparent;
        }
        .chart-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e2e8f0;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="container-fluid py-4 px-md-5">
    <!-- Header -->
    <div class="app-header d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
        <div>
            <h3 class="fw-bold mb-1"><i class="fa-solid fa-industry text-primary me-2"></i>G zavod — PRO Tovar & Statistika Tizimi</h3>
            <p class="text-white-50 mb-0">Kunlik Hisobot, Kalender Tarixi va Oylik/Yillik Grafiklari</p>
        </div>
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <input type="date" id="selected-date" class="form-control form-control-sm w-auto" onchange="changeDate()">
            <button class="btn btn-primary btn-sm" onclick="saveDailyReport()"><i class="fa-solid fa-floppy-disk me-1"></i> Kunlik Hisobotni Saqlash</button>
            <button class="btn btn-outline-light btn-sm" onclick="exportJSON()"><i class="fa-solid fa-download me-1"></i> Backup</button>
        </div>
    </div>

    <!-- Analytics Cards -->
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-md-4 col-xl-2">
            <div class="stat-card">
                <div class="text-muted small fw-semibold">OMBORDAGI MIQDOR</div>
                <div class="stat-value text-dark mt-1" id="dash-qoyma-qty">736.75 dona</div>
                <div class="small text-muted mt-1"><span id="dash-product-count">42</span> xil mahsulot</div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-xl-2">
            <div class="stat-card">
                <div class="text-muted small fw-semibold">SOTILGAN TOVAR</div>
                <div class="stat-value text-primary mt-1" id="dash-sotildi-qty">0 dona</div>
                <div class="small text-muted mt-1">Tanlangan kun bo'yicha</div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-xl-2">
            <div class="stat-card">
                <div class="text-muted small fw-semibold">KUNLIK TUSHUM</div>
                <div class="stat-value text-success mt-1" id="dash-tushum">0 sum</div>
                <div class="small text-muted mt-1">Sotuv summasi</div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-xl-2">
            <div class="stat-card">
                <div class="text-muted small fw-semibold">QOLGAN O'ZLIK BAHOSI</div>
                <div class="stat-value text-info mt-1" id="dash-ozlik-total">6 839.40 sum</div>
                <div class="small text-muted mt-1">Ombor tan narxi</div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-xl-2">
            <div class="stat-card">
                <div class="text-muted small fw-semibold">SOF FOYDA</div>
                <div class="stat-value text-success mt-1" id="dash-foyda">0 sum</div>
                <div class="small text-muted mt-1">Kunlik sof daromad</div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-xl-2">
            <div class="stat-card">
                <div class="text-muted small fw-semibold">JAMI MIJOZ QARZI</div>
                <div class="stat-value text-danger mt-1" id="dash-qarz-total">0 sum</div>
                <div class="small text-muted mt-1"><span id="dash-qarz-count">0</span> ta qarzdor</div>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-tabs mb-4" id="mainTab" role="tablist">
        <li class="nav-item">
            <button class="nav-link active" id="ombor-tab" data-bs-toggle="tab" data-bs-target="#ombor-pane" type="button"><i class="fa-solid fa-boxes-stacked me-2"></i>1. Tovarlar Hisobi (42 xil)</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" id="charts-tab" data-bs-toggle="tab" data-bs-target="#charts-pane" type="button"><i class="fa-solid fa-chart-line me-2"></i>2. Oylik & Yillik Grafigi</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history-pane" type="button"><i class="fa-solid fa-calendar-days me-2"></i>3. Kunlar Bo'yicha Tarix</button>
        </li>
    </ul>

    <div class="tab-content" id="mainTabContent">
        <!-- TAB 1: OMBOR -->
        <div class="tab-pane fade show active" id="ombor-pane" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <input type="text" class="form-control w-auto flex-grow-1" style="max-width:320px;" id="searchTovar" placeholder="🔍 Tovar qidirish..." oninput="filterTovar()">
                <button class="btn btn-warning text-dark btn-sm" onclick="resetTo42()"><i class="fa-solid fa-rotate-left me-1"></i> Asl 42 ta Tovarni Tiklash</button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>№</th>
                            <th>Tovar Nomi</th>
                            <th class="text-end">Bor edi</th>
                            <th class="text-end">Sotildi</th>
                            <th class="text-end fw-bold text-primary">Qoldi</th>
                            <th class="text-end">Sotuv Narxi</th>
                            <th class="text-end">O'zlik Bahosi</th>
                            <th class="text-end fw-bold text-success">Jami Tushum</th>
                            <th class="text-center">Amal</th>
                        </tr>
                    </thead>
                    <tbody id="tovarTbody"></tbody>
                    <tfoot class="table-light fw-bold">
                        <tr>
                            <td colspan="2" class="text-end">JAMI:</td>
                            <td class="text-end" id="foot-bor-edi">0</td>
                            <td class="text-end text-primary" id="foot-sotildi">0</td>
                            <td class="text-end text-primary fs-6" id="foot-qoldi">0</td>
                            <td colspan="2"></td>
                            <td class="text-end text-success fs-6" id="foot-tushum">0 sum</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <!-- TAB 2: GRAFIKLAR -->
        <div class="tab-pane fade" id="charts-pane" role="tabpanel">
            <div class="row">
                <div class="col-12 col-lg-6">
                    <div class="chart-card">
                        <h5 class="fw-bold mb-3"><i class="fa-solid fa-chart-column me-2 text-primary"></i>Oylik Savdo va Tushum Grafigi</h5>
                        <canvas id="monthlyChart"></canvas>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="chart-card">
                        <h5 class="fw-bold mb-3"><i class="fa-solid fa-chart-line me-2 text-success"></i>Oylik Sof Foyda Grafigi</h5>
                        <canvas id="profitChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB 3: KUNLIK TARIX -->
        <div class="tab-pane fade" id="history-pane" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold mb-0"><i class="fa-solid fa-clock-rotate-left me-2"></i>Saqlangan Kunlik Hisobotlar Kalendari</h5>
            </div>
            <div class="row" id="historyContainer"></div>
        </div>
    </div>
</div>

<script>
    // 42 ta tovar ma'lumotlari
    const initialProducts = [
        {"id": 1, "name": "Rulon", "start": 28, "sold": 0, "price": 9, "cost": 9},
        {"id": 2, "name": "Shirpi ul", "start": 5, "sold": 0, "price": 3, "cost": 3},
        {"id": 3, "name": "Shirpi ki", "start": 147, "sold": 0, "price": 1.7, "cost": 1.7},
        {"id": 4, "name": "K duz ul", "start": 4, "sold": 0, "price": 3.5, "cost": 3.5},
        {"id": 5, "name": "K duz ki", "start": 6, "sold": 0, "price": 1.5, "cost": 1.5},
        {"id": 6, "name": "Droj (5)", "start": 8, "sold": 0, "price": 5, "cost": 5},
        {"id": 7, "name": "Droj (5.5)", "start": 7, "sold": 0, "price": 5.5, "cost": 5.5},
        {"id": 8, "name": "Klassik", "start": 1, "sold": 0, "price": 10, "cost": 10},
        {"id": 9, "name": "Makfa", "start": 5, "sold": 0, "price": 10.5, "cost": 10.5},
        {"id": 10, "name": "Spageti", "start": 4, "sold": 0, "price": 10.5, "cost": 10.5},
        {"id": 11, "name": "Shay ul", "start": 15, "sold": 0, "price": 6.6, "cost": 6.6},
        {"id": 12, "name": "Shay ki", "start": 15, "sold": 0, "price": 3.3, "cost": 3.3},
        {"id": 13, "name": "Qara shay", "start": 70, "sold": 0, "price": 4.7, "cost": 4.7},
        {"id": 14, "name": "Exclusiv", "start": 2, "sold": 0, "price": 13, "cost": 13},
        {"id": 15, "name": "Salixa", "start": 13, "sold": 0, "price": 6.3, "cost": 6.3},
        {"id": 16, "name": "Roltin pereprava", "start": 9, "sold": 0, "price": 4.5, "cost": 4.5},
        {"id": 17, "name": "Lactel.6liq.", "start": 4, "sold": 0, "price": 17, "cost": 17},
        {"id": 18, "name": "Miloko", "start": 13, "sold": 0, "price": 16.5, "cost": 16.5},
        {"id": 19, "name": "Parashok ul", "start": 6, "sold": 0, "price": 13, "cost": 13},
        {"id": 20, "name": "Parashok. Ki.", "start": 23, "sold": 0, "price": 4, "cost": 4},
        {"id": 21, "name": "Aprel. Kr", "start": 10, "sold": 0, "price": 15, "cost": 15},
        {"id": 22, "name": "Aprel ul", "start": 17, "sold": 0, "price": 14, "cost": 14},
        {"id": 23, "name": "Aprel ki", "start": 16, "sold": 0, "price": 4, "cost": 4},
        {"id": 24, "name": "Kir sabin ar", "start": 24, "sold": 0, "price": 3.5, "cost": 3.5},
        {"id": 25, "name": "Barvi", "start": 9, "sold": 0, "price": 6, "cost": 6},
        {"id": 26, "name": "Colgate ul", "start": 6, "sold": 0, "price": 13, "cost": 13},
        {"id": 27, "name": "Colgate ki", "start": 17, "sold": 0, "price": 7, "cost": 7},
        {"id": 28, "name": "Sabin ul", "start": 7, "sold": 0, "price": 7, "cost": 7},
        {"id": 29, "name": "Sabin ki", "start": 5, "sold": 0, "price": 5, "cost": 5},
        {"id": 30, "name": "Tofli krem", "start": 7, "sold": 0, "price": 1.6, "cost": 1.6},
        {"id": 31, "name": "Japraq", "start": 4.2, "sold": 0, "price": 65, "cost": 65},
        {"id": 32, "name": "Qara burish", "start": 17.55, "sold": 0, "price": 110, "cost": 110},
        {"id": 33, "name": "5l.", "start": 16, "sold": 0, "price": 17, "cost": 17},
        {"id": 34, "name": "2.5l.", "start": 11, "sold": 0, "price": 9, "cost": 9},
        {"id": 35, "name": "2.5l k.", "start": 18, "sold": 0, "price": 10, "cost": 10},
        {"id": 36, "name": "05l qaz.", "start": 0, "sold": 0, "price": 3.4, "cost": 3.4},
        {"id": 37, "name": "Ok.", "start": 5, "sold": 0, "price": 11, "cost": 11},
        {"id": 38, "name": "Qant 1kg", "start": 50, "sold": 0, "price": 10.6, "cost": 10.6},
        {"id": 39, "name": "Kampit 1kg (11.2)", "start": 27, "sold": 0, "price": 11.2, "cost": 11.2},
        {"id": 40, "name": "Kampit 1kg (10.4)", "start": 25, "sold": 0, "price": 10.4, "cost": 10.4},
        {"id": 41, "name": "Urgensh", "start": 60, "sold": 0, "price": 5, "cost": 4.4},
        {"id": 42, "name": "Bo‘sh mahsulot", "start": 0, "sold": 0, "price": 0, "cost": 0}
    ];

    let currentDate = new Date().toISOString().slice(0, 10);
    let historyDB = {}; // { "YYYY-MM-DD": [products] }

    function init() {
        document.getElementById('selected-date').value = currentDate;
        const savedHistory = localStorage.getItem('gzavod_history_db');
        if (savedHistory) {
            historyDB = JSON.parse(savedHistory);
        }
        if (!historyDB[currentDate]) {
            historyDB[currentDate] = JSON.parse(JSON.stringify(initialProducts));
        }
        renderTable();
        initCharts();
        renderHistoryList();
    }

    function saveDB() {
        localStorage.setItem('gzavod_history_db', JSON.stringify(historyDB));
    }

    function formatNum(val) {
        let n = parseFloat(val) || 0;
        return n.toLocaleString('uz-UZ', { maximumFractionDigits: 2 });
    }

    function renderTable() {
        const tbody = document.getElementById('tovarTbody');
        tbody.innerHTML = '';

        let items = historyDB[currentDate] || JSON.parse(JSON.stringify(initialProducts));

        let totalBor = 0, totalSotildi = 0, totalQoldi = 0, totalTushum = 0, totalCostVal = 0, totalSoldCost = 0;

        items.forEach((item, idx) => {
            const qoldi = (parseFloat(item.start) || 0) - (parseFloat(item.sold) || 0);
            const tushum = (parseFloat(item.sold) || 0) * (parseFloat(item.price) || 0);

            totalBor += parseFloat(item.start) || 0;
            totalSotildi += parseFloat(item.sold) || 0;
            totalQoldi += qoldi;
            totalTushum += tushum;

            totalCostVal += qoldi * (parseFloat(item.cost) || 0);
            totalSoldCost += (parseFloat(item.sold) || 0) * (parseFloat(item.cost) || 0);

            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${idx + 1}</td>
                <td><input type="text" class="inp-calc fw-bold" value="${item.name}" onchange="updateItem(${idx}, 'name', this.value)"></td>
                <td><input type="number" step="any" class="inp-calc text-end" value="${item.start}" onchange="updateItem(${idx}, 'start', this.value)"></td>
                <td><input type="number" step="any" class="inp-calc text-end text-primary fw-bold" value="${item.sold}" onchange="updateItem(${idx}, 'sold', this.value)"></td>
                <td class="text-end fw-bold text-primary">${formatNum(qoldi)}</td>
                <td><input type="number" step="any" class="inp-calc text-end" value="${item.price}" onchange="updateItem(${idx}, 'price', this.value)"></td>
                <td><input type="number" step="any" class="inp-calc text-end" value="${item.cost}" onchange="updateItem(${idx}, 'cost', this.value)"></td>
                <td class="text-end fw-bold text-success">${formatNum(tushum)} sum</td>
                <td class="text-center">
                    <button class="btn btn-outline-danger btn-sm py-0 px-2" onclick="deleteItem(${idx})"><i class="fa-solid fa-trash"></i></button>
                </td>
            `;
            tbody.appendChild(tr);
        });

        document.getElementById('foot-bor-edi').innerText = formatNum(totalBor);
        document.getElementById('foot-sotildi').innerText = formatNum(totalSotildi);
        document.getElementById('foot-qoldi').innerText = formatNum(totalQoldi);
        document.getElementById('foot-tushum').innerText = formatNum(totalTushum) + ' sum';

        document.getElementById('dash-qoyma-qty').innerText = formatNum(totalQoldi) + ' dona';
        document.getElementById('dash-sotildi-qty').innerText = formatNum(totalSotildi) + ' dona';
        document.getElementById('dash-tushum').innerText = formatNum(totalTushum) + ' sum';
        document.getElementById('dash-ozlik-total').innerText = formatNum(totalCostVal) + ' sum';
        document.getElementById('dash-foyda').innerText = formatNum(totalTushum - totalSoldCost) + ' sum';

        saveDB();
        updateCharts();
    }

    function updateItem(idx, field, val) {
        if (!historyDB[currentDate]) historyDB[currentDate] = JSON.parse(JSON.stringify(initialProducts));
        if (field === 'name') historyDB[currentDate][idx][field] = val;
        else historyDB[currentDate][idx][field] = parseFloat(val) || 0;
        renderTable();
    }

    function deleteItem(idx) {
        if (confirm("Tovarni ushbu kundan o'chirasizmi?")) {
            historyDB[currentDate].splice(idx, 1);
            renderTable();
        }
    }

    function changeDate() {
        currentDate = document.getElementById('selected-date').value;
        if (!historyDB[currentDate]) {
            historyDB[currentDate] = JSON.parse(JSON.stringify(initialProducts));
        }
        renderTable();
    }

    function saveDailyReport() {
        saveDB();
        renderHistoryList();
        alert(`[${currentDate}] sanasidagi hisobot saqlandi!`);
    }

    function resetTo42() {
        if (confirm("Ushbu kun ma'lumotlarini asl 42 ta tovarga qaytarasizmi?")) {
            historyDB[currentDate] = JSON.parse(JSON.stringify(initialProducts));
            renderTable();
        }
    }

    function renderHistoryList() {
        const container = document.getElementById('historyContainer');
        container.innerHTML = '';
        const dates = Object.keys(historyDB).sort().reverse();

        dates.forEach(d => {
            let items = historyDB[d];
            let tushum = 0, soldQty = 0;
            items.forEach(i => {
                soldQty += (parseFloat(i.sold)||0);
                tushum += (parseFloat(i.sold)||0) * (parseFloat(i.price)||0);
            });

            const card = document.createElement('div');
            card.className = 'col-12 col-md-4 col-lg-3 mb-3';
            card.innerHTML = `
                <div class="stat-card">
                    <div class="fw-bold text-primary mb-2"><i class="fa-r