@extends('landing.layouts.app')

@push('prepend-style')
    <link href="{{ asset('assets/libs/tobii/css/tobii.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    @include('landing.includes.navbar')

    <!-- Start Hero -->
    <section class="relative table w-full py-32 lg:py-36 bg-center bg-no-repeat bg-cover"
             style="background-image: url('{{ asset('assets/images/background.png') }}');">
        <div class="absolute inset-0 bg-black opacity-80"></div>
        <div class="container relative">
            <div class="grid grid-cols-1 pb-8 text-center mt-10">
                <h3 class="md:text-4xl text-3xl md:leading-normal leading-normal font-medium text-white">{!! __('landing.contact.title') !!}</h3>
            </div><!--end grid-->
        </div><!--end container-->

        <div class="absolute text-center z-10 bottom-5 start-0 end-0 mx-3">
            <ul class="tracking-[0.5px] mb-0 inline-block">
                <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white/50 hover:text-white">
                    <a href="{{ route('landing.index') }}">{{ __('landing.nav.home') }}</a></li>
                <li class="inline-block text-base text-white/50 mx-0.5 ltr:rotate-0 rtl:rotate-180"><i
                        class="uil uil-angle-right-b"></i></li>
                <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white"
                    aria-current="page">{{ __('landing.contact.slug') }}</li>
            </ul>
        </div>
    </section><!--end section-->
    <div class="relative">
        <div
            class="shape absolute sm:-bottom-px -bottom-[2px] start-0 end-0 overflow-hidden z-1 text-white dark:text-slate-900">
            <svg class="w-full h-auto scale-[2.0] origin-top" viewBox="0 0 2880 48" fill="none"
                 xmlns="http://www.w3.org/2000/svg">

                <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
            </svg>
        </div>
    </div>
    <!-- End Hero -->

    <section class="relative md:py-24 py-16">
        <div class="container relative">
            <div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-[30px]">
                <div class="text-center px-6 mt-6">
                    <div
                        class="size-20 bg-primary-600/5 text-primary-600 rounded-xl text-3xl flex align-middle justify-center items-center shadow-sm dark:shadow-gray-800 mx-auto">
                        <i class="uil uil-whatsapp"></i>
                    </div>

                    <div class="content mt-7">
                        <h5 class="title h5 text-xl font-medium">{{ __('landing.contact.whatsapp') }}</h5>
                        <p class="text-slate-400 mt-3">The phrasal sequence of the is now so that many campaign and
                            benefit</p>

                        <div class="mt-5">
                            <a href="tel:{{ $generalSettings->social_whatsapp }}"
                               class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-primary-600 hover:text-primary-600 after:bg-primary-600 duration-500 ease-in-out">
                                Chat with Us
                            </a>
                        </div>
                    </div>
                </div>

                <div class="text-center px-6 mt-6">
                    <div
                        class="size-20 bg-primary-600/5 text-primary-600 rounded-xl text-3xl flex align-middle justify-center items-center shadow-sm dark:shadow-gray-800 mx-auto">
                        <i class="uil uil-envelope"></i>
                    </div>

                    <div class="content mt-7">
                        <h5 class="title h5 text-xl font-medium">{{ __('landing.contact.email') }}</h5>
                        <p class="text-slate-400 mt-3">The phrasal sequence of the is now so that many campaign and
                            benefit</p>

                        <div class="mt-5">
                            <a href="mailto:{{ $generalSettings->social_email }}"
                               class="relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-primary-600 hover:text-primary-600 after:bg-primary-600 duration-500 ease-in-out">{{ $generalSettings->social_email }}</a>
                        </div>
                    </div>
                </div>

                <div class="text-center px-6 mt-6">
                    <div
                        class="size-20 bg-primary-600/5 text-primary-600 rounded-xl text-3xl flex align-middle justify-center items-center shadow-sm dark:shadow-gray-800 mx-auto">
                        <i class="uil uil-map-marker"></i>
                    </div>

                    <div class="content mt-7">
                        <h5 class="title h5 text-xl font-medium">{{ __('landing.contact.address') }}</h5>
                        <p class="text-slate-400 mt-3">{{ $generalSettings->social_address }}</p>

                        <div class="mt-5">
                            <a href="{{ $generalSettings->social_address_iframe }}"
                               data-type="iframe"
                               class="video-play-icon read-more lightbox relative inline-block font-semibold tracking-wide align-middle text-base text-center border-none after:content-[''] after:absolute after:h-px after:w-0 hover:after:w-full after:end-0 hover:after:end-auto after:bottom-0 after:start-0 after:duration-500 text-primary-600 hover:text-primary-600 after:bg-primary-600 duration-500 ease-in-out">View
                                on Google map</a>
                        </div>
                    </div>
                </div>
            </div><!--end grid-->
        </div><!--end container-->

        <div class="container relative md:mt-24 mt-16">
            <div class="grid md:grid-cols-12 grid-cols-1 items-center gap-[30px]">
                <div class="lg:col-span-7 md:col-span-6">
                    @include('landing.includes.illustrator_contact')
                </div>

                <div class="lg:col-span-5 md:col-span-6">
                    @if (session('success'))
                        <div class="relative px-4 py-2 rounded-md font-medium bg-success-600/10 border border-success-600/10 text-success-600 block lg:ms-5"><i class="uil uil-check-circle me-1"></i> {!! session('success') !!}</div>
                    @endif
                    <div class="lg:ms-5">
                        <div class="bg-white dark:bg-slate-900 rounded-md shadow dark:shadow-gray-800 p-6">
                            <h3 class="mb-6 text-2xl leading-normal font-medium">{{ __('landing.contact.title') }}
                                !</h3>

                            <form method="post" name="myForm" id="myForm" action="{{ route('landing.contact.send') }}">
                                @csrf
                                <p class="mb-0" id="error-msg"></p>
                                <div id="simple-msg"></div>
                                <div class="grid lg:grid-cols-12 lg:gap-6">
                                    <div class="lg:col-span-6 mb-5">
                                        <div class="text-start">
                                            <label for="name"
                                                   class="font-semibold">{{ __('landing.contact.form.yname') }}:</label>
                                            <div class="form-icon relative mt-2">
                                                <i data-feather="user" class="size-4 absolute top-3 start-4"></i>
                                                <input name="name" id="name" type="text"
                                                       class="form-input ps-11 w-full py-2 px-3 h-10 bg-transparent dark:bg-slate-900 dark:text-slate-200 rounded outline-none border border-gray-200 focus:border-primary-600 dark:border-gray-800 dark:focus:border-primary-600 focus:ring-0"
                                                       placeholder="{{ __('landing.contact.form.name') }} :" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="lg:col-span-6 mb-5">
                                        <div class="text-start">
                                            <label for="email"
                                                   class="font-semibold">{{ __('landing.contact.form.yemail') }}
                                                :</label>
                                            <div class="form-icon relative mt-2">
                                                <i data-feather="mail" class="size-4 absolute top-3 start-4"></i>
                                                <input name="email" id="email" type="email"
                                                       class="form-input ps-11 w-full py-2 px-3 h-10 bg-transparent dark:bg-slate-900 dark:text-slate-200 rounded outline-none border border-gray-200 focus:border-primary-600 dark:border-gray-800 dark:focus:border-primary-600 focus:ring-0"
                                                       placeholder="{{ __('landing.contact.form.email') }} :" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1">
                                    <div class="mb-5">
                                        <div class="text-start">
                                            <label for="subject"
                                                   class="font-semibold">{{ __('landing.contact.form.yquestion') }}
                                                :</label>
                                            <div class="form-icon relative mt-2">
                                                <i data-feather="book" class="size-4 absolute top-3 start-4"></i>
                                                <input name="subject" id="subject"
                                                       class="form-input ps-11 w-full py-2 px-3 h-10 bg-transparent dark:bg-slate-900 dark:text-slate-200 rounded outline-none border border-gray-200 focus:border-primary-600 dark:border-gray-800 dark:focus:border-primary-600 focus:ring-0"
                                                       placeholder="{{ __('landing.contact.form.subject') }} :">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-5">
                                        <div class="text-start">
                                            <label for="comments"
                                                   class="font-semibold">{{ __('landing.contact.form.ycomment') }}
                                                :</label>
                                            <div class="form-icon relative mt-2">
                                                <i data-feather="message-circle"
                                                   class="size-4 absolute top-3 start-4"></i>
                                                <textarea name="comments" id="comments"
                                                          class="form-input ps-11 w-full py-2 px-3 h-28 bg-transparent dark:bg-slate-900 dark:text-slate-200 rounded outline-none border border-gray-200 focus:border-primary-600 dark:border-gray-800 dark:focus:border-primary-600 focus:ring-0"
                                                          placeholder="{{ __('landing.contact.form.message') }} :" required></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" id="submit" name="send"
                                        class="py-2 px-5 font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-primary-600 hover:bg-primary-700 border-primary-600 hover:border-primary-700 text-white rounded-md justify-center flex items-center">{{ __('landing.contact.form.send') }}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--end container-->
    </section><!--end section-->
    <!-- End Section-->

    <div class="container-fluid relative">
        <div class="grid grid-cols-1">
            <div class="w-full leading-[0] border-0">
                <iframe
                    src="{{ $generalSettings->social_address_iframe }}"
                    style="border:0" class="w-full h-[500px]" allowfullscreen></iframe>
            </div>
        </div><!--end grid-->
    </div><!--end container-->

    @include('landing.includes.footer')
    @include('landing.includes.back_to_top')
    @include('landing.includes.switcher')
@endsection

@push('prepend-script')
    <script src="{{ asset('assets/libs/tobii/js/tobii.min.js') }}"></script>
    <script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
@endpush