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

@section('style')
    <!-- 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" />

@endsection

@section('content')

    <main>
        <div class="container pt-10 ">
            <div class="text-center -mx-1 pb-6 lg:pb-12">
                <div class="text-base-5xl text-darken-text font-medium">
                    {!! !empty($data['route']['desc']) ? $data['route']['desc'] : '' !!}
                </div>
            </div>
            <div class="form-wrapper line-form flex items-center justify-center">
                <div>
                    <select class="form-style font-medium text-base-4xl" onchange="location = this.value;">
                        <optgroup>
                            @if (!empty($data['branch']))
                                @foreach ($data['branch'] as $item)
                                    <option value="{{ $data['route']['url'] . '?branch=' . $item['id'] }}"
                                        @if (!empty($data['id']) && $data['id'] == $item['id']) selected @endif>
                                        {{ !empty($item['name']) ? $item['name'] : '' }}
                                    </option>
                                @endforeach
                            @endif
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="flex flex-wrap -mx-4 mt-4 width-control">
                @if (!empty($data['info']['office']))
                    <div class="w-full xs:w-1/2 md:w-3/12 p-[1rem] space-y-3">
                        <div class="flex items-center space-x-3">
                            <img src="{{ Module::asset('frontend:img/icon/pin.svg') }}" alt="Alternate Text" />
                            <p class="text-1st font-medium text-base-lg">@lang('frontend::lang.address')</p>
                        </div>
                        <p class="text-base-lg">{!! !empty($data['info']['office']) ? $data['info']['office'] : '' !!}</p>
                    </div>
                @endif
                @if (!empty($data['info']['phone']))
                    <div class="w-full xs:w-1/2 md:w-3/12 p-[1rem] space-y-3">
                        <div class="flex items-center space-x-3">
                            <img src="{{ Module::asset('frontend:img/icon/tel.svg') }}" alt="Alternate Text" />
                            <p class="text-1st font-medium text-base-lg">@lang('frontend::lang.telephone')</p>
                        </div>
                        <p class="text-base-lg full-url">
                            {{ !empty($data['info']['phone']) ? str_phone($data['info']['phone']) : '' }}
                            <a href="tel:{{ !empty($data['info']['phone']) ? $data['info']['phone'] : '#' }}"> </a>
                        </p>
                    </div>
                @endif
                @if (!empty($data['info']['email']))
                    <div class="w-full xs:w-1/2 md:w-3/12 p-[1rem] space-y-3">
                        <div class="flex items-center space-x-3">
                            <img src="{{ Module::asset('frontend:img/icon/mail.svg') }}" alt="Alternate Text" />
                            <p class="text-1st font-medium text-base-lg">@lang('frontend::lang.email')</p>
                        </div>
                        <p class="text-base-lg full-url">
                            {{ !empty($data['info']['email']) ? $data['info']['email'] : '' }}<a
                                href="mailto:{{ !empty($data['info']['email']) ? $data['info']['email'] : '' }}"> </a></p>
                    </div>
                @endif
                @if (!empty($data['info']['fax']))
                    <div class="w-full xs:w-1/2 md:w-3/12 p-[1rem] space-y-3">
                        <div class="flex items-center space-x-3">
                            <img src="{{ Module::asset('frontend:img/icon/fax.svg') }}" alt="Alternate Text" />
                            <p class="text-1st font-medium text-base-lg">@lang('frontend::lang.fax')</p>
                        </div>
                        <p class="text-base-lg">{{ !empty($data['info']['fax']) ? $data['info']['fax'] : '' }}</p>
                    </div>
                @endif
            </div>
        </div>
        <div class="bg-f7 py-8">
            <div class="text-center mb-6">
                <p class="font-medium text-base-xl">@lang('frontend::lang.sns')</p>
            </div>
            <div class="flex items-center justify-center space-x-4">
                @if (!empty($data['info']['facebook']))
                    <div class="full-url">
                        <img src="{{ Module::asset('frontend:img/icon/fac.svg') }}" alt="Alternate Text" /><a
                            href="{{ !empty($data['info']['facebook']) ? $data['info']['facebook'] : '#' }}">
                        </a>
                    </div>
                @endif
                @if (!empty($data['info']['youtube']))
                    <div class="full-url">
                        <img src="{{ Module::asset('frontend:img/icon/you.svg') }}" alt="Alternate Text" /><a
                            href="{{ !empty($data['info']['youtube']) ? $data['info']['youtube'] : '#' }}">
                        </a>
                    </div>
                @endif
                @if (!empty($data['info']['line']))
                    <div class="full-url">
                        <img src="{{ Module::asset('frontend:img/icon/lin.svg') }}" alt="Alternate Text" /><a
                            href="{{ !empty($data['info']['line']) ? $data['info']['line'] : '#' }}">
                        </a>
                    </div>
                @endif
                @if (!empty($data['info']['tiktok']))
                    <div class="full-url">
                        <img src="{{ Module::asset('frontend:img/icon/tik.svg') }}" alt="Alternate Text" /><a
                            href="{{ !empty($data['info']['tiktok']) ? $data['info']['tiktok'] : '#' }}">
                        </a>
                    </div>
                @endif
                @if (!empty($data['info']['instagram']))
                    <div class="full-url">
                        <img src="{{ Module::asset('frontend:img/icon/ins.svg') }}" alt="Alternate Text" /><a
                            href="{{ !empty($data['info']['instagram']) ? $data['info']['instagram'] : '#' }}">
                        </a>
                    </div>
                @endif

            </div>
        </div>
        @if (!empty($data['info']['google_map']))
            <div class="map-wrapper">
                <iframe src="{{ !empty($data['info']['google_map']) ? $data['info']['google_map'] : '#' }}" width="100%"
                    height="500" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        @endif
        <div class="default-bg-cover relative py-8 lg:py-16"
            style="background-image:url({{ !empty($page_init['contact']['bg']) ? $page_init['contact']['bg'] : Module::asset('frontend:img/contact-bg.jpg') }})">
            <div class="container">
                <div class="flex items-center -mx-4 flex-wrap">
                    <div class="p-3 w-full lg:w-1/2 flex flex-col items-center justify-center">
                        <p class="text-base-5xl text-whiten font-medium">{!! !empty($page_init['contact']['desc']) ? $page_init['contact']['desc'] : '' !!}</p>
                    </div>
                    <div class="p-3 lg:w-1/2">

                        <form class="form-wrapper line-form bg-whiten px-6 py-12 rounded-xl shadow-lg" id="contact_form"
                            name="contact_form" method="POST" onsubmit="sendContact(); return false;"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12 mb-3 mx-0">
                                    <label>@lang('frontend::lang.full_name')</label>
                                    <input type="text" class="form-style font-weight-semibold px-1 py-3" name="name"
                                        placeholder="* @lang('frontend::lang.full_name')" data-msg-required="This field is required."
                                        id="name" required />
                                </div>
                                <div class="col-md-6 mb-3 mx-0">
                                    <label>@lang('frontend::lang.telephone')</label>
                                    <input type="text"name="phone" id="phone"
                                        class="form-style font-weight-semibold px-1 py-3" placeholder="* @lang('frontend::lang.telephone')"
                                        data-msg-required="This field is required." required />
                                </div>
                                <div class="col-md-6 mx-0 mb-3">
                                    <label>@lang('frontend::lang.email')</label><input type="email" name="email" id="email"
                                        class="form-style font-weight-semibold px-1 py-3"
                                        placeholder="* @lang('frontend::lang.email')" data-msg-required="This field is required."
                                        required />
                                </div>
                                <div class="col-12 mx-0 mb-3">
                                    <div class="form-group -mx-2 col">
                                        <label class="form-label">@lang('frontend::lang.subject_contact')</label>
                                        <input type="text" name="subject" id="subject"
                                            class="form-style font-weight-semibold px-1 py-3"
                                            placeholder="* @lang('frontend::lang.subject_contact')" data-msg-required="This field is required."
                                            required />
                                    </div>
                                </div>
                                <div class="col-12 mx-0 mb-3">
                                    <label>@lang('frontend::lang.message')</label>
                                    <textarea name="message" id="message" rows="4"
                                        class="form-style form-style font-weight-semibold text-color-light px-1" placeholder="* @lang('frontend::lang.message')"></textarea>
                                </div>
                                <div class="col-12 py-6 flex">
                                    <input type="checkbox" class="mr-2" id="accept" name="accept" value="1">
                                    <label for="accept" of="policy">@lang('frontend::lang.pdpa_00')
                                        <a class="text-1st"
                                            href="{{ !empty($page_init['pdpa']['url']) ? $page_init['pdpa']['url'] : '#' }}">
                                            <u>@lang('frontend::lang.pdpa_01')</u></a>
                                    </label>
                                </div>
                                <div class="col-12">
                                    <div class="g-recaptcha" data-callback="makeaction"
                                        data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI">
                                    </div>
                                </div>
                                <div class="col-12 pt-6">
                                    <button type="submit" id="submit" disabled
                                        class="butn w-full bg-linear-green text-base rounded-none font-bold text-white px-5 py-3">
                                        <div class="flex items-center space-x-2 justify-center">
                                            <p>@lang('frontend::lang.send_message')</p><i class="fa fa-chevron-right"></i>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <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>

    <link rel="stylesheet" href="{{ mix('css/front.css') }}">
    <script src="{{ mix('js/front.js') }}"></script>
    <script src='https://www.google.com/recaptcha/api.js?hl={{ app()->getLocale() }}'></script>
    <script>
        makeaction = function() {
            document.getElementById('submit').disabled = false;
        }
        sendContact = function() {
            var frm_data = new FormData($("#contact_form")[0]);
            $.ajax({
                url: "{{ mwz_route('api.contact.send') }}",
                type: "POST",
                contentType: false,
                data: frm_data,
                processData: false,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                success: function(resp) {
                    if (resp.success) {
                        window.location.reload();
                    } else {
                        mwz_noti("error", resp.msg);
                    }
                },
            });
        };
    </script>

@endsection