{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/customer_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">
        <h4 class="mb-0">Stock List</h4>
    </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 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="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 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 text-center mt-4 pt-2">
                            <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>Subcategory</th>
                            <th>Brand</th>
                            <th>Model</th>
                            <th>Variant</th>
                            <th>Color</th>
                            <th>IMEI</th>
                            <th>Source</th>
                            <th>MRP (₹)</th>
                            <th>MOP (₹)</th>
                            <th>Amount (₹)</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(), // Assumed global helper
            buttons: getExportButtons(), // Assumed global helper

            columns: [
                { data: "id", title: "Id" },
                { data: "sub_category", title: "Subcategory" },
                { data: "brand", title: "Brand" },
                { data: "model", title: "Model" },
                { data: "variant", title: "Variant" },
                { data: "color", title: "Color" },
                { data: "imei", title: "IMEI" },
                { data: "source", title: "Source" },
                { data: "mrp", title: "MRP (₹)", className: "text-end" },
                { data: "mop", title: "MOP (₹)", className: "text-end" },
                { data: "amount", title: "Amount (₹)", className: "text-end" },
            ],

            ajax: {
                url: '/wholesale/ajax/stock/',
                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();
                },
                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        // Assuming sweetalert is available
                        if (typeof showSweetAlert === 'function') {
                            showSweetAlert('warning', response.error_message || 'Unauthorized');
                        } else {
                            alert(response.error_message || 'Unauthorized');
                        }
                        table.clear().draw();
                        return [];
                    }
                    return response.data || [];
                }
            }
        });
    }

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