@extends('site.pages')

@section('title', $page_title)

@section('breadcrumb_content')
    <h1 class="mb-3">{{$page_title}}</h1>
    <nav aria-label="breadcrumb" class="d-block">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('home')}}">{{__('pages.home')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$page_title}}</li>
        </ul>
    </nav>
@endsection

@section('content')

    @include('site.partials.breadcrumb')
    <!-- contact starts -->
    <section class="contact-main pt-6 pb-60">
        <div class="container">
            <div class="contact-info-main mt-0">
                <div class="row">
                    <div class="col-lg-10 col-offset-lg-1 mx-auto">
                        <div class="contact-info bg-white">
                            <div class="contact-info-title text-center mb-4 px-5">
                                <h3 class="mb-1">{{__('pages.contact_us_title')}}</h3>
                            </div>
                            <div class="contact-info-content row mb-1">
                                <div class="col-lg-4 col-md-6 mb-4">
                                    <div class="info-item bg-lgrey px-4 py-5 border-all text-center rounded">
                                        <div class="info-icon mb-2">
                                            <i class="fa fa-map-marker-alt theme"></i>
                                        </div>
                                        <div class="info-content">
                                            <h3>{{__('pages.office_location')}}</h3>
                                            <p class="m-0">{{ $basic_info['companyInfo']['addr'] }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6 mb-4">
                                    <div class="info-item bg-lgrey px-4 py-5 border-all text-center rounded">
                                        <div class="info-icon mb-2">
                                            <i class="fa fa-phone theme"></i>
                                        </div>
                                        <div class="info-content">
                                            <h3>{{__('pages.phone_number')}}</h3>                                    
                                            <p class="m-0">{{ $basic_info['companyInfo']['phone'] }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-12 mb-4">
                                    <div class="info-item bg-lgrey px-4 py-5 border-all text-center rounded">
                                        <div class="info-icon mb-2">
                                            <i class="fa fa-envelope theme"></i>
                                        </div>
                                        <div class="info-content ps-4">
                                            <h3>{{__("pages.email")}}</h3>
                                            <p class="m-0">{{ $basic_info['companyInfo']['comp_email'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="map rounded overflow-hiddenb rounded mb-md-4">
                                            <div style="width: 100%">
                                                <iframe height="500" src="{{ $basic_info['companyInfo']['comp_location'] }}"></iframe>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row col-lg-6 ">
                                        <div class="alert alert-danger p-3" id="error_message"  style="display: none;" >
                                            <ul id="error_message_list">
                                            </ul>
                                        </div>
                                        <div class="contact-box d-flex align-items-center">
                                            <form method="post"  action="{{route('contact_us_store')}}" name="contactform2" id="contactform2">
                                                @csrf
                                                <div class="form-group mb-2">
                                                    <input type="text" name="first_name" class="form-control" id="first_name" placeholder="{{ trans('pages.first_name') }}" required>
                                                </div>
                                                <div class="form-group mb-2">
                                                    <input type="text" name="last_name" class="form-control" id="last_name" placeholder="{{ trans('pages.last_name') }}" required>
                                                </div>
                                                <div class="form-group mb-2">
                                                    <input type="email" name="email"  class="form-control" id="email" placeholder="{{ trans('pages.email') }}" required>
                                                </div>
                                                <div class="form-group mb-2">
                                                    <input type="text" name="phone" class="form-control" id="phone" placeholder="{{ trans('pages.phone_number') }}" required>
                                                </div>
                                                <div class="textarea mb-2">
                                                    <textarea id="comment"  placeholder="{{__('pages.message')}}" required></textarea>
                                                </div>
                                                <div class="comment-btn text-center">
                                                    <input type="submit" class="nir-btn" id="submit2" value="{{__('pages.send_message')}}">
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact Ends -->
@endsection

@push('js_scripts')
<script>
    $(document).ready(function(){
        // on submit
        $('#contactform2').submit(function(e) {
            e.preventDefault();
            $('#error_message').hide();
            // go to error message div

            // Prevent multiple form submissions
            if ($(this).data('submitted')) {
                return false;
            }

            // Validate form inputs
            var first_name = $('#first_name').val();
            var last_name = $('#last_name').val();
            var email = $('#email').val();
            var phone = $('#phone').val();
            var comment = $('#comment').val();

            if (
                !first_name ||
                !last_name ||
                !email ||
                !phone ||
                !comment
                    ) {
                $('#error_message_list').html('<li class="d-block">{{ __("pages.All fields are required.") }}</li>');
                $('#error_message').show();
                $('#error_message').get(0).scrollIntoView();
                return false;
            }

            // Serialize the form data
            var formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('first_name', first_name);
            formData.append('last_name', last_name);
            formData.append('email', email);
            formData.append('phone', phone);
            formData.append('comment', comment);
            // Set flag to prevent multiple form submissions
            $(this).data('submitted', true);

            // AJAX request
            $.ajax({
                url: "{{ route('contact_us_store') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType:  false,
                success: function(data) {
                    if(data.status == 'success'){
                        $('.contact-box').html('<h3 class="text-success text-center">{{ __("pages.Thank you for your inquiry. We will get back to you shortly") }}</h3>');
                        $('.contact-box').get(0).scrollIntoView();
                    }else{
                        $('#error_message_list').html('<li class="d-block">{{ __("pages.Something went wrong. Please try again.") }}</li>');
                        $('#error_message').show();
                        $('#error_message').get(0).scrollIntoView();
                    }
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseJSON);
                    var errors = xhr.responseJSON.errors;
                    var error_message = '';
                    var num = 1;
                    $.each(errors, function(key, value) {
                        error_message += '<li class="d-block"> ' + num + ' - ' + value + '</li>';
                        num++;
                    });
                    $('#error_message_list').html(error_message);
                    $('#error_message').show();
                    $('#error_message').get(0).scrollIntoView();
                },
                complete: function() {
                    // Reset flag to allow form submissions
                    $('#contactform2').data('submitted', false);
                }
            });
        });
    });
</script>
@endpush