@use('app\Helpers\Helpers')
@use('App\Enums\AdvertisementTypeEnum')
@use('App\Enums\ServiceTypeEnum')
@use('App\Enums\SymbolPositionEnum')
@extends('frontend.layout.master')

@section('title', __('frontend::static.categories.categories'))

@section('breadcrumb')
    <nav class="breadcrumb breadcrumb-icon">
        <a class="breadcrumb-item" href="{{ url('/') }}"><i class="iconsax" icon-name="home-2"></i> {{ __('frontend::static.categories.home') }}</a>
        <span class="breadcrumb-item active">{{ __('frontend::static.categories.categories') }}</span>
    </nav>
@endsection

@php
    $homePage = Helpers::getCurrentHomePage();
    $categories = $categories->paginate($themeOptions['pagination']['categories_per_page'] ?? null);
    $categoryPageAdvertiseBanners = Helpers::getCategoryPageAdvertiseBanners();
    $advertiseServices = Helpers::getCategoryPageAdvertiseServices();
@endphp

@section('content')
    <!-- Today Special Offers Section Start -->
    @if (count($categoryPageAdvertiseBanners))    
    <section class="offer-section section-b-space">
        <div class="container-fluid-lg">
            <div class="title-1">
                <h6><span>{{ $homePage['special_offers_section']['banner_section_label'] ?? __('frontend::static.special_offers_section.banner_section_label') }}</span></h6>
                <h2>{{  $homePage['special_offers_section']['banner_section_title'] ?? __('frontend::static.special_offers_section.banner_section_title') }}</h2>
                <p>{{ $homePage['special_offers_section']['banner_section_description'] ?? __('frontend::static.special_offers_section.banner_section_description') }}</p>
            </div> 
            <div class="outside-arrow">
                <div class="offer-banner-slider swiper">
                    <div class="swiper-wrapper">
                        @foreach ($categoryPageAdvertiseBanners as $banner)
                            @if ($banner->banner_type === AdvertisementTypeEnum::IMAGE)
                                @foreach ($banner->media as $media)
                                <div class="swiper-slide">
                                    <a href="{{ route('frontend.provider.details', $banner?->provider?->slug) }}">
                                        <div class="offer-banner">
                                            <img class="img-fluid banner-img" src="{{ Helpers::isFileExistsFromURL($media?->getUrl(), true)  }}"/>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            @endif
                            @if ($banner->banner_type === AdvertisementTypeEnum::VIDEO)
                                <iframe width="560" height="315" src="{{ $banner->video_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    <!-- Today Special Offers Section End -->

    <!-- Special Offer In Service Section Start -->
    @if (count($advertiseServices))
    <section class="service-list-section section-bg section-b-space">
        <div class="container-fluid-lg">
            <div class="title-1">
                <h6><span>{{ $homePage['special_offers_section']['section_label'] ?? __('frontend::static.special_offers_section.service_section_label') }}</span></h6>
                <h2>{{  $homePage['special_offers_section']['service_section_title'] ?? __('frontend::static.special_offers_section.service_section_title') }}</h2>
                <p>{{  $homePage['special_offers_section']['service_section_description'] ?? __('frontend::static.special_offers_section.service_section_description') }}</p>
            </div>
            <div class="service-list-content">
                <div class="swiper feature-slider">
                    <div class="swiper-wrapper">
                        @foreach ($advertiseServices as $advertisement)
                            @foreach ($advertisement->services as $service)
                                <div class="swiper-slide">
                                    <div class="card">
                                        @if ($service->discount)
                                            <div class="discount-tag">{{ $service->discount }}%</div>
                                        @endif
                                        <div class="card-image">
                                            <a href="{{ route('frontend.service.details', $service?->slug) }}" class="card-img">
                                                <img src="{{ $service?->web_img_thumb_url }}" alt="{{ $service?->title }}" class="img-fluid lozad">
                                            </a>
                                        </div>
                                        <div class="card-body">
                                            <div class="service-title">
                                                <h4>
                                                    <a title="{{ $service?->title }}" href="{{ route('frontend.service.details', $service?->slug) }}">{{ $service?->title }}</a>
                                                </h4>
                                                @if ($service->price || $service->service_rate)
                                                    <div class="price-number">
                                                        @if ($service->price && $service->service_rate)
                                                            <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->service_rate) }}</small>
                                                        @else
                                                            <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</small>
                                                        @endif
                                                        <del>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</del>

                                                        <div class="number-box">
                                                            @if ($service?->duration)                                                        
                                                                <div class="time">
                                                                    <i class="iconsax" icon-name="clock"></i>
                                                                    <span>{{ $service?->duration }}{{ $service?->duration_unit === 'hours' ? 'h' : 'm' }}</span>
                                                                </div>
                                                            @endif
                                                            @if ($service?->required_servicemen)                                                        
                                                                <div class="time">
                                                                    <i class="iconsax" icon-name="security-user"></i>
                                                                    <span>{{ $service?->required_servicemen }}</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="card-footer">
                                                <div class="footer-detail">
                                                    <img src="{{ Helpers::isFileExistsFromURL($service?->user?->media?->first()?->getURL(), true) }}" alt="feature" class="img-fluid lozad">
                                                    <div class="footer-content">
                                                        <div>
                                                            <a href="{{ route('frontend.provider.details', ['slug' => $service?->user?->slug]) }}">
                                                                <p>{{ $service?->user?->name }}</p>
                                                            </a>
                                                            <div class="rate">
                                                                <ul class="rating-list">
                                                                    @php
                                                                        $rating = round($service?->user?->review_ratings ?? 0); // rating (0–5)
                                                                    @endphp

                                                                    @for($i = 1; $i <= 5; $i++)
                                                                        @if($i <= $rating)
                                                                            <li>
                                                                                <img data-src="{{ asset('frontend/images/svg/star.svg') }}" alt="star" class="img-fluid star lozad">
                                                                            </li>
                                                                        @else
                                                                            <li>
                                                                                <img data-src="{{ asset('frontend/images/svg/star-light.svg') }}" alt="star" class="img-fluid star lozad">
                                                                            </li>
                                                                        @endif
                                                                    @endfor
                                                                </ul>
                                                                <small>({{ $service?->user?->review_ratings ?? '' }})</small>
                                                            </div>
                                                        </div>
                                                        <button data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="book-now-tooltip" data-bs-title="{{ __('frontend::static.home_page.book_now') }}" type="button" class="btn book-now-btn btn-solid w-auto" id="bookNowButton" data-bs-toggle="modal" data-bs-target="#bookServiceModal-{{ $service->id }}" data-login-url="{{ route('frontend.login') }}" data-check-login-url="{{ route('frontend.check.login') }}" data-service-id="{{ $service->id }}">
                                                            <span>+ {{ __('frontend::static.home_page.book_now') }}</span>
                                                            <span class="spinner-border spinner-border-sm" style="display: none;"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    
