@extends('layouts.front_layout')
    @section('content')
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 ">
                    <div class="p-xl-5 p-md-4 p-3 bg-white shadow">
                        <h1 class="text-center mb-5 fs-4">New Complaint ( Vigilance ) Registration</h1>
                        <h1 class="text-center mb-5 fs-4" id="pleasewait" style="display:none">Please Wait...</h1>
                        {!! Form::open(['method' => 'POST', 'route' => ['submit_complaint'], 'files' => 'true', 'id' => 'signUpForm']) !!}
                            <!-- start step indicators -->
                            <!-- 'id' => 'signUpForm' -->
                            <div class="form-header d-flex mb-4">
                                <span class="stepIndicator">Your Personal Details</span>
                                <span class="stepIndicator">Identity Details</span>
                                <span class="stepIndicator">Contact Details</span>
                                <span class="stepIndicator">Complaint Details</span>
                            </div>
                            <!-- end step indicators -->

                            <!-- step one -->
                            <div class="step">
                                <p class="step-title text-center mb-4">Your Personal Details</p>
                                <div class="row">
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">First Name <span class="required">*</span></label>
                                            {!! Form::text('first_name', null, ['class' => 'form-control', 'required'=>"true", 'alphanumeric' => 'true']) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3 ">
                                        <div class="">
                                            <label class="form-label">Middle Name</label>
                                            {!! Form::text('middle_name', null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Last Name <span class="required">*</span></label>
                                            {!! Form::text('last_name', null, ['class' => 'form-control', 'required'=>"true", 'alphanumeric' => 'true']) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Sex <span class="required">*</span></label>
                                            {!! Form::select('gender', gender_list(), null, ['class' => 'form-select', 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">DOB <span class="required">*</span></label>
                                            {!! Form::date('dob', null, ['class' => 'form-control', 'max' => date('Y-m-d'), 'required'=>"true"]) !!}
                                            <small class="text-danger">{{ $errors->first('dob') }}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            @if ($errors->has('g-recaptcha-response'))
                                                <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- step two -->
                            <div class="step">
                                <p class="step-title text-center mb-4">Identity Details</p>
                                <div class="row">
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Select ID Type <span class="required">*</span></label>
                                            {!! Form::select('id_type', id_type_list(), null, ['class' => 'form-select', 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Enter ID Number <span class="required">*</span></label>
                                            {!! Form::text('id_number', null, ['class' => 'form-control uppercase', 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Upload ID Photo <span class="required">*</span></label>
                                            <input class="form-control" type="file" name="id_photo" required="true">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- step three Contact Details -->
                            <div class="step">
                                <p class="step-title text-center mb-4">Contact Details</p>
                                <div class="row">
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">E-mail <span class="required">*</span></label>
                                            {!! Form::email('email_id', null, ['class' => 'form-control', 'pattern' => '^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$']) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3 ">
                                        <div class="">
                                            <label class="form-label">Landline Number</label>
                                            {!! Form::text('landline_no', null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Mobile Number <span class="required">*</span></label>
                                            {!! Form::text('mobile_no', null, ['class' => 'form-control only_numbers', 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3 ">
                                        <div class="">
                                            <label class="form-label">Address Line 1:</label>
                                            {!! Form::text('address_line1', null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3 ">
                                        <div class="">
                                            <label class="form-label">Address Line 2:</label>
                                            {!! Form::text('address_line2', null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3 ">
                                        <div class="">
                                            <label class="form-label">Address Line 3:</label>
                                            {!! Form::text('address_line3', null, ['class' => 'form-control']) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">State <span class="required">*</span></label>
                                            {!! Form::select('state_id', $state_list, null, ['class' => 'form-select', 'placeholder' => 'Select State', 'onchange' => 'getDistrictListbyStateId(this)', 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">District <span class="required">*</span></label>
                                            {!! Form::select('district_id', array(), null, ['class' => 'form-select', 'placeholder' => 'Select District', 'id' => 'district_list', 'onchange' => 'getCityListbyDistrictId(this)', 'required'=>"true"]) !!}
                                            <small class="text-danger">{{ $errors->first('district_id') }}</small>
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">PIN Code <span class="required">*</span></label>
                                            {!! Form::text('pincode', null, ['class' => 'form-control only_numbers', 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">City/Town <span class="required">*</span></label>
                                            {!! Form::select('city_id', array(), null, ['class' => 'form-select', 'placeholder' => 'Select City', 'id' => 'city_list', 'required'=>"true", 'onchange' => 'addnewcity(this)']) !!}
                                            <small class="text-danger">{{ $errors->first('city_id') }}</small>
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-4 col-md-6 col-12 mb-3" id="city_input" style="display:none">
                                        <div class="">
                                            <label class="form-label">City Name <span class="required">*</span></label>
                                            {!! Form::text('city_name', null, ['class' => 'form-control', 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- step Four complaint details-->
                            <div class="step">
                                <p class="step-title text-center mb-4">Complaint Details</p>
                                <div class="row">
                                    <div class="form_group col-xl-6 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Determination of Vigilance Angle <span class="required">*</span></label>
                                            {!! Form::select('determinationof_vigilance_angle_id', $determinationofvigilanceangle_list, null, ['class' => 'form-select', 'placeholder' => 'Select', 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-6 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Attach Document</label>
                                            <input class="form-control" type="file" name="complaint_document">
                                            <span>(.pdf only)(Max. File size 3MB)</span>
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-6 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Complaint Description(Max 3000 Characters) <span class="required">*</span></label>
                                            {!! Form::textarea('complaint_description', null, ['class' => 'form-control', 'rows' => 2, 'maxlength' => "3000", 'required'=>"true"]) !!}
                                        </div>
                                    </div>
                                    <div class="form_group col-xl-6 col-md-6 col-12 mb-3">
                                        <div class="">
                                            <label class="form-label">Remarks(Max 3000 Characters)</label>
                                            {!! Form::textarea('remarks', null, ['class' => 'form-control', 'maxlength' => "3000", 'rows' => 2]) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- start previous / next buttons -->
                            <div class="form-footer mt-4 d-flex">
                                <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
                                <button type="button" id="nextBtn" onclick="nextPrev(1)" class="btn btn-primary">Next</button>
                            </div>
                            <!-- end previous / next buttons -->
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

        <script type="text/javascript">
            var token = "{{ csrf_token() }}";

            function getDistrictListbyStateId(me)
            {
                $.ajax({
                    url: "{{ route('get_district_list') }}",
                    dataType: "html",
                    type: "post",
                    async: true,
                    data: {
                        '_token': token,
                        'state_id': $(me).val(),
                    },
                    success:function(result){
                        $('#district_list').html(result);
                    },
                    error: function (xhr, exception, thrownError) {
                    var msg = "";
                    if (xhr.status === 0) {
                        msg = "Not connect.\n Verify Network.";
                    } else if (xhr.status == 404) {
                        msg = "Requested page not found. [404]";
                    } else if (xhr.status == 500) {
                        msg = "Internal Server Error [500].";
                    } else if (exception === "parsererror") {
                        msg = "Requested JSON parse failed.";
                    } else if (exception === "timeout") {
                        msg = "Time out error.";
                    } else if (exception === "abort") {
                        msg = "Ajax request aborted.";
                    } else {
                        msg = "Error:" + xhr.status + " " + xhr.responseText;
                    }
                    }
                });
            }

            function getCityListbyDistrictId(me)
            {
                $.ajax({
                    url: "{{ route('get_city_list') }}",
                    dataType: "html",
                    type: "post",
                    async: true,
                    data: {
                        '_token': token,
                        'district_id': $(me).val(),
                    },
                    success:function(result){
                        $('#city_list').html(result);
                    },
                    error: function (xhr, exception, thrownError) {
                    var msg = "";
                    if (xhr.status === 0) {
                        msg = "Not connect.\n Verify Network.";
                    } else if (xhr.status == 404) {
                        msg = "Requested page not found. [404]";
                    } else if (xhr.status == 500) {
                        msg = "Internal Server Error [500].";
                    } else if (exception === "parsererror") {
                        msg = "Requested JSON parse failed.";
                    } else if (exception === "timeout") {
                        msg = "Time out error.";
                    } else if (exception === "abort") {
                        msg = "Ajax request aborted.";
                    } else {
                        msg = "Error:" + xhr.status + " " + xhr.responseText;
                    }
                    }
                });
            }

            function addnewcity(me)
            {
                var option = $(me).val();
                $('#city_input input').val('');

                if(option == '0')
                {
                    $('#city_input').show();
                }
                else
                {
                    $('#city_input').hide();
                }
            }
        </script>

        <script>
            $('form#signUpForm').submit(function(event) {
                event.preventDefault();

                grecaptcha.ready(function() {
                    grecaptcha.execute("{{ env('GOOGLE_RECAPTCHA_SITE_KEY') }}", {action: 'submit_complaint'}).then(function(token) {
                        $('form#signUpForm').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
                        $('form#signUpForm').unbind('submit').submit();
                    });
                });
            });

            $.validator.addMethod("validEmail", function(value, element) {
                if (value == '') return true;
                var temp1;
                temp1 = true;
                var ind = value.indexOf('@');
                var str2 = value.substr(ind + 1);
                var str3 = str2.substr(0, str2.indexOf('.'));
                if (str3.lastIndexOf('-') == (str3.length - 1) || (str3.indexOf('-') != str3.lastIndexOf('-'))) return false;
                var str1 = value.substr(0, ind);
                if ((str1.lastIndexOf('_') == (str1.length - 1)) || (str1.lastIndexOf('.') == (str1.length - 1)) || (str1.lastIndexOf('-') == (str1.length - 1))) return false;
                str = /(^[a-zA-Z0-9]+[\.\.\._-]{0,1})+([a-zA-Z0-9]+[\.\.\._-]{0,1})*@([a-zA-Z0-9]+[-]{0,1})+(\.[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,3})$/;
                temp1 = str.test(value);
                return temp1;
            }, "Please enter valid email address");

            $.validator.addMethod("fileExtension", function(value, element, param) {
                param = typeof param === "string" ? param.replace(/,/g, "|") : "pdf";
                return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
            }, "Please Choose Only pdf file (pdf).");

            $.validator.addMethod('filesize', function (value, element, param) {
                if(element.files.length > 0){
                    var size=element.files[0].size;
                    size=size/1024;
                    size=Math.round(size);
                }
                return this.optional(element) || size <=param ;
            }, 'File size must be less than {0}');

            $('form#signUpForm').validate({
                rules: {
                    "email_id": {
                        required : true,
                        email:true,
                        validEmail:true,
                        remote:
                        {
                            data: {
                                '_token': token,
                            },
                            url: "{{ route('check_duplication') }}",
                            type: "post",
                        },
                    },
                    "id_number": {
                        required : true,
                        remote:
                        {
                            data: {
                                '_token': token,
                            },
                            url: "{{ route('check_duplication') }}",
                            type: "post",
                        },
                    },
                    'complaint_document':{
                        required : false,
                        fileExtension: "pdf",
                        filesize : 3078            // This is kb value
                    },
                    'id_photo':{
                        required : true,
                        filesize : 1024,          // This is kb value
                    },
                    'mobile_no': {
                        digits: true,
                        minlength:10,
                        maxlength:10,
                    },
                    'city_name': {
                        remote:
                        {
                            data: {
                                '_token': token,
                            },
                            url: "{{ route('check_city_name_duplication') }}",
                            type: "post",
                        },
                        lettersonly: true,
                    },
                },
                messages: {
                    "email_id": {
                        required: "This field is required.",
                        email:"Please Enter Valid Email Address",
                        validEmail:"Please Enter Valid Email Address",
                        remote: "This email id already exist."
                    },
                    "id_number": {
                        required: "This field is required.",
                        remote: "This id number already exist."
                    },
                    'complaint_document': {
                        fileExtension: "Please Choose Only .pdf File",
                        filesize: "File size must be less than 3 MB"
                    },
                    'id_photo': {
                        filesize: "File size must be less than 1 MB"
                    },
                    'mobile_no':{
                        minlength: 'Enter only 10 digits',
                        maxlength: 'Enter only 10 digits',
                    },
                    'city_name':{
                        remote: "This City Name already exist. Please Select from dropdown",
                    },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form_group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });

            jQuery.validator.addMethod("alphanumeric", function(value, element) {
                return this.optional(element) || /^[a-zA-Z]+$/.test(value);
            }, "Only Letters Allowed");

            jQuery.validator.addMethod("lettersonly", function(value, element) {
                return this.optional(element) || /^[a-z\s]+$/i.test(value);
            }, "Only Letters Allowed");

            // jQuery.validator.addMethod("pan_no_validate", function(value, element) {
            //     return this.optional(element) || /[a-zA-z]{5}\d{4}[a-zA-Z]{1}/.test(value);
            // }, 'Please enter a valid PAN No.');

            var currentTab = 0; // Current tab is set to be the first tab (0)
            showTab(currentTab); // Display the current tab

            function showTab(n) {
                // This function will display the specified tab of the form...
                var x = document.getElementsByClassName("step");
                x[n].style.display = "block";
                //... and fix the Previous/Next buttons:
                if (n == 0) {
                    document.getElementById("prevBtn").style.display = "none";
                } else {
                    document.getElementById("prevBtn").style.display = "inline";
                }
                if (n == (x.length - 1)) {
                    document.getElementById("nextBtn").innerHTML = "Submit";
                } else {
                    document.getElementById("nextBtn").innerHTML = "Next";
                }
                //... and run a function that will display the correct step indicator:
                fixStepIndicator(n)
            }

            function nextPrev(n) {
                // This function will figure out which tab to display
                var x = document.getElementsByClassName("step");
                // Exit the function if any field in the current tab is invalid:
                if (n == 1 && !validateForm()) return false;
                // Hide the current tab:
                x[currentTab].style.display = "none";
                // Increase or decrease the current tab by 1:
                currentTab = currentTab + n;
                // if you have reached the end of the form...
                if (currentTab >= x.length) {
                    // ... the form gets submitted:
                    $("#signUpForm").submit();
                    // return false;
                    // window.location.href="success.html";
                    document.getElementById("signUpForm").style.display = "none";
                    document.getElementById("pleasewait").style.display = "block";
                }
                // Otherwise, display the correct tab:
                showTab(currentTab);
            }

            function validateForm() {
                // This function deals with validation of the form fields
                // var x, y, i, valid = true;
                // x = document.getElementsByClassName("step");
                // y = x[currentTab].getElementsByTagName("input");
                // // A loop that checks every input field in the current tab:
                // for (i = 0; i < y.length; i++) {
                //     // If a field is empty...
                //     if (y[i].value == "")
                //     {
                //         // add an "invalid" class to the field:
                //         y[i].className += " invalid";
                //         // and set the current valid status to false
                //         valid = false;
                //     }
                // }

                // z = x[currentTab].getElementsByTagName("select");
                // // A loop that checks every input field in the current tab:
                // for (i = 0; i < z.length; i++) {
                //     // If a field is empty...
                //     if (z[i].value == "")
                //     {
                //         // add an "invalid" class to the field:
                //         z[i].className += " invalid";
                //         // and set the current valid status to false
                //         valid = false;
                //     }
                // }
                // // If the valid status is true, mark the step as finished and valid:
                // if (valid) {
                //     document.getElementsByClassName("stepIndicator")[currentTab].className += " finish";
                // }
                return $('form#signUpForm').valid();//valid; // return the valid status
            }

            function fixStepIndicator(n) {
                // This function removes the "active" class of all steps...
                var i, x = document.getElementsByClassName("stepIndicator");
                for (i = 0; i < x.length; i++) {
                    x[i].className = x[i].className.replace(" active", "");
                }
                //... and adds the "active" class on the current step:
                x[n].className += " active";
            }
        </script>
    @endsection