@push('pageJs')
<script>
    $(document).ready(function() {

        $('#city_id').select2({
            placeholder: 'Select an option',
            minimumInputLength: 3,
            allowClear: true,
            dropdownParent: $('#contactConsultantModal .modal-content'),
            ajax: {
                delay: 250,
                url: '{{route("city.ajaxSearch")}}',
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term
                    }
                    return query;
                },
                processResults: function(response) {
                    return {
                        results: response,
                    };
                }
            }
        });

        var today = new Date();
        $("#expected_consultancy_date").datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            zIndex: 2048,
            date: null,
            startDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today
                .getFullYear(),
        });


        $('#frmOtp').validate({
            rules: {
                digit1: {
                    required: true
                },
                digit2: {
                    required: true
                },
                digit3: {
                    required: true
                },
                digit4: {
                    required: true
                },
                digit5: {
                    required: true
                },
                digit6: {
                    required: true
                }
            },
            errorPlacement: function(error, element) {
                return false;
            },
            submitHandler: function(form) {
                $(".btnVerify").prop("disabled", true).val("Please Wait...");
                axios.post("{{ route('consultant.otp.verify')}}", {
                    otp: $("#digit1").val() + '' + $("#digit2").val() + '' + $("#digit3")
                        .val() + '' + $("#digit4").val() + '' + $("#digit5").val() + '' + $(
                            "#digit6").val(),
                    inquiry_id: $("#inquiry_id").val()
                }).then(function(response) {

                    $(".btnVerify").prop("disabled", false).val("Verify");

                    if (response.data.result == 'verified') {
                        $('#otpModal').modal('hide');
                        Snackbar.show({
                            pos: 'bottom-right',
                            text: 'Inquiry sent successfully',
                            actionText: 'Okay'
                        });
                    } else {
                        $('.invalidOtp').text('Invalid OTP');
                    }
                })
            }
        });

        $('#frmContactConsultant').validate({
            rules: {
                name: {
                    required: true
                },
                company: {
                    required: true
                },
                position: {
                    required: true
                },
                phone1: {
                    required: true
                },
                email: {
                    required: true
                },
                confirm_email: {
                    required: true,
                    equalTo: "#email"
                },
                city_id: {
                    required: true
                },
                expected_consultancy_date: {
                    required: true
                },
                message: {
                    required: true
                }
            },
            messages: {
                name: 'Name is required',
                company: 'Company is required',
                position: 'Position is required',
                phone1: 'Phone is required',
                email: 'Email is required',
                confirm_email: {
                    required: 'Please confirm an email',
                    equalTo: 'Confirm email must match your email'
                },
                city_id: 'City is required',
                expected_consultancy_date: 'Consultancy date is required',
                message: 'Message is required'
            },
            ignore: [],
            errorElement: 'span',
            errorPlacement: function(error, element) {
                if (element.hasClass('select-two')) {
                    error.insertAfter(element.next('.select2-container'));
                } else {
                    error.insertAfter(element);
                }
            },
            errorClass: 'invalid-feedback',
            invalidHandler: function(event, validator) {
                var offset = $(validator.errorList[0].element).offset().top;
                $('html, body').animate({
                    scrollTop: offset - 100
                }, 100);
            },
            submitHandler: function(form) {
                $(".btnSubmitInquiry").prop("disabled", true).html("Please Wait...");
                axios.post("{{ route('consultant.storeInquiry')}}", {
                    consultant_id: $("#consultant_id").val(),
                    inquirer_id: $("#inquirer_id").val(),
                    name: $("#name").val(),
                    company: $("#company").val(),
                    position: $("#position").val(),
                    phone1: $("#phone1").val(),
                    phone2: $("#phone2").val(),
                    email: $("#email").val(),
                    city_id: $("#city_id").val(),
                    expected_consultancy_date: $("#expected_consultancy_date").val(),
                    message: $("#message").val()
                }).then(function(response) {
                    $("#contactConsultantModal").modal("hide");
                    if (response.data.verifiedUser == 'true') {
                        Snackbar.show({
                            pos: 'bottom-right',
                            text: 'Inquiry sent successfully',
                            actionText: 'Okay'
                        });
                    } else {
                        $('#otpModal').find('#inquiry_id').val(response.data.inquiry_id);
                        $("#otpModal").modal("show");
                    }
                })
            }
        });

        $('#contactConsultantModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget)
            var consultant = button.data('name')
            var consultant_id = button.data('id')
            var modal = $(this)
            modal.find('.name').text(consultant);
            modal.find('#consultant_id').val(consultant_id);
        });

        $('#otpModal').on('hidden.bs.modal', function(event) {
            $('#inquiry_id').val('');
            $('#digit1').val('');
            $('#digit2').val('');
            $('#digit3').val('');
            $('#digit4').val('');
            $('#digit5').val('');
            $('#digit6').val('');
        });


        $('#contactConsultantModal').on('hidden.bs.modal', function(event) {
            $('#frmContactConsultant').trigger('reset');
            $('#frmContactConsultant').find('.form-control').removeClass('invalid-feedback');
            $('#frmContactConsultant').find('.invalid-feedback').remove();
            $('#frmContactConsultant .btnSubmitInquiry').prop('disabled', false);
            $('#frmContactConsultant .btnSubmitInquiry').html('Submit');
        })

        $('#confirm_email').on('blur', function() {
            showLoader();
            axios.post('{{ route("consultant.verifiedInquirer") }}', {
                email: $(this).val()
            }).then(function(response) {

                if (response.data.id) {
                    $('#inquirer_id').val(response.data.id);
                    $('#name').val(response.data.name);
                    $('#company').val(response.data.company);
                    $('#position').val(response.data.position);
                    $('#phone1').val(response.data.phone1);
                    $('#phone2').val(response.data.phone2);
                    if (response.data.city != null) {
                        var city_data = {
                            id: response.data.city.id,
                            text: response.data.city.name
                        };
                        var cityOption = new Option(city_data.text, city_data.id, true, true);
                        $('#city_id').append(cityOption).trigger('change');
                    }
                } else {
                    $('#inquirer_id').val('');
                }

                hideLoder();
            });
        });

        $(".otp").bind("paste", function(e) {
            var pastedData = e.originalEvent.clipboardData.getData('text');
            var num_array = [];
            num_array = pastedData.toString(10).replace(/\D/g, '0').split('').map(
                Number); // creates array of numbers
            for (var a = 0; a <= 6; a++) { // Since I have 4 input boxes to fill in
                var pos = a + 1;
                event.preventDefault();
                $('#digit' + pos).val(num_array[a]);
            }
        });

        @if(!empty($userDetails && $userDetails->locations && $userDetails->locations->cities))
        var data = {
            id: "{{$userDetails->locations->cities->id}}",
            text: "{{$userDetails->locations->cities->name}}"
        };
        var newOption = new Option(data.text, data.id, true, true);
        $('#city_id').append(newOption).trigger('change');
        @endif

    })
