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

    <style>
        .dropdown-checklist {
            padding: 0px 12px;
            line-height: 0px;
        }

        .dropdown-checklist input {
            margin-left: 3px;
        }


        .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;
        }

        .custom-dropdown-toggle-top.show {
            top: 70% !important;
        }

        /* Style for invalid Select2 */
        .select2-validation--invalid .select2-selection {
            border-color: #dc3545 !important;
        }

        .numbered-list {
            padding-left: 25px;
            margin-top: 8px;
        }

        .numbered-list li {
            padding: 2px 0;
            list-style-type: decimal;
        }

        /* Make sure validation feedback is visible */
        .invalid-feedback {
            display: none;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.875em;
            color: #dc3545;
        }

        .is-invalid {
            border-color: #dc3545;
        }

        .is-invalid~.select2-container .select2-selection {
            border-color: #dc3545 !important;
        }

        .custom-modal {
            max-width: 700px;  /* Adjust as needed */
        }

        .custom-modal-yes {
            max-width: 900px;
        }

        
    </style>

    <div class="page-content">
        <div class="container-fluid">
            @if (session()->has('message'))
                <p class="alert alert-danger">{{ session('message') }}</p>
            @endif

            <!-- start page title -->
            <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="Back Button"
                        id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp;
                    {{ $data['title'] }}
                </h4>

                <div class="row justify-content-end">
                    <a href="javascript:void(0);" onclick="return learningVideo(19)"
                        class="btn-youtube-pulse btn-youtube-pulse-border">
                        <i class="mdi mdi-youtube"></i>
                    </a>
                </div>

                @php
                    $privileges = getPrivileges();
                @endphp


            </div>
            <!-- end page title -->


            <!-- Upload Result Modal -->
            <div class="modal fade" id="uploadResultModal" tabindex="-1" aria-labelledby="uploadResultLabel"
                aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
                <div class="modal-dialog modal-md">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="uploadResultLabel">Upload Summary</h5>
                            <button type="button" class="btn-close" id="closeUploadModal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <!-- Filled dynamically by AJAX -->
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="closeModalBtn" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>



            <!-- Modal -->
            <div class="modal fade" id="yesClient" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered custom-modal-yes" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalLabel">Policy Holder List</h5>
                            <button type="button" class="btn-close" id="closeYesClientModal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" style="max-height:400px; overflow-y:auto;">
                            <form id="holderForm">
                                <div id="holderList">

                                </div>
                            </form>
                        </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 submit-btn">Continue</button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="modalImportClientUpdate" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" role="dialog" aria-labelledby="modalImportClientUpdateLabel" 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="modalImportClientUpdateLabel">Policy Holder Name</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form id="formPolicyHolderName" method="POST" class="needs-validation" novalidate>
                            <input type="hidden" name="M_client_id" id="M_client_id" value="">
                            <input type="hidden" name="selection_value" id="selection_value" value="">
                            @csrf
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3 d-flex justify-content-center align-items-cente">
                                            <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>
                                        <div id="radio-error" class="validation-error">Please select an option</div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="col-md-5" id="select_family_group" style="display: block;">
                                    <div class="mb-4">
                                        <label for="select_head" class="form-label">Select Head<span
                                                class="text-danger">*</span></label>
                                        <select class="form-control select2-ajax" id="select_head"
                                            name="select_head"></select>
                                        <div class="invalid-feedback">Please select select head</div>
                                    </div>
                                </div>
                                <button type="button" id="btnRadioSubmit" class="btn btn-primary px-3">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="row" id="card">
                <div class="card">
                    <div class="card-body">
                        <div class="row justify-content-between">
                            <form id="pdfGeneralForm" enctype="multipart/form-data" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12"> <!-- Full-width container -->
                                        <div class="row"> <!-- Align items in the same row -->
                                            <!-- Select Division (Left Side) -->
                                            <div class="col-md-3 mb-3"> <!-- Takes 3 columns -->
                                                <div class="mb-5">
                                                    <label for="general_division_id" class="form-label">Select Division<span
                                                            class="text-danger">*</span></label>
                                                    <select class="form-control select2-validation" id="general_division_id"
                                                        name="general_division_id"></select>
                                                    <div id="divisionError" class="invalid-feedback" style="display: none;">
                                                        Please select division</div>
                                                </div>
                                            </div>

                                            <div class="col-md-3 mb-3" id="segment_wrapper" style="display: none;">
                                                <div class="mb-5">
                                                    <label for="general_segment_id" class="form-label">Select Segment <span
                                                            class="text-danger">*</span></label>
                                                    <select class="form-control select2-validation" id="general_segment_id"
                                                        name="general_segment_id"></select>
                                                    <div id="segmentError" class="invalid-feedback" style="display: none;">
                                                        Please select segment</div>
                                                </div>
                                            </div>

                                            <!-- Total Use Card (Right Side) -->
                                            <div class="col-md-2">
                                                <div class="card font-size-14 p-2 d-flex justify-content-center align-items-center text-center"
                                                    style="background-color: #008000; height: 50%;">
                                                    <div>
                                                        <h6 class="text-white mb-1">Total Allow</h6>
                                                        <p class="text-white mb-0"><span id="total_unit"></span></p>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-2">
                                                <div class="card font-size-14 p-2 d-flex justify-content-center align-items-center text-center"
                                                    style="background-color: #b90918; height: 50%;">
                                                    <div>
                                                        <h6 class="text-white mb-1">Total Use</h6>
                                                        <p class="text-white mb-0"><span id="total_used_unit"></span></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card font-size-14 p-2 d-flex justify-content-center col-md-7 mt-n5 mb-3 ml-10"
                                        style="background-color: #0c63e4; height: 20%; margin-left: 10px;">
                                            <p class="text-white mb-0">Certain general insurance policy PDFs may not be imported automatically. In such cases, kindly enter the policy details manually.</p>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-10">
                                        <label for="pdf_file">
                                            Upload PDF <span style="font-size: 12px; color: #808080bd;">(.pdf only, Max 3
                                                files)</span>
                                        </label>
                                        <input type="file" class="form-control mt-1" name="pdf_file[]" id="pdf_file"
                                            accept="application/pdf" multiple>

                                        <div id="pdfFileError" class="invalid-feedback" style="display: none;">Please select
                                            a valid PDF file</div>
                                    </div>
                                    <div class="col-md-2 mt-4">
                                        <button type="submit" class="btn btn-primary px-3" id="uploadBtn">Upload</button>
                                    </div>
                                </div>
                            </form>
                        </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>Transaction Date<br><input type="text" class="form-control"
                                                name="transaction_date" placeholder="Search" maxlength="10"
                                                autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Policy Holder Name<br><input type="text" class="form-control"
                                                name="client_id" placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Date Of Birth<br><input type="text" class="form-control" name="dob"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Insurance Company<br><input type="text" class="form-control"
                                                name="insurance_company" autocomplete="off" placeholder="Search"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Risk From<br><input type="text" class="form-control" name="risk_from_date"
                                                placeholder="Search" maxlength="10" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Risk To<br><input type="text" class="form-control" name="risk_to_date"
                                                placeholder="Search" maxlength="10" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>TP Due Date<br><input type="text" class="form-control" name="tp_due_date"
                                                placeholder="Search" maxlength="10" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Mode<br><input type="text" class="form-control" name="mode"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Division<br><input type="text" class="form-control" name="division"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Bank<br><input type="text" class="form-control" name="bank"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Segment<br><input type="text" class="form-control" name="segment"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Vehicle No.<br><input type="text" class="form-control" name="vehicle_no"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px" disabled></th>
                                        <th>Vehicle Name<br><input type="text" class="form-control"
                                                name="vehicle_name" placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Sum Assured<br><input type="text" class="form-control" name="sum_assured"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Basic Premium<br><input type="text" class="form-control"
                                                name="basic_premium" placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>TPA Premium<br><input type="text" class="form-control" name="tpa_premium"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Tax Amt.<br><input type="text" class="form-control" name="tax_amount"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Total Amt.<br><input type="text" class="form-control" name="total_amount"
                                                placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Current Policy No.<br><input type="text" class="form-control"
                                                name="current_policy_number" autocomplete="off" placeholder="Search"
                                                style="width: 100px; height: 25px"></th>
                                        <th>Previous Policy No.<br><input type="text" class="form-control"
                                                name="previous_policy_number" placeholder="Search" autocomplete="off"
                                                style="width: 100px; height: 25px"></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            @csrf
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('../reachassuree_agent/master/comman/expiry-popup')
    @include('../reachassuree_agent/insurance/general/policy_num_save_modal')
    @include('../reachassuree_agent/master/comman/multiple-document-download-popup')

    @include('../reachassuree_agent/alteration_endorsment/general_history')

