{% 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;
    }
</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">HO Stock Report</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">HO Stock Report</li>
            </ol>
        </nav>
    </div>

    <div class="card mt-3">
        <div class="card-header border-bottom">
            <div class="row mt-2">
                <div class="col-12">
                    <div class="row">
                        <div class="col-2">
                            <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">
                            <label for="filter_brand_id" class="form-label">Brand</label>
                            <select class="select2 form-control" id="filter_brand_id" name="brand_id">
                                <option value="">Select</option>
                                {% for k in brand %}
                                <option value="{{k.id}}">{{k.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-2">
                            <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">
                            <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">
                            <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">
                            <label for="filter_color_id" class="form-label">Stock</label>
                            <select class="select2 form-control" id="filter_stock_type" name="filter_stock_type">
                                <option value="">Select</option>
                                <option value="stock" selected>Stock</option>
                                <option value="demo">Demo</option>
                            </select>
                        </div>

                        <div class="col-12 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>
        </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 Name</th>
                            <th>Supplier</th>
                            <th>Supplier GSTIN</th>
                            <th>EAN</th>
                            <th>HSN Code</th>
                            <th>Subcategory</th>
                            <th>Brand</th>
                            <th>Color</th>
                            <th>Variant</th>
                            <th>IMEI No</th>
                            <th>Source</th>
                            <th>Type</th>
                            <th>Amount (₹)</th>
                            <th>BOP (₹)</th>
                            <th>MOP (₹)</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </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: "branch_name" },
                { data: "supplier_name" },
                { data: "supplier_gst" },
                { data: "ean" },
                { data: "hsn_code" },
                { data: "sub_category" },
                { data: "brand" },
                { data: "color" },
                { data: "variant" },
                { data: "imei" },
                { data: "source" },
                {
                    data: "is_demo",
                    render: function (data, type, row) {
                        if (data == 1) {
                            return '<span class="badge bg-danger">Demo</span>';
                        } else {
                            return '<span class="badge bg-success">Stock</span>';
                        }
                    }
                },
                { data: "amount", className: "text-end", title: "Amount (₹)" },
                { data: "bop", className: "text-end", title: "BOP (₹)" },
                { data: "mop", className: "text-end", title: "MOP (₹)" }
            ],
            ajax: {
                url: '/ajax_ho_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_type = $('#filter_stock_type').val();
                },
                dataSrc: function (response) {
                    return response.data || [];
                }
            }
        });
    }

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