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

@section('style')
    <style>
        .show_txt {
            color: black !important;
        }

        .show_txt:hover {
            color: white;
        }

        .butn-2nd {
            margin-top: 12px;
            padding: 8px 12px;
            width: 50%;
            color: white;
            background: green;
        }

        .butn-2nd:hover {
            background: rgba(0, 128, 0, 0.623);
        }
    </style>
@endsection

@section('content')

    <main>
        <div class="relative bggfa pb-12">
            <div class="the-container pt-12 relative z-10 lg:mt-6">
                <div class="text-center -mb-7 text-xs text-1st uppercase">{{ __('frontend.contact') }} </div>
                <div class="bluehd">{!! !empty($contacts['description']) ? $contacts['description'] : '' !!}</div>
                <div class="grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 py-4 lg:py-12 -mt-8">
                    <div class="sdlsdfgsdf"><svg width="40" height="40" viewBox="0 0 60 60" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M18.1251 25C18.1251 18.4416 23.4417 13.125 30.0001 13.125C36.5584 13.125 41.8751 18.4416 41.8751 25C41.8751 31.5584 36.5584 36.875 30.0001 36.875C23.4417 36.875 18.1251 31.5584 18.1251 25ZM30.0001 16.875C25.5127 16.875 21.8751 20.5127 21.8751 25C21.8751 29.4873 25.5127 33.125 30.0001 33.125C34.4874 33.125 38.1251 29.4873 38.1251 25C38.1251 20.5127 34.4874 16.875 30.0001 16.875Z"
                                fill="#175A87" />
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M8.81097 22.1421C9.69679 11.3956 18.6772 3.125 29.4601 3.125H30.54C41.323 3.125 50.3033 11.3956 51.1892 22.1421C51.665 27.915 49.8818 33.6472 46.2152 38.1314L34.2325 52.7859C32.045 55.4612 27.9551 55.4612 25.7676 52.7859L13.785 38.1314C10.1183 33.6472 8.33512 27.915 8.81097 22.1421ZM29.4601 6.875C20.6288 6.875 13.2738 13.6487 12.5483 22.4502C12.1523 27.2548 13.6364 32.0256 16.688 35.7577L28.6707 50.4121C29.3578 51.2524 30.6424 51.2524 31.3295 50.4121L43.3121 35.7577C46.3638 32.0256 47.8479 27.2548 47.4518 22.4502C46.7263 13.6487 39.3713 6.875 30.54 6.875H29.4601Z"
                                fill="#175A87" />
                        </svg>
                        <p>{{ __('frontend.location') }}</p>
                        <div>{{ !empty($contacts['office']) ? $contacts['office'] : '' }}</div>
                    </div>
                    <div class="sdlsdfgsdf"><svg width="40" height="40" viewBox="0 0 60 60" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M31.875 17.5C31.875 16.4645 31.0355 15.625 30 15.625C28.9645 15.625 28.125 16.4645 28.125 17.5V30C28.125 30.6465 28.458 31.2474 29.0063 31.59L36.5063 36.2775C37.3844 36.8263 38.5412 36.5594 39.09 35.6812C39.6388 34.8031 39.3719 33.6463 38.4937 33.0975L31.875 28.9608V17.5Z"
                                fill="#175A87" />
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M30 8.125C17.9188 8.125 8.125 17.9188 8.125 30C8.125 42.0812 17.9188 51.875 30 51.875C42.0812 51.875 51.875 42.0812 51.875 30C51.875 17.9188 42.0812 8.125 30 8.125ZM11.875 30C11.875 19.9898 19.9898 11.875 30 11.875C40.0102 11.875 48.125 19.9898 48.125 30C48.125 40.0102 40.0102 48.125 30 48.125C19.9898 48.125 11.875 40.0102 11.875 30Z"
                                fill="#175A87" />
                        </svg>
                        <p>{{ __('frontend.working') }}</p>
                        <div>
                            {{ !empty($contacts['day_from']) ? get_day($contacts['day_from']) : '' }}-{{ !empty($contacts['day_to']) ? get_day($contacts['day_to']) : '' }}
                            {{ !empty($contacts['time_from']) ? $contacts['time_from'] : '' }}-{{ !empty($contacts['time_to']) ? $contacts['time_to'] : '' }}
                            {{-- Mon-Sat 08:30 - 17:00 --}}
                        </div>
                    </div>
                    <div class="sdlsdfgsdf"><svg width="40" height="40" viewBox="0 0 60 60" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M14.6005 24.6409C19.0687 34.3706 27.02 42.1061 36.9044 46.2975L36.9356 46.3108L38.8451 47.1619C41.2767 48.2453 44.1347 47.4758 45.6938 45.3181L48.8797 40.9088C49.0743 40.6394 49.0241 40.2649 48.7655 40.0563L43.2037 35.5693C42.9272 35.3462 42.5206 35.3982 42.3091 35.6836L40.1444 38.6046C39.6187 39.314 38.6693 39.5604 37.8649 39.1964C30.4739 35.8516 24.5347 29.9123 21.1898 22.5213C20.8258 21.7169 21.0723 20.7675 21.7817 20.2418L24.7026 18.0772C24.988 17.8656 25.04 17.4591 24.8169 17.1826L20.3293 11.62C20.1207 11.3614 19.7464 11.3112 19.4771 11.5057L15.0438 14.706C12.8718 16.274 12.107 19.1561 13.2156 21.5948L14.599 24.6377C14.5995 24.6387 14.6 24.6398 14.6005 24.6409ZM35.4246 49.7433C24.6845 45.1843 16.0461 36.7768 11.191 26.2024L11.1881 26.196L9.80183 23.1467C7.95408 19.0824 9.2289 14.2788 12.8489 11.6656L17.2821 8.46516C19.1674 7.10414 21.788 7.45565 23.2479 9.26539L27.7356 14.828C29.2969 16.7634 28.9333 19.6094 26.9354 21.09L25.2616 22.3304C28.0889 27.8164 32.5699 32.2973 38.0558 35.1246L39.2962 33.4508C40.7768 31.4529 43.6228 31.0893 45.5583 32.6507L51.1201 37.1377C52.9304 38.5981 53.2815 41.2197 51.9193 43.105L48.7334 47.5143C46.135 51.1105 41.3716 52.3929 37.3189 50.5873L35.4246 49.7433Z"
                                fill="#175A87" />
                        </svg>
                        <p>{{ __('frontend.call_us') }}</p>
                        <a
                            href="tel:{{ !empty($contacts['phone_office']) ? $contacts['phone_office'] : '' }}">{{ !empty($contacts['phone_office']) ? $contacts['phone_office'] : '' }}</a>
                        <a
                            href="tel:{{ !empty($contacts['phone_factory']) ? $contacts['phone_factory'] : '' }}">{{ !empty($contacts['phone_factory']) ? $contacts['phone_factory'] : '' }}</a>

                    </div>
                    <div class="sdlsdfgsdf"><svg width="40" height="40" viewBox="0 0 60 60" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M7.0091 20.8833C6.30874 27.3905 6.33996 34.8955 7.31452 41.3763C7.85376 44.9623 10.7804 47.7114 14.3931 48.0255L18.1687 48.3537C26.0413 49.038 33.9585 49.038 41.8311 48.3537L45.6067 48.0255C49.2193 47.7114 52.146 44.9623 52.6852 41.3763C53.6598 34.8955 53.6911 27.391 52.9907 20.8837C52.9002 20.1293 52.7983 19.3759 52.6852 18.6238C52.146 15.0378 49.2193 12.2887 45.6067 11.9746L41.8311 11.6464C33.9585 10.9621 26.0413 10.9621 18.1687 11.6464L14.3931 11.9746C10.7804 12.2887 7.85376 15.0378 7.31452 18.6238C7.20144 19.3758 7.09963 20.129 7.0091 20.8833ZM18.4934 15.3824C26.15 14.7168 33.8498 14.7168 41.5063 15.3824L45.2819 15.7106C47.1677 15.8745 48.6954 17.3095 48.9769 19.1814C49.0062 19.3758 49.0346 19.5703 49.0623 19.7649L35.1598 27.4885C31.9508 29.2713 28.0488 29.2713 24.8398 27.4885L10.9375 19.765C10.9651 19.5704 10.9936 19.3758 11.0228 19.1814C11.3043 17.3095 12.832 15.8745 14.7179 15.7106L18.4934 15.3824ZM49.5211 23.7998C50.0061 29.4692 49.8247 35.1813 48.9769 40.8187C48.6954 42.6906 47.1677 44.1256 45.2819 44.2895L41.5063 44.6178C33.8498 45.2833 26.15 45.2833 18.4934 44.6178L14.7179 44.2895C12.832 44.1256 11.3043 42.6906 11.0228 40.8187C10.1751 35.1813 9.9937 29.4692 10.4786 23.7999L23.0187 30.7666C27.3602 33.1786 32.6393 33.1786 36.9809 30.7666L49.5211 23.7998Z"
                                fill="#175A87" />
                        </svg>
                        <p>{{ __('frontend.email_us') }}</p>
                        <a
                            href="mailto:{{ !empty($contacts['email_office']) ? $contacts['email_office'] : '' }}">{{ !empty($contacts['email_office']) ? $contacts['email_office'] : '' }}</a>
                    </div>
                </div>
                <div class="grid lg:grid-cols-2">
                    <div class="map-iframe">
                        <iframe src="{{ !empty($contacts['google_map']) ? $contacts['google_map'] : '' }}" width="600"
                            height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                    <div class="bg-4th dark-bg p-8 md:p-16">
                        <div class="form cncnfm">
                            <p class="text-4xl font-bold capitalize">{{ __('frontend.contact_title') }}</p>
                            <p>{{ __('frontend.contact_detail') }}</p>
                            <form class="form-wrapper line-form mt-6" 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">
                                        <label for="name"></label>
                                        <input class="form-style" type="text" id="name" name="name"
                                            placeholder="{{ __('frontend.contact_full_name') }}" />
                                    </div>
                                    <div class="w-full lg:w-6/12">
                                        <label for="mail"></label>
                                        <input class="form-style" type="email" id="email" name="email"
                                            placeholder="{{ __('frontend.contact_email') }}" />
                                    </div>
                                    <div class="w-full lg:w-6/12">
                                        <label for="phn"></label>
                                        <input class="form-style" type="tel" id="phone" name="phone" maxlength="10"
                                            minlength="9" placeholder="{{ __('frontend.contact_mobile') }}" />
                                    </div>
                                    <div class="w-full">
                                        <label for="subj"></label>
                                        <select class="form-style" id="subject" name="subject">
                                            <option value="0">{{ __('frontend.contact_subject') }}
                                            </option>
                                            @if (!empty($subject))
                                                @foreach ($subject as $item)
                                                    <option class="show_txt" value="{{ $item['id'] }}">
                                                        {{ $item['name'] }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="w-full">
                                        <label for="name">{{ __('frontend.contact_message') }}</label>
                                        <textarea class="form-style" id="message" name="message" rows="5"
                                            placeholder="{{ __('frontend.contact_message') }}"></textarea>
                                    </div>
                                    <div class="w-full">
                                        <div class=" form-style" style=";border: none;">
                                            <input type="checkbox" id="checkPri" name="pdpa" />
                                            <label for="checkPri"> {{ __('frontend.accept') }}
                                                <a class="underline"
                                                    href="{{ mwz_route('frontend.policy') }}">{{ __('frontend.pdpa_desc') }}</a>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div class="g-recaptcha" data-sitekey="6LddCxAUAAAAAKOg0-U6IprqOZ7vTfiMNSyQT2-M" data-callback="makeaction">
                                    </div> --}}
                                <div class="g-recaptcha" data-sitekey="6LdSdbwfAAAAAHzhDvDWHYewSrGonQ1FAunnsSvB"
                                    data-callback="makeaction" style="width: 100% !important">
                                </div>
                                <div class="py-6">
                                    <button class="butn-3rd butn-icon" type="submit" id="form-submit" disabled>
                                        <div class="txt">{{ __('frontend.contact_send_message') }}</div>
                                        <svg class="h-7 w-7 icor" viewBox="0 0 30 31" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M27.1875 15.5C27.1875 15.8405 27.0029 16.1542 26.7053 16.3195L23.8524 17.9045C18.2131 21.0374 12.2684 23.5858 6.11099 25.51L5.27963 25.7698C4.99497 25.8588 4.68496 25.807 4.44468 25.6303C4.20439 25.4537 4.0625 25.1732 4.0625 24.875L4.0625 17.6875C4.0625 17.1987 4.43801 16.792 4.92524 16.753L5.20939 16.7303C7.89872 16.5151 10.5673 16.1036 13.194 15.4996C10.5305 14.8872 7.82377 14.4728 5.09612 14.2603L4.92719 14.2472C4.43914 14.2092 4.0625 13.802 4.0625 13.3125L4.0625 6.12501C4.0625 5.82677 4.2044 5.54633 4.44468 5.36967C4.68497 5.19302 4.99497 5.14123 5.27963 5.23018L6.11097 5.48998C12.2684 7.41418 18.2131 9.9626 23.8524 13.0955L26.7053 14.6805C27.0029 14.8458 27.1875 15.1595 27.1875 15.5ZM24.3196 15.5L22.9418 14.7346C17.532 11.7292 11.8356 9.27251 5.9375 7.40111L5.9375 12.4495C9.6001 12.7798 13.2229 13.4627 16.7554 14.489L17.1366 14.5997C17.5373 14.7162 17.8129 15.0835 17.8125 15.5009C17.8121 15.9183 17.5358 16.2851 17.1348 16.4008L16.6466 16.5416C13.1485 17.5505 9.56254 18.223 5.9375 18.55L5.9375 23.5989C11.8356 21.7275 17.532 19.2709 22.9418 16.2654L24.3196 15.5Z"
                                                fill="white" />
                                        </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 !important;">
                                            {{ __('frontend.send_success_title') }}</p>
                                        <p style="font-size: 18px;color: black !important">
                                            {{ __('frontend.send_success') }}</p>
                                        <button class="butn-2nd mt-4"
                                            onclick="closeModal()">{{ __('frontend.send_ok') }}</button>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="decl">
                <img src="{{ Module::asset('frontend:img/project/bbll.svg') }}" alt="Alternate Text" />
            </div>
            <div class="decr">
                <img src="{{ Module::asset('frontend:img/project/bbrr.svg') }}" alt="Alternate Text" />
            </div>
        </div>
    </main>
@endsection

@section('script')
    <!--ckeditor js-->
    <script src="{{ URL::asset('assets/plugins/vendors/jquery.sparkline.min.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>


    <!-- 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