{% load static %}
{% include 'includes/header.html' %}
<style>
.dataTables_wrapper .row:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-xl {
  max-width: 45% !important; /* or 100% if you want full width */
}


</style>
{% include 'includes/sidebar.html' %}
{% include 'includes/navbar.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">Bank</h4> 
            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#add_modal">Add</button>  &nbsp
            <button type="button" class="btn btn-primary btn-sm" onclick="refresh_data()">Refresh</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">Master</li>
                <li class="breadcrumb-item active" aria-current="page">Bank</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-body">  
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table" id="datatable">
                  <thead>
                    <tr>
                        <th>Id</th>
                        <th>Action</th>
                        <th>Date</th>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Account Number</th>                      
                        <th>Opening</th>
                        <th>Is Default</th>
                        <th>Description</th>
                        <th>status</th>                   
                    </tr>
                  </thead>
                </table>
              </div>          
        </div>
    </div>
    
    
    <!-- add modal -->
    <div id="add_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLiveLabel">Add Bank</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-3">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Name</label>
                                <input class="form-control" type="text" id="name" name="name" required>
                            </div>
                            
                            <div class="col-6 mb-3">
                                <label for="name" class="form-label">Account Number</label>
                                <input class="form-control" type="text" id="account_number" name="account_number">
                            </div>
                             
                            <div class="col-6 mb-3">
                                <label for="opening" class="form-label">Opening</label>
                                <input class="form-control" type="number" step="0.01" id="opening" name="opening">
                            </div>

                            <div class="col-6 mb-3">
                                <label for="description" class="form-label">Date</label>
                                <input class="form-control" type="date" id="date" name="date">
                            </div>
                            <!-- <div class="col-3 mb-5 mt-5">
                                <input class="form-check-input " type="checkbox"
                                    id="is_default" name="is_default" value=1 style="height: 25px; width: 25px; margin-top:8%; ">
                                <label class="form-check-label" for="is_default" style="margin-top: 8%;" >Is Global</label>
                            </div>
                           -->
                            <div class="col-12 mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="description" rows="2" name="description"></textarea>
                            </div>
                            <div class="d-flex align-items-center mb-3 mt-4">
                                <h6 class="mb-0 me-2" >QR Details</h6>
                                <div class="flex-grow-1">
                                    <hr class="mt-2 mb-0" >
                                </div>
                            </div>                            

                            <div class="col-6 mb-3">
                                <label for="name" class="form-label">QR Name</label>
                                <input class="form-control" type="text" id="qr_name" name="qr_name">
                            </div>

                             <div class="col-6 mb-3 text-start mt-2">
                                <button type="button" class="btn btn-success mt-4 btn-sm" name="add_item" id="add_item" onclick="addRow()">+Add</button>
                            </div>

                            
                            <div class="col-12 mb-3">
                                <div class="table-responsive text-nowrap">
                                    <table class="table mt-5" id="itemTable">
                                        <thead>
                                            <tr>
                                                <th>Actions</th>
                                                <th>Name</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="is_active" value="1">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" >Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div id="edit_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLiveLabel">Edit Bank</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-6 mb-3">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Name</label>
                                <input class="form-control" type="text" id="edit_name" name="name" required>
                            </div>                           
                            <div class="col-6 mb-3">
                                <label for="name" class="form-label"><span style="color: red;">*</span>Account Number</label>
                                <input class="form-control" type="text" id="edit_account_number" name="account_number" required>
                            </div>     
                           
                           
                            <div class="col-6 mb-3">
                                <label for="opening" class="form-label">Opening</label>
                                <input class="form-control" type="number" step="0.01" id="edit_opening" name="opening">
                            </div>
<!-- 
                             <div class="col-6 mb-5 mt-5">
                                <input class="form-check-input " type="checkbox"
                                    id="edit_is_default" name="is_default" value=1 style="height: 25px; width: 25px;">
                                <label class="form-check-label" for="edit_is_default">Is Global</label>
                            </div> -->
                           

                             <div class="col-3 mb-3">
                                <label for="date" class="form-label"><span style="color: red;">*</span>Date</label>
                                <input class="form-control" type="date" id="edit_date" name="date" required>
                            </div>                          
                                
                            

                            <div class="col-3 mb-3">
                                <label for="name" 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 for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="edit_description" rows="3" name="description"></textarea>
                            </div>
                            <div class="d-flex align-items-center mb-3 mt-4">
                                <h6 class="mb-0 me-2" >QR Details</h6>
                                <div class="flex-grow-1">
                                    <hr class="mt-2 mb-0" >
                                </div>
                            </div>                            

                            <div class="col-6 mb-3">
                                <label for="name" class="form-label">QR Name</label>
                                <input class="form-control" type="text" id="edit_qr_name" name="qr_name">
                            </div>

                             <div class="col-6 mb-3 text-start mt-2">
                                <button type="button" class="btn btn-success mt-4 btn-sm" name="add_item" id="edit_add_item" onclick="add()">+Add</button>
                            </div>
                            <div class="col-12 mb-3">
                                <div class="card-datatable table-responsive pt-0">
                                    <table class="datatables-basic table" id="itemdatatable">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Actions</th>
                                                <th>Name</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="edit_id" name="id">
                        <input type="hidden" id="edit_tx_id" name="tx_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>


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

    $(document).ready(function(){
        refresh_data();
        CurrentDate('date');
    });


   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: "date", title: "Date" },
            { data: "code", title: "Code" },
            { data: "name", title: "Name" },
            { data: "opening", title: "Opening" },
            { data: "account", title: "Account Number" },
            { data: "default", title: "Is default" },
            { data: "description", title: "Description" },
            { data: "status", title: "Status" }
        ],
        ajax: {
            url: '/bank_view/',
            type: "POST",
            data: function(data){
                data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
            },
            dataSrc: function (response) {
                if (response.message === 'warning') {
                    showToast('warning', response.error_message || 'You do not have permission to view the user role.');
                    table.clear().draw();
                    return [];
                }
                return response.data || [];
            }
        }
    });
}


    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }
