{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}

<style>
    #datatable {
        border-collapse: collapse;
        width: 100%;
    }

    #datatable th,
    #datatable td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
        vertical-align: middle;
    }

    #datatable thead th {
        background-color: #f9faf8;
        font-weight: bold;
    }

    .bg-credit {
        background-color: #d1f7d6 !important;
        /* Light green */
    }

    .bg-debit {
        background-color: #fce4e4 !important;
        /* Light red */
    }

    .bg-balance {
        background-color: #f0f8ff !important;
        /* Light blue */
    }

    #datatable tfoot {
        background-color: #f3f4f6 !important;
        font-weight: 600;
        border-top: 2px solid #d1d5db;
    }

    #datatable tfoot th {
        padding: 8px 10px;
    }

    /* ── Summary Stat Cards ── */
    .stat-cards-row {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 18px;
    }

    .stat-card {
        flex: 1 1 150px;
        min-width: 140px;
        background: #fff;
        /* border-radius: 12px; */
        padding: 16px 18px 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
        border-left: 4px solid #7367f0;
        /* transition: transform .18s, box-shadow .18s; */
        position: relative;
        overflow: hidden;
    }

    .stat-card:hover {
        /* transform: translateY(-3px); */
        box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    }

    .stat-card .stat-icon {
        position: absolute;
        right: 14px;
        top: 14px;
        font-size: 1.6rem;
        opacity: 1.15;
    }

    .stat-card .stat-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: #6c757d;
        margin-bottom: 4px;
    }

    .stat-card .stat-value {
        font-size: 1.15rem;
        font-weight: 700;
        color: #2d3748;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stat-card.c-purple {
        border-left-color: #7367f0;
    }

    .stat-card.c-teal {
        border-left-color: #00b09b;
    }

    .stat-card.c-orange {
        border-left-color: #fd7e14;
    }

    .stat-card.c-red {
        border-left-color: #e74c3c;
    }

    .stat-card.c-blue {
        border-left-color: #3498db;
    }

    .stat-card.c-green {
        border-left-color: #28a745;
    }

    .stat-card.c-pink {
        border-left-color: #e83e8c;
    }
