{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}
{% include 'includes/datatable_css.html' %}
<style>
.kv-row {
    display: grid;
    grid-template-columns: 110px 10px auto;
    column-gap: 4px;
    font-size: 0.875rem;
    margin-bottom: 4px;
}

.kv-label {
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.kv-colon {
    text-align: center;
}

.kv-value {
    text-align: left;
}


</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">Upgrade Sales</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">Upgrade Sales</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-header border-bottom">         
            <div class="row mt-2">
                <div class="col-2">
                    <label class="form-label">Date Filter</label>
                    <input type="checkbox" id="is_date" checked>                        
                    <input type="text" id="date_filter" class="form-control" style="cursor: pointer;" />                       
                    <input type="hidden" id="from_date" name="from_date">
                    <input type="hidden" id="to_date" name="to_date">
                </div>
                <div class="col-2">
                    <label class="form-label">Brand</label>
                    <select id="filter_brand_id" name="brand_id" class="form-select select2">
                        <option value="">Select</option>
                        {% for k in brand %}
                            <option value="{{ k.id }}">{{ k.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-2">
                     <label class="form-label">Model</label>
                    <select id="filter_model_id" name="model_id" class="form-select select2">
                        <option value="">Select</option>
                        {% for k in model %}
                            <option value="{{ k.id }}">{{ k.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-2">
                    <label class="form-label">Variant</label>
                    <select id="filter_variant_id" name="variant_id" class="form-select select2">
                        <option value="">Select</option>
                        {% for k in variant %}
                            <option value="{{ k.id }}">{{ k.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-2">
                     <label class="form-label">Approve Status</label>
                    <select id="filter_approve_status" name="approve_status_id" class="form-select select2">
                        <option value="">Select</option>
                        <option value="pending">Pending</option>
                        <option value="partial">partial</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>


                    </select>
                </div>

                
                
                
               
                
                <div class="col-2 mt-6">
                    <button type="button" class="btn btn-primary" onclick="refresh_data()"><i class="fas fa-search"></i>&nbsp; Search</button>                    
                    
                </div>
            </div>
        </div>
        <div class="card-body">  
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table table-bordered" id="datatable">
                    {% csrf_token %}
                    <thead>
                        <tr>
                            <th>Basic Details</th>
                            <th>Amt Details</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>          
        </div>
        <div id="add_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLiveLabel">Upgrade Sales <span id="title" style="color: red;"></span></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-6 mb-5">
                                    <label for="name" class="form-label"> Upgrade Amount</label>
                                    <input class="form-control" type="number" id="upgrade_amount" name="upgrade_amount" readonly>
                                </div>

                                
                                <div class="col-6 mb-5">
                                    <label for="name" class="form-label"> Debit Note Date</label>
                                    <input class="form-control" type="date" id="debit_note_date" name="debit_note_date">
                                </div>
                                <div class="col-6 mb-5">
                                    <label for="name" class="form-label"> Debit Note No</label>
                                    <input class="form-control" type="text" id="debit_note_no" name="debit_note_no">
                                </div>

                                <div class="col-6 mb-5">
                                    <label for="name" class="form-label"><span style="color: red;">*</span> Debit Note</label>
                                    <input class="form-control" type="number" id="debit_amount" name="debit_amount">
                                </div>
                                
                            
                                <div class="col-12 mb-5">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea class="form-control" id="edit_description" rows="3" name="description"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" id="edit_id" name="edit_id">
                            <input type="hidden" id="sales_id" name="sales_id">
                            <input type="hidden" id="subcategory_id" name="subcategory_id">
                            <input type="hidden" id="brand_id" name="brand_id">
                            <input type="hidden" id="model_id" name="model_id">
                            <input type="hidden" id="variant_id" name="variant_id">
                            <input type="hidden" id="color_id" name="color_id">
                            <input type="hidden" id="imei_no" name="imei_no">
                            <input type="hidden" id="branch_id" name="branch_id">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="reject_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLiveLabel">Upgrade Reject</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="reject_form">
                        <div class="modal-body">
                            {% csrf_token %}
                            <div class="row">   
                                <div class="col-12 mb-3">
                                    <label for="description" class="form-label">Remarks</label>
                                    <textarea class="form-control" id="remarks" rows="3" name="remarks"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" id="upgrade_id" name="upgrade_id">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="edit_submit_btn" class="btn btn-success">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
<script>
    
    var table;
    

    

    $(document).ready(function(){
        initializeDateRangePicker('this_month'); // date range picker (function in common_js)
        refresh_data();

    });

   


  

    // // datatable 
    // function initializeDataTable() {
    //     table = $('#datatable').DataTable({
    //         "processing": true,
    //         "pageLength": 50,
    //         "destroy": true,
    //         "order": [],  
    //         "dom": getDataTableDom(),
    //         "buttons": getExportButtons(),            
    //         "columns": [
    //             { "data": "id", "title": " ID #" },
    //             { "data": "action", "title": "Action" },
    //             { "data": "inv_no", "title": "INV No" },
    //             { "data": "date", "title": "INV Date" },
    //             { "data": "branch", "title": "Branch" },
    //             { "data": "customer", "title": "Customer" },
    //             { "data": "phone", "title": "Phone" },
    //             { "data": "customer_type", "title": "Customer Type" },
    //             {'data': 'brand', 'title': 'Brand'},
    //             { "data": "model", "title": "Model" },
    //             { "data": "variant", "title": "Variant" },
    //             { "data": "color", "title": "Color" },
    //             { "data": "imei", "title": "IMEI" },
    //             { "data": "upgrade", "title": "Upgrade" },
    //             { "data": "debit", "title": "Debit" },
    //             { "data": "balance", "title": "Balance" },
    //             { "data": "status", "title": "Status" },
    //         ],
    //         "ajax": {
    //             "url": '/ajax_upgrade_sales_view/',
    //             "type": "POST",
               
    //             "data": function(data) {
    //                 data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
    //                 const isDateChecked         = $('#is_date').is(":checked");
    //                 const fromDate              = $('#from_date').val();
    //                 const toDate                = $('#to_date').val();
    //                 const brandId               = $('#filter_brand_id').val();
    //                 const modelId               = $('#filter_model_id').val();
    //                 const variantId             = $('#filter_variant_id').val();
    //                 const filterApproveStatus   = $('#filter_approve_status').val();

    //                 if (brandId) data.filter_brand_id = brandId;
    //                 if (modelId) data.filter_model_id = modelId;
    //                 if (variantId) data.filter_variant_id = variantId;
    //                 if (filterApproveStatus) data.approve_status = filterApproveStatus;

    //                 if (isDateChecked && fromDate && toDate) {
    //                     data.from_date = fromDate;
    //                     data.to_date = toDate;
    //                 }
    //             },
    //             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 || [];
    //             }
    //         },
            
    //     });
    // }

    function initializeDataTable() {
    table = $('#datatable').DataTable({
        "processing": true,
        "pageLength": 50,
        "destroy": true,
        "order": [],  
        "dom": getDataTableDom(),
        "buttons": getExportButtons(),            
        "columns": [
            // Use only 3 columns to match the layout in the image
            { "data": null, "title": "Basic Details" },
            { "data": null, "title": "Amt Details" },
            { "data": null, "title": "Action", "className": "text-center" }
        ],
        "columnDefs": [
            {
                "targets": 0, // Basic Details Column
                render: function (data, type, row) {
                    return `
                        <div class="kv-row"><span class="kv-label">Inv No</span><span class="kv-value">: ${row.inv_no}</span></div>
                        <div class="kv-row"><span class="kv-label">Inv Date</span><span class="kv-value">: ${row.date}</span></div>
                        <div class="kv-row"><span class="kv-label">Customer</span><span class="kv-value">: ${row.phone} - ${row.customer}</span></div>
                        <div class="kv-row"><span class="kv-label">IMEI No</span><span class="kv-value">: ${row.imei}</span></div>
                        <div class="kv-row"><span class="kv-label">Model</span><span class="kv-value">: ${row.brand} ${row.model} (${row.variant})</span></div>
                        <div class="kv-row"><span class="kv-label">Branch</span><span class="kv-value">: ${row.branch}</span></div>
                    `;
                }

            },
            {
                "targets": 1, // Amt Details Column
               render: function (data, type, row) {
                    let closureAmt = row.balance || "0.00";
                    return `
                        <div class="kv-row"><span class="kv-label">Bill Amt</span><span class="kv-value">: ${row.amount || '0.00'}</span></div>
                        <div class="kv-row"><span class="kv-label">Paid</span><span class="kv-value">: ${row.paid || '0.00'}</span></div>
                        <div class="kv-row"><span class="kv-label">Balance</span><span class="kv-value">: ${row.balance}</span></div>
                        <div class="kv-row"><span class="kv-label">Upgrade Amt</span><span class="kv-value">: ${row.upgrade || '0.00'}</span></div>
                        <div class="kv-row"><span class="kv-label">Collected</span><span class="kv-value">: ${row.upgrade_amount || '0.00'}</span></div>
                        <div class="kv-row"><span class="kv-label">Status</span><span class="kv-value">: ${row.status || '0.00'}</span></div>
                    `;
                }

            },
            {
                "targets": 2, // Action Column
                "render": function(data, type, row) {
                    // Layout buttons side-by-side as seen in the image
                    return `
                        <div class="d-flex justify-content-center gap-2">
                            ${row.action || ''}
                        </div>
                    `;
                }
            }
        ],
        "ajax": {
            "url": '/ajax_upgrade_sales_view/',
            "type": "POST",
            "data": function(data) {
                data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                // ... rest of your filter logic stays the same ...
                const isDateChecked = $('#is_date').is(":checked");
                if (isDateChecked) {
                    data.from_date = $('#from_date').val();
                    data.to_date = $('#to_date').val();
                }
                data.filter_brand_id = $('#filter_brand_id').val();
                data.filter_model_id = $('#filter_model_id').val();
                data.filter_variant_id = $('#filter_variant_id').val();
                data.approve_status = $('#filter_approve_status').val();
            },
            dataSrc: function (response) {
                if (response.message === 'permission') {
                    showSweetAlert('warning', response.error_message || 'Permission Denied');
                    return [];  
                }
                return response.data || [];
            }
        }
    });
}
    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }

function approve_data(id) {
    var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;
    $.post('/load_upgrade_sales/', { 
        id: id, 
        csrfmiddlewaretoken: tkn 
    }, function(res) {
        $('#edit_id').val(res.id); 
        $('#sales_id').val(res.sales_id); 
        $('#title').text("IMEI: " + res.imei);

        $('#subcategory_id').val(res.subcategory_id);
        $('#brand_id').val(res.brand_id);
        $('#model_id').val(res.model_id);
        $('#variant_id').val(res.variant_id);
        $('#color_id').val(res.color_id);
        $('#imei_no').val(res.imei_no);
        $('#branch_id').val(res.branch_id);
        
        $('#upgrade_amount').val(res.upgrade_amount);
        
        // Show  modal
        $('#add_modal').modal('show');
    }).fail(function() {
        alert("Error loading upgrade details. Please try again.");
    });
}

function reject_data(id) {
    $('#upgrade_id').val(id); 
    $('#reject_modal').modal('show');
    
}

$("#add_form").submit(function (e) {
    e.preventDefault();
    handleFormSubmit(
        this, 
        '/add_upgrade_sales/', 
        'add_modal', 
        'add_form', true, 
        'Upgrade Sales'
    );
});


$("#reject_form").submit(function (e) {
    e.preventDefault();
    handleFormSubmit(this, '/upgrade_rejected/', 'reject_modal', 'reject_form', false, 'Upgrade Reject');
});


function revert_data(id) {
    deleteEntity('/upgrade_revert/', id, '{{ csrf_token }}', 'Upgrade Revert');
}
    </script>