@extends('layout.frontend.master-layout')
@section('page-title')
    <title>
        {{ isset($seoPageName->meta_title) ? @$seoPageName->meta_title . ' - ' . @$viewComposerSiteSetting->company_name : 'Contact Us - Golcha Green Energy' }}
    </title>
@endsection
@section('meta-tags')
    <meta name="title" content="{{ @$seoPageName->meta_title }}">
    <meta name="description" content="{{ @$seoPageName->meta_description }}">
@endsection
@section('style')
    <style>
        .successContactMsg{
            padding-block: 64px 0 !important;
        }
        .successContactMsg .success-icon{
            font-size: 100px;
            color: #70a943;
        }
        .contact-map iframe{
            width: 100% !important;
        }
    </style>
@endsection
@section('main-content')
    @include('layout.admin.include.loader')
    <section class="relative min-h-[450px] rounded-2xl overflow-hidden m-2">
        <div class="absolute inset-0">
            <img class="w-full h-full object-cover" src="{{ asset(@$siteBanner->banner_image) }}" alt="">
        </div>
        <div class="absolute top-0 left-0 w-full h-full bg-brand-dark-1/30 pt-[10em]">
            <h1 class="text-center h1 text-brand-green-3 font-bold max-sm:text-4xl">
                {{ @$siteBanner->display_name }}
            </h1>
            <div class="text-center text-light-1 mt-4">
                <a href="{{ route('frontend.home') }}">Home</a> <span> > </span> {{ @$siteBanner->display_name }}
            </div>
        </div>
    </section>

    <section class="py-[120px] max-xl:py-[100px] max-sm:py-[80px]">
        <div class="container">
            <div class="grid grid-cols-3 gap-x-6 max-lg:grid-cols-1 max-lg:gap-0">
                <div
                    class="col-span-1 bg-brand-dark-1 p-10 space-y-4 rounded-2xl flex flex-col justify-between max-lg:min-h-[500px] max-sm:min-h-[700px]">
                    <div>
                        <div class="flex items-center gap-2 py-3.5 text-white">
                            <img class="w-3" src="{{ asset('assets/images/flash-light.webp') }}" alt="Golcha">
                            {{ @$contactOverview->contact_display_name }}
                        </div>
                        <h2 class="text-white text-5xl font-semibold">{{ @$contactOverview->title }}</h2>
                        <p class="text-brand-gray-1 text-lg mt-4">
                            {{ @$contactOverview->one_liner_text }}
                        </p>
                    </div>
                    <div>
                        <ul class="space-y-2">
                            <li class="flex gap-x-2 text-white text-lg">
                                <iconify-icon icon="material-symbols:check-circle-rounded" width="24" height="24"
                                              class="text-brand-green-3"></iconify-icon>
                                We will respond to you within 24 hours.
                            </li>
                            <li class="flex gap-x-2 text-white text-lg">
                                <iconify-icon icon="material-symbols:check-circle-rounded" width="24" height="24"
                                              class="text-brand-green-3"></iconify-icon>
                                Expert Solutions for Green Renewable Energy Needs
                            </li>
                            <li class="flex gap-x-2 text-white text-lg">
                                <iconify-icon icon="material-symbols:check-circle-rounded" width="24" height="24"
                                              class="text-brand-green-3"></iconify-icon>
                                Seamless Support for Sustainable Energy Projects
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-span-2 p-10 rounded-2xl max-lg:px-0 max-lg:pb-0">
                    <div class="g-recaptcha" data-sitekey="{{config('services.google_captcha.site_key')}}"
                         data-callback="onSubmitExecuteInvisibleCaptcha" data-size="invisible"></div>
                    <h3 class="fs-2rem fw-500 mb-16px successContactMsg flex flex-col text-center text-4xl leading-[140%] gap-4" style="display: none;"></h3>
                    <form id="contact-form" class="hideAfterSubmit">
                        @csrf
                        <div class="grid grid-cols-2 gap-x-6 gap-y-4">
                            <div class="max-sm:col-span-2">
                                <label for="full_name" class="">Name <span class="text-red-600">*</span></label>
                                <input type="text" name="full_name" id="full_name"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="e.g. John Doe">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="full_name_err"></div>
                            </div>
                            <div class="max-sm:col-span-2">
                                <label for="company_name" class="">Company <span class="text-red-600">*</span></label>
                                <input type="text" name="company_name" id="company_name"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="e.g. ABC Company">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="company_name_err"></div>
                            </div>
                            <div class="max-sm:col-span-2">
                                <label for="email" class="">Email <span class="text-red-600">*</span></label>
                                <input type="email" name="email" id="email"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="e.g. johndoe@example.com">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="email_err"></div>
                            </div>
                            <div class="max-sm:col-span-2">
                                <label for="phone_no" class="">Phone <span class="text-red-600">*</span></label>
                                <input type="text" name="phone_no" id="phone_no"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="Enter your phone number" maxlength="10" onkeypress="return isNumber(event)">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="phone_no_err"></div>
                            </div>
                            <div class="col-span-2">
                                <label for="subject" class="">Subject <span class="text-red-600">*</span></label>
                                <input type="text" name="subject" id="subject"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="Enter Subject">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="subject_err"></div>
                            </div>
                            <div class="col-span-2">
                                <label for="message" class="block text-sm font-medium text-brand-dark-1 mb-2">
                                    Message <span class="text-red-600">*</span>
                                </label>
                                <textarea name="message" id="message" rows="5"
                                          class="w-full p-3.5 rounded-md border border-brand-gray-1 bg-white text-brand-dark-1 focus:outline-none focus:ring-2 focus:ring-brand-green-1 focus:border-brand-green-1 transition duration-300 required"
                                          placeholder="Write a message here ..."
                                ></textarea>
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="message_err"></div>
                            </div>
                            <div class="col-span-2">
                                <input type="hidden" name="invisibleCaptcha" class="invisibleCaptcha">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="invisibleCaptcha_err"></div>
                            </div>
                        </div>
                        <button type="button"
                                class="btn btn-primary mt-6 flex items-center gap-2 py-3.5 transition ease-in-out duration-300 hover:btn-primary-dark btn-submit max-sm:mt-0">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="w-full h-[500px] rounded-2xl overflow-hidden filter grayscale contact-map">
                {!! @$siteSetting->map_iframe !!}
{{--                <iframe--}}
{{--                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d883.1376796344744!2d85.30851066962865!3d27.70027773591441!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb1854197b62b9%3A0x9911d4e1814bd47a!2sGana%20Bahal%2C%20Kathmandu%2044600!5e0!3m2!1sen!2snp!4v1750590525114!5m2!1sen!2snp"--}}
{{--                    class="w-full h-full filter grayscale"--}}
{{--                    style="border:0;"--}}
{{--                    allowfullscreen=""--}}
{{--                    loading="lazy"--}}
{{--                    referrerpolicy="no-referrer-when-downgrade">--}}
{{--                </iframe>--}}
            </div>

            <div class="grid grid-cols-3 my-12 gap-x-6 max-lg:grid-cols-1 max-lg:gap-y-8">
                <div class="p-4  rounded-2xl flex bg-brand-green-2 gap-x-4 items-center">
                    <div class="bg-brand-green-4 p-3.5 rounded-full flex items-center justify-center">
                        <iconify-icon icon="line-md:phone-call-loop" width="40" height="40"
                                      class="text-brand-green-3"></iconify-icon>
                    </div>
                    <div>
                        <span class="text-white uppercase max-sm:text-sm">Phone</span>
                        <h3 class="text-2xl font-bold text-brand-green-3 max-sm:text-lg">{{ @$siteSetting->contact_number }}</h3>
                    </div>
                </div>
                <div class="p-4  rounded-2xl flex bg-brand-green-2 gap-x-4 items-center">
                    <div class="bg-brand-green-4 p-3.5 rounded-full flex items-center justify-center">
                        <iconify-icon icon="line-md:email-opened" width="40" height="40"
                                      class="text-brand-green-3"></iconify-icon>
                    </div>
                    <div>
                        <span class="text-white uppercase max-sm:text-sm">Email</span>
                        <h3 class="text-2xl font-bold text-brand-green-3 max-sm:text-lg" style="font-size:19px;">{{ @$siteSetting->company_email }}</h3>
                    </div>
                </div>
                <div class="p-4  rounded-2xl flex bg-brand-green-2 gap-x-4 items-center">
                    <div class="bg-brand-green-4 p-3.5 rounded-full flex items-center justify-center">
                        <iconify-icon icon="line-md:map-marker" width="40" height="40"
                                      class="text-brand-green-3"></iconify-icon>
                    </div>
                    <div>
                        <span class="text-white uppercase max-sm:text-sm">Address</span>
                        <h3 class="text-2xl font-bold text-brand-green-3 max-sm:text-lg"> {{ @$siteSetting->company_location }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('frontend.include._contact-bottom-part')
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        function onSubmitExecuteInvisibleCaptcha(token) {
            $('.invisibleCaptcha').val(token);
            onSubmit(token);
            setTimeout(function() {
                grecaptcha.reset();
            }, 2000);
        }
    </script>
    <script src="{{asset('assets/frontend/custom/js/contact-us.js')}}"></script>
@endsection