</script>
@endpush

@push('pageModals')
<!-- The Modal -->
<div class="modal fade" id="contactConsultantModal" data-backdrop="static">
    <div class="modal-dialog modal-md">
        <div class="modal-content">

            <form id="frmContactConsultant" autocomplete="off">
                <input type="hidden" name="consultant_id" id="consultant_id" value="" />
                <input type="hidden" name="inquirer_id" id="inquirer_id" value="" />

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title"><span class="name"></span>
                        <p class="w-100 gray xs-font-size mt-1 mb-0 regular">The
                            details in this form are private and will only be visible to Empower team members; Empower
                            will never share your personal contact details with the Consultant</p>
                    </h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    <p class="m-0 small-font-size gray">Email Address</p>
                    <p class="mb-2 xs-font-size gray">This email address will be used for all official contact,
                        please make sure it is a genuine email address that you have instant access to</p>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label">Email Address</label>
                                <input type="email" name="email" id="email" class="form-control" placeholder="Email"
                                    value="@if($userDetails){{ $userDetails->email }} @endif" />
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label">Confirm Email Address</label>
                                <input type="email" name="confirm_email" id="confirm_email" class="form-control"
                                    placeholder="Confirm Email Address"
                                    value="@if($userDetails){{ $userDetails->email }} @endif" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group required">
                        <label class="control-label">Full Name</label>
                        <input type="text" name="name" id="name" class="form-control" placeholder="Full Name"
                            value="@if($userDetails){{ $userDetails->present()->name }} @endif" />
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label">Company/Organisation</label>
                                <input type="text" name="company" id="company" class="form-control"
                                    placeholder="Company/Organisation"
                                    value="@if($userDetails && $userDetails->latestExperience){{ $userDetails->latestExperience->commancompanies->name  }} @endif" />
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label">Position/Designation</label>
                                <input type="text" name="position" id="position" class="form-control"
                                    placeholder="Position/Designation"
                                    value="@if($userDetails && $userDetails->latestExperience){{ $userDetails->latestExperience->positiontitle  }} @endif" />
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label">Phone Number 1</label>
                                <input type="text" name="phone1" id="phone1" class="form-control"
                                    placeholder="Phone Number 1"
                                    value="@if($userDetails){{ $userDetails->mobile }} @endif" />
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label">Phone Number 2</label>
                                <input type="text" name="phone2" id="phone2" class="form-control"
                                    placeholder="Phone Number 2"
                                    value="@if($userDetails){{ $userDetails->secondary_mobile }} @endif" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group select btm-arrow required">
                                <label class="control-label">Location</label>
                                <select class="form-control select-two" id="city_id" name="city_id">
                                    <option value="">Select City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label">Expected Consulting Date</label>
                                <input type="text" name="expected_consultancy_date" id="expected_consultancy_date"
                                    class="form-control bg-white" placeholder="Expected Consulting Date" readonly />
                            </div>
                        </div>
                    </div>
                    <p class="mb-1 xs-font-size gray">Please provide some details about the project you are working
                        on and the reason why you would like to engage the Consultant.</p>
                    <p class="mb-2 xs-font-size gray">We advise you not to share your contact details in the text
                        below as this text will be shared with the Consultant</p>
                    <div class="form-group required">
                        <label class="control-label">Your Message</label>
                        <textarea name="message" id="message" class="form-control" rows="3"
                            placeholder="Placeholder"></textarea>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center border-0">
                    <button type="submit" class="btn btn-primary-em btnSubmitInquiry">Submit</button>
                </div>

            </form>

        </div>
    </div>