@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 type="text/javascript">
        var ajaxSearchSelectHead = "{{ route('search.head') }}"
        var downloadGeneralPdf = "{{ route('download.general.insurance.pdf') }}";
        var ajaxImportGeneralPolicies = "{{ route('import.general.policies.ajax') }}";
        var restoreGeneralPolicy = "{{ route('restore.general.policy') }}";
        // var deleteGeneralPolicy = "{{ route('delete.general.policy') }}";
        var ImportdeleteGeneralPolicy = "{{ route('import.delete.general.policy') }}";
        var ajaxSearchDivision = "{{ route('search.general.division') }}";
        var ajaxSearchSegment = "{{ route('search.segment') }}";
        var ajaxSearchPolicyHolderName = "{{ route('search.policy.holder.fullname') }}";
        var is_expired = "{{ $data['is_expired'] }}";
        var isDeleted = "{{ $data['is_deleted'] }}";
        var authType = "{{ Auth::user()->type }}";
        var csrfToken = $("[name=_token]").val();
        var path = "";
        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, 26, 27, 28];

        $(document).ready(function() {
            // Initialize selects
            generalDivision();
            generalSegment();

            // Add a class to Select2 containers when validation fails
            $(document).on('select2:open', () => {
                document.querySelector('.select2-container.select2-validation--invalid')?.classList.remove(
                    'select2-validation--invalid');
            });

            $('#general_division_id').on('select2:select', function(e) {
                const selectedText = e.params.data.text;

                // Reset validation
                $('#general_division_id').removeClass('is-invalid');
                $('#divisionError').hide();

                if (selectedText === 'Other General Insurance') {
                    $('#segment_wrapper').slideDown();
                } else {
                    $('#segment_wrapper').slideUp();
                    $('#general_segment_id').val(null).trigger('change');
                    $('#general_segment_id').removeClass('is-invalid');
                    $('#segmentError').hide();
                }
            });

            $('#pdfGeneralForm').on('submit', function(e) {
                e.preventDefault();

                // Reset all validation states
                $('.is-invalid').removeClass('is-invalid');
                $('.select2-validation--invalid').removeClass('select2-validation--invalid');
                $('.invalid-feedback').hide();

                // Validate Division
                const divisionId = $('#general_division_id').val();
                if (!divisionId) {
                    $('#general_division_id').addClass('is-invalid');
                    $('#general_division_id').next('.select2-container').addClass(
                        'select2-validation--invalid');
                    $('#divisionError').show();
                    return;
                }

                // Validate Segment if needed
                const selectedDivisionText = $('#general_division_id').select2('data')[0].text;
                if (selectedDivisionText === 'Other General Insurance') {
                    const segmentId = $('#general_segment_id').val();
                    if (!segmentId) {
                        $('#general_segment_id').addClass('is-invalid');
                        $('#general_segment_id').next('.select2-container').addClass(
                            'select2-validation--invalid');
                        $('#segmentError').show();
                        return;
                    }
                }

                // Validate PDF files
                const fileInput = $('#pdf_file')[0];
                const allowedExtension = /\.pdf$/i;
                let filesValid = true;

                if (!fileInput.files || fileInput.files.length === 0) {
                    filesValid = false;
                } else {
                    for (let i = 0; i < fileInput.files.length; i++) {
                        if (!allowedExtension.test(fileInput.files[i].name)) {
                            filesValid = false;
                            break;
                        }
                    }
                }

                if (!filesValid) {
                    $('#pdf_file').addClass('is-invalid');
                    $('#pdfFileError').show();
                    return;
                }


                // let form = $('#pdfGeneralForm')[0];
                // let formData = new FormData(form);

                // Form is valid, proceed with submission
                let formData = new FormData(this);
                formData.append('general_division_id', divisionId);
                formData.append('general_segment_id', $('#general_segment_id').val() || '');

                $.ajax({
                    url: "{{ route('import.general.policy.pdf') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    cache: false,
                    beforeSend: function() {
                        $('#uploadBtn').attr("disabled", true).text("Uploading...");
                        showLoader();
                    },
                    success: function(response) {
                        hideLoader();
                        $('#uploadBtn').attr("disabled", false).text("Upload");

                        const successCount = response.summary.success_count || 0;
                        const successFiles = response.summary.success_files || [];
                        const skippedCount = response.summary.skipped_count || 0;
                        const skippedFiles = response.summary.skipped_files || [];
                        const failedCount = response.summary.failed_count || 0;
                        const failedFiles = response.summary.failed_files || [];

                        let html = '<h5>Upload Result</h5>';

                        if (successCount > 0) {
                            html +=
                                `<div><strong> Success: ${successCount} policy(ies)</strong>`;
                            if (successFiles.length > 0) {
                                html += '<ol class="numbered-list">';
                                successFiles.forEach((name, index) => html +=
                                    `<li>${name}</li>`);
                                html += '</ol>';
                            }
                            html += '</div>';
                        }

                        // Skipped section (duplicates)
                        if (skippedCount > 0) {
                            html += `<div class="text-warning mb-3"><strong>⚠️ Skipped: ${skippedCount} policy(ies) (Duplicate records)</strong>`;
                            if (skippedFiles.length > 0) {
                                html += '<ol class="numbered-list">';
                                skippedFiles.forEach((file) => {
                                    // Handle both string file names and object with reason
                                    if (typeof file === 'object' && file.reason) {
                                        html += `<li>${file.file_name} <small class="text-muted">(${file.reason})</small></li>`;
                                    } else {
                                        html += `<li>${file} <small class="text-muted">(Duplicate record)</small></li>`;
                                    }
                                });
                                html += '</ol>';
                            }
                            html += '</div>';
                        }

                        if (failedCount > 0) {
                            html +=
                                `<div class="mt-3"><strong>❌ Failed: ${failedCount} policy(ies)</strong>`;
                            if (failedFiles.length > 0) {
                                html += '<ol class="numbered-list">';
                                failedFiles.forEach((name, index) => html +=
                                    `<li>${name}</li>`);
                                html += '</ol>';
                            }

                            // Add footer message here
                            html += `<div class="alert alert-danger mt-3 mb-0 p-3">
                                        Import failed: This policy PDF cannot be imported. 
                                        Please enter the policy details manually.
                                    </div>`;
                            html += '</div>';
                            // html += '</div>';
                        }

                        $('#uploadResultModal .modal-body').html(html);
                        $('#uploadResultModal').modal('show');
                    },
                    error: function(xhr) {
                        hideLoader();
                        $('#uploadBtn').attr("disabled", false).text("Upload");

                        // FILE INPUT CLEAR KARO - SABSE IMPORTANT!
                        const oldInput = document.getElementById('pdf_file');
                        const newInput = oldInput.cloneNode(true);
                        newInput.value = '';
                        oldInput.parentNode.replaceChild(newInput, oldInput);
                        document.getElementById('pdfGeneralForm').reset();

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            toastr.error(xhr.responseJSON.message);
                        } else {
                            toastr.error("Something went wrong. Please try again.");
                        }
                    },


                });
            });

            // Make sure to trigger DataTables reload when segment changes
            $('#general_segment_id').on('change', function() {
                $('#datatable').DataTable().ajax.reload();
            });

            $('#general_division_id').on('change', function() {
                $('#datatable').DataTable().ajax.reload();
            });

            // $('#closeModalBtn').on('click', function() {
            //     location.reload();
            // });

            // $('#uploadResultModal').on('hidden.bs.modal', function() {
            //     location.reload();
            // });

            // Show modal and remember it in localStorage
            // ❌ remove the old global reload-on-hidden
            $('#uploadResultModal').off('hidden.bs.modal');

            // Persist open state when you show the modal
            function showResultModal() {
                const $m = $('#uploadResultModal');
            $m.modal({ backdrop: 'static', keyboard: false }).modal('show');
                localStorage.setItem('uploadModalOpen', 'true');
            }

            // Re-open after refresh if it was open
            $(function () {
                if (localStorage.getItem('uploadModalOpen') === 'true') {
                $('#uploadResultModal').modal({ backdrop: 'static', keyboard: false }).modal('show');
                }
            });

            //  Only Close/X can close it; then clear flag and reload
            $(document).on('click', '#uploadResultModal .btn-close, #closeModalBtn', function () {
                localStorage.removeItem('uploadModalOpen');
                $('#uploadResultModal')
                .one('hidden.bs.modal', function () { window.location.reload(); })
                    .modal('hide');
            });

            $("#modalIsExpired").hide();

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

            $(".export-btn").on("click", function(event) {
                event.preventDefault();

                var format = $(this).data("format"); // CSV, Excel, PDF, Print
                var type = $(this).data("type"); // "view" or "all"

                if (type === "all") {
                    $.ajax({
                        url: ajaxImportGeneralPolicies,
                        type: "POST",
                        data: {
                            _token: csrfToken,
                            export: true,
                            is_deleted: isDeleted,
                            "date_type": function() {
                                return $("#date_type").val();
                            },
                            "start_date": function() {
                                return $("#start_date").val();
                            },
                            "end_date": function() {
                                return $("#end_date").val();
                            },
                        },
                        beforeSend: function() {
                            showLoader();
                        },
                        success: function(response) {
                            hideLoader();

                            var table = $("#datatable").DataTable();
                            table.clear().rows.add(response.data);
                            table.button(".buttons-" + format).trigger();

                            $('#datatable').DataTable().draw();
                        }
                    });
                } else {
                    var table = $("#datatable").DataTable();
                    table.button(".buttons-" + format).trigger();
                }
            });

            $(".custom-export-btn").on("click", function(event) {
                event.preventDefault();

                var type = $(this).data("type"); // "view" or "all"    

                $('#datatable').DataTable().draw();

                downloadPDF(type);
            });
        });

        var options = {
            beforeSubmit: showRequest,
            success: showResponse
        };

        $('#formAddGeneralPolicy').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });

        function showRequest(formData, jqForm, options) {
            showLoader();

            var queryString = $.param(formData);
            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {
            hideLoader();

            if (responseText['status'] == 1) {
                toastr["success"](responseText['msg']);
                $("#formAddGeneralPolicy").removeClass('was-validated');
                $("#modalGenPendingPolicy").modal('hide');
                $('#datatable').DataTable().ajax.reload(null, false);

            } else if (responseText['status'] == 0) {
                if (typeof responseText['data'] !== "undefined") {

                    var size = Object.keys(responseText['data']).length;
                    if (size > 0) {
                        for (var [key, value] of Object.entries(responseText['data'])) {
                            toastr["error"](value);
                        }
                    }
                } else {
                    toastr["error"](responseText['msg']);
                }

                if (authType == 1 && responseText['flag'] == "Document") {
                    $('#modelPlanName').text('');
                    $('#modelPlanName').text("Document");
                    $('.forPlanUpgrade').hide();
                    $('.forPlanPurchase').show();
                    $('#upgradePurchaseModal').modal('show');
                }

                if (authType == 1 && responseText['flag'] == "Policy") {
                    $('#modelPlanName').text('');
                    $('#modelPlanName').text("Policy entery");
                    $('.forPlanUpgrade').show();
                    $('.forPlanPurchase').hide();
                    $('#upgradePurchaseModal').modal('show');
                }
            }
        }

        var table = $('#datatable').DataTable({
            buttons: [{
                    extend: 'csvHtml5',
                    exportOptions: {
                        columns: ':visible',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    title: 'General Ins. Manage Report',
                    exportOptions: {
                        columns: visibleColumns
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: ':visible'
                    },
                    title: 'General Ins. Manage Report',
                    exportOptions: {
                        columns: visibleColumns
                    }
                },
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A1',
                    exportOptions: {
                        columns: ':visible'
                    },
                    title: 'General Ins. Manage Report',
                    exportOptions: {
                        columns: visibleColumns
                    }
                },
                {
                    extend: 'print',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: ':visible'
                    },
                    title: 'General Ins. Manage Report',
                    exportOptions: {
                        columns: visibleColumns
                    }
                },
            ],
            "aoColumnDefs": [{
                "bSortable": true,
                "aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
            }],
            "order": [
                [2, 'desc'],
            ],
            "ordering": true,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() {
                return $(window).height() - 350;
            },
            "lengthMenu": [
                [10, 50, 100, 150],
                [10, 50, 100, 150]
            ],
            "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": ajaxImportGeneralPolicies,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "is_deleted": isDeleted,
                    "date_type": function() {
                        return $("#date_type").val();
                    },
                    "start_date": function() {
                        return $("#start_date").val();
                    },
                    "end_date": function() {
                        return $("#end_date").val();
                    },
                    "general_division_id": function() {
                        return $('#general_division_id').val();
                    },
                    "general_segment_id": function() {
                        return $('#general_segment_id').val();
                    },
                }
            },
            "drawCallback": function() {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl)
                });
            },
            "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": "status","bSortable": false},
                {
                    "mData": "transaction_date"
                },
                {
                    "mData": "client_id"
                },
                {
                    "mData": "dob"
                },
                {
                    "mData": "insurance_company"
                },
                {
                    "mData": "risk_from_date"
                },
                {
                    "mData": "risk_to_date"
                },
                {
                    "mData": "tp_due_date"
                },
                {
                    "mData": "mode"
                },
                {
                    "mData": "division"
                },
                {
                    "mData": "bank"
                },
                {
                    "mData": "segment"
                },
                {
                    "mData": "vehicle_no"
                },
                {
                    "mData": "vehicle_name"
                },
                {
                    "mData": "sum_assured"
                },
                {
                    "mData": "basic_amount"
                },
                {
                    "mData": "tpa_premium"
                },
                {
                    "mData": "tax_amount"
                },
                {
                    "mData": "total_amount"
                },
                {
                    "mData": "current_policy_number"
                },
                {
                    "mData": "previous_policy_number"
                },

            ]
        });

        table.on('xhr', function() {
            var responseData = table.ajax.json();

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

            $("#total_sum_assured").html(responseData['totalAmounts'].total_sum_assured);
            $("#total_basic_amount").html(responseData['totalAmounts'].total_basic_amount);
            $("#total_tax_amount").html(responseData['totalAmounts'].total_tax_amount);
            $("#total_total_amount").html(responseData['totalAmounts'].total_total_amount);
            $("#total_net_commisionable_amount").html(responseData['totalAmounts'].total_net_commisionable_amount);
            $("#total_tpa_premium").html(responseData['totalAmounts'].total_tpa_premium);
            $("#total_byus_payout_amount").html(responseData['totalAmounts'].total_byus_payout_amount);
            $("#total_party_payout_amount").html(responseData['totalAmounts'].total_party_payout_amount);

            $("#total_unit").html(responseData.total_unit);
            $("#total_used_unit").html(responseData.total_used_unit);


        });

        table.on('draw', function() {
            console.log('🔍 Table DRAWN - Binding click events...');
            
            // Remove old events
            $('#datatable tbody').off('click', 'td:nth-child(3)');
            
            //  Policy Holder Name column (3rd column) click
            $('#datatable tbody').on('click', 'td:nth-child(3)', function() {
                var data = table.row($(this).closest('tr')).data();
                var clientId = data.client_id; // client_id from mData
                console.log('🔍 CLICKED:', clientId);
                
                if (clientId) {
                    policyHolderName(clientId);
                } else {
                    console.error('❌ No clientId found!');
                }
            });
        });
        $("#date_type").select2();
        $(".search-value").fadeOut();

        setTimeout(function() {
            $("#date_type, #start_date, #end_date").on('change keyup', function() {
                var dateTypeVal = $("#date_type").val();
                var fromDateVal = $("#start_date").val();
                var endDateVal = $("#end_date").val();

                if (endDateVal !== '' || dateTypeVal !== 'Transaction Date') {
                    $(".search-value").fadeIn();
                } else {
                    $(".search-value").fadeOut();
                }

                $('#datatable').DataTable().draw();
            });
        }, 300);

        // ["csv", "excel", "pdf", "print"].forEach(function(format) {
        //   $("#" + format).on('click', function() {
        //     var table = $('#datatable').DataTable();
        //     table.button('.buttons-' + format).trigger();
        //   });
        // });  

        var inputMappings = [
            'transaction_date', 'client_id', 'dob', 'insurance_company','risk_from_date', 'risk_to_date', 'tp_due_date', 'mode', 'division', 'bank', 'segment', 'vehicle_no',
            'vehicle_name', 'sum_assured', 'basic_premium', 'tpa_premium', 'tax_amount', 'total_amount', 'current_policy_number',
            'previous_policy_number'
        ];

        inputMappings.forEach(function(id, index) {
            $('input[name="' + id + '"]').click(function(event) {
                event.stopPropagation();
            });

        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }
            $('input[name="' + id + '"]').on('keyup input', debounce(function() {
                // table.columns(index + 2).search(this.value).draw();
                table.columns(index + 2).search($('input[name="' + id + '"]').val()).draw();
                //   handleInputChange();

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

        function generalPolicyDelete(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: ImportdeleteGeneralPolicy + "?id=" + id,
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        toastr["success"](resultData['msg']);
                        $('#datatable').DataTable().ajax.reload(null, false);
                    }
                }
            });
        }

        function generalDivision() {
            $("#general_division_id").select2({
                ajax: {
                    url: ajaxSearchDivision,
                    dataType: 'json',
                    delay: 0,
                    data: function(params) {
                        return {
                            search_value: params.term,
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },
                placeholder: 'Search for division',
            });
        }

        function generalSegment() {
            $("#general_segment_id").select2({
                ajax: {
                    url: ajaxSearchSegment,
                    dataType: 'json',
                    delay: 0,
                    data: function(params) {
                        return {
                            "division_id": function() {
                                return $("#general_division_id").val()
                            },
                            search_value: params.term,
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },
                placeholder: 'Search for segment',
            });
        }

        function policyHolderName(clientId) 
        {
            $('#M_client_id').val(clientId);

                $.ajax({
                    url: ajaxSearchPolicyHolderName,
                    type: 'GET',
                    data: { client_id: clientId },
                    beforeSend: function() {
                        console.log('🌐 AJAX Request Started...');
                    },
                    success: function(data) {
                        console.log(' API RESPONSE:', data); //  CRITICAL DEBUG
                        
                        if (data.total_count === 0) {
                            console.log('ℹ️ No clients found, showing new client modal');
                            $("#modalImportClientUpdate").modal("show");
                            return;
                        }

                        let html = `
                            <div class="row fw-bold border-bottom pb-2 mb-2">
                                <div class="col-md-4">Holder Name</div>
                                <div class="col-md-3">Mobile Number</div>
                                <div class="col-md-3">Group Name</div>
                            </div>
                        `;

                        let hasDeleted = false;
                        let deletedId = null;
                        let activeId = null;

                        data.results.forEach(function(item, index) {
                            console.log(`🔍 Client ${index}:`, item.id, 'delete_status:', item.delete_status);
                            
                            let mobile = item.mobile_number || 'N/A';
                            
                            if (item.delete_status == 1) {
                                hasDeleted = true;
                                deletedId = item.id;
                                console.log(' DELETED CLIENT FOUND:', deletedId);
                            } else {
                                activeId = item.id;
                                console.log(' ACTIVE CLIENT FOUND:', activeId);
                            }

                            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="${item.text || '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="${item.group_name || '—'}" readonly>
                                    </div>
                                </div>
                            `;
                        });

                        console.log('🎯 FINAL:', {hasDeleted, deletedId, activeId});

                        //  Restore checkbox ONLY for deleted
                        if (hasDeleted) {
                            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 = $(".submit-btn");
                        const $newAddBtn = $("#btnSkip");
                        $newAddBtn.show();
                        
                        if (hasDeleted) {
                            $continueBtn.prop("disabled", true).html("Confirm Restore");
                        } else {
                            $continueBtn.prop("disabled", false).html("Continue");
                        }

                        //  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 (hasDeleted && !$("#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...');

                            if (hasDeleted) {
                                console.log('🔄 RESTORING:', deletedId);
                                $.ajax({
                                    url: `/admin/restoreClient/${deletedId}`,
                                    type: "GET",
                                    success: function(res) {
                                        console.log(' RESTORE SUCCESS:', res);
                                        toastr.success(" " + res.msg);
                                        setTimeout(() => {
                                            window.location.href = `/admin/edit-import-general-policies-save?id=${deletedId}&client_id=${clientId}`;
                                        }, 1500);
                                    },
                                    error: function(xhr) {
                                        console.error('❌ RESTORE ERROR:', xhr.responseText);
                                        toastr.error("❌ Restore failed!");
                                        $btn.prop("disabled", false).html("Confirm Restore");
                                    }
                                });
                            } else {
                                console.log('🔄 DIRECT REDIRECT:', activeId);
                                window.location.href = `/admin/edit-import-general-policies-save?id=${activeId}&client_id=${clientId}`;
                            }
                        });

                        $("#yesClient").modal('show');
                        console.log(' MODAL SHOWN');
                    },
                    error: function(xhr) {
                        console.error('❌ AJAX ERROR:', xhr.responseText);
                        toastr.error("Error loading policy holders!");
                    }
                });
        }

        function restoreAndRedirect(deletedHolderId, originalClientId) {
            $.ajax({
                url: `/admin/restoreClient/${deletedHolderId}`,
                type: "GET",
                success: function(res) {
                    if (res.status === 1) {
                        toastr.success("Client restored successfully!");

                        // Auto redirect after 1 second
                        setTimeout(() => {
                            const url =
                                `/admin/edit-import-general-policies-save?id=${deletedHolderId}&client_id=${originalClientId}`;
                            window.location.href = url;
                        }, 1000);

                    } else {
                        toastr.error(res.msg || "Restore failed");
                        // Fallback: show Continue button
                        $("#yesClient .submit-btn").prop("disabled", false);
                    }
                },
                error: function() {
                    toastr.error("Restore failed. Please try again.");
                }
            });
        }

        $(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");
                // remove the event so it won't trigger multiple times
                $(this).off("hidden.bs.modal");
            });     
        });


        $(document).on("click", ".submit-btn", function(e) {
            e.preventDefault();

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

            if (!selectedValue) {
                // ❌ Validation fail - show error message
                $("#holderError").removeClass("d-none");
                return;
            } else {
                //  Clear error
                $("#holderError").addClass("d-none");
            }

            //  If valid, redirect
            let url = "/admin/edit-import-general-policies-save?id=" + selectedValue + "&client_id=" + client_id;
            window.location.href = url;
        });

        $(document).ready(function() {
            // Toggle Select Head visibility based on radio selection
            $("input[name='selection']").change(function() {
                if ($(this).val() === '0') {
                    // Show select head for family members
                    $("#select_family_group").show();
                    $("#select_head").prop('required', true);
                } else {
                    // Hide for family head and firm
                    $("#select_family_group").hide();
                    $("#select_head").prop('required', false);
                }
            });


            //  Custom close for uploadResultModal
    $(document).on('click', '#closeUploadModal', function() {
        $('#uploadResultModal').modal('hide');
    });

    //  Custom close for yesClient
    $(document).on('click', '#closeYesClientModal', function() {
        $('#yesClient').modal('hide');
    });

    //  Modal hide cleanup (focus + reset)
    $('#yesClient').on('hidden.bs.modal', function () {
        $(this).find('button:focus, input:focus').blur(); // Clear focus for ARIA
        $('#restoreCheckbox').prop('checked', false);
        $('.submit-btn').prop('disabled', false).html('Continue');
    });

    $('#uploadResultModal').on('hidden.bs.modal', function () {
        $(this).find('button:focus, input:focus').blur(); // Clear focus for ARIA
    });
            // Initialize Select2 for the head selection
            $("#select_head").select2({
                ajax: {
                    url: ajaxSearchSelectHead,
                    dataType: 'json',
                    delay: 0,
                    data: function(params) {
                        return {
                            search_value: params.term,
                            page: params.page,
                            // value: $("#selection_value").val(),
                            client_id: $("#M_client_id").val()
                        };
                    },
                },
                placeholder: 'Search for family head'
            });

            // Form validation and submission
            $("#btnRadioSubmit").click(function() {
                let isValid = true;
                const formType = $("input[name='selection']:checked").val();

                // Reset validation messages
                $(".validation-error").hide();
                $("#select_head").removeClass('is-invalid');
                $("#select_head").next('.select2-container').removeClass('select2-validation--invalid');

                // Validate selection type
                if (!formType) {
                    $("#radio-error").show();
                    isValid = false;
                }

                // Validate select head if family member is selected
                if (formType === '0' && !$("#select_head").val()) {
                    $("#select_head_validation").show();
                    $("#select_head").addClass('is-invalid');
                    $("#select_head").next('.select2-container').addClass('select2-validation--invalid');
                    isValid = false;
                }

                if (isValid) {
                    let client_id;

                    // For family head and firm, use the client_id from the hidden field
                    if (formType === '1' || formType === '2') {
                        client_id = $("#M_client_id").val();

                    } else {
                        // For family member, use the selected head
                        client_id = $("#select_head").val();
                    }

                    // client_id = $("#select_head").val();

                    // Redirect to the appropriate page
                    window.location.href = "/admin/edit-import-general-policies?form_type=" + formType + "&client_id=" + client_id;
                }
            });

            // Hide validation messages when user interacts with the form
            $("input[name='selection']").change(function() {
                $("#radio-error").hide();
            });

            $("#select_head").on('change', function() {
                if ($(this).val()) {
                    $("#select_head_validation").hide();
                    $(this).removeClass('is-invalid');
                    $(this).next('.select2-container').removeClass('select2-validation--invalid');
                }
            });
        });

        var clientData = null;
        function selectClient(id) {
            if(is_expired == 1) {
                $("#modalIsExpired").modal('show');
            } else {
                $("input[name='selection'][value='']").prop('checked', true);
                // $("#select_family_group").hide();
                // $("#select_head").val(null).trigger('change');
                $("#select_head").prop('required', false);
                $(".validation-error").hide();
                $("#select_head").removeClass('is-invalid');
                $("#select_head").next('.select2-container').removeClass('select2-validation--invalid');

                // Fetch client data and populate dropdown
                fetchClientData(id);
                $("#M_client_id").val(id);
                policyHolderName(id);
            }
        }

        function fetchClientData(clientId) {
            $.ajax({
                url: "{{ route('get.client.data') }}", // You need to create this route
                type: "GET",
                data: {
                    client_id: clientId
                },
                success: function(response) {
                    if (response.status === 'success') {
                        clientData = response.data;

                        // Create the option for Select2
                        var option = new Option(clientData.name, clientData.id, true, true);

                        // Append it to the select and update Select2
                        $("#select_head").append(option).trigger('change');

                        // Manually trigger the change event to update Select2
                        $("#select_head").trigger({
                            type: 'select2:select',
                            params: {
                                data: {
                                    id: clientData.id,
                                    text: clientData.name
                                }
                            }
                        });
                    }
                },
                error: function() {
                    console.error('Failed to fetch client data');
                }
            });
        }

    </script>
@endsection