@extends('reachassuree_agent_web/theme-3/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .form-control:focus {
        border-color: #25cdc7;
    }

    .quform-has-error input,
    .quform-has-error textarea,
    .quform-has-error select,
    .quform-has-error input[type=file],
    .quform-has-error .custom-file-label {
        border-color: #f5543f;
    }


    .quform-submit-inner .text-success {
        margin-top: 12px;
        font-weight: 700;
    }

    .work-area {
        padding:0px 0px 50px;
    }
</style>

<!-- PAGE TITLE ================================================== -->
<section class="page-title-section top-position1 bg-img cover-background left-overlay-dark" data-overlay-dark="6" data-background="{{ asset('assets-theme3/img/banner/contact-1.png')}}">
    <div class="container">
        <div class="page-title">
            <div class="row">
                <div class="col-md-12">
                    <h1>Contact Us</h1>
                </div>
                <div class="col-md-12">
                    <ul class="ps-0">
                        <li><a href="{{ route('home.page') }}" class="text-white">Home</a></li>
                        <li><a href="{{route('contact.us')}}" class="text-white">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="d-inline-block p-2 border border-width-2 border-white top-20 right-10 ani-move position-absolute rounded-circle z-index-1"></div>
    <div class="d-inline-block p-2 border border-width-2 border-white bottom-10 left-10 ani-left-right position-absolute z-index-1"></div>
    <img src="{{asset('assets-theme3/img/content/shape5.png')}}" class="position-absolute top-20 left-5 ani-top-bottom z-index-1" alt="...">
</section>

