<section class="main-banner relative bg-bglight xl:h-screen xl:min-h-850 xl:max-h-850 overflow-hidden before:bg-[url('../images/background/bg25.png')] before:size-full before:z-1 before:bg-center before:bg-no-repeat before:bg-cover before:absolute bg-no-repeat bg-cover 2xl:mx-40 mx-14 rounded-2xl">
    <img class="size-full object-cover absolute scale-130" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['background_image']) }}" alt="img" data-speed=".5">
    <div class="container lg:py-100 py-40 relative z-1">
        <div class="grid grid-cols-12">
            <div class="lg:col-span-7 col-span-12 xl:mr-128 lg:mr-40 max-lg:mb-40">
                @if(isset($args['subtitle']) && $args['subtitle'] != '')
                <span class="text-lg font-medium text-white py-10 px-20 rounded-2lg border border-white/10 backdrop-blur-[20px] bg-white/5">{{ $args['subtitle'] }}</span>
                @endif
                <h2 class="2xl:text-5xxl lg:text-5xl sm:text-4xxl text-3xl font-semibold headline sm:mb-60 mb-40 text-white">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                @if(isset($args['description']) && $args['description'] != '')
                <p class="text-white/70 mt-30">{{ $args['description'] }}</p>
                @endif
                <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['chart_image']) }}" alt="Chart Image" />
            </div>
            <div class="lg:col-span-5 col-span-12">
                <div class="bg-white rounded-xxl xl:p-50 p-30">
                    <!-- TITLE START-->
                    <div class="sm:mb-27">
                        <h2 class="sm:text-3xl text-2xl font-semibold text-secondary">{{ isset($args['form_title']) ? $args['form_title'] : '' }}</h2>
                    </div>
                    <!-- TITLE END-->
                    <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-20">
                                    <input required type="text" name="first_name" id="FirstName" placeholder="First Name" class="block w-full text-base font-medium h-50 text-secondary placeholder:text-secondary/50 border-b-2 border-[#1B4C401A] hover:border-primary duration-500">
                                </div>
                            </div>
                            <div class="sm:w-1/2 w-full">
                                <div class="mb-20">
                                    <input required type="text" name="last_name" id="LastName" placeholder="Last Name" class="block w-full text-base font-medium h-50 text-secondary placeholder:text-secondary/50 border-b-2 border-[#1B4C401A] hover:border-primary duration-500">
                                </div>
                            </div>
                            <div class="sm:w-1/2 w-full">
                                <div class="mb-20">
                                    <input required type="email" name="email" id="email" placeholder="Email Address" class="block w-full text-base font-medium h-50 text-secondary placeholder:text-secondary/50 border-b-2 border-[#1B4C401A] hover:border-primary duration-500">
                                </div>
                            </div>
                            <div class="sm:w-1/2 w-full">
                                <div class="mb-20">
                                    <input required type="number" name="phone_number" id="inputPhoneNumber" placeholder="Phone Number" class="block w-full text-base font-medium h-50 text-secondary placeholder:text-secondary/50 border-b-2 border-[#1B4C401A] hover:border-primary duration-500">
                                </div>
                            </div>
                            <div class="w-full">
                                <div class="mb-20">
                                    <textarea placeholder="Write here" name="message" id="message" class="block w-full text-base font-medium h-150 text-secondary placeholder:text-secondary/50 border-b-2 border-[#1B4C401A] hover:border-primary duration-500" placeholder="Message"></textarea>
                                </div>
                            </div>
                        </div>
                        <button name="submit" type="submit" value="Submit"  class="style-4 btn cursor-pointer bg-secondary text-white py-20 pl-25 pr-5 group">
                            <span data-original-text="Let’s Connect">Submit Message</span>
                            <span class="inline-flex justify-center items-center size-40 ml-10 rounded-full bg-primary text-secondary duration-100 z-0">
                                <svg class="group-hover:animate-toLeftFromRight" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.16663 10H15.8333" stroke="var(--secondary)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M10 4.16666L15.8333 10L10 15.8333" stroke="var(--secondary)" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>	