@section('title', __('home/welcome.Home'))

@push('style')
<link rel="stylesheet" href="{{ mix('css/web/home/welcome.css') }}">
@endpush

@push('script')
<script src="{{mix('js/web/home/welcome.js')}}"></script>
@endpush

<x-layout>

    <div class="full_banner">
        <div class="main_banner">
            <div id="homeBanners" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @windowWidthGreaterThan(991)
                    @foreach ($banner->items as $bannerItem)
                    <div class="carousel-item @if($loop->first) active @endif">
                        <div class="banner-logo"></div>
                        <div class="banner_text">
                            <h1>{!! $bannerItem->title !!}</h1>
                            <a href="{{$bannerItem->link ?? 'javascript:void(0)'}}"><img src="{{ asset('images/web/arrow.png')}}"> @lang('home/welcome.LEARN MORE')</a>
                        </div>
                        <img src="{{Storage::disk('musawer')->url($bannerItem->file)}}" class="d-block w-100 banner-main-image" alt="...">
                    </div>
                    @endforeach
                    @endif
                    @windowWidthLessThan(992)
                    @foreach ($mobileBanner->items as $bannerItem)
                    <div class="carousel-item @if($loop->first) active @endif">
                        <div class="banner_text">
                            <h1>{!! $bannerItem->title !!}</h1>
                        </div>
                        <a href="{{$bannerItem->link ?? 'javascript:void(0)'}}">
                            <img src="{{Storage::disk('musawer')->url($bannerItem->file)}}" class="d-block w-100 banner-main-image" alt="...">
                        </a>
                    </div>
                    @endforeach
                    @endif
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#homeBanners" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#homeBanners" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>

    <div class="main_slider">
        <h3>@lang('home/welcome.Photography services')</h3>
        <h1>{!! $data['photography-services']->title !!}</h1>
        <div class="main_para_2">{!! $data['photography-services']->html !!}</div>
        <div class="carousel-wrap">
            <div id="photography-categories" data-url="{{route('web_home_photo_categories')}}">
            </div>
        </div>
    </div>
    <div class="main_videos" @if($data['videography-services']->thumbnail && Storage::disk('musawer')->exists($data['videography-services']->thumbnail)) style="background:
        url({{Storage::disk('musawer')->url($data['videography-services']->thumbnail)}});" @endif>
        <div class="videos_text">
            <h3>@lang('home/welcome.Videography Services')</h3>
            <h1>{!! $data['videography-services']->title !!}</h1>
            <div class="main_para_1">{!! $data['videography-services']->html !!}</div>
            <a href="{{route('web_categories_listing', ['division' => 'videography'])}}">
                <img src="{{ asset('images/web/arrow.png')}}">@lang('home/welcome.View all')
            </a>
        </div>
    </div>
    <div class="main_packag">
        <div class="container">
            <h1 class="main_head_1">@lang('home/welcome.Highlited Packages')</h1>
            <div id="highlited-packages" data-url="{{route('web_home_highlited_packages')}}">
            </div>
            <div class="text-center view-all-packeges">
                <a href="{{route('web_products_listing_packages')}}">
                    <img src="{{ asset('images/web/arrow.png')}}">@lang('home/welcome.View more packages')
                </a>
            </div>
        </div>
    </div>
</x-layout>