<!-- CONTACT FORM ================================================== -->
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-xl-4 mb-2-9 mb-lg-0">
                <div class="pe-lg-3 mt-n1-9">
                    <div class="card card-style4 mt-1-9">
                        <div class="card-body p-1-6 p-sm-1-9">
                            @php
                                $address = agentDetails(2);
                            @endphp

                            <div class="d-flex">
                                @if(count($address) > 0 && !empty($address['address']))
                                    <div class="flex-shrink-0 icon-box">
                                        <a href="https://maps.google.com/maps?q={{ $address['lat'] }},{{ $address['long'] }}" target="_blank">
                                            <i class="ti-location-pin text-primary z-index-9 display-8 position-relative"></i>
                                        </a>
                                        <div class="box-circle primary"></div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <a href="https://maps.google.com/maps?q={{ $address['lat'] }},{{ $address['long'] }}" target="_blank">
                                            <h4 class="h5">Location</h4>
                                            <span>{{$address['address']}}</span>
                                        </a>
                                    </div>
                                @else
                                    <div class="flex-shrink-0 icon-box">
                                        <a href="javascript:void(0);" class="text-white">
                                            <i class="ti-location-pin text-primary z-index-9 display-8 position-relative"></i>
                                        </a>
                                        <div class="box-circle primary"></div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <a href="javascript:void(0);" class="text-white">
                                            <h4 class="h5">Location</h4>
                                            <span>{{$address['address']}}</span>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card card-style4 mt-1-9">
                        <div class="card-body p-1-6 p-sm-1-9">
                            <div class="d-flex">
                                @if(agentDetails(1) != '')
                                    <div class="flex-shrink-0 icon-box">
                                        <a href="https://api.whatsapp.com/send?phone={{agentDetails(1)}}" target="_blank">
                                            <i class="ti-mobile text-primary z-index-9 display-8 position-relative"></i>
                                        </a>
                                        <div class="box-circle primary"></div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <a href="https://api.whatsapp.com/send?phone={{agentDetails(1)}}" target="_blank"><i class="flaticon-phone-call"></i>
                                            <h4 class="h5">Phone Number</h4>
                                            <span class="d-block">{{agentDetails(1)}}</span>
                                        </a>
                                    </div>
                                @else
                                    <div class="flex-shrink-0 icon-box">
                                        <a href="javascript:void(0);">
                                            <i class="ti-mobile text-primary z-index-9 display-8 position-relative"></i>
                                        </a>
                                        <div class="box-circle primary"></div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <a href="javascript:void(0);">
                                            <i class="flaticon-phone-call"></i>
                                            <h4 class="h5">Phone Number</h4>
                                            <span class="d-block">{{agentDetails(1)}}</span>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card card-style4 mt-1-9">
                        <div class="card-body p-1-6 p-sm-1-9">
                            <div class="d-flex">
                                @if(agentDetails(7) != '')
                                    <div class="flex-shrink-0 icon-box">
                                        <a href="mailto:{{agentDetails(7)}}" target="_blank">
                                            <i class="ti-email text-primary z-index-9 display-8 position-relative"></i>
                                        </a>
                                        <div class="box-circle primary"></div>
                                    </div>

                                    <div class="flex-grow-1 ms-3">
                                        <a href="mailto:{{agentDetails(7)}}" target="_blank">
                                            <h4 class="h5">Email Address</h4>
                                            <span class="d-block">{{agentDetails(7)}}</span>
                                        </a>
                                    </div>
                                @else
                                    <div class="flex-shrink-0 icon-box">
                                        <a href="javascript:void(0);">
                                            <i class="ti-email text-primary z-index-9 display-8 position-relative"></i>
                                        </a>
                                        <div class="box-circle primary"></div>
                                    </div>

                                    <div class="flex-grow-1 ms-3">
                                        <a href="javascript:void(0);">
                                            <h4 class="h5">Email Address</h4>
                                            <span class="d-block">{{agentDetails(7)}}</span>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 col-xl-8">
                <div class="ps-xl-3">
                    <h2 class="h3 mb-4">Quick Contact</h2>
                    <form class="quform" action="" id="FormContactUS" method="post" enctype="multipart/form-data" onclick="">
                        @csrf
                        <div class="quform-elements">
                            <div class="row">
                                <!-- Begin Text input element -->
                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label for="name">Your Name <span class="quform-required">*</span></label>
                                        <div class="quform-input">
                                            <input class="form-control" id="name" type="text" name="name" onkeypress="return validation(event);" placeholder="Your name here" />
                                            <div class="quform-errors-wrap">
                                                <div class="quform-errors quform-cf" style="display: block;">
                                                    <div class="quform-error" id="quformName"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Text input element -->

                                <!-- Begin Text input element -->
                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label for="email">Your Email <span class="quform-required">*</span></label>
                                        <div class="quform-input">
                                            <input class="form-control" id="email" type="text" name="email" onkeypress="return emailvalidation(event);" placeholder="Your email here" />
                                            <div class="quform-errors-wrap">
                                                <div class="quform-errors quform-cf" style="display: block;">
                                                    <div class="quform-error" id="quformEmail"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Text input element -->

                                <!-- Begin Text input element -->
                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label for="email">Your Subject <span class="quform-required">*</span></label>
                                        <div class="quform-input">
                                            <input class="form-control" id="subject" type="text" name="subject" onkeypress="return validation(event);" placeholder="Your subject here" />
                                            <div class="quform-errors-wrap">
                                                <div class="quform-errors quform-cf" style="display: block;">
                                                    <div class="quform-error" id="quformSubject"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Text input element -->

                                <!-- Begin Text input element -->
                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label for="email">Contact Number <span class="quform-required">*</span></label>
                                        <div class="quform-input">
                                            <input class="form-control" id="phone" type="text" name="phone" maxlength="10" onkeypress="return isNumber(event);" placeholder="Your phone here" />
                                            <div class="quform-errors-wrap">
                                                <div class="quform-errors quform-cf" style="display: block;">
                                                    <div class="quform-error" id="quformPhone"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Text input element -->

                                <!-- Begin Text input element -->
                                <div class="col-md-12">
                                    <div class="quform-element form-group">
                                        <label for="message">Message <span class="quform-required">*</span></label>
                                        <div class="quform-input">
                                            <textarea class="form-control h-auto" id="message" name="message" rows="3" placeholder="Tell us a few words"></textarea>
                                            <div class="quform-errors-wrap">
                                                <div class="quform-errors quform-cf" style="display: block;">
                                                    <div class="quform-error" id="quformMessage"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Text input element -->

                                <!-- Begin Submit button -->
                                <div class="col-md-12">
                                    <div class="quform-submit-inner">
                                        <button class="butn border-0" type="submit" id="btnsubmit">Send Message</button>
                                        <div class="text-success" id="msgSubmit"></div>
                                    </div>
                                </div>
                                <!-- End Submit button -->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="work-area">
    @if(isset($data['WorkArea']))
    <div class="container">
        <div class="text-center mb-2-9 wow fadeIn title-style1" data-wow-delay="100ms">
            <span>Work Area</span>
        </div>
        <div class="row mt-n2-9" style="justify-content: space-around;">
            @foreach($data['WorkArea'] as $key => $value)
            <div class="col-md-6 col-lg-3 mt-2-9 wow fadeIn" data-wow-delay="300ms">
                <div class="d-flex service-style2">
                    <div class="flex-shrink-0">
                        <div class="service-icon">
                            <img src="{{ asset('assets-theme3/img/icons/icon-16.png')}}" alt="...">
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-4">
                        <h3 class="h5 my-2">{{$value}}</h3>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</section>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets-theme3/quform/js/plugins.js') }}"></script>

