@extends('themes.default.layout.master')

@section('content')
    <div class="page-content bg-white" style="min-height: 1000px">

        <div class="dlab-bnr-inr overlay-black-middle bg-pt" style="height: 100px">
            <div class="container">
                <div class="dlab-bnr-inr-entry" style="height: 100px">
                    <h1 class="text-white">{{\TransLibrary::languageTrans("contact_header_title")}}</h1>
                    <div class="breadcrumb-row">
                        <ul class="list-inline" style="font-size: 12px">
                            <li><a href="{{route('theme.index',['locale'=>config('app.locale')])}}"
                                   title="{{\TransLibrary::languageTrans("breadcrumb_home_text")}}">       {{\TransLibrary::languageTrans("breadcrumb_home_text")}}</a>
                            </li>

                            <li> {{\TransLibrary::languageTrans("contact_header_title")}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        @if($contactInfo!==null)
            <div class="row">
                <div class="col-lg-12 col-md-12 contact-map">
                    {!! $contactInfo->map !!}
                </div>
            </div>
        @endif
        <div class="section-full content-inner contact-page-8 bg-white"
             style="padding-bottom: 0;padding-top: 0;min-height: 1000px">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-12">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 m-b30">
                                <div class="icon-bx-wraper expertise bx-style-1 p-a20 radius-sm">
                                    <div class="icon-content">
                                        <h5 class="dlab-tilte">
                                            {{\TransLibrary::languageTrans("contact_info_header_title")}}
                                        </h5>
                                        @if($contactInfo!==null)
                                            {!! $contactInfo->contact_info !!}
                                        @endif

                                        @if(!empty(\UiLibrary::generalSettingList("social_facebook_url")))
                                            <a class="fab fa-facebook-f" style="margin-right: 10px"
                                               href="{{\UiLibrary::generalSettingList("social_facebook_url")}}" target="_blank"></a>
                                        @endif
                                        @if(!empty(\UiLibrary::generalSettingList("social_twitter_url")))
                                            <a class="fab fa-twitter" style="margin-right: 10px"
                                               href="{{\UiLibrary::generalSettingList("social_twitter_url")}}" target="_blank"></a>
                                        @endif
                                        @if(!empty(\UiLibrary::generalSettingList("social_instagram_url")))
                                            <a class="fab fa-instagram" style="margin-right: 10px"
                                               href="{{\UiLibrary::generalSettingList("social_instagram_url")}}" target="_blank"></a>
                                        @endif
                                        @if(!empty(\UiLibrary::generalSettingList("social_youtube_url")))
                                            <a class="fab fa-youtube" style="margin-right: 10px"
                                               href="{{\UiLibrary::generalSettingList("social_youtube_url")}}" target="_blank"></a>
                                        @endif
                                        @if(!empty(\UiLibrary::generalSettingList("social_linkedin_url")))
                                            <a class="fab fa-linkedin" style="margin-right: 10px"
                                               href="{{\UiLibrary::generalSettingList("social_linkedin_url")}}" target="_blank"></a>
                                        @endif

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-8 col-md-12 m-b30">
                        <form method="post"
                              action="{{route('theme.contact.ajax.send',['locale'=>config('app.locale')])}}"
                              id="contactForm" class="inquiry-form wow fadeInUp contactForm" data-wow-delay="0.2s">
                            <h3 class="title-box font-weight-300 m-t0 m-b10">
                                {{\TransLibrary::languageTrans("contact_form_header_title")}}
                            </h3>
                            <p> {{\TransLibrary::languageTrans("contact_form_description")}} </p>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="contactStatus" id="contactStatus"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input name="name" required type="text" class="form-control"
                                                   data-msg="{{TransLibrary::languageTrans('contact_form_name_required')}}"
                                                   placeholder="{{\TransLibrary::languageTrans("contact_form_name_surname")}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input name="email" required type="email" class="form-control"
                                                   data-msg-required="{{TransLibrary::languageTrans('contact_form_email_required')}}"
                                                   data-msg-email="{{TransLibrary::languageTrans('contact_form_email_email')}}"

                                                   placeholder="{{\TransLibrary::languageTrans("contact_form_email")}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input name="subject" required type="text" class="form-control"
                                                   data-msg="{{TransLibrary::languageTrans('contact_form_subject_required')}}"
                                                   placeholder="{{\TransLibrary::languageTrans("contact_form_subject")}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input name="phone" required type="text" class="form-control phone"
                                                   id="phone"

                                                   data-msg-required="{{TransLibrary::languageTrans('contact_form_phone_required')}}"
                                                   placeholder="{{\TransLibrary::languageTrans("contact_form_phone")}}">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <textarea name="message" required rows="4" class="form-control"
                                                      data-msg="{{TransLibrary::languageTrans('contact_form_message_required')}}"
                                                      placeholder="{{\TransLibrary::languageTrans("contact_form_message")}}"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <button name="submit" type="submit" value="Submit" class="site-button button-md">
                                        <span>{{\TransLibrary::languageTrans("contact_form_btn_send")}}</span></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('ui.javascript')
    <style>
        .contact-map iframe {
            width: 100%;
            height: 400px; /* Adjust the height automatically */
            border: none; /* Optional: removes the default iframe border */
        }

        label.error {
            width: 100%;
            font-size: 12px;
            color: red;
        }

        .loader {
            display: none;
            width: 16px;
            height: 16px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
        }

        /* Spinner animation */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <script>
        $("#phone").usPhoneFormat({
            format: 'xxx-xxx-xxxx'
        });
        const $_CONTACT_TRANS = {
            BTN_LOADER_TEXT: '