@php
    if (isset($w3cms_option)) {
        extract($w3cms_option);
    }
@endphp

<section class="main-banner overflow-hidden sm:pt-145 pt-100 sm:pb-145 pb-80 dark:bg-linear-(--banner-gradient) z-0 noice-overlay before:content-[''] before:absolute before:top-0 before:left-0 dark:before:bg-bodybg before:bg-linear-(--banner-gradient) dark:before:bg-none before:h-full before:w-[44%] before:-z-1 lg:before:block before:hidden">
    <div class="container">
        <div class="grid grid-cols-12 gap-20">
            <div class="lg:col-span-6 col-span-12">
                <div class="lg:w-[50vw] w-full lg:float-right relative lg:mb-100 mb-30 lg:pe-50">
                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['image']) }}" alt="" class="w-full">
                </div>
                @if(isset($args['contact_info']) && $args['contact_info'] == "1")
                <div class="row">
                    @if(!empty($email_address))
                    <div class="lg:w-[44%] sm:w-1/3 w-full md:mb-30 mb-15">
                        <div class="">
                            <h3 class="lg:dark:text-white text-dark text-2xl font-medium font-heading md:mb-20 mb-5">{{ $email_text }}</h3>
                            <a class="text-lg lg:dark:text-bodytext text-textlight dark:hover:text-white block hover:underline" href="mailto:{{ $email_address }}">{{ $email_address }}</a>
                        </div>
                    </div>
                    @endif
                    @if(!empty($phone_number))
                    <div class="lg:w-[56%] sm:w-1/3 w-full md:mb-30 mb-15">
                        <div class="">
                            <h3 class="lg:dark:text-white text-dark text-2xl font-medium font-heading md:mb-20 mb-5">{{ $phone_text }}</h3>
                            <a class="text-lg lg:dark:text-bodytext text-textlight dark:hover:text-white block hover:underline" href="tel:{{ $phone_number }}">{{ $phone_number }}</a>
                        </div>
                    </div>
                    @endif
                    @if(!empty($address)) 
                    <div class="lg:w-[40%] sm:w-1/3 w-full md:mb-30 mb-15 lg:!mt-70">
                        <div class="">
                            <h2 class="lg:dark:text-white text-dark text-2xl font-medium font-heading md:mb-20 mb-5">{{ $address_text }}</h2>
                            <a class="text-lg lg:dark:text-bodytext text-textlight dark:hover:text-white block hover:underline" href="javasript:void(0);">{{ $address }}</a>
                        </div>
                    </div>
                    @endif
                </div>
                @endif
            </div>
            <div class="lg:col-span-6 col-span-12">
                <div class="xl:pt-50 lg:ps-20">
                    <div class="xl:mb-50 mb-20">
                        @if(isset($args['subtitle']) && $args['subtitle'] != '')
                        <p class="sm:text-2xl text-lg dark:text-white text-heading mb-10">{{ $args['subtitle'] }}</p>
                        @endif
                        @if(isset($args['title']) && $args['title'] != '')
                        <h2 class="xl:text-7xl/80 md:text-5xl text-4xl font-semibold text-black mb-10">{{ $args['title'] }}</h2>
                        @endif
                        @if(isset($args['description']) && $args['description'] != '')
                        <p class="text-2xl font-light text-black/60">{{ $args['description'] }}</p>
                        @endif
                    </div>
                    <form class="dz-form dzForm" method="POST" action="{{ route('front.contact') }}">

                        @csrf
                        @if($errors->any())
                            <div class="col-12 m-b30">
                                <div class="text-red alert alert-danger alert-dismissible fade show small" role="alert">
                                    {!! implode('<br>', $errors->all(':message')) !!}
                                </div>
                            </div>
                        @endif
                        @if( Session::get('success') )
                            <div class="col-12 m-b30">
                                <div class="text-green alert alert-success alert-dismissible fade show" role="alert">
                                    {{ Session::get('success') }}
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <div class="sm:w-1/2 w-full">
                                <div class="mb-30">
                                    <label for="FirstName" class="block font-normal mb-10">First name*</label>
                                    <input required type="text" name="first_name" id="FirstName" placeholder="John" class="py-11 text-lg border-b-2 border-[#383B3F] h-50 w-full">
                                </div>
                            </div>
                            <div class="sm:w-1/2 w-full">
                                <div class="mb-30">
                                    <label for="LastName" class="block font-normal mb-10">Last name*</label>
                                    <input required type="text" name="last_name" id="LastName" placeholder="Carter" class="py-11 text-lg border-b-2 border-[#383B3F] h-50 w-full">
                                </div>
                            </div>
                            <div class="sm:w-1/2 w-full">
                                <div class="mb-30">
                                    <label for="inputYourEmail" class="block font-normal mb-10">Email address*</label>
                                    <input required type="email" name="email" id="inputYourEmail" placeholder="info@example.com" class="py-11 text-lg border-b-2 border-[#383B3F] h-50 w-full">

                                </div>
                            </div>
                            <div class="sm:w-1/2 w-full">
                                <div class="mb-30">
                                    <label for="inputPhoneNumber" class="block font-normal mb-10">Phone*</label>
                                    <input required type="number" name="phone_number" id="inputPhoneNumber" placeholder="(123) 456 7890" class="py-11 text-lg border-b-2 border-[#383B3F] h-50 w-full">
                                </div>
                            </div>
                            <div class="w-full">
                                <div class="mb-40">
                                    <label for="inputMessage" class="block font-normal mb-10">Message*</label>
                                    <textarea placeholder="Write here" name="message" id="inputMessage" class="py-11 text-lg border-b-2 border-[#383B3F] min-h-150 w-full text-black/60"></textarea>
                                </div>
                            </div>
                            <div class="w-full">
                                <button name="submit" type="submit" value="Submit"  class="btn style-1 btn-outline ms-auto p-2 group button--stroke flairBtn magneticBtn" data-block="button">
                                    <span class="button-flair"></span>
                                    <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">Submit Now</span>
                                    <span class="inline-flex justify-center items-center size-32 rounded-full bg-secondary text-white duration-100 group-hover:bg-primary group-hover:text-secondary z-0">
                                        <i class="fa-solid fa-arrow-right text-sm"></i>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>