@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-6">
                            <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="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>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <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="{{ route('download.client.document', ['id' => $data['data']['id'],'client_id' => $data['data']['client_id'], 'document' => $data['data']['name']]) }}" target="_blank" class="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 Document</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
        </form>
    </div>    
</div>

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

@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 ajaxSearchDocumentType = "{{ route('search.document.type') }}";
    var ajaxSearchDocumentName = "{{ route('search.document.name') }}";
    var canEdit = "{{ $data['can_edit'] }}";
    var is_redirected = "{{ $data['is_redirected'] }}";

    
    $(document).ready(function() {
        
//         var uploadedFilesNames = [];
//         document.getElementById('document_name').addEventListener('change', function(event) {

//             var files = event.target.files;
//             var filesCount = files.length;
//             var filesName = files.name;
//             var filesValue = files.value;

// // Working
//             for (var j = 0; j < files.length; j++) {
//                 uploadedFilesNames.push(files[j].name);
//             }

//             var fileNamesDisplay = document.getElementById('document_name');
//             var allUploadedFilesNames = uploadedFilesNames.join(', ');
//             fileNamesDisplay.value = allUploadedFilesNames;
//             fileNamesDisplay.text = allUploadedFilesNames;
//         });

        $("#modalIsExpired, #remainMessageModal").hide();
        // $("#document_number, #aadhar_id, #pan_id, #gst_id").removeAttr("maxlength pattern");

        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'));
    });
    
        
    $("#document_name_id").on("change", function() {
        $("#document_number, #aadhar_id, #pan_id, #gst_id").removeAttr("pattern");

        $("#document_number, #aadhar_id, #pan_id, #gst_id").val('').off('input change');

        var data = $("#document_name_id").select2('data');

        var allowedDocuments = ["Driving Licence", "Employee ID Card", "School ID Card", "Passport", "Government Identity Card", "Professional Tax Certificate", "Disability Certificate"];
        if(data.length > 0 && allowedDocuments.includes(data[0].text) == true){
            if (allowedDocuments.includes(data[0].text)) {
                $('#due_date').prop('required', true);
            }else{
                $('#due_date').prop('required', false);
            }
        }

        if (data.length > 0 && data[0].text === "Aadhar Card") {
            var element = document.getElementById("document_number") || document.getElementById("pan_id") || document.getElementById("gst_id");

            if(element){
                element.setAttribute("id", "aadhar_id");
                $("#aadhar_id").removeAttr("onkeypress").off('keypress change');
            }

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

            // $('#aadhar_id').on('input', function() {
            //     let input = event.target;
            //     let value = input.value.replace(/\D/g, '');
            //     let cursorPosition = input.selectionStart;
               
            //     if (value.trim().length > 4 && value.trim().length < 9) {
            //         value = value.replace(/(\d{4})(\d)/, '$1 $2');
            //         if (cursorPosition === 5) {
            //             cursorPosition = cursorPosition + 1;
            //         }
            //     } else if (value.trim().length >= 9) {
            //         if (cursorPosition === 10 && value.trim().length <= 9) {
            //             value = value.replace(/(\d{4})(\d{4})(\d{0,2})/, '$1 $2 $3');
            //             cursorPosition = cursorPosition + 2;
            //         } else {
            //             value = value.replace(/(\d{4})(\d{4})(\d)/, '$1 $2 $3');
            //         }
            //     }

            //     input.value = value;
            //     input.setSelectionRange(cursorPosition, cursorPosition);
            // });

            // $('#aadhar_id').on('paste', function (event) {
            //     var input = $(this);

            //     setTimeout(function () {
            //         var inputValues = input.val();

            //         var sanitizedValue = inputValues.substring(0, 14);

            //         input.val(sanitizedValue);
            //     }, 0);
            // });

            // $("#aadhar_id").change(function() {
            //     var inputvalues = $(this).val();
            //     var regex = /[0-9]{4}[0-9]{4}[0-9]{4}$/;

            //     if (regex.test(inputvalues.replace(/ /g, ""))) {
            //         toastr["success"]('Aadhar number is valid');
            //         $(this).addClass('is-valid').removeClass('is-invalid');
            //     } else {
            //         // $("#aadhar_id").val('');
            //         $(this).addClass('is-invalid').removeClass('is-valid');
            //         toastr["error"]('Invalid Aadhar Number');
            //     }
            // });

            setupAadhaarValidation('#aadhar_id');

        } else if (data.length > 0 && data[0].text === "PAN Card") {
            var element = document.getElementById("document_number") || document.getElementById("aadhar_id") || document.getElementById("gst_id");

            if(element){
                element.setAttribute("id", "pan_id");
                $("#pan_id").removeAttr("onkeypress").off('keypress change');
            }
            
            $("#pan_id").attr({
                "style": "text-transform:uppercase",
                "maxlength": 10,
            });

            $("#pan_id").change(function() {
                var inputvalues = $(this).val();
                var regex = /[A-Z]{5}[0-9]{4}[A-Z]{1}$/;

                if (regex.test(inputvalues.toUpperCase())) {
                    toastr["success"]("PAN number is valid");
                    $(this).addClass('is-valid').removeClass('is-invalid');
                } else {
                    // $("#pan_id").val('');
                    $(this).addClass('is-invalid').removeClass('is-valid');
                    toastr["error"]('Invalid PAN Number');
                }
            });

        } else if (data.length > 0 && data[0].text === "GST Certificate") {
            var element = document.getElementById("document_number") || document.getElementById("pan_id") || document.getElementById("aadhar_id");

            if(element){
                element.setAttribute("id", "gst_id");
                $("#gst_id").removeAttr("onkeypress").off('keypress change');
            }

            $("#gst_id").attr({
                "style": "text-transform:uppercase",
                "maxlength": 16,
            });

            $("#gst_id").change(function() {
                var inputvalues = $(this).val();
                var regex = /\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/;

                if (regex.test(inputvalues.toUpperCase())) {
                    toastr["success"]('GST Number is valid');
                    $(this).addClass('is-valid').removeClass('is-invalid');
                } else {
                    // $("#gst_id").val('');
                    $(this).addClass('is-invalid').removeClass('is-valid');
                    toastr["error"]('Invalid GST Number');
                }
            });

        }else{
            var element = document.getElementById("document_number") || document.getElementById("aadhar_id") || document.getElementById("pan_id") || document.getElementById("gst_id");

            if(element){
                element.setAttribute("id", "document_number");
                $("#document_number").off('keypress change');
            }
        }
    });

    $("#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',
    });

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

    $("#client_id").on("select2:open", function(e) {
        if (!$("#family_group_id option:selected").length) {
            toastr.error("Please select a family group first.");
        }
    });

    $("#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',
    });

    $("#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;

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

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

    $("#document_name_id").on("select2:open", function(e) {
        if (!$("#document_type_id option:selected").length) {
            toastr.error("Please select a document type.");
        }
    });

    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').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']);
            
            $("#" + $form[0].id + "").removeClass('was-validated');
           
            var modalName = $form[0].id.split('form');
            $("#modal" + modalName[1] + "").modal('hide');
            
            $("#btnSave").prop('disabled', false);
           
            if(is_redirected == 1){
                window.location = "{{ route('clients') }}";
            }else{
                window.location = ajaxClientDocument;
            }
        } else if (responseText['status'] == 0) {
            $("#btnSave").prop('disabled', false);

            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']);
            }          
        }
    }
  
     
    
    $('#formUploadClientDocument').on('change', 'input[type="file"]', function() {
        const fileInput = $(this);
        
        const maxFiles = 5; // default 1 if not listed

        if (fileInput[0].files.length > maxFiles) {
            toastr["error"](`You can only upload ${maxFiles} files.`);
            fileInput.val(''); // reset the file input
        }
    });
</script>
@endsection