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

@section('style')
@endsection

@section('content')
    <main>
        @empty(!$contacts['google_map'])
            <div class="map-iframe"><iframe src="{{ $contacts['google_map'] }}" width="600" height="500" style="border:0;"
                    allowfullscreen="" loading="lazy"></iframe></div>
        @endempty
        <div class="py-8 xl:py-16 relative bg-gray-darkest bg-gray-img"
            style="background-image:url({{ Module::asset('frontend:img/contact-bg.svg') }})">
            <div class="the-container relative z-10">
                <!-- คลาส mobile-dc จะมีเฉพาะใน loop รองสุดท้าย-->
                <div class="brcrmb">
                    <div class="brcrmb-wrrp">
                        <a class="mobile-dc chv"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 chv"
                                viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                    clip-rule="evenodd" />
                            </svg></a>
                        <a class="mobile-dc" href="{{ mwz_route('frontend.index') }}">{{ __('frontend.home') }}</a>
                    </div>
                    <div class="brcrmb-wrrp active">
                        <div class="tmx-2"><span class="slh">/ </span>
                        </div>
                        <a>{{ __('frontend.contact') }}</a>
                    </div>
                </div>
                <div class="cont-conte md:space-x-6">
                    <div class="py-8 space-y-6">
                        <div class="space-y-2">
                            <p class="font-bold text-white">{{ __('frontend.enquiry_form') }}</p>
                            <p class="text-3xl font-bold text-2nd uppercase">{{ __('frontend.contact_us') }}</p>
                            <p class="text-white">
                                {{ !empty($contacts['description']) ? $contacts['description'] : '' }}
                            </p>
                        </div>
                        <div class="space-y-2">
                            @if (!empty($pageInit['websetting']['company_name']))
                                <p class="text-xl font-bold text-2nd uppercase">
                                    {{ !empty($pageInit['websetting']['company_name']) ? $pageInit['websetting']['company_name'] : '' }}
                                </p>
                            @endif
                            <div>
                                @if (!empty($contacts['head_office']))
                                    <div class="cont-info">
                                        <div class="cont-ico"><svg xmlns="http://www.w3.org/2000/svg" width="8.691"
                                                height="12.553" viewBox="0 0 8.691 12.553">
                                                <path id="Icon_ionic-ios-pin" data-name="Icon ionic-ios-pin"
                                                    d="M12.22,3.375A4.2,4.2,0,0,0,7.875,7.409c0,3.138,4.345,8.519,4.345,8.519s4.345-5.38,4.345-8.519A4.2,4.2,0,0,0,12.22,3.375Zm0,5.76A1.415,1.415,0,1,1,13.635,7.72,1.415,1.415,0,0,1,12.22,9.135Z"
                                                    transform="translate(-7.875 -3.375)" fill="#ed1c24" />
                                            </svg>
                                        </div>
                                        <p class="w-50 uppercase">
                                            {{ !empty($contacts['head_office']) ? $contacts['head_office'] : '' }}
                                        </p>
                                    </div>
                                @endif
                                @if (!empty($contacts['factory']))
                                    <div class="cont-info">
                                        <div class="cont-ico"><svg xmlns="http://www.w3.org/2000/svg" width="8.691"
                                                height="12.553" viewBox="0 0 8.691 12.553">
                                                <path id="Icon_ionic-ios-pin" data-name="Icon ionic-ios-pin"
                                                    d="M12.22,3.375A4.2,4.2,0,0,0,7.875,7.409c0,3.138,4.345,8.519,4.345,8.519s4.345-5.38,4.345-8.519A4.2,4.2,0,0,0,12.22,3.375Zm0,5.76A1.415,1.415,0,1,1,13.635,7.72,1.415,1.415,0,0,1,12.22,9.135Z"
                                                    transform="translate(-7.875 -3.375)" fill="#ed1c24" />
                                            </svg>
                                        </div>
                                        <p class="uppercase">
                                            {{ !empty($contacts['factory']) ? $contacts['factory'] : '' }}
                                        </p>

                                    </div>
                                @endif
                                @if (!empty($contacts['phone_head_office']))
                                    <div class="cont-info">
                                        <div class="cont-ico"><svg xmlns="http://www.w3.org/2000/svg" width="12.587"
                                                height="12.587" viewBox="0 0 12.587 12.587">
                                                <path id="Icon_awesome-phone-alt" data-name="Icon awesome-phone-alt"
                                                    d="M12.228,8.9,9.475,7.715a.59.59,0,0,0-.688.17L7.567,9.374A9.113,9.113,0,0,1,3.211,5.018L4.7,3.8a.589.589,0,0,0,.17-.688L3.69.357A.594.594,0,0,0,3.014.015L.457.605A.59.59,0,0,0,0,1.18,11.406,11.406,0,0,0,11.407,12.588a.59.59,0,0,0,.575-.457l.59-2.557a.6.6,0,0,0-.344-.679Z"
                                                    transform="translate(0 0)" fill="#ed1c24" />
                                            </svg>
                                        </div>
                                        <a href="tel:">
                                            TEL.&nbsp;{{ !empty($contacts['phone_head_office']) ? $contacts['phone_head_office'] : '' }}
                                        </a>
                                    </div>
                                @endif
                                @if (!empty($contacts['phone_factory']))
                                    <div class="cont-info">
                                        <div class="cont-ico"><svg xmlns="http://www.w3.org/2000/svg" width="12.587"
                                                height="12.587" viewBox="0 0 12.587 12.587">
                                                <path id="Icon_awesome-fax" data-name="Icon awesome-fax"
                                                    d="M1.573,3.147H.787A.787.787,0,0,0,0,3.933V11.8a.787.787,0,0,0,.787.787h.787A.787.787,0,0,0,2.36,11.8V3.933A.787.787,0,0,0,1.573,3.147ZM11.8,3.933V1.9a.787.787,0,0,0-.23-.556L10.457.23A.787.787,0,0,0,9.9,0H3.933a.787.787,0,0,0-.787.787V11.8a.787.787,0,0,0,.787.787H11.8a.787.787,0,0,0,.787-.787V4.72A.787.787,0,0,0,11.8,3.933ZM7.08,10.62a.393.393,0,0,1-.393.393H5.9a.393.393,0,0,1-.393-.393V9.834A.393.393,0,0,1,5.9,9.44h.787a.393.393,0,0,1,.393.393Zm0-3.147a.393.393,0,0,1-.393.393H5.9a.393.393,0,0,1-.393-.393V6.687A.393.393,0,0,1,5.9,6.293h.787a.393.393,0,0,1,.393.393Zm3.147,3.147a.393.393,0,0,1-.393.393H9.047a.393.393,0,0,1-.393-.393V9.834a.393.393,0,0,1,.393-.393h.787a.393.393,0,0,1,.393.393Zm0-3.147a.393.393,0,0,1-.393.393H9.047a.393.393,0,0,1-.393-.393V6.687a.393.393,0,0,1,.393-.393h.787a.393.393,0,0,1,.393.393ZM10.62,4.72H4.327V1.18H9.44v.787a.393.393,0,0,0,.393.393h.787Z"
                                                    fill="#ed1c24" />
                                            </svg>
                                        </div>
                                        <a href="tel:">
                                            FAX.&nbsp;{{ $contacts['phone_factory'] }}
                                        </a>
                                    </div>
                                @endif
                                @if (!empty($contacts['email_head_office']))
                                    <div class="cont-info">
                                        <div class="cont-ico"><svg xmlns="http://www.w3.org/2000/svg" width="14.587"
                                                height="12.233" viewBox="0 0 14.587 12.233">
                                                <path id="Icon_awesome-telegram-plane"
                                                    data-name="Icon awesome-telegram-plane"
                                                    d="M14.546,5.642l-2.2,10.381c-.166.733-.6.915-1.215.57L7.776,14.121,6.158,15.677a.842.842,0,0,1-.674.329l.241-3.416,6.216-5.617c.27-.241-.059-.374-.42-.134L3.836,11.679.528,10.643c-.72-.225-.733-.72.15-1.065l12.94-4.985C14.217,4.369,14.742,4.727,14.546,5.642Z"
                                                    transform="translate(-0.001 -4.528)" fill="#ed1c24" />
                                            </svg>
                                        </div>
                                        <a href="mailto:">
                                            EMAIL:&nbsp;{{ !empty($contacts['email_head_office']) ? $contacts['email_head_office'] : '' }}
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="space-y-2">
                            <p class="text-xl font-bold text-2nd uppercase">{{ __('frontend.international') }}</p>
                            <div>
                                @if (!empty($contacts['tel_international']))
                                    <div class="cont-info">
                                        <div class="cont-ico"><svg xmlns="http://www.w3.org/2000/svg" width="12.587"
                                                height="12.587" viewBox="0 0 12.587 12.587">
                                                <path id="Icon_awesome-phone-alt" data-name="Icon awesome-phone-alt"
                                                    d="M12.228,8.9,9.475,7.715a.59.59,0,0,0-.688.17L7.567,9.374A9.113,9.113,0,0,1,3.211,5.018L4.7,3.8a.589.589,0,0,0,.17-.688L3.69.357A.594.594,0,0,0,3.014.015L.457.605A.59.59,0,0,0,0,1.18,11.406,11.406,0,0,0,11.407,12.588a.59.59,0,0,0,.575-.457l.59-2.557a.6.6,0,0,0-.344-.679Z"
                                                    transform="translate(0 0)" fill="#ed1c24" />
                                            </svg>
                                        </div>
                                        <a href="tel:">
                                            TEL.&nbsp;{{ !empty($contacts['tel_international']) ? $contacts['tel_international'] : '' }}
                                        </a>
                                    </div>
                                @endif
                                @if (!empty($contacts['fax_international']))
                                    <div class="cont-info">
                                        <div class="cont-ico"><svg xmlns="http://www.w3.org/2000/svg" width="12.587"
                                                height="12.587" viewBox="0 0 12.587 12.587">
                                                <path id="Icon_awesome-fax" data-name="Icon awesome-fax"
                                                    d="M1.573,3.147H.787A.787.787,0,0,0,0,3.933V11.8a.787.787,0,0,0,.787.787h.787A.787.787,0,0,0,2.36,11.8V3.933A.787.787,0,0,0,1.573,3.147ZM11.8,3.933V1.9a.787.787,0,0,0-.23-.556L10.457.23A.787.787,0,0,0,9.9,0H3.933a.787.787,0,0,0-.787.787V11.8a.787.787,0,0,0,.787.787H11.8a.787.787,0,0,0,.787-.787V4.72A.787.787,0,0,0,11.8,3.933ZM7.08,10.62a.393.393,0,0,1-.393.393H5.9a.393.393,0,0,1-.393-.393V9.834A.393.393,0,0,1,5.9,9.44h.787a.393.393,0,0,1,.393.393Zm0-3.147a.393.393,0,0,1-.393.393H5.9a.393.393,0,0,1-.393-.393V6.687A.393.393,0,0,1,5.9,6.293h.787a.393.393,0,0,1,.393.393Zm3.147,3.147a.393.393,0,0,1-.393.393H9.047a.393.393,0,0,1-.393-.393V9.834a.393.393,0,0,1,.393-.393h.787a.393.393,0,0,1,.393.393Zm0-3.147a.393.393,0,0,1-.393.393H9.047a.393.393,0,0,1-.393-.393V6.687a.393.393,0,0,1,.393-.393h.787a.393.393,0,0,1,.393.393ZM10.62,4.72H4.327V1.18H9.44v.787a.393.393,0,0,0,.393.393h.787Z"
                                                    fill="#ed1c24" />
                                            </svg>
                                        </div>
                                        <a href="tel:">
                                            FAX.&nbsp;{{ !empty($contacts['fax_international']) ? $contacts['fax_international'] : '' }}
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="md:py-8">
                        <form class="form-wrapper" name="contact_frm" id="contact_frm"
                            onsubmit="sandContact(); return false;" method="post" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="lang" name="lang" value="{{ $pageInit['lang'] }}">
                            <div class="form-space">
                                <div class="w-full sm:w-6/12">
                                    <label for="name">{{ __('frontend.contact_full_name') }}</label>
                                    <input class="form-style" type="text" id="name" name="name"
                                        placeholder="{{ __('frontend.contact_full_name') }}" />
                                </div>
                                <div class="w-full sm:w-6/12">
                                    <label for="email">{{ __('frontend.contact_email') }}</label>
                                    <input class="form-style" type="email" id="email" name="email"
                                        placeholder="{{ __('frontend.contact_email') }}" />
                                </div>
                                <div class="w-full sm:w-6/12">
                                    <label for="phone">{{ __('frontend.contact_mobile') }}</label>
                                    <input class="form-style" type="tel" id="phone" name="phone"
                                        placeholder="{{ __('frontend.contact_mobile') }}" minlength="9" maxlength="10" />
                                </div>
                                <div class="w-full sm:w-6/12">
                                    <label for="subject">{{ __('frontend.contact_subject') }}</label>
                                    <input class="form-style" type="text" id="subject" name="subject"
                                        placeholder="{{ __('frontend.contact_subject') }}" />
                                </div>
                                <div class="w-full">
                                    <label for="message">{{ __('frontend.contact_message') }}</label>
                                    <textarea class="form-style" id="message" name="message" rows="8"
                                        placeholder="{{ __('frontend.contact_message') }}"></textarea>
                                </div>
                            </div>
                            <div class="py-6">
                                <div class="form-group">
                                    <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
                                        data-callback="makeaction">
                                    </div>
                                </div>
                                <button class="butn-2nd butn-darker butn-icol font-bold text-xl mt-6" type="submit"
                                    id="form-submit" disabled>
                                    <div class="txt">{{ __('frontend.contact_send_message') }}</div><svg
                                        xmlns="http://www.w3.org/2000/svg" width="25.843" height="21.673"
                                        viewBox="0 0 25.843 21.673">
                                        <path id="Icon_awesome-telegram-plane" data-name="Icon awesome-telegram-plane"
                                            d="M25.771,6.5l-3.9,18.392c-.294,1.3-1.062,1.621-2.152,1.01l-5.942-4.379L10.91,24.281a1.492,1.492,0,0,1-1.194.583l.427-6.052L21.155,8.861c.479-.427-.1-.663-.744-.237L6.8,17.2.935,15.362c-1.275-.4-1.3-1.275.265-1.886L24.126,4.643C25.188,4.245,26.117,4.88,25.771,6.5Z"
                                            transform="translate(-0.001 -4.528)" fill="#fff" />
                                    </svg>
                                </button>
                            </div>
                        </form>
                        <div id="alert_1" class="w3-modal">
                            <div class="w3-modal-content w3-animate-opacity w3-round-medium"
                                style="max-width:450px;margin-top: 10%;">
                                <div class="w3-container" style="padding: 26px;text-align: center;">
                                    <img class="mx-auto mb-3" src="{{ Module::asset('frontend:img/check.png') }}"
                                        width="25%">
                                    <p style="font-size: 18px;color: green">
                                        {{ __('frontend.send_success_title') }}</p>
                                    <p style="font-size: 18px;">{{ __('frontend.send_success') }}</p>
                                    <button class="butn-2nd mt-4" onclick="closeModal()"
                                        style="width: 50%;color: aliceblue;">{{ __('frontend.send_ok') }}</button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img class="brand-lf brand-contact" src="{{ Module::asset('frontend:img/brand.svg') }}"
                alt="Alternate Text" />
        </div>
    </main>


