@extends('frontend::config.master')
@section('title')

@section('style')
@endsection

@section('content')
    <main>
        <div class="bg-gradient-to-r  from-primary-focus py-6">
            <div class="container">
                <h2 class="home-title text-white">{{ !empty($main['name']) ? $main['name'] : '' }}</h2>
            </div>
        </div>
        <div class="container pt-8 lg:py-12">
            <div class="flex flex-col-reverse lg:flex-row  lg:relative">
                <div class=" w-full lg:w-10/12 shadow-md">
                    {!! !empty($contact['gmap']) ? $contact['gmap'] : '' !!}
                </div>
                <div
                    class="w-full mb-4 lg:mb-0 lg:w-1/3 p-6 bg-primary lg:absolute right-4 bottom-[-3rem] shadow-md rounded-lg">
                    @if (!empty($contact['email']))
                        <div class="flex items-center p-2">
                            <img class="w-10 h-10 mr-4" src="{{ Module::asset('frontend:img/icon/iconcontact-2.png') }}"
                                alt="icon">
                            <a class=" text-white" href="{{ url('mailto:"' . $contact['email'] . '"') }}">
                                <p>{{ $contact['email'] ?? '' }}</p>
                            </a>
                        </div>
                    @endif

                    @if (!empty($contact['tel']))
                        <div class="flex items-center p-2">
                            <img class="w-10 h-10 mr-4" src="{{ Module::asset('frontend:img/icon/iconcontact-3.png') }}"
                                alt="icon">
                            <a class=" text-white" href="{{ url('tel:"' . $contact['tel'] . '"') }}">
                                <p> {{ $contact['tel'] ?? '' }}</p>
                            </a>
                        </div>
                    @endif

                    @if (!empty($contact['office']))
                        <div class="flex items-start p-2">
                            <img class="w-10 h-10 mr-4" src="{{ Module::asset('frontend:img/icon/iconcontact-4.png') }}"
                                alt="icon">
                            <p class=" text-white">{!! $contact['office'] ?? '' !!}</p>
                        </div>
                    @endif

                </div>
            </div>
        </div>

        <section class="mt-8 lg:mt-12 bg-section-01-gradient">
            <div class="container">
                <div class="w-full sm:w-96 h-24 bg-primary flex items-center justify-center rounded-b-xl shadow-xl">
                    <h2 class="home-title text-white">@lang('frontend::lang.contact_msg_1')</h2>
                </div>
                <div class=" py-8 lg:py-12 lg:px-14 lg:w-3/4 mx-auto">
                    @include('frontend::components.form.FormBasic')
                </div>
            </div>
        </section>

        <x-frontend::modal.ModalBasic name="formcontact" class="w-11/12 max-w-lg ">
            @slot('content')
                <div class="p-8">
                    <img src="{{ Module::asset('frontend:img/icon/iconcheck.png') }}" alt="modal" class="w-10 mx-auto mb-4">
                    <h2 class=" text-center mb-4"><span class=" font-semibold mr-2">@lang('frontend::lang.contact_msg_10')</span>@lang('frontend::lang.contact_msg_11')
                    </h2>
                </div>
            @endslot
            </x-frontend>
    </main>
@endsection

@section('script')
    {{ module_vite('build-frontend', 'resources/assets/js/contactus.js') }}
    <!-- validator js -->
    <script src="{{ asset('assets/libs/validator/jquery.validate.min.js') }}"></script>
    <!-- Sweet Alerts js -->
    <script src="{{ asset('assets/libs/sweetalert2/sweetalert2.all.min.js') }}"></script>
@endsection