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

<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">Scheme/Upgrade</h4>
            &nbsp
            <button type="button" class="btn btn-info btn-sm open-scheme-modal" data-bs-toggle="modal"
                data-bs-target="#add_modal" data-scheme="special" data-title="Special Scheme">
                + Special
            </button>
            &nbsp
            <button type="button" class="btn btn-success btn-sm open-scheme-modal" data-bs-toggle="modal"
                data-bs-target="#add_modal" data-scheme="upgrade" data-title="Upgrade">
                + Upgrade
            </button>
        </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">Scheme/Upgrade</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-header border-bottom">
            <div class="row mt-2">

                <div class="col-2">
                    <label for="filter_scheme_type" class="form-label">Scheme Type</label>
                    <select class="select2 form-control" id="filter_scheme_type" name="filter_scheme_type">
                        <option value="">Select</option>
                        <option value="upgrade">Upgrade</option>
                        <option value="special">Special Scheme</option>
                        <option value="price_drop">Permanent Price Drop</option>
                    </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="filter_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="filter_model_id">
                        <option value="">Select</option>
                        {% for k in model %}
                        <option value="{{ k.id }}">{{ k.name }}</option>
                        {% endfor %}
                    </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="filter_variant_id">
                        <option value="">Select</option>
                        {% for k in variant %}
                        <option value="{{ k.id }}">{{ k.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-2 mt-6">
                    <button type="button" class="btn btn-primary" onclick="refresh_data()">Refresh</button>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table" id="datatable">
                    <thead>
                        <tr>
                            <th rowspan="2">Id</th>
                            <th rowspan="2">Action</th>
                            <th rowspan="2">Scheme Type</th>
                            <th rowspan="2">From Date</th>
                            <th rowspan="2">To Date</th>
                            <th rowspan="2">Supplier</th>
                            <th rowspan="2">Subcategory</th>
                            <th rowspan="2">Brand</th>
                            <th rowspan="2">Model</th>
                            <th rowspan="2">Variant</th>
                            <th colspan="3">MOP (₹)</th>
                            <th rowspan="2">BOP Drop (₹)</th>
                            <th rowspan="2">Description</th>
                            <th rowspan="2">Status</th>
                        </tr>
                        <tr>
                            <th>MOP DROP (₹)</th>
                            <th>DROP Percent</th>
                            <th>After Drop (₹)</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!-- Add Modal -->
    <div id="add_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">Add Scheme</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="add_form">
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-3 mb-4">
                                <label for="from_date" class="form-label">
                                    <span style="color: red;">*</span> From Date
                                </label>
                                <input class="form-control" type="date" id="from_date" name="from_date" required>
                            </div>

                            <div class="col-3 mb-4">
                                <label for="to_date" class="form-label">
                                    <span class="required-star text-danger">*</span> To Date
                                </label>
                                <input class="form-control" type="date" id="to_date" name="to_date" required>
                                <small id="dateError" style="color: red; display: none;">
                                    To Date must be greater than From Date.
                                </small>
                            </div>

                            <div class="col-3 mb-4">
                                <label for="subcategory_id" class="form-label">
                                    Supplier
                                </label>
                                <select class="select2 form-control" id="supplier_id" name="supplier_id" required>
                                    <option value="">Select</option>
                                    {% for k in supplier %}
                                    <option value="{{ k.id }}">{{ k.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-3 mb-4">
                                <label for="subcategory_id" class="form-label">
                                    <span style="color: red;">*</span> Subcategory
                                </label>
                                <select class="select2 form-control" id="subcategory_id" name="subcategory_id" required>
                                    <option value="">Select</option>
                                    {% for k in sub_category %}
                                    <option value="{{ k.id }}">{{ k.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-3 mb-4">
                                <label for="brand_id" class="form-label">
                                    <span style="color: red;">*</span> Brand
                                </label>
                                <select class="select2 form-control" id="brand_id" name="brand_id" required>
                                    <option value="">Select</option>
                                    
                                </select>
                            </div>

                            <div class="col-3 mb-4">
                                <label for="model_id" class="form-label">
                                    <span style="color: red;">*</span> Model
                                </label>
                                <select class="select2 form-control" id="model_id" name="model_id" required>
                                    <option value="">Select</option>
                                </select>
                            </div>

                            <div class="col-3 mb-4">
                                <label for="variant_id" class="form-label">
                                    <span style="color: red;">*</span> Variant
                                </label>
                                <select class="select2 form-control" id="variant_id" name="variant_id" required>
                                    <option value="">Select</option>
                                </select>
                                <small class="text-muted" id="db_price_text"></small>
                            </div>

                            <div class="col-3 mb-4">
                                <label for="scheme_name" class="form-label">
                                    <span class="required-star text-danger">*</span> Name
                                </label>
                                <input class="form-control" type="text" id="scheme_name" name="name" required>
                            </div>
                        </div>

                        <hr class="mt-3">

                        <div class="row">

                            <div class="col-3 mb-3 scheme-special scheme-upgrade">
                                <label for="mop_value" class="form-label">MOP Drop (₹)</label>
                                <input class="form-control" type="number" id="mop_drop" step="0.01" name="mop_drop">
                            </div>

                            <div class="col-3 mb-3 scheme-special">
                                <label for="mop_discount" class="form-label">Drop (%)</label>
                                <input class="form-control" type="number" id="drop_percent" step="0.01"
                                    name="drop_percent">
                            </div>

                            <div class="col-3 mb-3 scheme-special">
                                <label for="mop_after_discount" class="form-label">MOP after Drop (₹)</label>
                                <input class="form-control" type="number" id="mop_after_drop" step="0.01"
                                    name="mop_after_drop">
                            </div>

                            <div class="col-3 mb-3 scheme-special scheme-upgrade">
                                <label for="bop_value" class="form-label">BOP Drop (₹)</label>
                                <input class="form-control" type="number" id="bop_drop" step="0.01" name="bop_drop">
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label" for="description">Remarks</label>
                                <textarea class="form-control" id="description" rows="2" name="description"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="scheme_type" id="scheme_type">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="save_btn" name="add_item">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div id="edit_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit Scheme</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="edit_form">
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-3 mb-3">
                                <label for="edit_from_date" class="form-label">
                                    <span style="color: red;">*</span> From Date
                                </label>
                                <input class="form-control" type="date" id="edit_from_date" name="from_date" required>
                            </div>

                            <div class="col-3 mb-3">
                                <label for="edit_to_date" class="form-label">
                                    <span class="required-star text-danger">*</span> To Date
                                </label>
                                <input class="form-control" type="date" id="edit_to_date" name="to_date" required>
                            </div>
                            <div class="col-3 mb-4">
                                <label for="subcategory_id" class="form-label">
                                    Supplier
                                </label>
                                <select class="select2 form-control" id="edit_supplier_id" name="supplier_id" required>
                                    <option value="">Select</option>
                                    {% for k in supplier %}
                                    <option value="{{ k.id }}">{{ k.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-3 mb-3">
                                <label for="edit_subcategory_id" class="form-label">
                                    <span style="color: red;">*</span> Subcategory
                                </label>
                                <select class="select2 form-control" id="edit_subcategory_id" name="subcategory_id"
                                    required>
                                    <option value="">Select</option>
                                    {% for k in sub_category %}
                                    <option value="{{ k.id }}">{{ k.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-3 mb-3">
                                <label for="edit_brand_id" class="form-label">
                                    <span style="color: red;">*</span> Brand
                                </label>
                                <select class="select2 form-control" id="edit_brand_id" name="brand_id" required>
                                    <option value="">Select</option>
                                    
                                </select>
                            </div>

                            <div class="col-3 mb-3">
                                <label for="edit_model_id" class="form-label">
                                    <span style="color: red;">*</span> Model
                                </label>
                                <select class="select2 form-control" id="edit_model_id" name="model_id" required>
                                    <option value="">Select</option>
                                    {% for k in model %}
                                    <option value="{{ k.id }}">{{ k.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-3 mb-3">
                                <label for="edit_variant_id" class="form-label">
                                    <span style="color: red;">*</span> Variant
                                </label>
                                <select class="select2 form-control" id="edit_variant_id" name="variant_id" required>
                                    <option value="">Select</option>
                                    {% for k in variant %}
                                    <option value="{{ k.id }}">{{ k.name }}</option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted" id="edit_db_price_text"></small>
                            </div>

                            <div class="col-3 mb-3">
                                <label for="edit_scheme_name" class="form-label">
                                    <span class="required-star text-danger">*</span> Name
                                </label>
                                <input class="form-control" type="text" id="edit_scheme_name" name="name" required>
                            </div>


                        </div>

                        <hr>

                        <div class="row">

                            <div class="col-3 mb-3 scheme-special scheme-upgrade">
                                <label for="mop_value" class="form-label">MOP Drop (₹)</label>
                                <input class="form-control" type="number" id="edit_mop_drop" step="0.01"
                                    name="mop_drop">
                            </div>

                            <div class="col-3 mb-3 scheme-special">
                                <label for="mop_discount" class="form-label">Drop (%)</label>
                                <input class="form-control" type="number" id="edit_drop_percent" step="0.01"
                                    name="drop_percent">
                            </div>

                            <div class="col-3 mb-3 scheme-special">
                                <label for="mop_after_discount" class="form-label">MOP after Drop (₹)</label>
                                <input class="form-control" type="number" id="edit_mop_after_drop" step="0.01"
                                    name="mop_after_drop">
                            </div>

                            <div class="col-3 mb-3 scheme-special scheme-upgrade">
                                <label for="bop_value" class="form-label">BOP Drop (₹)</label>
                                <input class="form-control" type="number" id="edit_bop_drop" step="0.01"
                                    name="bop_drop">
                            </div>
                            <div class="col-3 mb-3">
                                <label for="edit_is_active" class="form-label">Status</label>
                                <select class="select2 form-control" id="edit_is_active" name="is_active">
                                    <option value="">Select</option>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label" for="description">Remarks</label>
                                <textarea class="form-control" id="description" rows="2" name="description"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="edit_id" id="edit_id">
                        <input type="hidden" name="scheme_type" id="edit_scheme_type">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="update_btn" name="add_item">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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

<script>
    $(document).ready(function () {

        $('#variant_id').on('select2:select change', function (e) {
            $('#mop_drop').val('');

            setTimeout(function () {
                $('#mop_drop').focus().select();
            }, 100);
        });
    });
    var table;

    // ============================================
    // Initialize on Document Ready
    // ============================================
    $(document).ready(function () {
        refresh_data();
        CurrentDate('from_date');
        CurrentDate('to_date');
    });

    // ============================================
    // Initialize DataTable
    // ============================================
    function initializeDataTable() {
        table = $('#datatable').DataTable({
            processing: true,
            pageLength: 50,
            destroy: true,
            order: [],
            searching: false,
            dom: getDataTableDom(),
            buttons: getExportButtons(),
            columns: [
                { data: "id", title: "ID #" },
                { data: "action", title: "Action" },
                { data: "scheme_type", title: "Scheme Type" },
                { data: "from_date", title: "From Date" },
                { data: "to_date", title: "To Date" },
                { data: "supplier", title: "Supplier" },
                { data: "subcategory", title: "Subcategory" },
                { data: "brand", title: "Brand" },
                { data: "model", title: "Model" },
                { data: "variant", title: "Variant" },
                { data: "ppd_mop", title: "MOP Drop (₹)", className: "text-end" },
                { data: "drop_percent", title: "Drop (%)", className: "text-end" },
                { data: "after_drop", title: "after Drop (₹)", className: "text-end" },
                { data: "ppd_bop", title: "BOP Drop (₹)", className: "text-end" },
                { data: "description", title: "Description" },
                { data: "status", title: "Scheme Status" }
            ],
            ajax: {
                url: '/ajax_scheme_view/',
                type: "POST",
                data: function (data) {
                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    const SchemeType = $('#filter_scheme_type').val();
                    const BrandID = $('#filter_brand_id').val();
                    const ModelID = $('#filter_model_id').val();
                    const VariantID = $('#filter_variant_id').val();

                    if (SchemeType) data.scheme_type = SchemeType;
                    if (BrandID) data.brand_id = BrandID;
                    if (ModelID) data.model_id = ModelID;
                    if (VariantID) data.variant_id = VariantID;

                },
                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 [];
                    }
                    return response.data || [];
                }
            }
        });
    }

    // ============================================
    // Refresh Data
    // ============================================
    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }

    // ============================================
    // Add Form Submit
    // ============================================
    $("#add_form").submit(function (e) {
        e.preventDefault();
        handleFormSubmit(this, '/scheme_add/', 'add_modal', 'add_form', true, 'Scheme');
    });

    // ============================================
    // Edit Form Submit
    // ============================================
    $("#edit_form").submit(function (e) {
        e.preventDefault();

        let isValid = true;

        $('input[type="number"]:visible', this).each(function () {
            if (!validateNegativeInput($(this))) {
                isValid = false;
            }
        });

        if (!validateDates('#edit_from_date', '#edit_to_date')) {
            isValid = false;
        }

        if (!isValid) {
            return false;
        }

        handleFormSubmit(this, '/scheme_update/', 'edit_modal', 'edit_form', false, 'Scheme');
    });

    // ============================================
    // Delete Data
    // ============================================
    function delete_data(id) {
        deleteEntity('/scheme_delete/', id, '{{ csrf_token }}', 'Scheme');
    }



    function handleSchemeFields(modalElement, schemeType) {
        if (!modalElement || !schemeType) return;

        // Hide all conditional fields inside this modal
        modalElement.querySelectorAll('.scheme-upgrade, .scheme-special')
            .forEach(el => el.style.display = 'none');

        // Show based on scheme type
        if (schemeType === 'upgrade') {
            modalElement.querySelectorAll('.scheme-upgrade')
                .forEach(el => el.style.display = 'block');
        }

        if (schemeType === 'special') {
            modalElement.querySelectorAll('.scheme-special')
                .forEach(el => el.style.display = 'block');
        }
    }

    function initSchemeModal() {
        const modal = document.getElementById('add_modal');
        if (!modal) return;

        modal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            if (!button) return;

            const schemeType = button.dataset.scheme;
            const schemeTitle = button.dataset.title;

            // Set modal title
            modal.querySelector('.modal-title').textContent = `Add ${schemeTitle}`;
            modal.querySelector('#scheme_name').value = schemeTitle;

            // Set hidden input
            modal.querySelector('#scheme_type').value = schemeType;

            // Toggle fields
            handleSchemeFields(modal, schemeType);
        });
    }

    // Init once
    document.addEventListener('DOMContentLoaded', initSchemeModal);




    // ============================================
    // Edit Data
    // ============================================
    function edit_data(id) {
        const tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;
        const modal = document.getElementById('edit_modal');

        $.post('/scheme_edit/', { id: id, csrfmiddlewaretoken: tkn }, function (res) {
            $('#edit_id').val(res.id);
            $('#edit_from_date').val(res.from_date);
            $('#edit_to_date').val(res.to_date);
            $('#edit_subcategory_id').val(res.subcategory_id).trigger("change");
            
            loadBrand('edit_subcategory_id', 'edit_brand_id', res.brand_id, function () {
                loadModels('edit_brand_id', 'edit_model_id', res.model_id, function () {
                    loadVariants('edit_brand_id', 'edit_model_id', 'edit_variant_id', res.variant_id, function () {
                        
                    });
                });
            });

            loadModels('edit_brand_id', 'edit_model_id', res.model_id);

            setTimeout(function () {
                loadVariants('edit_brand_id', 'edit_model_id', 'edit_variant_id', res.variant_id);
            }, 100);

            const schemeType = res.scheme_type;
            console.log(schemeType);
            $('#edit_scheme_type').val(schemeType);
            $('#scheme_type').val(schemeType);



            handleSchemeFields(modal, schemeType);


            $('#edit_scheme_name').val(res.name);
            $('#edit_description').val(res.description);
            $('#edit_is_active').val(res.is_active).trigger("change");
            $('#edit_supplier_id').val(res.supplier_id).trigger("change");

            // Fill price fields
            $('#edit_mop_drop').val(res.mop_drop);
            $('#edit_drop_percent').val(res.mop_drop_percent);
            $('#edit_mop_after_drop').val(res.mop_after_drop);
            $('#edit_bop_drop').val(res.bop_drop);

            const schemeTitle = getSchemeTitle(res.scheme_type);
            $('#edit_modal .modal-title').text(`Edit ${schemeTitle}`);

            $('#edit_modal').modal('show');
        });
    }

    // ============================================
    // Get Scheme Title
    // ============================================
    function getSchemeTitle(type) {
        switch (type) {
            case 'upgrade':
                return 'Upgrade';
            case 'special':
                return 'Special';
            default:
                return 'Scheme';
        }
    }

    function validateMopDrop(prefix = '') {
        let mopDrop = parseFloat($('#' + prefix + 'mop_drop').val()) || 0;
        let mopAfterDrop = parseFloat($('#' + prefix + 'mop_after_drop').val()) || 0;

        const $afterField = $('#' + prefix + 'mop_after_drop');
        const $saveBtn = $('#save_btn, #update_btn'); // adjust IDs if needed

        if (mopDrop > 0 && mopAfterDrop < 0) {
            $afterField.addClass('is-invalid');

            showSweetAlert(
                'error',
                'Invalid MOP Drop',
                'MOP after drop cannot be negative. Please adjust the drop value.'
            );

            $saveBtn.prop('disabled', true);
            return false;
        } else {
            $afterField.removeClass('is-invalid');
            $saveBtn.prop('disabled', false);
            return true;
        }
    }

    function calculateMopDrop(source = '', prefix = '') {
        let mopDrop = parseFloat($('#' + prefix + 'mop_drop').val()) || 0;
        let dropPercent = parseFloat($('#' + prefix + 'drop_percent').val()) || 0;
        let mopAfterDrop = parseFloat($('#' + prefix + 'mop_after_drop').val()) || 0;

        if (source === 'percent' && mopDrop > 0) {
            mopAfterDrop = mopDrop - (mopDrop * dropPercent / 100);
            $('#' + prefix + 'mop_after_drop').val(mopAfterDrop.toFixed(2));
        }

        if (source === 'after' && mopDrop > 0) {
            dropPercent = ((mopDrop - mopAfterDrop) / mopDrop) * 100;
            $('#' + prefix + 'drop_percent').val(dropPercent.toFixed(2));
        }

        validateMopDrop(prefix);
    }


    // ADD
    $(document).on('input', '#drop_percent', function () {
        calculateMopDrop('percent', '');
    });

    $(document).on('input', '#mop_after_drop', function () {
        calculateMopDrop('after', '');
    });

    // EDIT
    $(document).on('input', '#edit_drop_percent', function () {
        calculateMopDrop('percent', 'edit_');
    });

    $(document).on('input', '#edit_mop_after_drop', function () {
        calculateMopDrop('after', 'edit_');
    });

    $('#save_btn, #update_btn').on('click', function (e) {
        const isEdit = $(this).attr('id') === 'update_btn';
        const prefix = isEdit ? 'edit_' : '';

        if (!validateMopDrop(prefix)) {
            e.preventDefault();
            return false;
        }
    });



</script>