</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <h4 class="mb-0 me-3">IMEI stock Summary</h4>
        </div>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/store/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">IMEI stock Summary</li>
            </ol>
        </nav>
    </div>

    <!-- ── Summary Stat Cards ── -->
    <div class="stat-cards-row" id="stat_cards_row">
        <!-- Total Stock Value (HO only) -->
        <div class="stat-card c-purple" id="card_stock_value">
            <span class="stat-icon">💰</span>
            <div class="stat-label">Total Stock Value</div>
            <div class="stat-value" id="total_stock_value">₹ 0</div>
        </div>
        <!-- Total Qty -->
        <div class="stat-card c-teal">
            <span class="stat-icon">📦</span>
            <div class="stat-label">Total Quantity</div>
            <div class="stat-value" id="stat_total_qty">0</div>
        </div>
        <!-- FSP (HO only) -->
        <div class="stat-card c-blue" id="card_fsp">
            <span class="stat-icon">🏷️</span>
            <div class="stat-label">Total FSP Value</div>
            <div class="stat-value" id="stat_total_fsp">₹ 0</div>
        </div>
        <!-- WSP (HO only) -->
        <div class="stat-card c-orange" id="card_wsp">
            <span class="stat-icon">🏪</span>
            <div class="stat-label">Total WSP Value</div>
            <div class="stat-value" id="stat_total_wsp">₹ 0</div>
        </div>
        <!-- MOP -->
        <div class="stat-card c-green">
            <span class="stat-icon">🛒</span>
            <div class="stat-label">Total MOP Value</div>
            <div class="stat-value" id="stat_total_mop">₹ 0</div>
        </div>
        <!-- BOP -->
        <div class="stat-card c-red">
            <span class="stat-icon">📉</span>
            <div class="stat-label">Total BOP Value</div>
            <div class="stat-value" id="stat_total_bop">₹ 0</div>
        </div>
        <!-- MRP -->
        <div class="stat-card c-pink">
            <span class="stat-icon">🏷</span>
            <div class="stat-label">Total MRP Value</div>
            <div class="stat-value" id="stat_total_mrp">₹ 0</div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header border-bottom">
            <div class="row mt-2">
                <div class="col-10">
                    <div class="row">
                        {% if request.session.is_ho == 1 %}
                        <div class="col-2 mb-4">
                            <label class="form-label">Branch</label>
                            <select class="select2 form-control" id="filter_branch" name="branch_id">
                                <option value="">All Branches</option>
                                {% for b in branch %}
                                <option value="{{ b.id }}" {% if request.session.branch_id == b.id %} selected {% endif%}>
                                    {{ b.name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        {% endif %}



                        <div class="col-2 mb-4">
                            <label for="filter_subcategory_id" class="form-label">Sub Category</label>
                            <select class="select2 form-control" id="filter_subcategory_id" name="subcategory_id">
                                <option value="">Select</option>
                                {% for k in sub_category %}
                                <option value="{{k.id}}">{{k.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-2 mb-4">
                            <label for="brand_id" class="form-label">Brand</label>
                            <select class="select2 form-control" id="filter_brand_id" name="brand_id">
                                <option value="">Select</option>
                                {% for b in brand %}
                                <option value="{{ b.id }}">{{ b.name }}</option>
                                {% endfor %}

                            </select>
                        </div>
                        <div class="col-2 mb-4">
                            <label for="filter_model_id" class="form-label">Model</label>
                            <select class="select2 form-control" id="filter_model_id" name="model_id">
                                <option value="">Select</option>
                            </select>
                        </div>

                        <div class="col-2 mb-4">
                            <label for="filter_model_id" class="form-label">Variant</label>
                            <select class="select2 form-control" id="filter_variant_id" name="variant_id">
                                <option value="">Select</option>
                            </select>
                        </div>


                        <div class="col-2 mb-4">
                            <label for="filter_color_id" class="form-label">Color</label>
                            <select class="select2 form-control" id="filter_color_id" name="color_id">
                                <option value="">Select</option>
                            </select>
                        </div>
                        <div class="col-2 mb-4">
                            <label for="filter_color_id" class="form-label">Stock</label>
                            <select class="select2 form-control" id="filter_stock" name="stock">
                                <option value="">Select</option>
                                <option value="stock" selected> stock</option>
                                <option value="demo">Demo stock</option>
                                <option value="non_open_stock">Non Open Stock</option>
                            </select>
                        </div>
                        {% if request.session.is_ho == 0 %}
                        <div class="col-12 text-center mt-6">
                            <button type="button" class="btn btn-primary" onclick="refresh_data()">
                                <iclass="fas fa-refresh"></i>&nbsp; Refresh
                            </button>
                        </div>
                        {% endif %}

                        {% if request.session.is_ho == 1 %}
                        <div class="col-2 text-center mt-6">
                            <button type="button" class="btn btn-primary" onclick="refresh_data()">
                                <i class="fas fa-refresh"></i>&nbsp; Refresh
                            </button>
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-2 text-end">
                    <h5 class="mb-1 text-muted">Available Stock</h5>
                    <h4 id="total_available_stock" class="fw-bold text-danger">
                        0
                    </h4>
                </div>
            </div>
        </div>

        <div class="card-body">

            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table" id="datatable">
                    <thead>
                        {% csrf_token %}
                        <tr>
                            <th>Id</th>
                            <th>Branch</th>
                            <th>Subcategory</th>
                            <th>Brand</th>
                            <th>Model</th>
                            <th>Variant</th>
                            <th>Color</th>
                            <th>HSN Code</th>
                            <th>Shelf Life</th>
                            <th>IMEI</th>
                            <th>Source</th>
                            <th>MRP (₹)</th>
                            <th>Amount (₹)</th>
                            <th>FSP (₹)</th>
                            <th>WSP (₹)</th>
                            <th>MOP (₹)</th>
                            <th>BOP (₹)</th>
                            <th>Type</th>
                            <!-- <th>DB Price</th> -->
                            <!-- <th>Stock</th> -->
                            <!-- <th>Rate</th> -->
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <th colspan="11" class="text-end fw-bold">Total</th>
                            <th id="foot_mrp" class="text-end fw-bold"></th>
                            <th id="foot_amount" class="text-end fw-bold"></th>
                            <th id="foot_fsp" class="text-end fw-bold"></th>
                            <th id="foot_wsp" class="text-end fw-bold"></th>
                            <th id="foot_mop" class="text-end fw-bold"></th>
                            <th id="foot_bop" class="text-end fw-bold"></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>







</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}

<script>

    var table;
    $(document).ready(function () {
        refresh_data();

        $('#filter_subcategory_id').on('change', function () {
            loadBrand('filter_subcategory_id', 'filter_brand_id');
        });


        $('#filter_brand_id').on('change', function () {
            loadModels('filter_brand_id', 'filter_model_id');
        });


        $('#filter_model_id').on('change', function () {
            loadVariants('filter_brand_id', 'filter_model_id', 'filter_variant_id');
        });


        $('#filter_variant_id').on('change', function () {
            loadColors('filter_brand_id', 'filter_model_id', 'filter_variant_id', 'filter_color_id');
        });

    });

    function initializeDataTable() {
        table = $('#datatable').DataTable({
            processing: true,
            pageLength: 50,
            destroy: true,
            order: [],
            dom: getDataTableDom(),
            buttons: getExportButtons(),

            columns: [
                { data: "id", title: "Id" },
                { data: "branch", title: "Branch" },
                { data: "sub_category", title: "Subcategory" },
                { data: "brand", title: "Brand" },
                { data: "model", title: "Model" },
                { data: "variant", title: "Variant" },
                { data: "color", title: "Color" },
                { data: "hsn_code", title: "HSN Code" },
                { data: "shelf_life", title: "Shelf Life" },
                { data: "imei", title: "IMEI" },
                { data: "source", title: "Source" },
                { data: "amount", title: "Amount (₹)", className: "text-end" },

                // 🔒 PRICE COLUMNS (HO ONLY)
                { data: "fsp", title: "FSP (₹)", visible: true, className: "text-end" },
                { data: "wsp", title: "WSP (₹)", visible: true, className: "text-end" },
                { data: "mrp", title: "MRP (₹)", className: "text-end" },
                { data: "mop", title: "MOP (₹)", className: "text-end" },
                { data: "bop", title: "BOP (₹)", className: "text-end" },
                { data: "demo_badge", title: "Type" },
                // { data: "stock", title: "Stock", className: "text-end" },
                // { data: "rate", title: "Rate", className: "text-end" },
                // { data: "db_price", title: "DB Price", className: "text-end" },

            ],

            ajax: {
                url: '/ajax_imei_stock_summary/',
                type: 'POST',
                data: function (data) {
                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    data.subcategory = $('#filter_subcategory_id').val();
                    data.brand_id = $('#filter_brand_id').val();
                    data.model_id = $('#filter_model_id').val();
                    data.variant_id = $('#filter_variant_id').val();
                    data.color_id = $('#filter_color_id').val();
                    data.stock = $('#filter_stock').val();
                    data.branch_id = $('#filter_branch').val();
                },
                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        showSweetAlert('warning', response.error_message || 'You do not have permission to view the user role.');
                        table.clear().draw();
                        return [];
                    }

                    // Helper: format number as ₹ with commas
                    function fmtCurrency(val) {
                        let n = parseFloat(val) || 0;
                        return '₹ ' + n.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                    }

                    let availableStock = parseFloat(response.available_qty || 0);
                    $('#total_available_stock').text(availableStock);

                    // Populate stat cards
                    $('#stat_total_qty').text(availableStock.toLocaleString('en-IN'));
                    $('#stat_total_mop').text(fmtCurrency(response.total_mop));
                    $('#stat_total_bop').text(fmtCurrency(response.total_bop));
                    $('#stat_total_mrp').text(fmtCurrency(response.total_mrp));

                    if (response.is_ho == 1) {
                        // HO: show all cards
                        $('#card_stock_value').show();
                        $('#card_fsp').show();
                        $('#card_wsp').show();
                        $('#total_stock_value').text(fmtCurrency(response.total_stock_value));
                        $('#stat_total_fsp').text(fmtCurrency(response.total_fsp));
                        $('#stat_total_wsp').text(fmtCurrency(response.total_wsp));
                    } else {
                        // Non-HO: hide HO-only cards
                        $('#card_stock_value').hide();
                        $('#card_fsp').hide();
                        $('#card_wsp').hide();
                        // Also hide FSP & WSP table columns
                        table.column(12).visible(false); // FSP index
                        table.column(13).visible(false); // WSP index
                        // Hide corresponding footer cells
                        $('#foot_amount').hide();
                        $('#foot_fsp').hide();
                        $('#foot_wsp').hide();
                    }

                    return response.data || [];
                }
            },

            // 🎨 ROW COLOR LOGIC
            rowCallback: function (row, data) {
                if (parseInt(data.stock) === 0) {
                    // $(row).addClass('bg-debit');
                }
            },

            // ── Footer: sum all pages ──
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();

                function colSum(colIdx) {
                    return api.column(colIdx).data().reduce(function (acc, val) {
                        var n = parseFloat(String(val).replace(/,/g, '')) || 0;
                        return acc + n;
                    }, 0);
                }

                function fmt(n) {
                    return '₹ ' + n.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }

                // Column indices: 11=MRP, 12=Amount, 13=FSP, 14=WSP, 15=MOP, 16=BOP
                $('#foot_mrp').text(fmt(colSum(11)));
                $('#foot_amount').text(fmt(colSum(12)));
                $('#foot_fsp').text(fmt(colSum(13)));
                $('#foot_wsp').text(fmt(colSum(14)));
                $('#foot_mop').text(fmt(colSum(15)));
                $('#foot_bop').text(fmt(colSum(16)));
            }
        });
    }



    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }
    function make_demo(imei) {
        $.ajax({
            url: '/make_demo_stock/',
            type: 'POST',
            data: {
                csrfmiddlewaretoken: document.getElementsByName("csrfmiddlewaretoken")[0].value,
                imei: imei
            },
            success: function (response) {
                if (!response.status) {
                    showSweetAlert('error', response.message || 'Something went wrong');
                    return;
                }

                // 🔎 Find row by IMEI (column index 9)
                let rowIndex = table.rows().eq(0).filter(function (idx) {
                    return table.cell(idx, 9).data() === imei;
                });

                if (!rowIndex.length) return;

                let rowData = table.row(rowIndex[0]).data();

                // ===============================
                // 🔁 TOGGLE UI BASED ON is_demo
                // ===============================
                if (response.is_demo === 1) {
                    // 🟢 Made Demo
                    rowData.action =
                        `<button class="btn btn-xs btn-warning"
                        onclick="make_demo('${imei}')"
                        title="Revert Demo">Revert</button>`;

                    rowData.stock = 0; // demo stock not sellable
                } else {
                    // 🔵 Reverted from Demo
                    rowData.action =
                        `<button class="btn btn-xs btn-success"
                        onclick="make_demo('${imei}')"
                        title="Make Demo">Demo</button>`;

                    rowData.stock = 1; // back to available
                }

                // 🔄 Update row without full reload
                table.row(rowIndex[0]).data(rowData).invalidate().draw(false);

                showSweetAlert('success', response.message || 'Success');
            },
            error: function () {
                showSweetAlert('error', 'Something went wrong');
            }
        });
    }


    // Helper to get CSRF token from cookie
    function getCSRFToken() {
        let cookieValue = null;
        const name = 'csrftoken';
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.startsWith(name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }


</script>