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

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        @include('../reachassuree_agent/master/comman/header')
        <!-- end page title -->

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

        <form action="{{ route('client.document.save') }}" accept-charset="utf-8" method="POST" id="formUploadClientDocument" class="needs-validation" novalidate>
            @csrf
            <input type="hidden" id="document_id" name="document_id" class="form-control">

            <div class="row">
                <div class="card p-4 pb-0">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="family_group_id" class="form-label">Select Family Group<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" id="family_group_id" name="family_group_id" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="client_id" class="form-label">Select Client<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" id="client_id" name="client_id" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12" id="documentTypeDiv">
                            <div class="mb-3">
                                <label for="document_type_id" class="form-label">Select Document Type<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" id="document_type_id" name="document_type_id" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        {{-- <div class="col-md-6"> --}}
                        <div class="col-md-6 mb-3 d-none" id="vehicleNoDiv">
                            <label for="vehicle_no" class="form-label">Vehicle no <span class="text-danger">*</span></label>

                            <div class="row g-2 align-items-top">
                                <div class="col-9">
                                    <select class="form-control select2-ajax" id="vehicle_no" name="vehicle_no" required disabled></select>
                                    <div class="invalid-feedback">This value is required.</div>
                                </div>

                                <div class="col-3">
                                    <button class="btn btn-primary w-100" onclick="return addVehicleNumber();" id="vehicleNoBtn" type="button">Add</button>
                                </div>
                            </div>
                        </div>

                        {{-- </div> --}}
                    </div>

                    <div class="row">

                        <div class="col-md-6 mb-3">
                            <label for="document_name_id" class="form-label">Select Document Name<span class="text-danger">*</span></label>
                            <select class="form-control select2-ajax" id="document_name_id" name="document_name_id" required></select>
                            <div class="invalid-feedback">This value is required.</div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <input type="hidden" id="current_document" name="current_document" class="form-control">
                                @if ($data['can_edit'] == 1)
                                    <label for="document_name" class="form-label">Upload Document <span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                    <a href="javascript:void(0)" data-document-name="{{ $data['data']['name'] }}" data-client-id="{{ $data['data']['client_id'] }}" class="download-client-document-btn text text-primary ms-2">Download</a>
                                    <input type="file" class="form-control" multiple name="document_name[]" id="document_name" accept="image/jpeg,image/png,application/pdf">
                                @else
                                    <label for="document_name" class="form-label">Upload Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span><span class="text-danger">*</span></label>
                                    <input type="file" class="form-control" multiple name="document_name[]" id="document_name" accept="image/jpeg,image/png,application/pdf" required>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="document_number" class="form-label">Document Number</label>
                                <input type="text" class="form-control" name="document_number" id="document_number" placeholder="Document number" value="" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="due_date" class="form-label">Due Date</label>
                                <input type="text" class="form-control" name="due_date" id="due_date" placeholder="dd-mm-yyyy" value="" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="mb-3">
                            <label for="remark" class="form-label">Remarks</label>
                            <input type="text" class="form-control" name="remark" id="remark" placeholder="Remarks" value="" maxlength="160" autocomplete="off">
                        </div>
                    </div>

                    <div class="row" id="submitDiv">
                        <div class="col-md-10"></div>
                        <div class="col-md-2">
                            <div class="my-4">
                                <button type="submit" class="btn btn-primary form-control" id="btnSave">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
        </form>
    </div>    
</div>

<div class="modal fade" id="modalVehicleNumber" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalVehicleNumberLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalVehicleNumberLabel">Add Vehicle Number</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formVehicleNumber" action="{{ route('vehicle.number.save') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="mb-3 mt-2">
                                <label class="form-label spaceRemove" for="bh_series">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="bh_series" id="bh_series" value="1">
                                    <label class="form-check-label" for="bh_series">BH Series</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <div class="mb-3">
                                <input type="hidden" class="form-control" id="vehicle_client_id" name="vehicle_client_id" value="0" required autocomplete="off">
                                <label for="vehicle_number" class="form-label">Vehicle Number<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="vehicle_number" name="vehicle_number" placeholder='eg. GJ-05-AB-1234' style='text-transform:uppercase' required autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3" id="vehicleSave">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@include('../reachassuree_agent/master/comman/expiry-popup')
