@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

    <style>
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0px;
            left: -100%;
            display: none;
            position: absolute;
            background: #eeeef3;
        }

        .dropdown-submenu:hover .dropdown-menu {
            display: block;
        }

    .badge-soft-success{
            color: #fff;
            background-color: #34c38f;
            width: 68.5px;
        }
        .badge-soft-danger {
            color: #ffffff;
            background-color: #f46a6a;
        }
    .table .table-light{
            border-color: #d7dade !important;
        }

        .dropdown-checklist {
            padding: 0px 12px;
            line-height: 0px;
        }
        .custom-dropdown-toggle-top.show {
            top: 70% !important;
        }
        #datatable tbody td:nth-child(13),
        #datatable tbody td:nth-child(25) {
            white-space: normal;
            word-wrap: break-word;
        }
        #datatable tbody td:nth-child(19),
        #datatable tbody td:nth-child(20),
        #datatable tbody td:nth-child(21) {
            white-space: normal;
            word-wrap: break-word;
            min-width: 200px;
        }
    .text-white{
            font-size: 14px;
        }
    #cards .card{
            margin-bottom: unset;
        }
    /* .head-lable-bg{
        background-color: #3e62ff;
    }
    .head-row-bg{
        background-color: #d4dcff;
        color: #000;
    }
    .member-lable-bg{
        background-color: #2d9dff;
    }
    .member-row-bg{
        background-color: #d0e9ff;
        color: #000;
    } */
    @media (max-width: 1199px){
        .text-white{
                font-size: 13px;
            }
        }
    @media (max-width: 991px){
        .text-white{
                font-size: 11px;
            }
        }
    @media (max-width: 767px){
        .float-end{
                margin-bottom: 5px;
            }
        }

        .modal-xxl {
            max-width: 1440px;
        }

        .popup {
            right: 0;
            left: 190px;
        }

    .select2-container--default.select2-container--disabled .select2-selection--multiple{
            background-color: transparent !important;
        }

        .custom-modal {
            max-width: 700px;
        }

        /* 从文件1复制的模态框样式 */
        .custom-modal-yes {
            max-width: 900px;
        }

        .role-card-option {
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            background: #f8fafc;
        }

        .role-card-option:hover,
        .role-card-option input:checked+.role-card-option {
            border-color: #10b981;
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
        }

        .role-icon {
            font-size: 2.5rem;
            margin-bottom: 12px;
        }

        .role-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 8px;
        }
    </style>

    <div class="page-content">
        <div class="container-fluid">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">
                    <a href="javascript:void(0);"
                        onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton"
                        title="backbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp;
                    {{ $data['title'] }}
                </h4>
            </div>
            <div class="row" id="card">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xl-12">
                                <form action="{{ route('import.store') }}" method="POST" enctype="multipart/form-data"
                                    id="import">
                                    @csrf
                                    <a href="{{ route('download.import.clients.file') }}"
                                        class="btn btn-success btn-large pull-right mb-2" style="font-weight: 600;">Download
                                        Example File </a>
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label class="form-label">Upload Excel File</label>
                                            <input type="file" class="form-control" id="upload_file" name="upload_file"
                                                accept=".xls,.xlsx,.csv">
                                            <span id="fileError" class="text-danger d-none">Please select a file to
                                                upload.</span>
                                        </div>
                                        <div class="col-md-2 mt-4">
                                            <button type="submit" class="btn btn-primary px-3">Import</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="row mt-3 search-value">
                            <div class="text-center">
                                <span class="alert-warning alert-animation px-3 py-1 rounded-3">Filter is applied...</span>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="datatable"
                                class="table align-middle table-nowrap table-striped display nowrap w-100">
                                <thead class="table-light">
                                    <tr>
                                        <th style="vertical-align: top !important; text-align:center;">Action</th>
                                        <th>Full Name<br><input type="text" class="form-control" name="full_name"
                                                placeholder="Search" autocomplete="off" style="width: 100px; height: 25px">
                                        </th>
                                        <th>DOB<br><input type="text" class="form-control" name="dob"
                                                placeholder="Search" maxlength="10" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Mobile No.<br><input type="text" class="form-control" name="mobile_number"
                                                placeholder="Search" autocomplete="off" style="width: 100px; height: 25px">
                                        </th>
                                        <th>Whatsapp No.<br><input type="text" class="form-control"
                                                name="whatsapp_number" placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Email<br><input type="text" class="form-control" name="email"
                                                placeholder="Search" autocomplete="off" style="width: 100px; height: 25px">
                                        </th>
                                        <th>Address<br><input type="text" class="form-control" name="address1"
                                                placeholder="Search" autocomplete="off" style="width: 100px; height: 25px">
                                        </th>
                                        <th>Address 2<br><input type="text" class="form-control" name="address2"
                                                placeholder="Search" autocomplete="off" style="width: 100px; height: 25px">
                                        </th>
                                        <th>Pan No.<br><input type="text" class="form-control" name="pan_number"
                                                placeholder="Search" autocomplete="off" style="width: 100px; height: 25px">
                                        </th>
                                        <th>Aadhar No.<br><input type="text" class="form-control" name="aadhaar_number"
                                                placeholder="Search" autocomplete="off" style="width: 100px; height: 25px">
                                        </th>
                                        <th>Gst No.<br><input type="text" class="form-control" name="gst_number"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            @csrf
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Policy Holder Selection Modal (from File 1) -->
<div class="modal fade" id="yesClient" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    role="dialog" aria-labelledby="yesClientLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered custom-modal-yes" role="document">
        <div class="modal-content">
            <div class="modal-header text-white">
                <h5 class="modal-title" id="yesClientLabel">
                    Policy Holder List
                </h5>
                <button type="button" class="btn-close " data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="max-height: 500px; overflow-y: auto;">
                <div id="holderList">
                    <div class="text-centFer p-5">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-3">Loading policy holders...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="btnSkip">
                    New Add Policy Holder
                </button>
                <button type="button" class="btn btn-primary" id="btnContinue">
                    Continue
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Hidden Input to Store Temporary Client ID -->
<input type="hidden" id="M_client_id" value="">