function edit_data(id,name) {
    var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;

    $.post('/bank_edit/', { id:id, csrfmiddlewaretoken:tkn }, function(res) {

        $("#edit_id").val(res.id);
        $("#edit_name").val(res.name);
        $("#edit_branch_name").val(res.branch_name);
        $("#edit_holder").val(res.holder_name);
        $("#edit_account_number").val(res.account_number);
        $("#edit_ifsc_code").val(res.ifsc_code);
        $("#account_type").val(res.account_type);
        $("#edit_address").val(res.address);
        $("#edit_description").val(res.description);
        $("#edit_date").val(res.date);
        $("#edit_opening").val(res.opening);
        $("#edit_is_default").prop('checked', res.is_default == 1);
        $("#edit_is_active").val(res.is_active).trigger("change");

        loadqrdata(); // 🔥 Safe and correct
        $("#edit_modal").modal("show");
    });
}


    $("#add_form").submit(function (e) {
        e.preventDefault();

        let formData = new FormData(this);
        let items = [];

        $('#itemTable tbody tr').each(function () {
            let item = {
                qr_name: $(this).find(".qr-name").text().trim(),
            };
            items.push(item);
        });

        formData.append('items', JSON.stringify(items));

        handleFormSubmit(
            this, 
            '/bank_add/', 
            'add_modal', 
            'add_form', 
            true, 
            'Bank',
            [
                function(response){
                    refresh_data();
                }
            ],
            formData, 
            false
        );
    });


    $("#edit_form").submit(function (e) {
        e.preventDefault();
        handleFormSubmit(this, '/bank_update/', 'edit_modal', 'edit_form', false, 'Bank');
    });

    function delete_data(id) {
        deleteEntity('/bank_delete/', id, '{{ csrf_token }}', 'UOM');
    }

    function make_default(id) {
        $.ajax({
            url: "/make_default/",
            type: "POST",
            data: { id: id },
            headers: { "X-CSRFToken": getCSRFToken() },
            success: function (res) {
                if (res.message === "success") {
                    showToast('success', "Bank updated as default")
                    refresh_data(); // refresh table
                } else {
                    showToast('error' ,res.error_message || "Failed to update");
                }
            },
            error: function (xhr) {
                toastr.error("Server Error");
            }
        });
    }
        
    function addRow() {
        let qrName = $("#qr_name").val().trim();
        if (qrName === "") return;

        let exists = false;
        $("#itemTable tbody tr").each(function(i) {
            let existingName = $(this).find(".qr-name").text().trim().toLowerCase();
            if (existingName === qrName.toLowerCase() && i !== editIndex) {
                exists = true;
            }
        });

        if (exists) {
            $("#qr_name").val('');
            return;
        }

        if (editIndex !== null) {
            let row = $("#itemTable tbody tr").eq(editIndex);
            row.find(".qr-name").text(qrName);
            $("#add_item").text("+Add").removeClass("btn-warning").addClass("btn-success");

            editIndex = null;
            $("#qr_name").val('');
            return;
        }

        let row = `
            <tr>
                <td>
                    <button type="button" class="btn btn-outline-success btn-xs p-1" onclick="editRow(this)">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-xs p-1" onclick="deleteRow(this)">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </td>
                <td class="qr-name">${qrName}</td>
            </tr>
        `;

        $("#itemTable tbody").append(row);
        $("#qr_name").val('');
    }
    
    function editRow(btn) {
        let row = $(btn).closest("tr");
        let oldName = row.find(".qr-name").text().trim();
        $("#qr_name").val(oldName).focus();
        row.remove();
        $("#add_item").text("Update").removeClass("btn-success").addClass("btn-warning");
    }


    function deleteRow(btn) {
        $(btn).closest("tr").remove();

        // Reset edit mode if needed
        editIndex = null;
        $("#add_item").text("+Add").removeClass("btn-warning").addClass("btn-success");
    }


        
    function loadqrdata() {
        var table = $('#itemdatatable').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "dom": 't', 
            "columns": [
                { "data": "id", "title": "Id" },         
                { "data": "action", "title": "Action" },         
                { "data": "name", "title": "Name" },         
            ], 
            "ajax": {
                "url": '/ajax_qr_view/',
                "type": "POST",
                "data": function(data){
                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    data.edit_id = $('#edit_id').val(); 
                }
            }
        });
    }

    function add() {
        let qrName = $("#edit_qr_name").val().trim();
        let bankId = $("#edit_id").val(); // we already have bank ID
        let txId = $("#edit_tx_id").val(); // we already have bank ID

        if (qrName === "") {
            return;
        }
          $("#edit_qr_name_error").remove();

        // Send AJAX to backend to save QR
        $.post('/bank_qr_add/', {
            csrfmiddlewaretoken: document.getElementsByName("csrfmiddlewaretoken")[0].value,
            bank_id: bankId,
            name: qrName,
            tx_id:txId

        },
        
        
        function(response) {
             if (response.message === "duplicate") {
                // Add an  message under the input
                $("#edit_qr_name").after('<span id="edit_qr_name_error" style="color:red; font-size:12px;">This QR name already exists.</span>');
                return;
            }

            if (response.message === "success") {

                $("#edit_qr_name").val(""); // clear input
                $("#edit_tx_id").val(""); // clear input

                $('#itemdatatable').DataTable().ajax.reload(null, false);

            } else {
                alert("Failed to add QR.");
            }
        });
    }


    function edit_tx(id, name) {
        var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;

        $.post('/tx_edit_qr/', { id: id, csrfmiddlewaretoken: tkn }, function(res) {
            // Populate modal fields
            $("#edit_id").val(res.bank_id);
            $("#edit_tx_id").val(res.id);
            $("#edit_qr_name").val(res.name);

            // Change button text and color for edit mode
            $('#edit_add_item')
                .text('Update')
                .removeClass('btn-success')
                .addClass('btn-primary'); // e.g., blue for update
        });
    }

    function delete_tx(id) {
        $.post('/tx_delete_qr/', {
            csrfmiddlewaretoken: document.getElementsByName("csrfmiddlewaretoken")[0].value,
            id: id
        }, function(response) {
            if (response.message === "success") {
                // reload datatable
                loadqrdata();
            } else {
                console.error(response.error || "Failed to delete QR.");
            }
        });
    }

</script>