@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')
    @php
        $breadcrumbArray = [['name' => $link_index['name'] ?? '', 'url' => $link_index['url'] ?? ''], ['name' => $link_contact['name'] ?? '', 'url' => 'javascript:void(0);']];
    @endphp
    <x-frontend::section.banner name="{{ $link_contact['name'] ?? '' }}" image="{{ $link_contact['image'] ?? '' }}" :breadcrumbArray=$breadcrumbArray />

    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mb-4">
                    <div class="contact-box p-4">
                        <h4 class="htitle border-bottom m-b-20">{{ __('frontend::lang.page.contact.title_form') }}</h4>
                        <form id="contact_frm" method="POST" onsubmit="send_contact();">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="company">{{ __('frontend::lang.page.contact.form.company') }}</label>
                                    <input class="form-control" id="company" name="company" data-max="{{ __('frontend::lang.page.contact.form.placeholder.max', ['label' => __('frontend::lang.page.contact.form.company'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.contact.form.placeholder.input', ['label' => __('frontend::lang.page.contact.form.company')]) }}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="first_name">{{ __('frontend::lang.page.contact.form.first_name') }}&nbsp;<span class="text-danger">*</span></label>
                                    <input class="form-control" id="first_name" name="first_name" data-max="{{ __('frontend::lang.page.contact.form.placeholder.max', ['label' => __('frontend::lang.page.contact.form.first_name'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.contact.form.placeholder.input', ['label' => __('frontend::lang.page.contact.form.first_name')]) }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="last_name">{{ __('frontend::lang.page.contact.form.last_name') }}&nbsp;<span class="text-danger">*</span></label>
                                    <input class="form-control" id="last_name" name="last_name" data-max="{{ __('frontend::lang.page.contact.form.placeholder.max', ['label' => __('frontend::lang.page.contact.form.last_name'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.contact.form.placeholder.input', ['label' => __('frontend::lang.page.contact.form.last_name')]) }}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="email">{{ __('frontend::lang.page.contact.form.email') }}&nbsp;<span class="text-danger">*</span></label>
                                    <input class="form-control" id="email" name="email" data-max="{{ __('frontend::lang.page.contact.form.placeholder.max', ['label' => __('frontend::lang.page.contact.form.email'), 'max' => 255]) }}" data-email="{{ __('frontend::lang.page.contact.form.placeholder.email') }}" type="email" placeholder="{{ __('frontend::lang.page.contact.form.placeholder.input', ['label' => __('frontend::lang.page.contact.form.email')]) }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="tel">{{ __('frontend::lang.page.contact.form.tel') }}&nbsp;<span class="text-danger">*</span></label>
                                    <input class="form-control tel-number" id="tel" name="tel" data-max="{{ __('frontend::lang.page.contact.form.placeholder.max', ['label' => __('frontend::lang.page.contact.form.tel'), 'max' => 20]) }}" type="text" placeholder="{{ __('frontend::lang.page.contact.form.placeholder.input', ['label' => __('frontend::lang.page.contact.form.tel')]) }}">
                                </div>
                            </div>
                            <div class="mb-4">
                                <label for="information">{{ __('frontend::lang.page.contact.form.information') }}</label>
                                <textarea class="form-control" id="information" name="msg" rows="4" placeholder="{{ __('frontend::lang.page.contact.form.placeholder.input', ['label' => __('frontend::lang.page.contact.form.information')]) }}"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="contact_to">{{ __('frontend::lang.page.contact.form.contact_to') }}&nbsp;<span class="text-danger">*</span></label>
                                <select class="form-control" id="contact_to" name="subject" placeholder="{{ __('frontend::lang.page.contact.form.placeholder.select', ['label' => __('frontend::lang.page.contact.form.contact_to')]) }}">
                                    <option value="">{{ __('frontend::lang.page.contact.form.placeholder.select', ['label' => __('frontend::lang.page.contact.form.contact_to')]) }}</option>
                                    @foreach ($subjects as $subject)
                                        <option value="{{ $subject['id'] }}">{{ $subject['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-check mb-4">
                                <input class="form-check-input" id="policy" name="policy" type="checkbox" placeholder="{{ __('frontend::lang.page.contact.form.placeholder.input', ['label' => __('frontend::lang.page.contact.form.policy')]) }}">
                                <label class="form-check-label" for="policy">
                                    {{ __('frontend::lang.page.contact.form.policy') }}
                                    <a class="m-l-5" href="{{ $page_init['policy']['url'] ?? 'javascript:void(0)' }}" target="_blank">
                                        {{ $page_init['policy']['name'] ?? '' }}
                                    </a>
                                </label>
                            </div>
                            <div class="mb-4" id="get_recaptcha"></div>
                            <button class="btn btn-dark btn-block w-100" id="submit" type="submit" disabled>
                                <i class="icon-mail me-2"></i>
                                {{ __('frontend::lang.btn.send_message') }}
                            </button>
                        </form>
                    </div>
                </div>
                <div class="col-lg-6">
                    @php
                        $contact = $page_init['contact'] ?? [];
                    @endphp
                    <div class="card-branch">
                        <div class="contact-info">
                            <div class="rowx">
                                <h4 class="htitle border-bottom m-b-20">
                                    {{ $contact['name'] ?? '' }}
                                    @if (!empty($contact['google_map_link']))
                                        <a class="text-link" href="{{ $contact['google_map_link'] ?? '' }}" target="_blank">
                                            {{ __('frontend::lang.page.contact.google_map') }}
                                            <i class="icon-arrow-up-right"></i>
                                        </a>
                                    @endif
                                </h4>
                                @if (!empty($contact['office']) || !empty($contact['tel']) || !empty($contact['tel']) || !empty($contact['email']))
                                    <ul class="list list-contact p-l-0">
                                        @if (!empty($contact['office']))
                                            <li>
                                                <h5 class="m-b-0">{{ __('frontend::lang.page.contact.label.address') }}:</h5>
                                                {{ $contact['office'] ?? '' }}
                                            </li>
                                        @endif
                                        @if (!empty($contact['tel']))
                                            <li>
                                                <h5 class="m-b-0">{{ __('frontend::lang.page.contact.label.tel') }}:</h5>
                                                <a href="tel:{{ $contact['tel'] ?? '' }}">{{ $contact['tel'] ?? '' }}</a>
                                            </li>
                                        @endif
                                        @if (!empty($contact['tel']))
                                            <li>
                                                <h5 class="m-b-0">{{ __('frontend::lang.page.contact.label.tel') }}:</h5>
                                                <a href="tel:{{ $contact['tel'] ?? '' }}">{{ $contact['tel'] ?? '' }}</a>
                                            </li>
                                        @endif
                                        @if (!empty($contact['email']))
                                            <li>
                                                <h5 class="m-b-0">{{ __('frontend::lang.page.contact.label.email') }}:</h5>
                                                <a href="mailto:{{ $contact['email'] ?? '' }}">{{ $contact['email'] ?? '' }}</a>
                                            </li>
                                        @endif
                                    </ul>
                                @endif
                            </div>
                        </div>
                        @if (!empty($contact['google_map']))
                            <div class="map-wrapper">
                                {!! $contact['google_map'] !!}
                            </div>
                        @endif
                    </div>

                    @if (!empty($branches['list'][0]))
                        @foreach ($branches['list'] as $branch)
                            <div class="card-branch">
                                <div class="contact-info">
                                    <div class="rowx">
                                        <h4 class="htitle border-bottom m-b-20">
                                            {{ $branch['name'] ?? '' }}
                                            @if (!empty($branch['google_map_link']))
                                                <a class="text-link" href="{{ $branch['google_map_link'] ?? '' }}" target="_blank">
                                                    {{ __('frontend::lang.page.contact.google_map') }}
                                                    <i class="icon-arrow-up-right"></i>
                                                </a>
                                            @endif
                                        </h4>
                                        @if (!empty($branch['office']) || !empty($branch['tel_numbers']) || !empty($branch['email']))
                                            <ul class="list list-contact p-l-0">
                                                <li>
                                                    <h5 class="m-b-0">{{ __('frontend::lang.page.contact.label.address') }}:</h5>
                                                    {{ $branch['office'] ?? '' }}
                                                </li>
                                                @if (!empty($branch['tel_numbers']))
                                                    @foreach ($branch['tel_numbers'] as $tel)
                                                        <li>
                                                            <h5 class="m-b-0">{{ __('frontend::lang.page.contact.label.tel') }}:</h5>
                                                            <a href="tel:{{ $tel ?? '' }}">{{ $tel ?? '' }}</a>
                                                        </li>
                                                    @endforeach
                                                @endif
                                                @if (!empty($branch['email']))
                                                    <li>
                                                        <h5 class="m-b-0">{{ __('frontend::lang.page.contact.label.email') }}:</h5>
                                                        <a href="mailto:{{ $branch['email'] ?? '' }}">{{ $branch['email'] ?? '' }}</a>
                                                    </li>
                                                @endif
                                            </ul>
                                        @endif
                                    </div>
                                </div>
                                @if (!empty($branch['google_map']))
                                    <div class="map-wrapper">
                                        {!! $branch['google_map'] !!}
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    @endif
                </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