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

@section('styles')
    <script type="text/javascript">
        var onloadCallback = function() {
            grecaptcha.render('get_recaptcha', {
                'sitekey': "{{ $page_init['setting']['recaptcha_site_key'] ?? '' }}",
                'callback': function() {
                    $('#submit').removeAttr('disabled');
                }
            });
        };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

    <style>
        .form-invalid-message {
            color: #ff5b5b !important;
            font-size: small !important;
        }
    </style>
@endsection

@section('content')

    @php
        $contact = $page_init['contact'] ?? [];
    @endphp
    {{-- <livewire:frontend::section.breadcrumb id_menu="7" /> --}}

    @if (!empty($contact['google_map']))
        <section class="sect-map">
            <div class="map-container">
                <div class="map-wrapper">
                    {!! $contact['google_map'] !!}
                </div>
            </div>
        </section>
    @endif

    <section class="sect-contact">
        <div class="container">
            <div class="row ctrl-box-contact">
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 p-0">
                    <div class="contact-info">
                        <h3 class="contact-title text-white">{{ __('frontend::lang.contact.title.info') }}</h3>
                        {{-- @if (!empty($page_init['setting']['logo']['header']) || !empty($contact['name']))
                            <div class="company-details">
                                @if (!empty($page_init['setting']['logo']['header']))
                                    <div class="company-logo">
                                        <img class="img-responsive" src="{{ $page_init['setting']['logo']['header'] }}" alt="Logo">
                                    </div>
                                @endif
                                @if (!empty($contact['name']))
                                    <h4 class="company-name">{{ $contact['name'] }}</h4>
                                @endif
                            </div>
                        @endif --}}
                        @if (!empty($contact['office']) || !empty($contact['tel']) || !empty($contact['email']))
                            <div class="contact-details">
                                @php
                                    $detail = [
                                        'office' => [
                                            'icon' => 'icon-map-pin2',
                                            'value' => $contact['office'] ?? '',
                                        ],
                                        'tel' => [
                                            'icon' => 'icon-phone1',
                                            'value' => $contact['tel'] ?? '',
                                        ],
                                        'mobile' => [
                                            'icon' => 'icon-smartphone',
                                            'value' => $contact['mobile'] ?? '',
                                        ],
                                        'email' => [
                                            'icon' => 'icon-mail',
                                            'value' => $contact['email'] ?? '',
                                        ],
                                    ];
                                @endphp

                                @foreach ($detail as $k => $v)
                                    @if (empty($contact[$k]))
                                        @continue
                                    @endif

                                    <div class="contact-item">
                                        <div class="contact-icon">
                                            <i class="{{ $v['icon'] }}"></i>
                                        </div>
                                        <div class="contact-text">
                                            <h5>{{ __("frontend::lang.contact.{$k}") }}</h5>
                                            <p>
                                                @if ($k == 'office')
                                                    {{ $v['value'] }}
                                                @elseif ($k == 'tel')
                                                    <a href="tel:{{ $v['value'] }}">{{ str_format($v['value'], '-', [2, 3, 4, 1]) }}</a>
                                                @elseif ($k == 'mobile')
                                                    <a href="tel:{{ $v['value'] }}">{{ str_format($v['value'], '-', [2, 3, 4, 1]) }}</a>
                                                @elseif ($k == 'email')
                                                    <a href="mailto:{{ $v['value'] }}">{{ $v['value'] }}</a>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 p-0">
                    <div class="contact-form-container">
                        <h3 class="contact-title">{{ __('frontend::lang.contact.title.contact') }}</h3>
                        <p class="contact-subtitle">{{ __('frontend::lang.contact.title.contact_desc') }}</p>
                        <form class="contact-form" id="contact_frm" method="POST" onsubmit="send_contact()">
                            <div class="form-group">
                                <label for="name">{{ __('frontend::lang.contact.form.fullName') }} *</label>
                                <input class="form-control" id="name" name="name" data-placeholder="{{ __('frontend::lang.contact.validate.name') }}" data-max="{{ __('frontend::lang.contact.validate.name_max') }}" type="text" required>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group">
                                        <label for="email">{{ __('frontend::lang.contact.form.email') }} *</label>
                                        <input class="form-control" id="email" name="email" data-placeholder="{{ __('frontend::lang.contact.validate.email') }}" data-max="{{ __('frontend::lang.contact.validate.email_max') }}" data-email="{{ __('frontend::lang.contact.validate.email_email') }}" type="email" required>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group">
                                        <label for="tel">{{ __('frontend::lang.contact.form.phone') }} *</label>
                                        <input class="form-control tel-number" id="tel" name="tel" data-placeholder="{{ __('frontend::lang.contact.validate.tel') }}" data-max="{{ __('frontend::lang.contact.validate.tel_max') }}" type="tel" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="subject">{{ __('frontend::lang.contact.form.subject') }} *</label>
                                <input class="form-control" id="subject" name="subject" data-placeholder="{{ __('frontend::lang.contact.validate.subject') }}" data-max="{{ __('frontend::lang.contact.validate.subject_max') }}" type="text" required>
                            </div>
                            <div class="form-group">
                                <label for="msg">{{ __('frontend::lang.contact.form.message') }} *</label>
                                <textarea class="form-control" id="msg" name="msg" data-placeholder="{{ __('frontend::lang.contact.validate.message') }}" data-max="{{ __('frontend::lang.contact.validate.message_max') }}" rows="6" placeholder="{{ __('frontend::lang.contact.form.message_placeholder') }}" required></textarea>
                            </div>
                            <div class="form-group">
                                <div class="checkbox-group">
                                    <input id="policy" name="policy" type="checkbox" required>
                                    <label for="policy">
                                        {{ __('frontend::lang.contact.form.privacy_policy') }}
                                        <a class="policy-link" href="{{ $page_init['policy']['url'] ?? 'javascript:void(0)' }}" target="_blank">
                                            {{ $page_init['policy']['name'] ?? '' }}
                                        </a>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="recaptcha-container">
                                    <div class="g-recaptcha" id="get_recaptcha"></div>
                                    <p class="recaptcha-note">{{ __('frontend::lang.contact.form.recaptcha') }}</p>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button class="btn btn-submit" id="submit" type="submit" disabled>
                                    <i class="icon-send1"></i>
                                    {{ __('frontend::lang.btn.send') }}
                                </button>
                                <button class="btn btn-reset" type="reset">
                                    <i class="icon-refresh1"></i>
                                    {{ __('frontend::lang.btn.clear') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    {{-- <section class="sect-contact">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="contact-info">
                            <h3 class="contact-title">{{ __('frontend::lang.contact.title.info') }}</h3>
                            @if (!empty($page_init['setting']['logo']['header']) || !empty($contact['name']))
    <div class="company-details">
                                    @if (!empty($page_init['setting']['logo']['header']))
    <div class="company-logo">
                                            <img class="img-responsive" src="{{ $page_init['setting']['logo']['header'] }}" alt="Logo">
                                        </div>
    @endif
                                    @if (!empty($contact['name']))
    <h4 class="company-name">{{ $contact['name'] }}</h4>
    @endif
                                </div>
    @endif
                            @if (!empty($contact['office']) || !empty($contact['tel']) || !empty($contact['email']))
    <div class="contact-details">
                                    @php
                                        $detail = [
                                            'office' => [
                                                'icon' => 'icon-map-pin2',
                                                'value' => $contact['office'] ?? '',
                                            ],
                                            'tel' => [
                                                'icon' => 'icon-phone1',
                                                'value' => $contact['tel'] ?? '',
                                            ],
                                            'email' => [
                                                'icon' => 'icon-mail',
                                                'value' => $contact['email'] ?? '',
                                            ],
                                            'mobile' => [
                                                'icon' => 'icon-smartphone',
                                                'value' => $contact['mobile'] ?? '',
                                            ],
                                        ];
                                    @endphp
                                    @foreach ($detail as $k => $v)
    @if (empty($contact[$k]))
    @continue
    @endif

                                        <div class="contact-item">
                                            <div class="contact-icon">
                                                <i class="{{ $v['icon'] }}"></i>
                                            </div>
                                            <div class="contact-text">
                                                <h5>{{ __("frontend::lang.contact.{$k}") }}</h5>
                                                <p>
                                                    @if ($k == 'office')
    {{ $v['value'] }}
@elseif ($k == 'tel')
    <a href="tel:{{ $v['value'] }}">{{ str_format($v['value'], '-', [2, 3, 4, 1]) }}</a>
@elseif ($k == 'mobile')
    <a href="tel:{{ $v['value'] }}">0969829656</a>
@elseif ($k == 'email')
    <a href="mailto:{{ $v['value'] }}">{{ $v['value'] }}</a>
    @endif
                                                </p>
                                            </div>
                                        </div>
    @endforeach
                                </div>
    @endif
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                        <div class="contact-form-container">
                            <h3 class="contact-title">{{ __('frontend::lang.contact.title.contact') }}</h3>
                            <p class="contact-subtitle">{{ __('frontend::lang.contact.title.contact_desc') }}</p>
                            <form class="contact-form" id="contact_frm" method="POST" onsubmit="send_contact()">
                                <div class="form-group">
                                    <label for="name">{{ __('frontend::lang.contact.form.fullName') }} *</label>
                                    <input class="form-control" id="name" name="name" data-placeholder="{{ __('frontend::lang.contact.validate.name') }}" data-max="{{ __('frontend::lang.contact.validate.name_max') }}" type="text" required>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group">
                                            <label for="email">{{ __('frontend::lang.contact.form.email') }} *</label>
                                            <input class="form-control" id="email" name="email" data-placeholder="{{ __('frontend::lang.contact.validate.email') }}" data-max="{{ __('frontend::lang.contact.validate.email_max') }}" data-email="{{ __('frontend::lang.contact.validate.email_email') }}" type="email" required>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group">
                                            <label for="tel">{{ __('frontend::lang.contact.form.phone') }} *</label>
                                            <input class="form-control tel-number" id="tel" name="tel" data-placeholder="{{ __('frontend::lang.contact.validate.tel') }}" data-max="{{ __('frontend::lang.contact.validate.tel_max') }}" type="tel" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="subject">{{ __('frontend::lang.contact.form.subject') }} *</label>
                                    <input class="form-control" id="subject" name="subject" data-placeholder="{{ __('frontend::lang.contact.validate.subject') }}" data-max="{{ __('frontend::lang.contact.validate.subject_max') }}" type="text" required>
                                </div>
                                <div class="form-group">
                                    <label for="msg">{{ __('frontend::lang.contact.form.message') }} *</label>
                                    <textarea class="form-control" id="msg" name="msg" data-placeholder="{{ __('frontend::lang.contact.validate.message') }}" data-max="{{ __('frontend::lang.contact.validate.message_max') }}" rows="6" placeholder="{{ __('frontend::lang.contact.form.message_placeholder') }}" required></textarea>
                                </div>
                                <div class="form-group">
                                    <div class="checkbox-group">
                                        <input id="policy" name="policy" type="checkbox" required>
                                        <label for="policy">
                                            {{ __('frontend::lang.contact.form.privacy_policy') }}
                                            <a class="policy-link" href="{{ $page_init['policy']['url'] ?? 'javascript:void(0)' }}" target="_blank">
                                                {{ $page_init['policy']['name'] ?? '' }}
                                            </a>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="recaptcha-container">
                                        <div class="g-recaptcha" id="get_recaptcha"></div>
                                        <p class="recaptcha-note">{{ __('frontend::lang.contact.form.recaptcha') }}</p>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button class="btn btn-submit" id="submit" type="submit" disabled>
                                        <i class="icon-send1"></i>
                                        {{ __('frontend::lang.btn.send') }}
                                    </button>
                                    <button class="btn btn-reset" type="reset">
                                        <i class="icon-refresh1"></i>
                                        {{ __('frontend::lang.btn.clear') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}
@endsection

@section('scripts')
    <script src="{{ asset('assets/libs/validator/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/libs/sweetalert2/sweetalert2.all.min.js') }}"></script>

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