<!-- Add Client Modal (from File 1) -->
<div class="modal fade" id="modalImportClientUpdate" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" role="dialog" aria-labelledby="modalSelectFormLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered custom-modal" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectFormLabel">Add Client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>

            <form id="formPolicyHolderName" novalidate>
                <input type="hidden" name="client_id" id="client_id" value="">

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3 d-flex justify-content-center align-items-center">
                                <div class="form-check me-5">
                                    <input type="radio" class="form-check-input" id="add_family_head"
                                        name="selection" value="0" checked>
                                    <label class="form-check-label" for="add_family_head">Family Head</label>
                                </div>
                                <div class="form-check me-5">
                                    <input type="radio" class="form-check-input" id="add_family_member"
                                        name="selection" value="1">
                                    <label class="form-check-label" for="add_family_member">Family
                                        Member</label>
                                </div>
                                <div class="form-check">
                                    <input type="radio" class="form-check-input" id="add_firm"
                                        name="selection" value="2">
                                    <label class="form-check-label" for="add_firm">Firm</label>
                                </div>
                            </div>
                            <small id="radio-error" style="color:red; display:none;">Please select an
                                option</small>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="btnRadioSubmit" class="btn btn-primary px-3">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

    @include('../reachassuree_agent/master/comman/expiry-popup')
@endsection

