<!-- footer -->
<footer class="relative dark:bg-bg1 bg-white">
    <!-- Upper Footer -->
    <div class="xl:pt-115 sm:pt-100 pt-60">
        <div class="container">
            <div class="grid grid-cols-12 gap-10 sm:mb-100 mb-30">
                <div class="xl:col-span-7 col-span-12">
                    <div class="flex justify-between">
                        <h2 class="xl:text-[4.7vw]/[5.5vw] sm:text-6xl text-5xl sm:mb-55 mb-20 font-medium xl:max-w-700 headline2">{!! $footer_title !!}</h2>
                        @if(!empty(config('ThemeOptions.footer_template_3_button_1_text')))
                        <a 
                            class="w-180 min-w-180 relative rounded-full md:block hidden overflow-hidden xl:mt-20 xl:me-20 wow fadeInUp" data-wow-delay="0.5s" 
                            href="{{ config('ThemeOptions.footer_template_3_button_1_url') }}" 
                            target="{{ config('ThemeOptions.footer_template_3_button_1_target') }}"
                        >
                            <div class="flex justify-center items-center size-180 rounded-full animate-rotate text-center text-row word-rotate-box bg-primarylight after:content-[''] after:absolute after:top-0 after:left-0 after:size-full after:-z-1 after:rounded-full">
                                <span class="word-rotate">{{ config('ThemeOptions.footer_template_3_button_1_text') }}</span>
                                <svg class="block animate-rotate [animation-direction:reverse] badge__emoji" width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M26.25 63.75L63.75 26.25" stroke="#1C1A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M26.25 26.25H63.75V63.75" stroke="#1C1A1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>                                                
                            </div>
                        </a>
                        @endif
                    </div>
                    <div class="row">
                        <div class="xl:w-[38%] sm:w-[33.3%] w-full sm:mb-0 mb-15">
                            <div class="sm:mb-50 mb-15 wow fadeInUp" data-wow-delay="0.8s">
                                @php
                                    $section1_widgets_ids = array_keys($footer_sections['Section 1'] ?? array());
                                    $section1_widgets = DzHelper::getSidebarWidgets($section1_widgets_ids);
                                @endphp
                                @forelse ($section1_widgets ?? array() as $widget)
                                    {!! HelpDesk::shortcodeContent($widget->content,'widget') !!}
                                @empty
                                @endforelse
                            </div>
                            <div class="wow fadeInUp" data-wow-delay="0.7s">
                                @php
                                    $section1_widgets_ids = array_keys($footer_sections['Section 2'] ?? array());
                                    $section1_widgets = DzHelper::getSidebarWidgets($section1_widgets_ids);
                                @endphp
                                @forelse ($section1_widgets ?? array() as $widget)
                                    {!! HelpDesk::shortcodeContent($widget->content,'widget') !!}
                                @empty
                                @endforelse
                            </div>
                        </div>
                        <div class="xl:w-[32%] sm:w-[33.3%] w-full sm:mb-0 mb-15 wow fadeInUp" data-wow-delay="0.8s">
                            @php
                                $section1_widgets_ids = array_keys($footer_sections['Section 3'] ?? array());
                                $section1_widgets = DzHelper::getSidebarWidgets($section1_widgets_ids);
                            @endphp
                            @forelse ($section1_widgets ?? array() as $widget)
                                {!! HelpDesk::shortcodeContent($widget->content,'widget') !!}
                            @empty
                            @endforelse
                        </div>
                        <div class="xl:w-[30%] sm:w-[33.3%] w-full sm:mb-0 mb-15 wow fadeInUp" data-wow-delay="0.8s">
                            @php
                                $section1_widgets_ids = array_keys($footer_sections['Section 4'] ?? array());
                                $section1_widgets = DzHelper::getSidebarWidgets($section1_widgets_ids);
                            @endphp
                            @forelse ($section1_widgets ?? array() as $widget)
                                {!! HelpDesk::shortcodeContent($widget->content,'widget') !!}
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="xl:col-span-5 col-span-12">
                    <div class="xl:ps-170 xl:pt-20">
                        <h3 class="text-2xxl sm:mb-20 mb-15 wow fadeInUp" data-wow-delay="0.8s">Get a Proposal</h3>
                        <form class="dz-form dzForm footer-form wow fadeInUp" data-wow-delay="1s" 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="sm:mb-20 mb-15">
                                <label for="FirstName" class="hidden"></label>
                                <input required type="text" name="first_name" id="FirstName" placeholder="First name" class="px-25 py-12 rounded-lg dark:text-white dark:placeholder:text-white/70 text-black placeholder:text-black/70 border border-inputborder h-51 w-full duration-500 focus:border-primary focus:border-b-2 dark:focus:placeholder:text-white/100 focus:placeholder:text-black/100">
                            </div>
                            <div class="sm:mb-20 mb-15">
                                <label for="LastName" class="hidden"></label>
                                <input required type="text" name="last_name" id="LastName" placeholder="Last name" class="px-25 py-12 rounded-lg dark:text-white dark:placeholder:text-white/70 text-black placeholder:text-black/70 border border-inputborder h-51 w-full duration-500 focus:border-primary focus:border-b-2 dark:focus:placeholder:text-white/100 focus:placeholder:text-black/100">
                            </div>
                            <div class="sm:mb-20 mb-15">
                                <label for="emailaddress" class="hidden"></label>
                                <input required type="email" name="email" id="emailaddress" placeholder="Email address" class="px-25 py-12 rounded-lg dark:text-white dark:placeholder:text-white/70 text-black placeholder:text-black/70 border border-inputborder h-51 w-full duration-500 focus:border-primary focus:border-b-2 dark:focus:placeholder:text-white/100 focus:placeholder:text-black/100">
                            </div>
                            <div class="sm:mb-20 mb-15">
                                <label for="Phone" class="hidden"></label>
                                <input required type="number" name="phone_number" id="Phone" placeholder="Phone no." class="px-25 py-12 rounded-lg dark:text-white dark:placeholder:text-white/70 text-black placeholder:text-black/70 border border-inputborder h-51 w-full duration-500 focus:border-primary focus:border-b-2 dark:focus:placeholder:text-white/100 focus:placeholder:text-black/100">
                            </div>
                            <div class="sm:mb-10 mb-15">
                                <textarea required name="message" id="about" placeholder="Tell us about your project" class="px-25 py-12 rounded-lg dark:text-white dark:placeholder:text-white/70 text-black placeholder:text-black/70 border border-inputborder min-h-140 w-full duration-500 focus:border-primary focus:border-b-2 dark:focus:placeholder:text-white/100 focus:placeholder:text-black/100"></textarea>
                            </div>
                            <div>
                                <button name="submit" type="submit" value="Submit" class="btn btn-primary style-3 btn-md text-white w-full justify-center cursor-pointer">
                                    <span class="pxl-button-text">Request a Consultation</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Lower Footer -->
    <div class="container">
        @if (config('ThemeOptions.footer_template_3_bottom_bar'))
        <div class="2xl:-mx-40 wow fadeInUp" data-wow-delay="0.8s">
            <div class="sm:px-40 px-30 sm:py-30 py-20 bg-linear-(--bg7-gradient) dark:text-white text-bodytext rounded-xxl sm:flex items-center justify-between">
                <h3 class="sm:text-[32px] text-2xxl sm:mb-0 mb-15 text-white flex-1">{{ config('ThemeOptions.footer_template_3_bottom_title') }}</h3>
                <a href="{{ config('ThemeOptions.footer_template_3_bottom_button_url') }}" class="btn btn-md style-3 btn-secondary hover:bg-white hover:text-secondary whitespace-nowrap">
                    <span class="pxl-button-text">{{ config('ThemeOptions.footer_template_3_bottom_button_text') }}</span></a>
            </div>
        </div>
        @endif
        @if($footer_copyright_on)
        <div class="py-27 max-sm:pb-80 wow fadeInUp" data-wow-delay="1s">
            <p class="sm:text-base text-sm font-light text-[#77775B] dark:text-white/50 text-center">{!! $copyright_title !!}</p>
        </div>
        @endif
    </div>
</footer>
<!-- footer END -->

