@php
    $bannerContent = getContent('banner.content', true);
@endphp
<section class="banner bg-img" data-background-image="{{ asset(activeTemplate(true) . 'images/banner/bg.png') }}">
    <div class="container">
        <div class="banner-content">
            <h1 class="banner-content__title" data-bt-muted-start="4" data-bt-muted-word="6" data-bt-underline-word="7" data-aos="zoom-in-down" data-aos-duration="1500" data-aos-delay="100">
                {{ __($bannerContent?->data_values?->heading ?? '') }}
            </h1>
            <p class="banner-content__desc" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                {{ __($bannerContent?->data_values?->subheading ?? '') }}
            </p>
            <div class="banner-content__btns" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                <a class="btn btn--lg btn--base" href="{{ url($bannerContent->data_values?->button_one_url ?? '') }}">
                    <span class="btn__text">{{ __($bannerContent->data_values?->button_one_text ?? '') }}</span>
                    <span class="btn__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
                            <path d="M7 7h10v10"></path>
                            <path d="M7 17 17 7"></path>
                        </svg>
                    </span>
                </a>
                <a class="btn btn--lg btn--base-two" href="{{ url($bannerContent->data_values?->button_two_url ?? '') }}">
                    <span class="btn__text">{{ __($bannerContent->data_values?->button_two_text ?? '') }}</span>
                </a>
            </div>
            <form class="banner-form" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
                <div class="banner-form__group">
                    <span class="banner-form__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search">
                            <path d="m21 21-4.34-4.34" />
                            <circle cx="11" cy="11" r="8" />
                        </svg>
                    </span>
                    <input class="banner-form__input bannerSearch" type="text" name="domain_name" placeholder="@lang('Search By Domain')">
                </div>
                <button class="btn btn--lg btn--base searchDomain" type="button">
                    @lang('Search')
                    <div class="btn__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right">
                            <path d="m9 18 6-6-6-6" />
                        </svg>
                    </div>
                </button>
            </form>
        </div>
    </div>
</section>

@push('script')
    <script>
        (function($) {
            "use strict";

            $('.searchDomain').on('click', function() {
                let search = $('.bannerSearch').val();

                if (!search) {
                    notify('error', 'Please enter domain name');
                    return;
                }

                let url = new URL(`{{ route('domain.list') }}`);
                url.searchParams.set('search', search);

                url.searchParams.set('min', 0);
                url.searchParams.set('max', 100000);
                url.searchParams.set('paginateValue', 20);

                window.location.href = url.toString();
            });

        })(jQuery);
    </script>
@endpush