</div>

<!-- The Modal -->
<div class="modal fade" id="otpModal" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title body-font-size">Verify Email</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body text-center">
                <p class="gray small-font-size mb-4">Please verify your email by entering 6 digit code sent to your
                    email address</p>

                <form id="frmOtp">
                    <input type="hidden" name="inquiry_id" id="inquiry_id" value="" />
                    <div class="d-flex otp-wrapper justify-content-center">
                        <input type="text" name="digit1" id="digit1" placeholder="-" class="form-control otp"
                            maxlength="1" />
                        <input type="text" name="digit2" id="digit2" placeholder="-" class="form-control otp"
                            maxlength="1" />
                        <input type="text" name="digit3" id="digit3" placeholder="-" class="form-control otp"
                            maxlength="1" />
                        <input type="text" name="digit4" id="digit4" placeholder="-" class="form-control otp"
                            maxlength="1" />
                        <input type="text" name="digit5" id="digit5" placeholder="-" class="form-control otp"
                            maxlength="1" />
                        <input type="text" name="digit6" id="digit6" placeholder="-" class="form-control otp"
                            maxlength="1" />
                    </div>
                    <div class="invalid-feedback invalidOtp"></div>
                    <input type="submit" class="btn btn-primary-em my-4 btnVerify" value="Verify" />
                </form>

                <!--
                <p class="gray small-font-size m-0">Please check for the verification email in your spam folder to
                    incase you have not recieved it in inbox.</p>
                <p class="gray small-font-size">Still not received code? <a href="javascript:void(0)"
                        class="font-orange disable">Retry after 10 seconds</a></p>
                -->
            </div>
        </div>
    </div>
</div>

@endpush