<section class="main-banner 2xl:pt-200 sm:pt-170 pt-130 relative overflow-hidden dark:bg-[url('../images/background/bg19.png')] bg-[url('../images/background/bg18.png')] bg-no-repeat bg-bottom after:content-[''] after:absolute after:top-0 after:left-0 after:size-full after:bg-no-repeat after:pointer-events-none after:bg-cover after:opacity-40 dark:after:bg-[url('../images/background/bg20.png')] after:bg-[url('../images/background/bg21.png')]">
    <div class="container-fluid relative z-2">
        <div class="text-center xl:px-150">
            <h1 class="2xl:text-8xxl lg:text-7xxl sm:text-5xl text-[41px]/50 headline">{{ isset($args['title']) ? $args['title'] : '' }} 
            @php
            $title_tags = explode(',', @$args['title_tags']);
            @endphp
            @if(isset($title_tags))
            <span class="inline-flex whitespace-nowrap relative typewrite">
                @foreach ($title_tags as $tag) 
                    <span class="pxl-item--text dark:bg-white dark:text-heading text-white bg-secondary rounded-full lg:p-20 sm:p-10 px-10 lg:text-7xxl/56 text-4xl/40 absolute top-0 left-0 opacity-0">{{ $tag }}</span>
                @endforeach
            </span>
            @endif
            </h1>
        </div>
        <div class="relative xl:pt-120 sm:pt-40 pt-20">
            <div class="custom-tab banner-tab xl:flex justify-between">
                @if(isset($args['banner_tabs']))
                @foreach($args['banner_tabs'] as $key => $value)
                <div class="tab-content justify-between w-full max-xl:flex-col {{ $key == 0 ? 'active' : '' }}">
                    <div class="flex flex-col justify-between 2xl:pb-80 lg:pb-50 pb-40 xl:gap-50 gap-20 max-xl:items-center">
                        @if(isset($value['description']) && $value['description'] != '')
                        <p class="sm:text-xl text-base dark:text-white text-secondary uppercase lg:max-w-280 max-w-320 headline banner-subtitle">{{ $value['description'] }}</p>
                        @endif
                        <div class="inline-flex items-center gap-14 bg-darkbtn xl:p-15 xl:pe-35 px-10 py-5 pe-15 rounded-full">
                            <div>
                                @php
                                $images = explode(',', @$value['client_gallery']);
                                @endphp
                                @if(isset($images))
                                    @foreach ($images as $image) 
                                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$image) }}" alt="" class="inline-block xl:size-60 size-40 -me-13 last:me-0 rounded-full border-2 border-card relative object-cover duration-500 hover:z-1">
                                    @endforeach
                                @endif
                            </div>
                            @if(isset($value['client_gallery_text']) && $value['client_gallery_text'] != '')
                            <div>
                                <span class="xl:text-xl sm:text-lg/24 text-base text-white block font-light capitalize">{!! $value['client_gallery_text'] !!}</span>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="flex flex-col justify-between max-xl:overflow-hidden">
                        <div class="relative">
                            <div class="pxl-group-image">
                                @if(isset($args['banner_tabs']))
                                @foreach($args['banner_tabs'] as $index => $value)
                                    @if($index == 0)
                                    <div class="inner-item flex items-center justify-center">
                                        <div class="item-image rounded-lg overflow-hidden relative top-0 bottom-0 z-2 lg:w-[20vw] lg:h-[25vw] w-[40vw] h-[45vw] flex">
                                            <img width="398" height="482" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" class="size-full object-cover" alt="">
                                        </div>
                                    </div>
                                    @elseif($index == 1)
                                    <div class="inner-item flex items-center justify-center">
                                        <div class="item-image rounded-lg overflow-hidden absolute top-40 bottom-0 z-1 lg:w-[20vw] lg:h-[25vw] w-[40vw] h-[45vw] flex">
                                            <img width="398" height="487" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" class="size-full object-cover" alt="">
                                        </div>
                                    </div>
                                    @elseif($index == 2)
                                    <div class="inner-item flex items-center justify-center">
                                        <div class="item-image rounded-lg overflow-hidden absolute top-90 bottom-0 z-1 lg:w-[20vw] lg:h-[25vw] w-[40vw] h-[45vw] flex">
                                            <img width="398" height="487" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" class="size-full object-cover" alt="">
                                        </div>
                                    </div>
                                    @elseif($index == 3)
                                    <div class="inner-item flex items-center justify-center">
                                        <div class="item-image rounded-lg overflow-hidden absolute top-40 bottom-0 z-1 lg:w-[20vw] lg:h-[25vw] w-[40vw] h-[45vw] flex">
                                            <img width="398" height="527" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" class="size-full object-cover" alt="">
                                        </div>
                                    </div>
                                    @elseif($index == 4)
                                    <div class="inner-item flex items-center justify-center">
                                        <div class="item-image rounded-lg overflow-hidden absolute top-90 bottom-0 z-0 lg:w-[20vw] lg:h-[25vw] w-[40vw] h-[45vw] flex">
                                            <img width="398" height="487" src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['image']) }}" class="size-full object-cover" alt="">
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="flex xl:flex-col flex-row justify-between 2xl:pb-80 lg:pb-50 pb-40 xl:gap-50 sm:gap-20 lg:mt-0 mt-40 max-xl:items-end">
                        @if(isset($value['button_text']) && $value['button_text'] != '')
                        <a 
                            href="{{ isset($value['button_link']) ? $value['button_link'] : 'javascript:void(0);' }}"
                            class="btn btn-light flairBtn group h-auto capitalize lg:text-4xl sm:text-2xl text-base font-title inline-block py-8 sm:px-30 px-20 rounded-6xl">
                            <span class="button-flair-wrapper">
                                <span class="button-flair"></span>
                            </span>
                            <span class="button-label relative group-hover:text-white">{{ $value['button_text'] }}</span>
                        </a>
                        @endif
                    </div>
                </div>
                @endforeach
                @endif
                <ul class="text-right uppercase sm:text-xl text-base banner-tabs sm:absolute bottom-0 right-0 2xl:pb-80 lg:pb-50 pb-40 max-sm:-mt-80">
                    @if(isset($args['banner_tabs']))
                    @foreach($args['banner_tabs'] as $key => $value)
                    <li class="sm:pb-20 pb-8 last:pb-0">
                        <a class="block text-lightgrey tab-title" href="javascript:void(0);">{{ @$value['title'] }}</a>
                    </li>
                    @endforeach
                    @endif
                </ul>
            </div>
        </div>
    </div>
</section>
