@extends('layouts.app')
@section('page_title', __('contact.title'))
@section('page_description', __('contact.description'))
@section('page_keywords', __('contact.keywords'))
@section('og_title', __('contact.title'))
@section('og_description', __('contact.description'))
@section('twitter_title', __('contact.title'))
@section('twitter_description', __('contact.description'))
@section('page_content')
    <div class="page-content bg-white">
        <div class="section-full content-inner contact-page-9">
            <div class="container">
                <div class="row pb-lg-5">
                    <div class="col-lg-4 col-md-12">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 m-b30">
                                <div class="icon-bx-wraper bx-style-1 p-a20 radius-sm">
                                    <div class="icon-content">
                                        <h5 class="dlab-tilte">
                                            <span class="icon-sm text-primary"><i class="ti-location-pin"></i></span>
                                            @lang('contact.add')
                                        </h5>
                                        <p>Rr:"Ismail Qemali" Pallati Samos Tower, kati 8 Ish-Bllok, Tirana, Albania</p>
                                        <h6 class="m-b15 text-black font-weight-400"><i class="ti-alarm-clock"></i> @lang('contact.hours')</h6>
                                        <p class="m-b0">@lang('contact.days') - 08:00 - 17:00</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-6 m-b30">
                                <div class="icon-bx-wraper bx-style-1 p-a20 radius-sm">
                                    <div class="icon-content">
                                        <h5 class="dlab-tilte">
                                            <span class="icon-sm text-primary"><i class="ti-email"></i></span>
                                            @lang('contact.email')
                                        </h5>
                                        <p class="m-b0"><a href="mailto:info@novamat.al">info@novamat.al</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-6 m-b30">
                                <div class="icon-bx-wraper bx-style-1 p-a20 radius-sm">
                                    <div class="icon-content">
                                        <h5 class="dlab-tilte">
                                            <span class="icon-sm text-primary"><i class="ti-mobile"></i></span>
                                            @lang('contact.phone')
                                        </h5>
                                        <p class="m-b0"><a href="tel:+355 44 505 180">+355 44 505 180</a></p>
                                        <p class="m-b0"><a href="tel:+355 69 408 4371">+355 69 408 4371</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-12 m-b30">
                        <form class="inquiry-form wow box-shadow bg-white fadeInUp contact-form" data-wow-delay="0s" id="contact-form" method="POST" role="form" action="{{ route('static.contact.post') }}" autocomplete="off">
                            <x-honeypot></x-honeypot>
                            @csrf
                            <h3 class="title-box font-weight-300 m-t0 m-b10">@lang('contact.form.title') <span class="bg-primary"></span></h3>
                            <p>@lang('contact.form.heading')</p>
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="ti-user text-primary"></i></span>
                                            <input name="name" id="name" type="text" class="form-control" placeholder="@lang('contact.form.name')">
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="ti-mobile text-primary"></i></span>
                                            <input name="phone" id="phone" type="tel" class="form-control" placeholder="@lang('contact.form.phone')">
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="ti-email text-primary"></i></span>
                                            <input name="email" id="email" type="email" class="form-control" placeholder="@lang('contact.form.email')" >
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="ti-agenda text-primary"></i></span>
                                            <textarea name="message" id="message" rows="4" class="form-control" placeholder="@lang('contact.form.message')"></textarea>
                                            <span class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <button name="submit" type="submit" value="Submit" class="contact-btn site-button button-md"> <span>@lang('contact.form.btn')</span> </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2996.4677857190704!2d19.815160715725497!3d41.320440308105056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x135031e08050d17d%3A0x9cc5aa7f18001dbf!2sNovamat%20Albania!5e0!3m2!1sen!2s!4v1629987039560!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            $('form.contact-form').submit(function (e) {
                e.preventDefault();
                let $form = $(this),
                    $btn = $form.find('.contact-btn'),
                    $spinner = $form.find('.fa-spin');

                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    data: new FormData($form[0]),
                    dataType: 'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function() {
                        $form.find('span.invalid-feedback').html('');
                        $form.find('.is-invalid').removeClass('is-invalid');
                        $btn.attr('disabled', true);
                        $spinner.show();
                    },
                    success: function(data){
                        $form[0].reset();
                        $spinner.hide();

                        if (data.success) {
                            $form.prepend('<div class="alert alert-success" role="alert">'+data.message+'</div>');
                        } else {
                            $form.prepend('<div class="alert alert-danger" role="alert">'+data.message+'</div>');
                        }

                        setTimeout(function () {
                            location.reload();
                        }, 5000);
                    },
                    error: function(data){
                        if(data.status === 422) {
                            $.each(data.responseJSON.errors, function(inputName, errorMessage){
                                let $input = $('[name=' + inputName + ']');
                                $input.addClass('is-invalid');
                                $input.siblings('span.invalid-feedback').text(errorMessage[0]);
                            });
                        }
                        $btn.attr('disabled', false);
                        $spinner.hide();
                    }
                });
            });
        });
    </script>
@endsection