@extends('frontend::layouts.master')

@push('styles')
    <script type="text/javascript">
        var onloadCallback = function() {
            grecaptcha.render('get_recaptcha', {
                'sitekey': "{{ $page_init['setting']['recapcha'] ?? '' }}",
                'callback': function() {
                    $('#submit').removeAttr('disabled');
                }
            });
        };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
    <style>
        .form-invalid-message {
            color: rgb(239 68 68) !important;
            font-size: 11px !important;
            margin-top: 3px !important;
            padding-bottom: 0.25rem !important;
        }
    </style>
@endpush

@section('content')
    @if (!empty($header))
        <x-frontend::page-cover title="{{ $header['name'] ?? '' }}" subtitle="{{ $header['desc'] ?? '' }}" />
    @endif
    <section class="bg-med-gray py-16">
        <div class="container mx-auto px-4">
            <div class="mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-med-dark">{{ __('frontend::lang.label.headquarters') }}</h2>
                <div class="w-20 h-1 bg-med-primary mt-4 rounded-full"></div>
            </div>
            <div class="bg-med-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row">
                @if (!empty($page_init['contact']['google_map']))
                    <div class="w-full md:w-1/2 h-[300px] md:h-auto min-h-[400px]">
                        {!! $page_init['contact']['google_map'] !!}
                    </div>
                @endif
                <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                    <h3 class="text-2xl font-bold text-med-primary mb-8">{{ $page_init['contact']['name'] ?? '' }}</h3>
                    <div class="space-y-6">
                        @if (!empty($page_init['contact']['office']))
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-med-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fa-solid fa-location-dot text-med-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-med-dark text-lg">{{ __('frontend::lang.label.address') }}</h4>
                                    <p class="text-med-dark/70">
                                        {{ $page_init['contact']['office'] ?? '' }}
                                    </p>
                                </div>
                            </div>
                        @endif
                        @if (!empty($page_init['contact']['tel'][0]))
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-med-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fa-solid fa-phone text-med-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-med-dark text-lg">{{ __('frontend::lang.label.tel') }}</h4>
                                    @foreach ($page_init['contact']['tel'] as $item)
                                        <div>
                                            <a class="text-med-dark/70 hover:text-med-primary transition" href="tel:{{ $item ?? '' }}">
                                                {{ str_format($item ?? '', '-', [1, 3, 2, 4]) }}
                                            </a>
                                            @if (!$loop->last)
                                                ,
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                        @if (!empty($page_init['contact']['work']))
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-med-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fa-solid fa-clock text-med-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-med-dark text-lg">{{ __('frontend::lang.label.time') }}</h4>
                                    <ul class="text-med-dark/70">
                                        <li>{{ $page_init['contact']['work'] ?? '' }}</li>
                                    </ul>
                                </div>
                            </div>
                        @endif
                        @if (!empty($page_init['contact']['email'][0]))
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-med-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fa-solid fa-envelope text-med-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-med-dark text-lg">{{ __('frontend::lang.label.email') }}</h4>
                                    <div>
                                        @foreach ($page_init['contact']['email'] as $item)
                                            <div>
                                                <a class="text-med-dark/70 hover:text-med-primary transition" href="mailto:{{ $item ?? '' }}">
                                                    {{ $item ?? '' }}
                                                </a>
                                                @if (!$loop->last)
                                                    ,
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if (!empty($faqs['list'][0]))
        <section class="w-full bg-white py-16">
            <div class="max-w-3xl mx-auto px-4 sm:px-6">
                <div class="text-center mb-10">
                    <span class="text-med-primary font-semibold text-sm uppercase tracking-wider">{{ __('frontend::lang.label.faqs_desc') }}</span>
                    <h2 class="text-3xl font-bold text-med-dark mt-2">{{ __('frontend::lang.label.faqs') }}</h2>
                </div>
                <div class="space-y-4">
                    @foreach ($faqs['list'] ?? [] as $faq)
                        <x-frontend::faq-item question="{{ $faq['name'] ?? '' }}" answer="{{ $faq['desc'] ?? '' }}" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    <section class="bg-med-primary/20 py-16">
        <div class="container mx-auto px-4">
            <div class="bg-med-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row">
                <div class="w-full md:w-2/3 p-8 lg:p-12">
                    <h2 class="text-3xl font-bold text-med-primary mb-2">{{ __('frontend::lang.label.contact') }}</h2>
                    <p class="text-med-dark opacity-70 mb-8">{{ __('frontend::lang.label.contact_desc') }}</p>
                    <form id="contact_frm" method="POST" onsubmit="send_contact()">
                        <div class="mb-3">
                            <label class="block text-sm font-semibold mb-2" for="fullname">{{ __('frontend::lang.form.fullname') }}</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-med-secondary med-input-icon-wrapper">
                                    <i class="fa-solid fa-user"></i>
                                </span>
                                <input class="med-input med-input-icon" id="fullname" name="fullname" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.fullname'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.fullname')]) }}">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
                            <div>
                                <label class="block text-sm font-semibold mb-2" for="phone">{{ __('frontend::lang.form.phone') }}</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-med-secondary med-input-icon-wrapper">
                                        <i class="fa-solid fa-phone"></i>
                                    </span>
                                    <input class="med-input med-input-icon tel-number" id="phone" name="phone" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.phone'), 'max' => 20]) }}" type="tel" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.phone')]) }}">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold mb-2" for="email">{{ __('frontend::lang.form.email') }}</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-med-secondary med-input-icon-wrapper">
                                        <i class="fa-solid fa-envelope"></i>
                                    </span>
                                    <input class="med-input med-input-icon" id="email" name="email" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.email'), 'max' => 255]) }}" data-email="{{ __('frontend::lang.form.placeholder.email') }}" type="email" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.email')]) }}">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="block text-sm font-semibold mb-2" for="subject">{{ __('frontend::lang.form.subject') }}</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-med-secondary med-input-icon-wrapper">
                                    <i class="fa-solid fa-tag"></i>
                                </span>
                                <input class="med-input med-input-icon" id="subject" name="subject" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.subject'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.subject')]) }}">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="block text-sm font-semibold mb-2" for="message">{{ __('frontend::lang.form.msg') }}</label>
                            <textarea class="w-full p-4 rounded-lg border border-gray-300 focus:border-med-primary focus:ring-2 focus:ring-med-primary/20 outline-none transition duration-200 resize-none" id="message" name="message" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.msg'), 'max' => 500]) }}" rows="4" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.msg')]) }}"></textarea>
                        </div>
                        <div class="mb-3">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input class="checkbox-wrapper w-4 h-4 border border-gray-300 rounded focus:ring-med-primary accent-med-primary cursor-pointer" id="policy" name="policy" type="checkbox" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.policy')]) }}">
                                </div>
                                <div class="ml-3 text-sm">
                                    <label class="font-medium text-med-dark cursor-pointer" for="policy">
                                        {{ __('frontend::lang.form.policy') }}
                                        <a class="text-med-primary hover:underline decoration-med-primary" href="{{ $page_init['policy']['url'] ?? 'javascript:void(0)' }}" target="_blank">
                                            {{ $page_init['policy']['name'] ?? '' }}
                                        </a>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mb-8" id="get_recaptcha"></div>
                        <button class="block bg-med-primary text-white px-8 py-3 rounded-full font-semibold hover:bg-med-dark transition shadow-lg transform hover:-translate-y-1 text-center w-full disabled:opacity-50" id="submit" type="submit" disabled>
                            {{ __('frontend::lang.btn.send_message') }}
                            <i class="fa-solid fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
                <div class="w-full md:w-1/3 bg-med-primary/10 border-l border-med-gray flex flex-col items-center justify-center p-8 lg:p-12 relative">
                    <div class="absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-med-primary/10 rounded-full blur-2xl"></div>
                    <div class="absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-med-secondary/20 rounded-full blur-2xl"></div>
                    <div class="z-10 text-center">
                        <div class="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-med-primary text-med-white text-3xl shadow-lg">
                            <i class="fa-brands fa-line"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-med-primary mb-2">{{ __('frontend::lang.label.line') }}</h3>
                        <p class="text-med-dark opacity-75 mb-8 text-sm">{{ __('frontend::lang.label.line_desc') }}</p>
                        @if (!empty($page_init['contact']['image']))
                            <div class="bg-white p-4 rounded-xl shadow-lg inline-block transform hover:scale-105 transition-transform duration-300">
                                <img class="w-48 h-48" src="{{ $page_init['contact']['image'] ?? '' }}" alt="QR Code LINE">
                                <p class="mt-2 text-xs font-mono text-gray-400">{{ $page_init['contact']['social']['line']['name'] ?? '' }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/validator/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>

    {{ module_vite('build-frontend', 'resources/assets/js/contact.js') }}
@endpush