@include('reachassuree_agent.client.document_upload.restore_doc_modal')

@endsection

@section('custom-scripts')

<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/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/sweet-alerts.init.js') }}"></script>

<script type="text/javascript">
    var ajaxClients = "{{ route('clients') }}";
    var ajaxClientDocument = "{{ route('client.documents') }}";
    var ajaxSearchFamilyGroup = "{{ route('search.family.group') }}";
    var ajaxSearchClients = "{{ route('search.clients') }}";
    var ajaxSearchClientVehicles = "{{ route('search.client.vehicles') }}";
    var ajaxSearchDocumentType = "{{ route('search.document.type') }}";
    var ajaxSearchDocumentName = "{{ route('search.document.name') }}";
    var canEdit = "{{ $data['can_edit'] }}";
    var is_redirected = "{{ $data['is_redirected'] }}";
    var ajaxCheckDeletedDocument = "{{ route('check.deleted.document') }}"; // You need to create this route
    var ajaxRestoreDocument = "{{ route('restore.document') }}"; // You need to create this route
    var ajaxPermanentlyDeleteDocument = "{{ route('permanent.delete.document') }}"; // You need to create this route
    var downloadRouteTemplate = "{{ route('download.client.document') }}";
    var disabledNameId = [];
    var exicuteddisabledNameId;
    let originalDocumentNameId = null;
    let documentNameChanged = false;
    var vehicleDocumentTypeId = null; 
    let vehicleAjaxChecked = false;

    $(document).ready(function() {

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

        var is_expired = "{{ $data['is_expired'] }}";

        if(is_expired == 1){
            $('#formUploadClientDocument').css("cursor", "not-allowed");
            $("#formUploadClientDocument :input").prop("disabled", true);

            $("#modalIsExpired").modal('show');
            $("#submitDiv").hide();
        }

        $("#due_date").datepicker({
            format: "dd-mm-yyyy",
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });

        dateValidations($('#due_date'));

        var bhSeries = $('#bh_series').is(':checked'); // true if BH, false if normal
        VehicleRegisterNumFormat(bhSeries);

        $('#bh_series').off('change.vehicle').on('change.vehicle', function() {
            VehicleRegisterNumFormat($(this).is(':checked'));
        });

    });
    
        
    $("#document_name_id").on("change", function () {

        const fileInput = $("#document_name");
        const data = $("#document_name_id").select2("data");

        const $allInputs = $("#document_number, #aadhar_id, #pan_id, #gst_id");
        const $docLabel  = $('label[for="document_number"], label[for="aadhar_id"], label[for="pan_id"], label[for="gst_id"]');

        // =====================================================
        // HARD RESET (kills Aadhaar validation completely)
        // =====================================================
        $allInputs
            .off("input blur change paste")   // 🔥 removes Aadhaar logic
            .removeClass("is-valid is-invalid")
            .removeData("lead")
            .removeAttr("maxlength style onkeypress")
            .val("");
        
        $docLabel.text("Document Number");
            $("#document_number")
                .attr("placeholder", "Document number")
                .prop("id", "document_number");

        // =====================================================
        // FILE INPUT REQUIRED LOGIC
        // =====================================================
        if (canEdit == 1 && originalDocumentNameId && $(this).val() != originalDocumentNameId) {
            documentNameChanged = true;
            fileInput.prop("required", true).val("").addClass("is-invalid");
        } else if (canEdit == 1) {
            documentNameChanged = false;
            fileInput.prop("required", false).removeClass("is-valid is-invalid");
        } else {
            fileInput.prop("required", true);
        }

        if (!data.length || !data[0].text) return;

        const docName = data[0].text;

        // =====================================================
        // DUE DATE REQUIRED LOGIC
        // =====================================================
        const allowedDocuments = [
            "Driving Licence",
            "Employee ID Card",
            "School ID Card",
            "Passport",
            "Government Identity Card",
            "Professional Tax Certificate",
            "Disability Certificate"
        ];

        $("#due_date").prop("required", allowedDocuments.includes(docName));

        // =====================================================
        // GET ACTIVE INPUT ELEMENT
        // =====================================================
        let element =
            document.getElementById("document_number") ||
            document.getElementById("aadhar_id") ||
            document.getElementById("pan_id") ||
            document.getElementById("gst_id");

        if (!element) return;

        // =====================================================
        // AADHAAR
        // =====================================================
        if (docName === "Aadhaar Card") {

            element.id = "aadhar_id";

            $docLabel.text("Aadhaar Number");

            $("#aadhar_id").attr({
                maxlength: 14,
                placeholder: "XXXX XXXX XXXX",
                onkeypress: "isNumber(event);"
            });

            setupAadhaarValidation("#aadhar_id"); // ✅ only here
            return;
        }

        // =====================================================
        // PAN
        // =====================================================
        if (docName === "PAN Card") {

            element.id = "pan_id";

            $docLabel.text("PAN Number");

            $("#pan_id")
                .attr({
                    maxlength: 10,
                    style: "text-transform:uppercase",
                    placeholder: "ABCDE1234F"
                })
                .on("change", function () {

                    const val = $(this).val().trim().toUpperCase();
                    const regex = /^[A-Z]{5}[0-9]{4}[A-Z]$/;

                    if (!val) return $(this).removeClass("is-valid is-invalid");

                    if (regex.test(val)) {
                        toastr.success("PAN number is valid");
                        $(this).addClass("is-valid").removeClass("is-invalid");
                    } else {
                        $(this).val("");
                        toastr.error("Invalid PAN Number");
                        $(this).addClass("is-invalid").removeClass("is-valid");
                    }
                });

            return;
        }

        // =====================================================
        // GST
        // =====================================================
        if (docName === "GST Certificate") {

            element.id = "gst_id";

            $docLabel.text("GST Number");

            $("#gst_id")
                .attr({
                    maxlength: 16,
                    style: "text-transform:uppercase",
                    placeholder: "22ABCDE1234F1Z5"
                })
                .on("change", function () {

                    const val = $(this).val().trim().toUpperCase();
                    const regex = /^\d{2}[A-Z]{5}\d{4}[A-Z][A-Z\d]Z[A-Z\d]$/;

                    if (!val) return $(this).removeClass("is-valid is-invalid");

                    if (regex.test(val)) {
                        toastr.success("GST Number is valid");
                        $(this).addClass("is-valid").removeClass("is-invalid");
                    } else {
                        $(this).val("");
                        toastr.error("Invalid GST Number");
                        $(this).addClass("is-invalid").removeClass("is-valid");
                    }
                });

            return;
        }

        // =====================================================
        // GENERIC DOCUMENT
        // =====================================================
        element.id = "document_number";

        $docLabel.text(`${docName} Number`);

        $("#document_number").attr(
            "placeholder",
            `Enter ${docName} Number`
        );
    });


    $("#family_group_id").select2({
        ajax: {
            url: ajaxSearchFamilyGroup,
            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 family group',
    });

    $("#client_id").select2({
        ajax: {
            url: ajaxSearchClients,
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {
                    "group_id": function() {
                        return $("#family_group_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 client',
    }).on("select2:opening", function(e) {
        if (!$("#family_group_id option:selected").length) {
            toastr.error("Please select a family group first.");
        }
    }).on("change", function(e){  
        
        vehicleAjaxChecked = false;
        $('#vehicle_no')
            .prop('disabled', false)
            .val(null)
            .trigger('change');
            
        disabledNameId = [];
        $.ajax({
            url: "{{ route('uploaded.client.documents') }}",
            type: "POST",
            data: {
                client_id: $(this).val(),
            },
            success: function(res) {
                if (res.status && res.data?.length) {
                    res.data.forEach(el => {
                        disabledNameId.push({
                            id: el.id, // Document ID
                            document_name_id: el.document_name_id,
                            client_vehicle_id: el.client_vehicle_id, // This will be null for non-vehicle docs
                            document_type_id: el.document_type_id,
                            is_deleted: el.is_deleted,
                        });
                    });

                    
                }
            },
            error: function(e) {
                console.log('error while fetching the uplaoded client documents.');
            }
        });
    });

    $("#family_group_id").on("change", function() {
        $("#client_id").val("").trigger("change");
        $("#document_name_id").val("").trigger("change");
    });

    $("#document_type_id").select2({
        ajax: {
            url: ajaxSearchDocumentType,
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {
                    search_value: params.term, // search 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 Document type',
    }).on('select2:opening', function(e) {
        if (!$("#client_id option:selected").length) {
            e.preventDefault();
            toastr.error("Please select a client first.");
        }
    }).on('select2:select', function(e) {
        vehicleNoFieldUI(e.params.data.id);
    });

    function checkClientVehicles(onDone) {
        if (!$("#client_id").val()) return;

        $.ajax({
            url: ajaxSearchClientVehicles,
            dataType: 'json',
            data: {
                client_id: $("#client_id").val(),
                search_value: '',
                page: 1
            },
            success(res) {
                const hasVehicles = res.results && res.results.length > 0;
                onDone(hasVehicles, res.results || []);
            }
        });
    }

    window.selectedDocumentInfo = null;

    // Vehicle change handler
    $("#vehicle_no").on("change", function(e) {
        const newVehicleId = $(this).val();
        const documentNameId = $('#document_name_id').val();
        const docInfo = window.selectedDocumentInfo;
        
        // Skip if no document selected or no vehicle
        if (!documentNameId || !newVehicleId || !docInfo) {
            // $("#document_name_id").val("").trigger("change");
            return;
        }
        
        // Skip if not unique_blocked
        if (docInfo.is_unique_blocked != 1) {
            return;
        }
        
        const currentDocId = $('#document_id').val();
        const vehicleText = $('#vehicle_no').select2('data')[0]?.text || '';
        
        // Check conflict
        const hasConflict = disabledNameId.some(item => 
            item.document_name_id == documentNameId &&
            item.client_vehicle_id == newVehicleId &&
            !item.is_deleted &&
            (canEdit == 0 || item.id != currentDocId)
        );
        
        if (hasConflict) {
            swal.fire({
                title: "Document Already Exists",
                html: `You have already uploaded <strong>${docInfo.text}</strong> for vehicle <strong>${formatVehicleNo(vehicleText)}</strong>.`,
                showCancelButton: false,
            }).then((result) => {
                if (result.isConfirmed) {
                    $(" #document_name_id, #document_name").val("").trigger("change");
                    window.selectedDocumentInfo = null;
                }
            });
        }
    });

    // Add this after the document_type_id select2 configuration
    $("#vehicle_no").select2({
        ajax: {
            url: ajaxSearchClientVehicles,
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {
                    client_id: $("#client_id").val(),
                    search_value: params.term
                    ? params.term.replace(/[\s\-]/g, '').toUpperCase()
                    : '',
                    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 or enter new vehicle number',
        templateResult: item => item.id ? formatVehicleNo(item.text, item.bh_series) : item.text,
        templateSelection: item => item.id ? formatVehicleNo(item.text, item.bh_series) : item.text
    }).on("select2:opening", function(e) {
        if (!$("#client_id option:selected").length) {
            toastr.error("Please select a client first.");
        }
        if (!$("#document_type_id option:selected").length) {
            toastr.error("Please select a document type first.");
        }
    });

    function vehicleNoFieldUI(documentTypeId = 0) {
        const isVehicleDoc = Number(documentTypeId) === 6;

        if (!isVehicleDoc) {
            $('#vehicleNoDiv').addClass('d-none');
            $('#vehicle_no')
                .prop('disabled', false)
                .prop('required', false)
                .val(null)
                .trigger('change');

            $('#documentTypeDiv').removeClass('col-md-6').addClass('col-md-12');
            return;
        }

        $('#vehicleNoDiv').removeClass('d-none');
        $('#documentTypeDiv').addClass('col-md-6').removeClass('col-md-12');

        checkClientVehicles(function (hasVehicles) {
            if (!hasVehicles) {
                $('#vehicle_no')
                    .prop('disabled', true)
                    .prop('required', false)
                    .val(null)
                    .trigger('change');

                setTimeout(addVehicleNumber, 200);
            } else {
                $('#vehicle_no')
                    .prop('disabled', false)
                    .prop('required', true);
            }
        });
    }

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

                const currentVehicleId = $("#vehicle_no").val();
                const currentDocId = $('#document_id').val();

                data.results.forEach(doc => {
                    disabledNameId.forEach(item => {
                        // Only care about unique-blocked docs
                        if (doc.is_unique_blocked != 1) return;

                        const isAlreadyUsedForVehicle = disabledNameId.some(item => {
                            return (
                                item.document_name_id == doc.id &&
                                item.client_vehicle_id == $('#vehicle_no').val() &&   // SAME vehicle
                                !item.is_deleted  && 
                                (canEdit == 0 || item.id != currentDocId)
                            );
                        });

                        if (isAlreadyUsedForVehicle) {
                            doc.disabled = true;
                        }
                    })
                });

                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    },
                };
            },
            cache: false
        },
        placeholder: 'Search for document name',
    }).on("select2:opening", function(e) {
        if (!$("#document_type_id option:selected").length) {
            e.preventDefault();
            toastr.error("Please select a document type.");
        }

        if ($("#document_type_id").val() == 6 && !$("#vehicle_no option:selected").length) {
            e.preventDefault();
            toastr.error("Please select a vehicle number.");
        }
    }).on("select2:select", function(e) {

         // Store selected document info globally
        window.selectedDocumentInfo = {
            id: e.params.data.id,
            text: e.params.data.text,
            is_unique_blocked: e.params.data.is_unique_blocked || 0
        };

        // Check for deleted/existing documents on selection
        const clientId = $('#client_id').val();
        const documentNameId = $('#document_name_id').val();
        const documentTypeId = $('#document_type_id').val();

        if (!clientId || !documentNameId || !documentTypeId) return;

        // Check if document exists or is deleted
        $.ajax({
            url: ajaxCheckDeletedDocument,
            type: "POST",
            data: {
                client_id: clientId,
                document_name_id: documentNameId,
                document_type_id: documentTypeId,
                vehicle_no_id: documentTypeId == 6 ? $('#vehicle_no').val() : null
            },
            success: function(res) {
                if (res.status && res.documents?.length) {
                    // Show restore modal if deleted documents exist
                    showClientDocRestoreModal(res.documents, e.params.data.is_unique_blocked || 0);
                }
            },
            error: function(xhr) {
                console.error('Error checking deleted documents:', xhr);
            }
        });
    });

    $("#client_id").on("change", function() {
        $("#document_type_id").val("").trigger("change");
        vehicleNoFieldUI();
    });

    $("#document_type_id").on("change", function() {
        $("#document_name_id").val("").trigger("change");
    });

    $("#document_name").on('click', function(e){
        if (!$("#document_name_id option:selected").length) {
            e.preventDefault();
            toastr.error("Please select a document name first.");
        }
    })


    function resetInputForm() {
        $('#formUploadClientDocument').trigger("reset");

        $("#family_group_id , #client_id , #document_type_id , #document_name_id").empty().trigger("change");
    }

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest,
            success: showResponse
        };

        $('#formUploadClientDocument, #formVehicleNumber').submit(function(e) {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {

        const fileInput = $('#document_name');
        const files = fileInput[0].files;
        const formId = jqForm.attr('id');
        
        if (formId === 'formUploadClientDocument') {

            const fileInput = $('#document_name');
            const files = fileInput[0]?.files || [];

            if (canEdit == 1 && documentNameChanged && files.length === 0) {
                fileInput.addClass('is-invalid');
                const docText = $(`[id^="document_name_"] option:selected`).text();
                toastr.error(`Document must be uploaded for ${docText}`);
                return false;
            }
        }

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

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

        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            
            $("#" + $form[0].id + "").removeClass('was-validated');
           
            var modalName = $form[0].id.split('form');
            $("#modal" + modalName[1] + "").modal('hide');
            
            if("#" + $form[0].id + "" == "#formUploadClientDocument") {
                $("#btnSave").prop('disabled', false);
            
                if(is_redirected == 1){
                    window.location = "{{ route('clients') }}";
                }else{
                    window.location = ajaxClientDocument;
                }

            } else if ("#" + $form[0].id + "" == "#formVehicleNumber") {
                $("#vehicle_no").empty();

                 // Get the raw value and bh_series
                var vehicleText = responseText['data']['text'];
                var bhSeries    = responseText['data']['bh_series'] == 1; // convert to boolean

                // Format vehicle number for display
                var formattedText = formatVehicleNo(vehicleText, bhSeries);

                // Create Select2 option with formatted text
                var newOption = new Option(formattedText, responseText['data']['id'], false, false);
                $('#vehicle_no').append(newOption).trigger('change').prop('disabled', false).prop('required', true);
            }

        } else if (responseText['status'] == 0) {
            $("#formVehicleNumber").removeClass('was-validated');
            $("#vehicle_number").addClass("is-invalid");
            $("#btnSave").prop('disabled', false);

            if (typeof responseText['data'] !== "undefined") {
            
            var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    var firstError = Object.values(responseText['data'])[0];
                    toastr["error"](firstError);
                }
            } else {
                toastr["error"](responseText['msg']);
            }          
        }
    }
  
     
    
    $('#formUploadClientDocument').on('change', 'input[type="file"]', function() {
        const fileInput = $(this);
        const files = fileInput[0].files;

        const maxFiles = 5;
        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'application/pdf'
        ];
        const allowedExtensions = ['jpg', 'jpeg', 'png', 'pdf'];

        if (files.length > maxFiles) {
            toastr["error"](`Maximum ${maxFiles} files allowed.`);
            fileInput.val(''); // reset the file input
            return;
        }

            // Type + extension validation
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const ext = file.name.split('.').pop().toLowerCase();

            if (
                !allowedTypes.includes(file.type) ||
                !allowedExtensions.includes(ext)
            ) {
                toastr.error('Please select a valid file.');
                fileInput.val('');
                return;
            }
        }
    });

    // Download document handler
    $(document).on('click', '.download-client-document-btn', function() {
        const documentName = $(this).data('document-name');
        const clientId = $(this).data('client-id');
        downloadClientDocument(documentName, clientId);
    });

    
    $(document).on('reset-name-field', function(e) {
        $('#document_name_id').val(null).trigger('change');
        $('#client_id').trigger('change');
    });
    
    // Show restore modal
    function showClientDocRestoreModal(documents, isUnique) {
        const modal = $('#restoreDocumentModal');
        const tbody = $('#deletedDocumentsList').empty();
        
        // Store data in modal
        modal.data({ documents, isUnique, userAction: null });

        // Configure modal based on document type
        if (isUnique == 1) {
            $('#uniqueDocWarning').removeClass('d-none');
            $('#multipleDocInfo').addClass('d-none');
            $('#permanentDeleteBtn, #confirmRestoreBtn').removeClass('d-none');
            $('#skipRestoreBtn').addClass('d-none');
            $('#confirmRestoreBtn').html('<i class="fas fa-undo me-2"></i>Restore');
            $('#permanentDeleteBtn').html('<i class="fas fa-trash me-2"></i>Delete Permanently');
            
            if (!$('#cancelBtnSingle').length) {
                modal.find('.modal-footer').append(
                    '<button type="button" class="btn btn-secondary" id="cancelBtnSingle"><i class="fas fa-times me-2"></i>Cancel</button>'
                );
            }
        } else {
            $('#uniqueDocWarning').addClass('d-none');
            $('#multipleDocInfo').removeClass('d-none');
            $('#permanentDeleteBtn, #skipRestoreBtn, #confirmRestoreBtn').removeClass('d-none');
            $('#confirmRestoreBtn').html('<i class="fas fa-undo me-2"></i>Restore Selected');
            $('#permanentDeleteBtn').html('<i class="fas fa-trash me-2"></i>Delete Permanently Selected');
            $('#skipRestoreBtn').html('<i class="fas fa-forward me-2"></i>Skip & Add New');
            $('#cancelBtnSingle').remove();
        }

        // Populate documents table
        documents.forEach(doc => {
            const uploadDate = new Date(doc.created_at).toLocaleDateString('en-GB');
            
            tbody.append(`
                <tr>
                    <td class="text-center align-middle">
                        <input type="checkbox" class="form-check-input doc-checkbox" value="${doc.id}" data-doc='${JSON.stringify(doc)}'>
                    </td>
                    <td class="align-middle">${doc.name || 'N/A'}</td>
                    <td class="align-middle">${doc.document_number || 'N/A'}</td>
                    <td class="align-middle">${uploadDate}</td>
                    <td class="text-center">
                        <a href="javascript:void(0)" class="btn font-size-20 p-0 download-client-document-btn" 
                           data-document-name="${doc.name}" 
                           data-client-id="${doc.client_id}">
                            <i class="mdi mdi-download"></i>
                        </a>
                    </td>
                </tr>
            `);
        });

        // Show modal
        new bootstrap.Modal(document.getElementById('restoreDocumentModal'), {
            backdrop: 'static',
            keyboard: false
        }).show();
    }

    function addVehicleNumber() {
        $('#formVehicleNumber').trigger("reset").removeClass('was-validated');
        $('#vehicle_number').removeClass('is-invalid is-valid');
        $("#modalVehicleNumber").modal('show');
        $('#vehicle_client_id').val($('#client_id').val());
    }

    function VehicleRegisterNumFormat(bhSeries = false) {
        const $input = $('#vehicle_number');

        const applyNormal = () => {
            $input.val('').inputmask('remove');
            Inputmask("A{2}-9{1,2}-A{1,2}-9{1,4}", { insertMode: false, casing: "upper" }).mask($input);
            $input.attr('placeholder', 'eg. GJ-05-AB-1234');
        };

        const applyBH = () => {
            $input.val('').inputmask('remove');
            Inputmask("9{2} BH 9{1,4} L{1,2}", {
                definitions: { L: { validator: "[A-HJ-NP-Za-hj-np-z]", cardinality: 1, casing: "upper" } },
                insertMode: false
            }).mask($input);
            $input.attr('placeholder', 'eg. 21 BH 0000 AA');
        };

        // Initialize based on bh_series
        bhSeries ? applyBH() : applyNormal();

        // Shared validation
        $input.off('keyup.vehicle').on('keyup.vehicle', function() {
            if ($(this).val().replace(/_/g, '').endsWith('0000')) {
                $(this).val('');
                toastr.error('Last four digits cannot be 0000');
            }
        });
    }

    // Format vehicle number for display (with dashes/spaces)
    function formatVehicleNo(val, bhSeries = false) {
        if (!val) return '';
        if (bhSeries) return val.replace(/^(\d{2})(BH)(\d{1,4})([A-Z]{1,2})$/i, '$1 BH $3 $4');
        return val.replace(/^([A-Z]{2})(\d{1,2})([A-Z]{1,2})(\d{1,4})$/i, '$1-$2-$3-$4');
    }

</script>
@endsection