@extends('themes.frontend.layouts.app')
@section('wow') @stop
@section('nice-select') @endsection
@section('validate') @stop

@if (isset($dataArr['meta_title']))
@section('page-title'){{ $dataArr['meta_title'] }}@stop
@else
@section('page-title'){{ $dataArr['title'] }}@stop
@endif
@if (isset($dataArr['meta_key']))
@section('meta-keywords'){{ $dataArr['meta_key'] }}@stop
@endif
@if (isset($dataArr['meta_descp']))
@section('meta-description'){{ $dataArr['meta_descp'] }}@stop
@endif
@if (isset($dataArr['image_path']))
@section('meta-image'){{ $dataArr['image_path'] }}@stop
@endif
@if ($dataArr['full_url'])
@section('cur-url'){{ $dataArr['full_url'] }}@stop
@endif

@section('content')
<!--====== BANNER PART START ======-->
@if (isset($dataArr['image_path']) && $dataArr['image_path'])
<div class="headerwrapper">
    <div>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <x-img src="{{ $dataArr['image_path'] }}" class="w-100 slide-desktop" alt="{{ $dataArr['image_alt'] }}" title="{{ $dataArr['image_title'] }}" />
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<!--====== BANNER PART ENDS ======-->

<!--====== FIND SPACE PART START ======-->
<section class="contact-info-area">
    <div class="container">
        <div class="contact-info">
            <div class="row align-items-start">
                @if (isset($dataArr['custom_fields']['editor_4']))
                <div class="col-lg-4">
                    {!! $dataArr['custom_fields']['editor_4']['value'] !!}
                </div>
                @endif
                 <!--<div class="col-lg-4">
                 <div class="contact-right-items">
                                <div class="icon-items">
                                    <div class="icon">
                                        <img src="https://theeventrentalcompany.taswebsites.ca/storage/media/1722340741-icon-3.png" alt="img">
                                    </div>
                                    <div class="content">
                                        <p>Have Question?</p>
                                        <h6><a href="tel:+905-565-2958">905-565-2958</a></h6>
                                    </div>
                                </div>
                                <div class="icon-items">
                                    <div class="icon">
                                        <img src="https://theeventrentalcompany.taswebsites.ca/storage/media/1722340740-icon-2.png" alt="img">
                                    </div>
                                    <div class="content">
                                        <p>Write Email</p>
                                        <h6><a href="mailto:info@theeventrentalcompany.com" class="link">info@theeventrentalcompany.com</a></h6>
                                    </div>
                                </div>
                                <div class="icon-items">
                                    <div class="icon">
                                        <img src="https://theeventrentalcompany.taswebsites.ca/storage/media/1722340741-icon-1.png" alt="img">
                                    </div>
                                    <div class="content">
                                        <p>Visit Office</p>
                                        <h6>
                                        4626 Burgoyne St, Mississauga,<br> ON L4W 1G1
                                        </h6>
                                    </div>
                                </div>
                            </div>
</div>-->

                <div class="col-lg-8 write-massage-area animated wow fadeInRight">
                    <div class="write-massage-content contactus">
                        <div class="write-massage-input">
                            <form action="{{ route('web.contact.save') }}" name="contact_enq_form" id="contact_enq_form" method="post">
                                {{ csrf_field() }}
                                <x-form.field.hidden name="recaptcha_v3" id="recaptcha_v3" />
                                <x-form.field.hidden name="page_ref" id="page_ref" value="{{ url()->full() }}"/>
                                <div class="row">
                                    <x-form.group_lyt6 error="{{ $errors->first('name') }}">
                                        <x-form.field.text2 id="name" name="name" value="" placeholder="{{ __('enquiry.name_txt') }}" />
                                    </x-form.group_lyt6>
                                    <x-form.group_lyt6 error="{{ $errors->first('email') }}">
                                        <x-form.field.text2 type="email" id="email" name="email" value="" placeholder="{{ __('enquiry.email_txt') }}" />
                                    </x-form.group_lyt6>
                                    <x-form.group_lyt6 error="{{ $errors->first('mobile') }}">
                                        <x-form.field.text2 id="mobile" name="mobile" value="" placeholder="{{ __('enquiry.mobile_txt') }}" class="format_phone_number" />
                                    </x-form.group_lyt6>
                                    <x-form.group_lyt6 error="{{ $errors->first('service_type') }}">
                                        <select name="service_type" id="service_type">
                                            <option selected="" disabled="">--{{ __('enquiry.service_type_txt') }}--</option>
											@foreach(Terc::getEventTypeAssoc() as $eventType)
											<option value="{{ $eventType['title'] }}">{{ $eventType['title'] }}</option>
											@endforeach
                                        </select>
                                    </x-form.group_lyt6>
                                    <x-form.group_lyt12 error="{{ $errors->first('message') }}" inside_class="text-center">
                                        <x-form.field.textarea id="message" name="message" value="" placeholder="{{ __('enquiry.message_txt') }}" />
                                    </x-form.group_lyt12>
                                    <x-form.group_lyt12 error="{{ $errors->first('message') }}" inside_class="text-center">
                                        <x-form.field.button3 class="main-btn main-btn-2" type="button" id="send_contact_enq_form" name="send_contact_enq_form" text="{{ __('enquiry.send_txt') }}" />
                                    </x-form.group_lyt12>
                                </div>
                            </form>
                            <div id="msg_id"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== FIND SPACE PART ENDS ======-->