@section('custom-scripts')
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
    <script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-wizard.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/inputmask.min.js') }}"></script>
    <script type="text/javascript">
        var ajaxImport = "{{ route('import.index') }}";
        var ajaxSearchClient = "{{ route('search.client') }}";

        $(document).ready(function() {
            const validExtensions = [".xls", ".xlsx", ".csv"];
            $("#upload_file").on("change", function() {
                $("#fileError").addClass("d-none");
            });
            $('#import').submit(function(e) {
                e.preventDefault();
                let fileInput = $("#upload_file")[0];
                let fileError = $("#fileError");
                fileError.addClass("d-none");
                let file = fileInput.files[0];
                if (!file) {
                    fileError.text("Please select a file to upload.");
                    fileError.removeClass("d-none");
                    return false;
                }
                let extension = file.name.substring(file.name.lastIndexOf(".")).toLowerCase();
                if (!validExtensions.includes(extension)) {
                    fileError.text("Please upload a valid file type (xls, xlsx, csv).");
                    fileError.removeClass("d-none");
                    return false;
                }
                $(this).ajaxSubmit({
                    beforeSubmit: function() {
                        showLoader();
                        return true;
                    },
                    success: function(responseText) {
                        hideLoader();
                        if (responseText['status'] == 1) {
                            toastr["success"](responseText['msg']);
                            setTimeout(() => {
                                window.location = ajaxImport;
                            }, 5000);
                        } else {
                            toastr["error"](responseText['msg']);
                        }
                    },
                    error: function(xhr) {
                        hideLoader();
                        let json = xhr.responseJSON;
                        if (json && json.errors && json.errors.upload_file) {
                            fileError.text(json.errors.upload_file[0]).removeClass("d-none");
                        } else {
                            toastr["error"]("An unexpected error occurred.");
                        }
                    }
                });
                return false;
            });
        });

        var visibleColumns = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25];
        var ajaxURLGetImport = "{{ route('import.ajax') }}";
        var deleteimportClient = "{{ route('import.delete') }}";
        var isDeleted = "{{ $data['is_deleted'] }}";
        var authType = "{{ Auth::user()->type }}";
        var csrfToken = $("[name=_token]").val();
        var is_expired = "{{ $data['is_expired'] }}";
        const selectedGeneralValues = [];
        const selectedLifeValues = [];
        const selectedInvestmentValues = [];
        const currentPage = window.location.pathname
        const storedData = localStorage.getItem(currentPage);
        const parsedData = JSON.parse(storedData);
        $(".search-value").fadeOut();

        $(document).ready(function() {
            $(".search-value").fadeOut();
            $('input.toggle-vis').on('click', function(e) {
                var columnIndex = $(this).attr('data-column');
                var unHiddenValues = [2, 3, 5, 10];
                if (columnIndex === "-1") {
                    var checked = $(this).prop('checked');
                    if (!checked) {
                        table.columns().visible(false);
                        unHiddenValues.forEach(function(index) {
                            table.column(index).visible(true);
                        });
                        $('input.toggle-vis').not('[data-column="-1"]').prop('checked', false).prop(
                            'disabled', true);
                    } else {
                        table.columns().visible(true);
                        $('input.toggle-vis').not('[data-column="-1"]').prop('disabled', false).prop(
                            'checked', true);
                    }
                } else {
                    var column = table.column(columnIndex);
                    column.visible($(this).prop('checked'));
                    var allUnchecked = true;
                    $('input.toggle-vis').not('[data-column="-1"]').each(function() {
                        if ($(this).prop('checked')) {
                            allUnchecked = false;
                            return false;
                        }
                    });
                    if (allUnchecked) {
                        var allCheckbox = $('input.toggle-vis[data-column="-1"]');
                        allCheckbox.prop('checked', false).prop('disabled', true);

                        var allColumn = table.column("-1");
                        allColumn.visible(false);
                    } else {
                        var allCheckbox = $('input.toggle-vis[data-column="-1"]');
                        allCheckbox.prop('disabled', false);
                    }
                }
            });
            $("#modalIsExpired").hide();
        });

        var table = $('#datatable').DataTable({

            "aoColumnDefs": [{
                "bSortable": true,
                "aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            }],
            "order": [
                [1, 'desc']
            ],
            "ordering": true,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "lengthMenu": [
                [10, 50, 100, 150],
                [10, 50, 100, 150]
            ],
            "scrollY": function() {
                return $(window).height() - 300;
            },
            "language": {
                "processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'
            },
            "ajax": {
                "url": ajaxURLGetImport,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "is_deleted": isDeleted,
                    "is_new": 0
                }
            },
            "aoColumns": [{
                    "mData": "action",
                    "bSortable": false,
                    "render": function(data, type, row, meta) {
                        return '<div class="d-flex align-items-center" style="min-height: 40px; white-space: nowrap;">' +
                            '<span class="me-2 fw-bold" style="min-width: 25px; text-align: center;">' +
                            (meta.row + meta.settings._iDisplayStart + 1) +
                            '</span>' +
                            '<div class="d-flex align-items-center gap-1">' +
                            data +
                            '</div>' +
                            '</div>';
                    }
                },
                {
                    "mData": "full_name"
                },
                {
                    "mData": "dob"
                },
                {
                    "mData": "mobile_number"
                },
                {
                    "mData": "whatsapp_number"
                },
                {
                    "mData": "email"
                },
                {
                    "mData": "address1"
                },
                {
                    "mData": "address2"
                },
                {
                    "mData": "pan_number"
                },
                {
                    "mData": "aadhaar_number"
                },
                {
                    "mData": "gst_number"
                },
            ]
        });

        table.on('xhr', function() {
            var responseData = table.ajax.json();
            if (responseData['recordsTotal'] == 0) {
                $('#dropdownMenuButton1').hide();
            }

            if (responseData['recordsFiltered'] == 0) {
                $('#dropdownMenuButton1').hide();
            } else {
                $('#dropdownMenuButton1').show();
            }
        });

        var inputNames = [
            'full_name', 'dob', 'mobile_number', 'whatsapp_number', 'email',
            'address1', 'address2', 'pan_number', 'aadhaar_number', 'gst_number',
        ];

        inputNames.forEach(function(id, index) {
            $('input[name="' + id + '"]').click(function(event) {
                event.stopPropagation();
            });
            $('input[name="' + id + '"]').on('keyup input', debounce(function() {
                table.columns(index + 1).search($('input[name="' + id + '"]').val()).draw();
                handleInputChange();

                if ($('input[name="' + id + '"]').val() != '') {
                    $(".search-value").fadeIn();
                } else {
                    $(".search-value").fadeOut();
                }
            }, 500));
        });

        if (parsedData != null) {
            if (currentPage == "/admin/import") {
                inputNames.forEach(function(id, index) {
                    if (parsedData && parsedData.hasOwnProperty(id)) {
                        $('input[name="' + id + '"]').val(parsedData[id]);
                        table.columns(index + 1).search(parsedData[id]);
                        handleInputChange();
                        if (parsedData[id] != '') {
                            $(".search-value").fadeIn();
                        }
                    }
                });
            }
            setTimeout(function() {
                $('#datatable').DataTable().draw();
            }, 300);
        }

        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        function clearSearch() {
            for (let index = 0; index <= 27; index++) {
                table.column(index).visible(true);
            }
            $('.custom-select option:first').prop('selected', true);
            $('.toggle-vis').prop('checked', true);
            for (var i = 0; i < inputNames.length; i++) {
                $('[name="' + inputNames[i] + '"]').val('');
            }
            localStorage.removeItem(currentPage);
            $(".search-value").fadeOut();
            table.columns().search('').draw();
        }

        function handleInputChange() {
            const pageData = {};
            inputNames.forEach(function(id) {
                const inputValue = $('input[name="' + id + '"]').val();
                pageData[id] = inputValue;
            });
            const jsonPageData = JSON.stringify(pageData);
            localStorage.setItem(currentPage, jsonPageData);
        }

        function importclientDelete(id) {
            swal.fire({
                title: "Are you sure want to delete this?",
                text: "You won't be able to revert this!",
                showCancelButton: true,
                confirmButtonColor: "#526BDF",
                cancelButtonColor: "#EC6767",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel it!",
            }).then((result) => {
                if (result.isConfirmed) {
                    remove(id);
                }
            });
        }

        function remove(id) {
            $.ajax({
                type: 'GET',
                url: deleteimportClient + "?client_id=" + id,
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        toastr["success"](resultData['msg']);
                        $('#datatable').DataTable().ajax.reload(null, false);
                    }
                }
            });
        }