@endsection

@section('script')
    <!--Jquery Sparkline js-->
    <script src="{{ URL::asset('assets/plugins/vendors/jquery.sparkline.min.js') }}"></script>

    <!-- File uploads js -->
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify-demo.js') }}"></script>

    <!--Select2 js -->
    <script src="{{ URL::asset('assets/plugins/select2/select2.full.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/form-elements.js') }}"></script> -->

    <!--MutipleSelect js-->
    <script src="{{ URL::asset('assets/plugins/multipleselect/multiple-select.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/multipleselect/multi-select.js') }}"></script>

    <!--ckeditor js-->
    <script src="{{ URL::asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/formeditor.js') }}"></script> -->

    <!-- Notifications js -->
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/jquery.growl.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/notifIt.css') }}" rel="stylesheet" />
    <script src="{{ URL::asset('assets/plugins/bootbox/bootbox.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/rainbow.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/jquery.growl.js') }}"></script>

    <!-- INTERNAL Data tables -->
    <script src="{{ URL::asset('assets/plugins/datatable/js/jquery.dataTables.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/responsive.bootstrap4.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/plugins/datatable/datatable-2.js') }}"></script> -->

    <!-- validator js -->
    <script src="{{ URL::asset('assets/plugins/validator/js/jquery.validate.min.js') }}"></script>

    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js') }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/frontend.css') }}">
    <script src="{{ mix('js/frontend.js') }}"></script>

    <script type="text/javascript">
        function makeaction() {
            document.getElementById('form-submit').disabled = false;
        }
    </script>
    <script src="https://www.google.com/recaptcha/api.js"></script>
@endsection