<section class="category-section section-b-space">
    <div class="container-fluid-lg">
        <div class="row g-lg-5 g-3 category-row">
            <div class="col-xxl-3 col-lg-4">
                <ul class="nav nav-tabs custom-nav-tabs" id="myTab">
                    @foreach ($categories as $key => $category)
                        @php
                            $locale = app()->getLocale();
                            $mediaItems = $category->getMedia('image')->filter(function ($m) use ($locale) {
                                return $m->getCustomProperty('language') === $locale;
                            });
                            $imageUrl = $mediaItems->count() > 0 ? $mediaItems->first()->getUrl() : asset('frontend/images/placeholder.jpg');
                        @endphp
                        <li class="nav-item">
                            <button class="nav-link {{ $loop->first ? 'active' : '' }}" id="{{ $category->slug }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $category->slug }}">
                                <div class="img-box">
                                    <img src="{{ Helpers::isFileExistsFromURL($imageUrl, true) }}" alt="{{ $category->title }}" class="img-fluid lozad">
                                </div>
                                <div class="text-box">
                                    <span>{{ $category->title }}</span>
                                    <small>{{ $category->allServices()->count() }} {{ __('frontend::static.home_page.services') }}</small>
                                </div>
                                <i class="iconsax" icon-name="arrow-right"></i>
                            </button>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="col-xxl-9 col-lg-8">
                <div class="tab-content mt-0" id="myTabContent">
                    @foreach ($categories as $category)
                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="{{ $category->slug }}">

                            {{-- Subcategory Tabs --}}
                            @if($category->children->count())
                                <ul class="nav nav-tabs tab-content-2 custom-nav-tabs mb-3" id="subTab-{{ $category->id }}">
                                     <li class="nav-item">
                                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#sub-all-{{ $category->id }}">
                                                <div class="text-box"><span>{{ __('frontend::static.all') }}</span></div>
                                            </button>
                                    </li>
                                    @foreach ($category->children as $sub)
                                        <li class="nav-item">
                                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sub-{{ $sub->slug }}">
                                                <div class="text-box"><span>{{ $sub->title }}</span></div>
                                            </button>
                                        </li>
                                    @endforeach
                                </ul>
                                <div class="tab-content" id="subTabContent-{{ $category->id }}">
                                    <div class="tab-pane fade show active" id="sub-all-{{ $category->id }}">
                                            <div class="row g-md-4 g-sm-3 g-2 row-cols-xxl-4 row-cols-xl-3 row-cols-lg-2 row-cols-md-3 row-cols-2">
                                                   @forelse ($category->allServices() as $service)
                                                    <div class="col">
                                                        <a href="{{ route('frontend.service.details', $service->slug) }}" class="category-img">
                                                            <img src="{{ $service->web_img_thumb_url }}" alt="{{ $service->title }}" class="img-fluid lozad">
                                                            <span class="category-span">{{ $service->title }}</span>
                                                        </a>
                                                    </div>
                                                @empty
                                                    <div class="no-data-found">
                                                        <p>{{ __('frontend::static.home_page.services_not_found') }}</p>
                                                    </div>
                                                @endforelse
                                            </div>
                                        </div>
                                    @foreach ($category->children as $sub)
                                        <div class="tab-pane fade" id="sub-{{ $sub->slug }}">
                                            <div class="row g-md-4 g-sm-3 g-2 row-cols-xxl-4 row-cols-xl-3 row-cols-lg-2 row-cols-md-3 row-cols-2">
                                                @forelse ($sub->services as $service)
                                                    <div class="col">
                                                        <a href="{{ route('frontend.service.details', $service->slug) }}" class="category-img">
                                                            <img src="{{ $service->web_img_thumb_url }}" alt="{{ $service->title }}" class="img-fluid lozad">
                                                            <span class="category-span">{{ $service->title }}</span>
                                                        </a>
                                                    </div>
                                                @empty
                                                    <div class="no-data-found">
                                                        <p>{{ __('frontend::static.home_page.services_not_found') }}</p>
                                                    </div>
                                                @endforelse
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                            {{-- If no subcategories, show parent services --}}
                            @else
                                <div class="row g-md-4 g-sm-3 g-2 row-cols-xxl-4 row-cols-xl-3 row-cols-lg-2 row-cols-md-3 row-cols-2">
                                    @forelse ($category->services as $service)
                                        <div class="col">
                                            <a href="{{ route('frontend.service.details', $service->slug) }}" class="category-img">
                                                <img src="{{ $service->web_img_thumb_url }}" alt="{{ $service->title }}" class="img-fluid lozad">
                                                <span class="category-span">{{ $service->title }}</span>
                                            </a>
                                        </div>
                                    @empty
                                        <div class="no-data-found">
                                            <p>{{ __('frontend::static.home_page.services_not_found') }}</p>
                                        </div>
                                    @endforelse
                                    
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('js') 
@endpush