@extends('template.layouts.template-base')
@section('title', 'Bank Master')

@section('styles')
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }

        input[type="radio"] {
            width: 14px !important;
            height: 14px !important;
            cursor: pointer !important;
            accent-color: var(--blue-theme-color) !important;
        }

        .bank-action-btn {
            border: none;
            border-radius: 10px;
            padding: 10px 16px;
            font-weight: 600;
            font-size: 14px;
            line-height: 1;
            transition: all 0.2s ease;
        }

        .bank-export-btn {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .bank-export-btn:hover {
            background: #dbeafe;
        }

        .bank-action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .cate-top-btns .btn-delete-category:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
@endsection

@section('content')
    <div class="page-header product-main service-list">
        <div class="container-fluid p-0">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="javascript:void(0)">Master / <span class="breadcrumb-link">Bank Master</span></a>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <button type="button" id="bulkDeleteBtn" class="btn-delete-category" disabled>
                        Delete <i class="bx bxs-trash fs-5"></i>
                    </button>
                    <button type="button" id="exportBtn" class=" btn-export-category bank-action-btn">Export <svg
                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path d="M12 16V3"></path>
                            <polyline points="7 8 12 3 17 8"></polyline>
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg></button>
                    <button type="button" class="btn-add-category common_model"
                        data-url="{{ route('backend.master.add-bank') }}" data-title="Add Bank Details"
                        data-size="modal-lg">Add Bank</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec user-management-page">
        <div class="content-wrapper">
            <div class="filter-section">
                <span class="badge-total">Total Banks - {{ str_pad($bankCount, 2, '0', STR_PAD_LEFT) }}</span>
                <div class="d-flex gap-2 align-items-center">
                    <select id="statusFilter" class="dropdown-btn">
                        <option value="">Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>

                    <div class="search-box-category">
                        <input type="text" placeholder="Search" id="searchInput">
                        <i class="bx bx-search"></i>
                    </div>
                </div>
            </div>

            <div class="card-body bank-master-page">
                <div class="table-responsive table-card">
                    <table id="bankTable" class="table align-middle mb-0 orders-table-container w-100">
                        <thead class="custom-table-header">
                            <tr>
                                <th><input type="checkbox" id="selectAll"></th> {{-- checkbox column --}}
                                <th>Acc.Holder Name</th> {{-- name column --}}
                                <th>Bank Name</th>
                                <th>Acc.Number</th>
                                <th>Branch</th>
                                <th>IFSC Code</th>
                                <th>Default</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(function() {
            const bulkDeleteUrl = "{{ route('backend.master.bulk-destroy-bank') }}";
            const exportUrl = "{{ route('backend.master.export-bank') }}";
            let bankBulkActions = null;

            if ($.validator && !$.validator.methods.ifscCode) {
                $.validator.addMethod('ifscCode', function(value, element) {
                    if (!value) return false;
                    return /^[A-Z]{4}0[A-Z0-9]{6}$/i.test($.trim(value));
                }, 'Please enter valid IFSC code.');
            }

            function initBankFormValidation() {
                $('#addBankForm, #editBankForm').each(function() {
                    const form = $(this);
                    if (form.data('validator')) {
                        return;
                    }

                    form.validate({
                            ignore: [],
                        errorElement: 'span',
                        errorClass: 'text-danger validation-error',
                        rules: {
                            ifsc_code: {
                                required: true,
                                minlength: 11,
                                maxlength: 11,
                                ifscCode: true
                            },
                            account_holder_name: {
                                required: true,
                                maxlength: 255
                            },
                            bank_name: {
                                required: true,
                                maxlength: 255
                            },
                            account_number: {
                                required: true,
                                digits: true,
                                minlength: 9,
                                maxlength: 50
                            },
                            branch_name: {
                                maxlength: 255
                            },
                            status: {
                                required: true
                            }
                        },
                        messages: {
                            ifsc_code: {
                                required: 'IFSC code is required.',
                                minlength: 'IFSC code must be 11 characters.',
                                maxlength: 'IFSC code must be 11 characters.'
                            },
                            account_holder_name: {
                                required: 'Account holder name is required.'
                            },
                            bank_name: {
                                required: 'Bank name is required.'
                            },
                            account_number: {
                                required: 'Account number is required.',
                                digits: 'Account number must contain only numbers',
                                minlength: 'Account number must be at least 9 digits'
                            },
                            status: {
                                required: 'Please select status.'
                            }
                        },
                        submitHandler: function(form) {
                            form.submit();
                        },
                        errorPlacement: function(error, element) {
                            if (element.attr('name') === 'status') {
                                error.insertAfter(element.closest('.col-lg-6').find('.form-check').last());
                                return;
                            }
                            if (element.attr('name') === 'is_default') {
                                error.insertAfter(element.closest('.form-check'));
                                return;
                            }
                            error.insertAfter(element);
                        },
                        highlight: function(element) {
                            $(element).addClass('is-invalid');
                        },
                        unhighlight: function(element) {
                            $(element).removeClass('is-invalid');
                        }
                    });
                });
            }

            $(document).on('common_model_content_loaded', function() {
                initBankFormValidation();
            });

            initBankFormValidation();

            const ifscPattern = /^[A-Z]{4}0[A-Z0-9]{6}$/;
            $(document).on('input keyup blur', '.ifsc-input', function() {
                const input = $(this);
                if (this.readOnly || this.disabled) return;
                const form = input.closest('form');
                const bankField = form.find('input[name="bank_name"]');
                const branchField = form.find('input[name="branch_name"]');

                function setAutoFilledReadonly(lockFields) {
                    bankField.prop('readonly', lockFields);
                    branchField.prop('readonly', lockFields);
                }

                let normalized = (input.val() || '').toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 11);
                if (normalized.length >= 5 && normalized.charAt(4) === 'O') {
                    normalized = normalized.substring(0, 4) + '0' + normalized.substring(5);
                }
                if (input.val() !== normalized) {
                    input.val(normalized);
                }

                clearTimeout(input.data('ifscTimer'));

                if (normalized.length !== 11 || !ifscPattern.test(normalized)) {
                    setAutoFilledReadonly(false);
                    input.data('lastFetchedIfsc', '');
                    return;
                }

                if ((input.data('lastFetchedIfsc') || '') === normalized) {
                    return;
                }

                const timer = setTimeout(function() {
                    const oldReq = input.data('ifscRequest');
                    if (oldReq && oldReq.readyState !== 4) {
                        oldReq.abort();
                    }

                    const req = $.ajax({
                        url: "{{ route('backend.master.lookup-ifsc') }}",
                        method: 'GET',
                        dataType: 'json',
                        timeout: 12000,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        data: {
                            ifsc_code: normalized
                        }
                    }).done(function(response) {
                        if (!response || !response.status) {
                            bankField.val('');
                            branchField.val('');
                            setAutoFilledReadonly(false);
                            input.data('lastFetchedIfsc', '');
                            return;
                        }
                        bankField.val((response.data && response.data.bank_name) || '');
                        branchField.val((response.data && response.data.branch_name) || '');
                        setAutoFilledReadonly(true);
                        input.val((response.data && response.data.ifsc_code) || normalized);
                        input.data('lastFetchedIfsc', input.val());

                        // Re-validate auto-filled fields to clear stale error messages.
                        const validator = form.data('validator');
                        if (validator) {
                            bankField.removeClass('is-invalid');
                            branchField.removeClass('is-invalid');
                            validator.element(bankField[0]);
                            validator.element(branchField[0]);
                        }
                    }).fail(function() {
                        bankField.val('');
                        branchField.val('');
                        setAutoFilledReadonly(false);
                        input.data('lastFetchedIfsc', '');
                    }).always(function() {
                        input.removeData('ifscRequest');
                    });

                    input.data('ifscRequest', req);
                }, 250);

                input.data('ifscTimer', timer);
            });

            // DataTable
            let table = null;
            if ($.fn.DataTable) {
                table = $('#bankTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ordering: false,
                    searching: false,
                    responsive: true,
                    pageLength: 10,
                    ajax: function(d, callback) {
                        d.status = $('#statusFilter').val();
                        d.search_text = $('#searchInput').val();

                        $.ajax({
                            url: "{{ route('backend.master.index') }}",
                            method: 'GET',
                            dataType: 'json',
                            timeout: 15000,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            data: d,
                            success: function(response) {
                                callback(response);
                            },
                            error: function(xhr, textStatus) {
                                console.error('Bank table ajax failed:', textStatus, xhr
                                    .status, xhr.responseText);
                                callback({
                                    draw: d.draw || 1,
                                    recordsTotal: 0,
                                    recordsFiltered: 0,
                                    data: []
                                });
                            }
                        });
                    },
                    initComplete: function() {
                        $('#bankTable').on('error.dt', function(e, settings, techNote, message) {
                            console.error('DataTable error:', message);
                        });
                    },
                    columns: [{
                            data: 'checkbox',
                            name: 'checkbox',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'account_holder_name_text',
                            name: 'account_holder_name'
                        },
                        {
                            data: 'bank_name_text',
                            name: 'bank_name'
                        },
                        {
                            data: 'account_number_text',
                            name: 'account_number'
                        },
                        {
                            data: 'branch_name_text',
                            name: 'branch_name'
                        },
                        {
                            data: 'ifsc_code_text',
                            name: 'ifsc_code'
                        },
                        {
                            data: 'default_toggle',
                            name: 'default_toggle',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'status_badge',
                            name: 'status',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                    drawCallback: function() {
                        $('#selectAll').prop('checked', false);
                        if (bankBulkActions && typeof bankBulkActions.updateState === 'function') {
                            bankBulkActions.updateState();
                        }
                    }
                });

                if (table) {
                    $('#statusFilter').on('change', function() {
                        table.ajax.reload();
                    });

                    let searchTimer;
                    $('#searchInput').on('input', function() {
                        clearTimeout(searchTimer);
                        searchTimer = setTimeout(function() {
                            table.ajax.reload();
                        }, 350);
                    });

                    if (window.AppTableActions && typeof window.AppTableActions.bindBulkActions === 'function') {
                        bankBulkActions = window.AppTableActions.bindBulkActions({
                            bulkDeleteBtn: '#bulkDeleteBtn',
                            exportBtn: '#exportBtn',
                            rowCheckbox: '.row-checkbox',
                            selectAll: '#selectAll',
                            tableSelector: '#bankTable',
                            bulkDeleteUrl: bulkDeleteUrl,
                            exportUrl: exportUrl,
                            filterFields: {
                                status: '#statusFilter',
                                search_text: '#searchInput',
                            },
                            deleteModalTitle: 'Delete Bank Records?',
                            deleteModalText: 'Are you sure you want to delete selected bank records? This action cannot be undone.',
                            emptySelectionMessage: 'Please select at least one bank record.',
                            bulkDeleteSuccessMessage: 'Selected bank records deleted successfully.',
                            bulkDeleteFailMessage: 'Bulk delete failed.',
                            tableReload: function() {
                                table.ajax.reload(null, false);
                            }
                        });
                    }
                }
            }

            $(document).off('change.bankSetDefault', '.bank-default-toggle').on('change.bankSetDefault',
                '.bank-default-toggle',
                function() {
                    const toggle = $(this);
                    const url = toggle.data('url');
                    if (!url) {
                        toggle.prop('checked', !toggle.is(':checked'));
                        return;
                    }

                    if (!toggle.is(':checked')) {
                        toggle.prop('checked', true);
                        showLoginDeleteToast('warning', 'Default Bank Required',
                            'Please select another bank as default.');
                        return;
                    }

                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                        },
                        beforeSend: function() {
                            toggle.prop('disabled', true);
                            $('#loading-image').removeClass('d-none').attr('aria-hidden', 'false');
                        },
                        complete: function() {
                            toggle.prop('disabled', false);
                        },
                        success: function(response) {
                            if (response && response.status === false) {
                                $('#loading-image').addClass('d-none').attr('aria-hidden', 'true');
                                const failedToast = response.toast || null;
                                showLoginDeleteToast(
                                    (failedToast && failedToast.type) || 'error',
                                    (failedToast && failedToast.title) || 'Update Failed',
                                    (failedToast && failedToast.message) || response.message || 'Unable to set default bank.'
                                );
                                return;
                            }

                            const successToast = response && response.toast ? response.toast : null;
                            showLoginDeleteToast(
                                (successToast && successToast.type) || 'success',
                                (successToast && successToast.title) || 'Success',
                                (successToast && successToast.message) || response.message || 'Default bank updated successfully.'
                            );

                            window.location.reload();
                        },
                        error: function(xhr) {
                            $('#loading-image').addClass('d-none').attr('aria-hidden', 'true');
                            toggle.prop('checked', false);
                            const failedToast = xhr.responseJSON && xhr.responseJSON.toast ? xhr.responseJSON.toast : null;
                            showLoginDeleteToast(
                                (failedToast && failedToast.type) || 'error',
                                (failedToast && failedToast.title) || 'Update Failed',
                                (failedToast && failedToast.message) || (xhr.responseJSON && xhr.responseJSON.message) ||
                                'Unable to set default bank.'
                            );
                        }
                    });
                });
        });
    </script>
@endsection