@extends('frontend::layouts.master')
@section('content')
    @php
        $recaptchaSiteKey = $page_init['setting']['recapcha'] ?? '';
    @endphp
    <script type="text/javascript">
        var onloadCallback = function() {
            var container = document.getElementById('get_recaptcha');
            if (!container) {
                return;
            }
            grecaptcha.render(container, {
                'sitekey': '{{ $recaptchaSiteKey }}',
                'callback': function() {
                    var submitBtn = document.getElementById('form-submit');
                    if (submitBtn) {
                        submitBtn.disabled = false;
                    }
                }
            });
        };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>


    <x-frontend::herobanner type="contact" />

    {{-- Page Title --}}
    <x-frontend::breadcrumb :items="$breadcrumb" current="{{ end($breadcrumb)['name'] ?? '' }}" />

    <!-- Contact Section -->
    <section class="sect-contact">
        <div class="container">
            <div class="row">
                <!-- Company Information -->
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 cleft">
                    <div class="contact-info">
                        <h3 class="contact-title">@lang('frontend::text.information')</h3>
                        <div class="company-details">
                            @if (!empty($page_init['setting']['logo']['footer']))
                                <div class="company-logo">
                                    <img class="img-responsive" src="{{ $page_init['setting']['logo']['footer'] ?? '' }}" alt="Distributor Logo">
                                </div>
                            @endif

                            <h4 class="company-name mt-3 mb-3 ">{!! $contact['name'] ?? '' !!} </h4>
                        </div>

                        <div class="contact-details">
                            <div class="contact-item">
                                @if (!empty($contact['office']))
                                    <address>
                                        <i class="fa fa-map-marker"></i> {!! $contact['office'] !!}
                                    </address>
                                @endif

                                <ul class="list list-contact m-b-0">

                                    @if (!empty($contact['tel']))
                                        <li><i class="fa fa-phone"></i>
                                            <a href="tel:{{ $contact['tel'] }}"><strong>@lang('frontend::text.tel') :</strong>
                                                {{ $contact['tel'] }}</a>
                                        </li>
                                    @endif

                                    @if (!empty($contact['email']))
                                        <li><i class="fa fa-envelope"></i><a href="mailto:{{ $contact['email'] }}">{{ $contact['email'] }}</a></li>
                                    @endif

                                    {{-- <li><i class="fa fa-envelope"></i><a
                                            href="mailto:greenbiotreat@gmail.com">rewatprinting@hotmail.com</a> / <a
                                            href="mailto:greenbiotreat@gmail.com">saksit@rewat.in.th</a> </li> --}}
                                    @if (!empty($contact['work']))
                                        <li><i class="fa fa-clock"></i> {!! $contact['work'] !!}</li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                        @if (!empty($contact['social']))
                            <div class="social-links">
                                <h5>@lang('frontend::text.follow_us')</h5>
                                <div class="social-icons social-icons-colored social-icons-rounded m-t-20">
                                    <ul>
                                        @if (!empty($contact['social']['line']['url']))
                                            <li class="social-line">
                                                <a href="{{ $contact['social']['line']['url'] ?? '' }}">
                                                    <i class="fab fa-line"></i>
                                                </a>
                                            </li>
                                        @endif
                                        @if (!empty($contact['social']['facebook']['url']))
                                            <li class="social-facebook">
                                                <a href="{{ $contact['social']['facebook']['url'] }}">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                        @endif
                                        @if (!empty($contact['social']['youtube']['url']))
                                            <li class="social-youtube">
                                                <a href="{{ $contact['social']['youtube']['url'] }}"><i class="fab fa-youtube"></i></a>
                                            </li>
                                        @endif
                                        @if (!empty($contact['social']['instagram']['url']))
                                            <li class="social-instagram"><a href="{{ $contact['social']['instagram']['url'] }}"><i class="fab fa-instagram"></i></a></li>
                                        @endif
                                        @if (!empty($contact['social']['twitter']['url']))
                                            <li class="social-x"><a href="{{ $contact['social']['twitter']['url'] }}"><i class="fab fa-x-twitter"></i></a></li>
                                        @endif
                                        @if (!empty($contact['social']['tiktok']['url']))
                                            <li class="social-tiktok">
                                                <a href="{{ $contact['social']['tiktok']['url'] }}">
                                                    <i class="fab fa-tiktok"></i>
                                                </a>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 cright">
                    @if (!empty($contact['google_map']))
                        <div class="map-container">
                            <div class="map-wrapper">
                                {!! $contact['google_map'] ?? '' !!}
                            </div>
                        </div>
                    @endif
                </div>

            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 contact-form">
                    <div class="contact-form-card">
                        <h3 class="contact-form-card__title m-b-0">@lang('frontend::text.ask_for_more_information')</h3>
                        <p class="contact-form-card__desc">@lang('frontend::text.contact.form_description')</p>

                        <form class="contact-form-ui needs-validation widget-contact-form custom-js" id="contact-form" data-success-message="@lang('frontend::text.contact.success_message')" action="{{ url('/api/v1/contact/send') }}" method="POST" novalidate>
                            @csrf
                            <div class="contact-form-ui__grid">
                                <div class="contact-form-ui__field contact-form-ui__field--full">
                                    <label class="contact-form-ui__label" for="contact-subject">@lang('frontend::text.contact.subject_label')
                                        <span class="text-danger">*</span></label>
                                    @if (!empty($subjects))
                                        <select class="contact-form-ui__input" id="contact-subject" name="subject" required>
                                            <option value="" disabled selected>@lang('frontend::text.contact.subject_placeholder_select')</option>
                                            @foreach ($subjects as $subject)
                                                <option value="{{ $subject['id'] }}">{{ $subject['name'] }}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input class="contact-form-ui__input" id="contact-subject" name="subject" type="text" placeholder="@lang('frontend::text.contact.subject_placeholder_input')" required maxlength="255">
                                    @endif
                                    <div class="invalid-feedback">@lang('frontend::text.contact.subject_validation')</div>
                                </div>

                                <div class="contact-form-ui__field">
                                    <label class="contact-form-ui__label" for="contact-first-name">@lang('frontend::text.contact.first_name_label') <span class="text-danger">*</span></label>
                                    <input class="contact-form-ui__input" id="contact-first-name" name="first_name" type="text" placeholder="@lang('frontend::text.contact.first_name_placeholder')" required maxlength="255">
                                    <div class="invalid-feedback">@lang('frontend::text.contact.first_name_validation')</div>
                                </div>

                                <div class="contact-form-ui__field">
                                    <label class="contact-form-ui__label" for="contact-last-name">@lang('frontend::text.contact.last_name_label') <span class="text-danger">*</span></label>
                                    <input class="contact-form-ui__input" id="contact-last-name" name="last_name" type="text" placeholder="@lang('frontend::text.contact.last_name_placeholder')" required maxlength="255">
                                    <div class="invalid-feedback">@lang('frontend::text.contact.last_name_validation')</div>
                                </div>

                                <div class="contact-form-ui__field">
                                    <label class="contact-form-ui__label" for="contact-email">@lang('frontend::text.contact.email_label') <span class="text-danger">*</span></label>
                                    <input class="contact-form-ui__input" id="contact-email" name="email" type="email" placeholder="@lang('frontend::text.contact.email_placeholder')" required maxlength="255">
                                    <div class="invalid-feedback">@lang('frontend::text.contact.email_validation')</div>
                                </div>

                                <div class="contact-form-ui__field">
                                    <label class="contact-form-ui__label" for="contact-tel">@lang('frontend::text.contact.tel_label') <span class="text-danger">*</span></label>
                                    <input class="contact-form-ui__input" id="contact-tel" name="tel" type="tel" inputmode="numeric" pattern="[0-9]{1,20}" placeholder="@lang('frontend::text.contact.tel_placeholder')" required maxlength="20">
                                    <div class="invalid-feedback">@lang('frontend::text.contact.tel_validation')</div>
                                </div>

                                <div class="contact-form-ui__field contact-form-ui__field--full">
                                    <label class="contact-form-ui__label" for="contact-msg">@lang('frontend::text.contact.message_label') <span class="text-danger">*</span></label>
                                    <textarea class="contact-form-ui__input contact-form-ui__textarea" id="contact-msg" name="msg" rows="5" placeholder="@lang('frontend::text.contact.message_placeholder')" required maxlength="255"></textarea>
                                    <div class="invalid-feedback">@lang('frontend::text.contact.message_validation')</div>
                                </div>
                            </div>

                            <div class="contact-form-ui__check">
                                <input class="contact-form-ui__checkbox" id="contact-accept" name="accept" type="checkbox" value="1" required>
                                <label class="contact-form-ui__check-label" for="contact-accept">
                                    @lang('frontend::text.contact.privacy_accept_before')
                                    <a href="{{ $page_init['policy']['url'] ?? '' }}" target="_blank" rel="noopener">
                                        {{ $page_init['policy']['name'] ?? '' }}
                                    </a>
                                </label>
                                <div class="invalid-feedback">@lang('frontend::text.contact.privacy_validation')</div>
                            </div>

                            <div class="contact-form-ui__captcha">
                                <div id="get_recaptcha"></div>
                            </div>

                            <div class="contact-form-ui__actions">
                                <button class="contact-form-ui__submit" id="form-submit" type="submit" disabled>
                                    <span class="contact-form-ui__submit-text"><i class="fab fa-telegram-plane m-r-5"></i> @lang('frontend::text.contact.submit')</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var form = document.getElementById('contact-form');
            if (!form) {
                return;
            }
            var submitBtn = form.querySelector('#form-submit');
            var submitText = submitBtn ? submitBtn.querySelector('.contact-form-ui__submit-text') : null;
            var defaultLabel = submitText ? submitText.textContent : @json(__('frontend::text.contact.submit'));
            var telInput = form.querySelector('#contact-tel');
            if (telInput) {
                function enforceTelDigits() {
                    var digits = telInput.value.replace(/\D/g, '').slice(0, 20);
                    if (telInput.value !== digits) {
                        telInput.value = digits;
                    }
                }
                telInput.addEventListener('input', enforceTelDigits);
                telInput.addEventListener('paste', function(e) {
                    e.preventDefault();
                    var pasted = (e.clipboardData || window.clipboardData).getData('text') || '';
                    var start = telInput.selectionStart || 0;
                    var end = telInput.selectionEnd || 0;
                    telInput.value = (telInput.value.slice(0, start) + pasted + telInput.value.slice(end))
                        .replace(/\D/g, '')
                        .slice(0, 20);
                });
            }
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    return;
                }
                if (submitBtn) {
                    submitBtn.disabled = true;
                    if (submitText) {
                        submitText.textContent = @json(__('frontend::text.contact.sending'));
                    }
                }
                var formData = new FormData(form);
                var submitted = false;
                fetch(form.action, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(function(res) {
                        return res.json().then(function(data) {
                            return {
                                ok: res.ok,
                                data: data
                            };
                        });
                    })
                    .then(function(result) {
                        if (result.ok && result.data.code === 200) {
                            submitted = true;
                            if (typeof grecaptcha !== 'undefined') {
                                grecaptcha.reset();
                            }
                            var successMsg = form.getAttribute('data-success-message') ||
                                result.data.msg ||
                                @json(__('frontend::text.contact.success_message'));
                            if (typeof $.notify === 'function') {
                                $.notify({
                                    message: successMsg
                                }, {
                                    type: 'success',
                                    delay: 20000
                                });
                            } else {
                                alert(successMsg);
                            }
                            setTimeout(function() {
                                window.location.reload();
                            }, 500);
                        } else {
                            var errMsg = result.data.desc || result.data.msg ||
                                @json(__('frontend::text.contact.send_error'));
                            if (typeof $.notify === 'function') {
                                $.notify({
                                    message: errMsg
                                }, {
                                    type: 'danger',
                                    delay: 20000
                                });
                            } else {
                                alert(errMsg);
                            }
                        }
                    })
                    .catch(function() {
                        if (typeof $.notify === 'function') {
                            $.notify({
                                message: @json(__('frontend::text.contact.generic_error'))
                            }, {
                                type: 'danger',
                                delay: 20000
                            });
                        } else {
                            alert(@json(__('frontend::text.contact.generic_error')));
                        }
                    })
                    .finally(function() {
                        if (submitted) {
                            return;
                        }
                        if (submitBtn) {
                            submitBtn.disabled = false;
                            if (submitText) {
                                submitText.textContent = defaultLabel;
                            }
                        }
                    });
            });
        });
    </script>
@endsection