// =========================================================================================================


function importclientUpdate(id) {
    if (is_expired == 1) {
        $("#modalIsExpired").modal('show');
        return;
    }

    $('#M_client_id').val(id); // Set temporary client ID
    $.ajax({
        url: ajaxSearchClient,
        type: 'GET',
        data: { client_id: id },
        beforeSend: function() {
            $("#holderList").html(`
                <div class="text-center p-5">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-3">Loading clients...</p>
                </div>
            `);
        },
        success: function(data) {
            console.log('🔍 API RESPONSE:', data);
            
            // Check if client exists and is deleted
            if (data && (data.is_deleted == 1 || data.delete_status == 1)) {
                // Show restore option for deleted client
                let html = `
                    <div class="row fw-bold border-bottom pb-2 mb-2">
                        <div class="col-md-4">Client Name</div>
                        <div class="col-md-3">Mobile Number</div>
                        <div class="col-md-3">Group Name</div>
                    </div>
                `;
                
                let mobile = data.mobile || 'N/A';
                let deletedId = data.record_id || id;
                
                // Check if import_id exists in the response
                let importId = data.import_id || '';
                
                html += `
                    <div class="row mb-2 align-items-center border-bottom pb-2">
                        <div class="col-md-4">
                            <input type="text" class="form-control" value="${data.name || 'N/A'}" readonly>
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" value="${mobile}" readonly>
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" value="${data.group || '—'}" readonly>
                        </div>
                    </div>
                `;

                // Add restore checkbox
                html += `
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="alert alert-warning border-0">
                                <i class="mdi mdi-alert-circle-outline text-warning me-2"></i>
                                <strong>Client is in Trash!</strong> Please confirm to restore.
                            </div>
                            <div class="form-check ps-0">
                                <input type="checkbox" class="form-check-input" id="restoreCheckbox" style="margin-left: 3px;">&nbsp;
                                <label class="form-check-label fw-semibold" for="restoreCheckbox">
                                    I confirm to restore this client
                                </label>
                            </div>
                        </div>
                    </div>
                `;

                $("#holderList").html(html);

                const $continueBtn = $("#btnContinue");
                const $newAddBtn = $("#btnSkip");
                $newAddBtn.show();
                
                $continueBtn.prop("disabled", true).html("Confirm Restore");

                // Checkbox Logic
                $(document).off("change", "#restoreCheckbox");
                $(document).on("change", "#restoreCheckbox", function() {
                    $continueBtn.prop("disabled", !$(this).is(":checked")).html("Continue");
                });

                // Continue Button Logic
                $continueBtn.off("click");
                $continueBtn.on("click", function() {
                    console.log('🚀 CONTINUE CLICKED!');
                    
                    if (!$("#restoreCheckbox").is(":checked")) {
                        toastr.warning("⚠️ Please confirm to restore the client!");
                        return;
                    }

                    const $btn = $(this);
                    $btn.prop("disabled", true).html('<span class="spinner-border spinner-border-sm me-2"></span>Processing...');

                    // RESTORE API CALL - Using POST method with all data in payload
                    console.log('🔄 RESTORING:', deletedId);
                    
                    // Prepare payload data
                    const payload = {
                        client_id: deletedId,
                        import_id: importId,
                        row_id: id,
                        _token: csrfToken // Add CSRF token for security
                    };
                    
                    console.log('🔄 RESTORE PAYLOAD:', payload);
                    
                    $.ajax({
                        url: '/admin/restoreClientwithimportmodules',
                        type: "POST",
                        data: payload,
                        success: function(res) {
                            console.log('✅ RESTORE SUCCESS:', res);
                            toastr.success(" " + res.msg);
                            setTimeout(() => {
                                // Import update URL
                                // window.location.href = `/admin/import-update?form_type=0&client_id=${id}`;
                                window.location.href = `/admin/manage-clients`;
                            }, 1500);
                        },
                        error: function(xhr) {
                            console.error('❌ RESTORE ERROR:', xhr.responseText);
                            toastr.error("❌ Restore failed!");
                            $btn.prop("disabled", false).html("Confirm Restore");
                        }
                    });
                });

                // Show the Client List modal (yesClient)
                $("#yesClient").modal('show');
                console.log('✅ MODAL SHOWN');
            } else if (data && (data.is_deleted == 0 || data.delete_status == 0)) {
                // For active clients, redirect directly
                window.location.href = `/admin/import-update?form_type=0&client_id=${id}`;
            } else {
                // If no client found, show the Add Client modal
                $("#modalImportClientUpdate").modal("show");
                $("#client_id").val(id);
            }
        },
        error: function(xhr) {
            console.error('❌ AJAX ERROR:', xhr.responseText);
            toastr.error("Error loading clients!");
            $("#holderList").html(`
                <div class="text-center p-5 text-danger">
                    <i class="bx bx-error-alt font-size-24"></i>
                    <p class="mt-3">Error loading clients. Please try again.</p>
                </div>
            `);
            
            // Show the Add Client modal on error
            $("#modalImportClientUpdate").modal("show");
            $("#client_id").val(id);
        }
    });
}