<script type="text/javascript">
    var ajaxContactUS = '{{route("contactus.save")}}';

    $("#btnsubmit").click(function() {
        $('#quformName , #quformEmail , #quformSubject , #quformPhone , #quformMessage').text('');

        $.ajax({
            type: 'POST',
            data: $("#FormContactUS").serialize(),
            url: ajaxContactUS,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $('#msgSubmit').addClass('is-invalid');
                    $('.text-success').text('Thank you for Contact Us !!');
                    resetForm()
                } else {
                    Object.values(resultData['data']).forEach(array => {

                        Object.values(array).forEach(key1 => {
                            const keys = Object.keys(array);
                            keys.forEach(key => {
                                if (key == 'name') {
                                    $('#quformName').addClass('is-invalid').text('This field is required');
                                }
                                if (key == 'email') {
                                    $('#quformEmail').addClass('is-invalid').text(key1);
                                }
                                if (key == 'subject') {
                                    $('#quformSubject').addClass('is-invalid').text('This field is required');
                                }
                                if (key == 'phone') {
                                    $('#quformPhone').addClass('is-invalid').text('This field is required');
                                }
                                if (key == 'message') {
                                    $('#quformMessage').addClass('is-invalid').text('This field is required');
                                }
                            });
                        });
                    });
                }
            }
        });
    });

    function emailvalidation(evt) {
        var ch = String.fromCharCode(evt.which);
        if (!/^[a-zA-Z0-9._@-]+$/.test(ch)) {
            evt.preventDefault();
        }
    }

    function isNumber(evt) {
        var ch = String.fromCharCode(evt.which);
        if (!/[0-9]/.test(ch)) {
            evt.preventDefault();
        }
    }

    function validation(evt) {
        var ch = String.fromCharCode(evt.which);
        if (!/(^[a-zA-Z]+[a-zA-Z\\-]*$)/.test(ch)) {
            evt.preventDefault();
        }
    }

    function resetForm() {
        document.getElementById("FormContactUS").reset();
    }

    $('#phone').on('keyup', function(e) {
        var mobile = $(this).val();

        e.target.value = this.value.replace(/[^0-9\.]/g, '');

        if (e.target.value.length === 10) {
            $(this).removeClass("is-invalid");

            var ph = e.target.value.split("");
            ph.splice(3, 0, "-");
            ph.splice(7, 0, "-");
        }
    });
</script>
@endsection