{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/wholesale_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;
    }

    #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;
        padding: 16px 18px 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
        border-left: 4px solid #7367f0;
        position: relative;
        overflow: hidden;
    }

    .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-green {
        border-left-color: #28a745;
    }

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

    .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">Wholesale IMEI Stock Summary</h4>
        </div>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/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">Wholesale IMEI Stock</li>
            </ol>
        </nav>
    </div>

    <!-- ── Summary Stat Cards ── -->
    <div class="stat-cards-row" id="stat_cards_row">
        <div class="stat-card c-purple">
            <span class="stat-icon">💰</span>
            <div class="stat-label">Total Stock Value</div>
            <div class="stat-value" id="total_stock_value">₹ 0</div>
        </div>
        <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>
        <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>
        <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>
        <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">
                        <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_variant_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_stock" class="form-label">Stock Type</label>
                            <select class="select2 form-control" id="filter_stock" name="stock">
                                <option value="">All</option>
                                <option value="stock">Stock</option>
                                <option value="demo">Demo Stock</option>
                            </select>
                        </div>
                        <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>
                    </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>Wholesale Name</th>
                            <th>Subcategory</th>
                            <th>Brand</th>
                            <th>Model</th>
                            <th>Variant</th>
                            <th>Color</th>
                            <th>IMEI</th>
                            <th>Wholesale Type</th>
                            <th>Stock Type</th>
                            <th>MRP (₹)</th>
                            <th>Amount (₹)</th>
                            <th>MOP (₹)</th>
                            <th>BOP (₹)</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <th colspan="10" 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_mop" class="text-end fw-bold"></th>
                            <th id="foot_bop" class="text-end fw-bold"></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" },
                { data: "wholesale_name" },
                { data: "sub_category" },
                { data: "brand" },
                { data: "model" },
                { data: "variant" },
                { data: "color" },
                { data: "imei" },
                { data: "wholesale_type" },
                { data: "stock_type" },
                { data: "mrp", className: "text-end" },
                { data: "amount", className: "text-end" },
                { data: "mop", className: "text-end" },
                { data: "bop", className: "text-end" }
            ],
            ajax: {
                url: '/ajax_wholesale_imei_stock_summary/',
                type: 'POST',
                data: function (data) {
                    data.csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val();
                    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();
                },
                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        showSweetAlert('warning', response.error_message);
                        return [];
                    }

                    function fmtCurrency(val) {
                        return '₹ ' + parseFloat(val || 0).toLocaleString('en-IN', { minimumFractionDigits: 2 });
                    }

                    $('#total_available_stock').text(response.available_qty);
                    $('#stat_total_qty').text(response.available_qty);
                    $('#total_stock_value').text(fmtCurrency(response.total_stock_value));
                    $('#stat_total_mop').text(fmtCurrency(response.total_mop));
                    $('#stat_total_bop').text(fmtCurrency(response.total_bop));
                    $('#stat_total_mrp').text(fmtCurrency(response.total_mrp));

                    return response.data;
                }
            },
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();
                function colSum(idx) {
                    return api.column(idx).data().reduce(function (a, b) {
                        return a + (parseFloat(String(b).replace(/[^\d.-]/g, '')) || 0);
                    }, 0);
                }
                function fmt(n) { return '₹ ' + n.toLocaleString('en-IN', { minimumFractionDigits: 2 }); }

                $('#foot_mrp').text(fmt(colSum(10)));
                $('#foot_amount').text(fmt(colSum(11)));
                $('#foot_mop').text(fmt(colSum(12)));
                $('#foot_bop').text(fmt(colSum(13)));
            }
        });
    }

    function refresh_data() {
        if (!table) initializeDataTable();
        else table.ajax.reload();
    }
</script>