// =========================================================================================================


        // Skip button functionality
        $(document).on("click", "#btnSkip", function() {
            // Close current modal
            $("#yesClient").modal("hide");

            // When it is fully hidden, open the next modal
            $("#yesClient").on("hidden.bs.modal", function() {
                $("#modalImportClientUpdate").modal("show");
                $("#client_id").val($("#M_client_id").val());
                // remove the event so it won't trigger multiple times
                $(this).off("hidden.bs.modal");
            });
        });

        // Continue button functionality
        $(document).on("click", "#btnContinue", function(e) {
            e.preventDefault();

            // Get the checked checkbox value
            let selectedValue = $(".holder-checkbox:checked").val();
            let client_id = $("#M_client_id").val();

            if (!selectedValue) {
                toastr.error("Please select a client");
                return;
            }

            // ✅ CORRECTED URL
            let url = "/admin/import-update?form_type=0&client_id=" + client_id;
            window.location.href = url;
        });

        $(document).ready(function() {
            $("#btnRadioSubmit").click(function() {
                let formType = $("input[name='selection']:checked").val();
                let client_id = $("#client_id").val();
                if (!formType) {
                    $("#radio-error").removeClass("d-none");
                } else {
                    $("#radio-error").addClass("d-none");
                    window.location.href = "/admin/import-update?form_type=" + formType + "&client_id=" +
                        client_id;
                }
                $("#modalImportClientUpdate").modal('hide');
            });
            $("input[name='selection']").change(function() {
                $("#radio-error").addClass("d-none");
            });
        });

        // ✅ Add this in $(document).ready()
        $('#yesClient').on('hidden.bs.modal', function () {
            $(this).find('button:focus, input:focus').blur();
            $('#restoreCheckbox').prop('checked', false);
            $('#btnContinue').prop('disabled', false).html('Continue');
        });
    </script>
@endsection