@if (isset($dataArr['custom_fields']['editor_5']))
<div class="map-area">
    {!! $dataArr['custom_fields']['editor_5']['value'] !!}
</div>
@endif
@stop

@push('scripts')
<script>
    // Form submit.
    $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

    $.validator.setDefaults({ ignore: [] }); 

        $("#contact_enq_form").validate({
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    mobile: {
                        required: false,
                        number: false
                    },
                    service_type: {
                        required: true,
                    },
                    message: {
                        required: true
                    }
                },
                messages: {
                    name: "{{ $defDataArr['web_lang']['jq_validate']['enter_a_txt'] . strtolower(__('enquiry.name_txt')) }}",
                    email: {
                        required: "{{ $defDataArr['web_lang']['jq_validate']['enter_an_txt'] . strtolower(__('enquiry.email_txt')) }}",
                    },
                    service_type: {
                        required: "{{ $defDataArr['web_lang']['jq_validate']['select_a_txt'] . strtolower(__('enquiry.service_type_txt')) }}",
                    },
                    mobile: {
                        required: "{{ $defDataArr['web_lang']['jq_validate']['enter_a_txt'] . strtolower(__('enquiry.mobile_txt')) }}",
                    },
                    message: "{{ $defDataArr['web_lang']['jq_validate']['enter_a_txt'] . strtolower(__('enquiry.message_txt')) }}"
                },
                errorPlacement: function(error, element) {
                    if (element.prop("type") === "select-one") {
                        $("div.nice-select").addClass('error'); // Adjust based on NiceSelect structure
                        error.insertAfter(element.next('.nice-select')); // Adjust based on NiceSelect structure
                    } else {
                        error.insertAfter(element);
                    }
                }
            }),
            $("#send_contact_enq_form").click(function(e) {
                e.preventDefault();
                grecaptcha.ready(function() {
                    grecaptcha.execute("{{ Config('commonconstants.recaptcha.site_key') }}", {
                        action: 'contact_form'
                    }).then(function(token) {
                        var a = $("#contact_enq_form");
                        if (1 == a.valid()) {
                            if (token) {
                                $("#recaptcha_v3").val(token);
                                var formData = new FormData();
                                formData.append('recaptcha_v3', $("#recaptcha_v3").val());
                                formData.append('page_ref', $("#page_ref").val());
                                formData.append('name', $("#name").val());
                                formData.append('email', $("#email").val());
                                formData.append('service_type', $("#service_type").val());
                                formData.append('mobile', $("#mobile").val());
                                formData.append('message', $("#message").val());
                                $.ajax({
                                    url: "{{ route('web.contact.save') }}",
                                    type: "post",
                                    data: formData,
                                    contentType: false,
                                    processData: false,
                                    dataType: 'json',
                                    beforeSend: function() {
                                        $('#send_contact_enq_form').prop('disabled', true);
                                        $("#send_contact_enq_form").text("{{ $defDataArr['web_lang']['processing_txt'] }}");
                                    },
                                    success: function(data) {
                                        // console.log(data);
                                        // alert(data['msg']);
                                        $('#send_contact_enq_form').prop('disabled', false);
                                        $("#send_contact_enq_form").text("{{ $defDataArr['web_lang']['send_txt'] }}");
                                        $("#msg_id").html(data['msg']);
                                        if (data['url'] != '') {
                                            window.location.href = data['url'];
                                        }
                                    },
                                    error: function(e) {
                                        // console.log(e);
                                        $("#msg_id").html('There is error while submit');
                                    }
                                });
                            }
                        }
                    });
                });
            });

            // Trigger validation when NiceSelect dropdown changes
            $('select').on('change', function() {
                $(this).valid(); // Trigger validation on the select element
                $("div.nice-select").removeClass('error'); // Adjust based on NiceSelect structure
            });
    });
</script>
@endpush