@extends('client.topCargo.layouts.layout')

@section('title', 'Contact us')

@section('content')

    <!--Page Header-->
    <div class="page-header title-area">
        <div class="header-title">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <h1 class="page-title">Contact</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="breadcrumb-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-sm-12 col-xs-12 site-breadcrumb">
                        <nav class="breadcrumb">
                            <a class="home" href="{{ route('home') }}"><span>Home</span></a>
                            <i class="fa fa-angle-right" aria-hidden="true"></i>
                            <span>Contact</span>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Page Header end-->


    <section class="contactpagesec secpadd">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="fh-section-title clearfix f25 text-left version-dark paddbtm40">
                        <h2>Contact Details</h2>
                    </div>
                    <p class="margbtm30">If you have any questions about what we offer for consumers or for business, you
                        can always email us or call us via the below details. We’ll reply within 24 hours.</p>
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="fh-contact-box type-address "><i class="flaticon-pin"></i>
                                <h4 class="box-title">Visit our office</h4>
                                <div class="desc">
                                    <p><?php echo SITEVARS->address; ?></p>
                                </div>
                            </div>
                            <div class="fh-contact-box type-email "><i class="flaticon-business"></i>
                                <h4 class="box-title">Mail Us at</h4>
                                <div class="desc">
                                    <p><?php echo SITEVARS->email; ?>
                                        <br>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="fh-contact-box type-phone "><i class="flaticon-phone-call "></i>
                                <h4 class="box-title">Call us on</h4>
                                <div class="desc">
                                    <p>Office: <?php echo SITEVARS->phone; ?> &amp; <?php echo SITEVARS->secondary_phone; ?>

                                </div>
                            </div>
                            <div class="fh-contact-box type-social "><i class="flaticon-share"></i>
                                <h4 class="box-title">We are social</h4>
                                <ul class="clearfix">
                                    <li class="facebook">
                                        <a href="<?php echo SITEVARS->fb; ?>" target="_blank">
                                            <i class="fa fa-facebook"></i>
                                        </a>
                                    </li>
                                    <li class="twitter">
                                        <a href="<?php echo SITEVARS->twitter; ?>" target="_blank">
                                            <i class="fa fa-twitter"></i>
                                        </a>
                                    </li>

                                    <li class="twitter">
                                        <a href="<?php echo SITEVARS->tiktok; ?>" target="_blank">
                                            <i class="fa fa-youtube"></i>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!--contact end-->

    <!--contact form -->
    <section class="contactpagform graybg secpadd">
        <div class="container">
            <div class="fh-section-title clearfix f25 text-center version-dark paddbtm40">
                <h2>Leave Your Message</h2>
            </div>
            <p class="paddbtm40 text-center">If you have any questions about the services we provide simply use the form
                below. We try and respond to all
                <br>queries and comments within 24 hours.
            </p>
            <form method="post" action="{{ route('send-email') }}" id="contact-enquiry" novalidate="novalidate">
                @csrf
                <input type="hidden" name="identifier" value="contact">
                <div class="fh-form fh-form-3">
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <p class="field">
                                <input name="name" placeholder="Your Name*" type="text">
                            </p>
                            <p class="field">
                                <input name="email" placeholder="Email Address*" type="email">
                            </p>
                            <p class="field">
                                <input name="phone" placeholder="Phone" type="text">
                            </p>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <p class="field single-field">
                                <textarea name="message" cols="40" rows="10" placeholder="Your Message..."></textarea>
                            </p>
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <p class="field submit">
                                <button class="fh-btn" type="submit">Submit</button>
                            </p>
                        </div>
                        <div id="loading" style="display:none"><img
                                src="{{ asset('topCargo/assets/images/ajax-loader.png') }}" alt="loading" /></div>
                        <div class="contact-form-message"></div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!--contact form  end -->

    <!--google map-->
    <iframe id="map-container" src="<?php echo SITEVARS->google_map; ?>" width="100%" height="500" style="border:0;" allowfullscreen=""
        loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    <!--google map end-->
    @push('js')
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function() {
                $('#contact-enquiry').submit(function(e) {
                    e.preventDefault();
                    var form = $(this);
                    var formData = form.serialize();
                    var url = form.attr('action');

                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: formData,
                        beforeSend: function() {
                            $('#loading').show();
                        },
                        success: function(response) {
                            if (response.success) {
                                $('.contact-form-message').html(
                                    '<div class="alert alert-success">' + response.success +
                                    '</div>');
                                form.trigger('reset');
                            } else {
                                $('.contact-form-message').html('<div class="alert alert-danger">' +
                                    response.error + '</div>');
                            }
                        },
                        error: function(xhr, status, error) {
                            var errorMessage = xhr.status + ': ' + xhr.statusText;
                            $('.contact-form-message').html(
                                '<div class="alert alert-danger">Error - ' + errorMessage +
                                '</div>');
                        },
                        complete: function() {
                            $('#loading').hide();
                        }
                    });
                });
            });
        </script>
    @endpush


    {{-- @push('js')
<script>
    $('#contact').on('submit',function(event){
        event.preventDefault();
        var form = $(this)[0];
        var url = $(this).attr('action');

        var formData = new FormData(form);
        $.ajax({
            url:url,
            method:'POST',
            data:formData,
            processData:false,
            contentType:false,
            dataType:'JSON',
            success: function(response){
                if(response.status == true){
                    form.reset();
                    Swal.fire({
                        position:"top-end",
                        icon:"success",
                        title:"Message have been deliverd",
                        showConfirmationButton:false,
                        timer:1500
                    });
                }
            },
            error:function(response){
                console.log('Error sending mail');
            }
        })
    })
</script>
@endpush --}}
@endsection