@use('app\Helpers\Helpers')
@extends('frontend.layout.master')
@push('css')
    <!-- Range Slider css -->
    <link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/vendors/range-slider.css') }}">
@endpush

@php
    $categories = Helpers::getCategories();
    $minPrice = $priceRange['min'] ?? 0;
    $maxPrice = $priceRange['max'] ?? 10000;
    $selectedMin = request()->input('price_min', $minPrice);
    $selectedMax = request()->input('price_max', $maxPrice);
@endphp

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

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

@section('content')
    <!-- Service List Section Start -->
    <section class="service-list-section section-b-space">
        <div class="container-fluid-lg booking-sec">
            <div class="row g-xl-5 service-list-content">
                <div class="col-xxl-3 col-xl-4 filter-sidebar">
                    <form action="{{ route('frontend.service.index') }}" method="GET">
                        <div class="left-sidebar-filter">
                            <div class="filter-title">
                                <h4>Filter Option</h4>
                                <button class="btn close-filter">
                                    <i data-feather="x"></i>
                                </button>
                                <button type="submit" class="filter-btn">{{ __('frontend::static.bookings.apply_filter') }}</button>
                            </div>
                            <div class="main-filter-box">
                                <div class="filter-box">
                                    <div class="filter-sub-title">
                                        <h5>{{ __('frontend::static.header.category') }}</h5>
                                    </div>
                                    <ul class="filter-list">
                                        @forelse($categories as $category)
                                            <li class="form-check">
                                                <input id="categories{{$category?->slug}}" name="categories[]" type="checkbox" value="{{$category?->slug}}" class="form-check-input categories-input" {{ in_array($category->slug, request()->get('categories', [])) ? 'checked' : '' }}/>
                                                <label class="form-check-label" for="categories{{$category?->slug}}">{{$category?->title }}</label>
                                            </li>
                                        @empty
                                            <li class="form-check category-item no-category">
                                                {{ __('frontend::static.services.categories_not_found')}}
                                            </li>
                                        @endforelse
                                    </ul>
                                </div>
                                @php
                                    $providers = $providers->get();
                                @endphp
                                <div class="filter-box">
                                    <div class="filter-sub-title">
                                        <h5>{{ __('frontend::static.providers.providers') }}</h5>
                                    </div>
                                    <ul class="filter-list">
                                        @forelse ($providers as $provider)    
                                            <li class="form-check">
                                                <input id="providers{{ $provider?->id }}" type="checkbox" value="{{ $provider?->id }}" name="providers[]" class="form-check-input categories-input" {{ in_array($provider->id, request()->get('providers', [])) ? 'checked' : '' }}/>
                                                <label class="form-check-label" for="providers{{ $provider?->id }}">{{ $provider?->name }}</label>
                                            </li>
                                        @empty
                                            <p id="no-results-message" class="no-results no-provider-results-message">
                                                {{ __('frontend::static.services.providers_not_found')}}
                                            </p>
                                        @endforelse
                                    </ul>
                                </div>

                                <div class="filter-box">
                                    <div class="filter-sub-title">
                                        <h5>{{ __('frontend::static.services.price_range')}}</h5>
                                    </div>
                                    <div class="price-range-box">
                                        <div class="wrapper">
                                            <div class="price-input">
                                                <div class="field">
                                                    <input type="number" readonly class="input-min" value="{{ $selectedMin }}">
                                                </div>
                                                <div class="separator">-</div>
                                                <div class="field">
                                                    <input type="number" readonly class="input-max" value="{{ $selectedMax }}">
                                                </div>
                                            </div>
                                            <div class="slider">
                                                <div class="progress"></div>
                                            </div>
                                            <div class="range-input">
                                                <input type="range" class="range-min" min="{{ $minPrice }}" max="{{ $maxPrice }}"
                                                    value="{{ $selectedMin }}" step="100">
                                                <input type="range" class="range-max" min="{{ $minPrice }}" max="{{ $maxPrice }}"
                                                    value="{{ $selectedMax }}" step="100">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="filter-box">
                                    <div class="filter-sub-title">
                                        <h5>Review</h5>
                                    </div>
                                    <ul class="filter-list">
                                        @foreach([5,4,3,2,1] as $star)
                                            {{-- <li class="form-check">
                                                <input id="rating" type="checkbox"
                                                    class="form-check-input categories-input" />
                                                <label class="rating-list form-check-label" for="rating">
                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}" alt="star"
                                                        class="img-fluid star">
                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}" alt="star"
                                                        class="img-fluid star">
                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}" alt="star"
                                                        class="img-fluid star">
                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}" alt="star"
                                                        class="img-fluid star">
                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}" alt="star"
                                                        class="img-fluid star">
                                                    <span>(5 Star)</span>
                                                </label>
                                            </li> --}}
                                            <li class="form-check">
                                                <input id="rating{{ $star }}" name="rating[]" type="checkbox"
                                                    value="{{ $star }}"
                                                    class="form-check-input rating-input"
                                                    {{ in_array($star, request()->get('rating', [])) ? 'checked' : '' }}>
                                                <label class="rating-list form-check-label" for="rating{{ $star }}">
                                                    @for($i = 1; $i <= 5; $i++)
                                                        <img src="{{ asset('frontend/images/svg/star'.($i <= $star ? '' : '-light').'.svg') }}"
                                                            alt="star" class="img-fluid star">
                                                    @endfor
                                                    <span>({{ $star }} Star{{ $star > 1 ? 's' : '' }})</span>
                                                </label>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-xxl-9 col-xl-8">
                    <div class="filter-div">
                        <div class="d-xl-none d-block mb-3">
                            <a href="#!" class="btn btn-solid filter-btn w-max"><i class="iconsax" icon-name="filter"></i> Show Filter</a>
                        </div>
                    </div>
                    <div class="row g-sm-4 g-3">
                        @forelse($services as $service)
                            <div class="col-xxl-4 col-xl-6 col-lg-4 col-sm-6">
                                <div class="card card-gray">
                                    <div class="card-image">
                                        @if ($service->discount)
                                            <div class="discount-tag">{{ $service->discount }}%</div>
                                        @endif
                                        @auth
                                            <div class="like-icon" id="favouriteDiv" data-service-id="{{ $service?->id }}">
                                                <img class="img-fluid icon outline-icon"
                                                    src="{{ asset('frontend/images/svg/heart-outline.svg') }}"
                                                    alt="whishlist">
                                                <img class="img-fluid icon fill-icon"
                                                    src="{{ asset('frontend/images/svg/heart-fill.svg') }}" alt="wishlisted">
                                            </div>
                                        @endauth
                                        <a href="{{ route('frontend.service.details', $service?->slug) }}" class="card-img">
                                            <img src="{{ $service?->web_img_thumb_url }}" alt="{{ $service?->title }}" class="img-fluid">
                                        </a>
                                    </div>
                                    <div class="card-body">
                                        <div class="service-title">
                                            <h4>
                                                <a href="{{ route('frontend.service.details', $service?->slug) }}"
                                                    title="{{ $service?->title }}">{{ $service?->title }}</a>
                                            </h4>
                                            <div class="price-number">
                                                <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->service_rate) }}</small>
                                                <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>
                                        </div>
                                        <div class="card-footer">
                                            <div class="footer-detail">
                                                <a
                                                    href="{{ route('frontend.provider.details', ['slug' => $service?->user?->slug]) }}">
                                                    <img src="{{ Helpers::isFileExistsFromURL($service?->user?->media?->first()?->getURL(), true) }}"
                                                        alt="feature" class="img-fluid">
                                                </a>
                                                <div class="footer-content">
                                                    <div>
                                                        <p>{{ $service?->user?->name }}</p>
                                                        <div class="rate">
                                                            <ul class="rating-list">
                                                                <li>
                                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                                        alt="star" class="img-fluid star">
                                                                </li>
                                                                <li>
                                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                                        alt="star" class="img-fluid star">
                                                                </li>
                                                                <li>
                                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                                        alt="star" class="img-fluid star">
                                                                </li>
                                                                <li>
                                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                                        alt="star" class="img-fluid star">
                                                                </li>
                                                                <li>
                                                                    <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                                        alt="star" class="img-fluid star">
                                                                </li>
                                                            </ul>
                                                            <small>({{ $service?->user?->review_ratings ?? 'Unrated' }})</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>
                        @empty
                            <div class="col-12">
                                <div class="no-data-found">
                                    <img class="img-fluid no-data-img" src="{{ asset('frontend/images/no-data.svg') }}"
                                        alt="">
                                    <p>{{ __('frontend::static.services.services_not_found') }}</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                    @if (count($services ?? []))
                        @if ($services?->lastPage() > 1)
                            <div class="col-12">
                                <div class="pagination-main pt-0">
                                    <ul class="pagination-box">
                                        {!! $services->links() !!}
                                    </ul>
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </section>
    @forelse($services as $service)
        @includeIf('frontend.inc.modal', ['service' => $service])
    @empty
    @endforelse
    <!-- Service List Section End -->
@endsection

@push('js')
    <!-- Swiper js -->
    <script src="{{ asset('frontend/js/swiper.js') }}"></script>

    <!-- Range slider js -->
    <script src="{{ asset('frontend/js/range-slider/ion.rangeSlider.min.js') }}"></script>
    <script src="{{ asset('frontend/js/range-slider/rangeslider-script.js') }}"></script>

    @auth
        <script src="{{ asset('frontend/js/custom-wishlist.js') }}"></script>
    @endauth

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

            const $filterButton = $(".filter-btn");
            const $filterSideBar = $(".left-sidebar-filter");
            const $closeBtns = $(".close-filter ");
            const $bgOverlay = $(".bg-overlay");

            // Add class to the element
            $filterButton.on("click", function() {
                $filterSideBar.addClass("show");
                $("body").css("overflow", "hidden"); // Disable body scroll
                if ($bgOverlay.length) $bgOverlay.addClass("show");
            });

            // Loop through each close button and add event listener
            $closeBtns.on("click", function() {
                $filterSideBar.removeClass("show");
                $("body").css("overflow", ""); // Restore body scroll
                if ($bgOverlay.length) $bgOverlay.removeClass("show");
            });

            // Optional: close on clicking overlay
            $bgOverlay.on("click", function() {
                $filterSideBar.removeClass("show");
                $("body").css("overflow", "");
                $(this).removeClass("show");
            });

            $('#clear-all').click(function(e) {
                e.preventDefault();
                window.history.replaceState(null, null, location.pathname);
                location.reload();
            });

            $('#accordion_search_bar').on('keyup', function() {
                let searchTerm = $(this).val().toLowerCase(),
                    hasResults = false;
                $('.provider-item').each(function() {
                    let showItem = $(this).find('.name').text().toLowerCase().includes(searchTerm);
                    $(this).toggle(showItem);
                    hasResults = hasResults || showItem;
                });

                $('.no-provider-results-message').toggle(!hasResults);
            });

            $('#accordion_category_search_bar').on('keyup', function() {
                let searchTerm = $(this).val().toLowerCase(),
                    hasResults = false;
                $('.category-item').each(function() {
                    let showItem = $(this).find('.name').text().toLowerCase().includes(searchTerm);
                    $(this).toggle(showItem);
                    hasResults = hasResults || showItem;
                });

                $('.no-category-results-message').toggle(!hasResults);
            });

            var urlParams = new URLSearchParams(window.location.search);
            var providerValues = urlParams.get("provider");
            providerValues?.split(",").forEach(val =>
                $(".provider-input[value='" + val + "']").prop("checked", true)
            );

            var urlParams = new URLSearchParams(window.location.search);
            var categoryValues = urlParams.get("categories");
            categoryValues?.split(",").forEach(val =>
                $(".categories-input[value='" + val + "']").prop("checked", true)
            );

            $('.provider-input').change(function() {
                var selectedIds = $('.provider-input:checked').map(function() {
                    return this.value;
                }).get().join(',');
                if (selectedIds) {
                    $('#select-provider').val(selectedIds);
                }
            });

            $('#accordion_categoy_search_bar').on('keyup', function() {
                let searchTerm = $(this).val().toLowerCase(),
                    hasResults = false;
                $('.category-item').each(function() {
                    let showItem = $(this).find('.name').text().toLowerCase().includes(searchTerm);
                    $(this).toggle(showItem);
                    hasResults = hasResults || showItem;
                });

                $('.no-provider-results-message').toggle(!hasResults);
            });

            $('.categories-input').change(function() {
                var selectedIds = $('.categories-input:checked').map(function() {
                    return this.value;
                }).get().join(',');
                if (selectedIds) {
                    $('#select-category').val(selectedIds);
                }
            });

            $('.category-item').on('click', function(e) {
                const checkbox = $(this).find('.categories-input');
                if (e.target !== checkbox[0]) {
                    checkbox.prop('checked', !checkbox.prop('checked'));
                }

                var selectedIds = $('.categories-input:checked').map(function() {
                    return this.value;
                }).get().join(',');
                if (selectedIds) {
                    $('#select-category').val(selectedIds);
                }
            });

            $('.categories-input').on('click', function(e) {
                e.stopPropagation();
            });


            $('.provider-item').on('click', function(e) {
                const checkbox = $(this).find('.provider-input');
                if (e.target !== checkbox[0]) {
                    checkbox.prop('checked', !checkbox.prop('checked'));
                }
            });

            $('.provider-input').on('click', function(e) {
                e.stopPropagation();
            });

            const priceGap = 1000;

            const $rangeInput = $(".range-input input"),
                $priceInput = $(".price-input input"),
                $range = $(".slider .progress");

            // Handle price input changes
            $priceInput.on("input", function() {
                const minPrice = parseInt($priceInput.eq(0).val());
                const maxPrice = parseInt($priceInput.eq(1).val());

                if (maxPrice - minPrice >= priceGap && maxPrice <= parseInt($rangeInput.eq(1).attr(
                        "max"))) {
                    if ($(this).hasClass("input-min")) {
                        $rangeInput.eq(0).val(minPrice);
                        $range.css("left", (minPrice / parseInt($rangeInput.eq(0).attr("max"))) * 100 +
                            "%");
                    } else {
                        $rangeInput.eq(1).val(maxPrice);
                        $range.css("right", 100 - (maxPrice / parseInt($rangeInput.eq(1).attr("max"))) *
                            100 + "%");
                    }
                }
            });

            // Handle range input changes
            $rangeInput.on("input", function() {
                let minVal = parseInt($rangeInput.eq(0).val());
                let maxVal = parseInt($rangeInput.eq(1).val());

                if (maxVal - minVal < priceGap) {
                    if ($(this).hasClass("range-min")) {
                        $rangeInput.eq(0).val(maxVal - priceGap);
                        minVal = maxVal - priceGap;
                    } else {
                        $rangeInput.eq(1).val(minVal + priceGap);
                        maxVal = minVal + priceGap;
                    }
                }

                $priceInput.eq(0).val(minVal);
                $priceInput.eq(1).val(maxVal);
                $range.css("left", (minVal / parseInt($rangeInput.eq(0).attr("max"))) * 100 + "%");
                $range.css("right", 100 - (maxVal / parseInt($rangeInput.eq(1).attr("max"))) * 100 + "%");
            });

            const priceGap = 1000;
            const $rangeInput = $(".range-input input"),
                $priceInput = $(".price-input input"),
                $range = $(".slider .progress");

            $priceInput.on("input", function() {
                const minPrice = parseInt($priceInput.eq(0).val());
                const maxPrice = parseInt($priceInput.eq(1).val());
                if (maxPrice - minPrice >= priceGap) {
                    if ($(this).hasClass("input-min")) {
                        $rangeInput.eq(0).val(minPrice);
                        $range.css("left", (minPrice / parseInt($rangeInput.eq(0).attr("max"))) * 100 + "%");
                    } else {
                        $rangeInput.eq(1).val(maxPrice);
                        $range.css("right", 100 - (maxPrice / parseInt($rangeInput.eq(1).attr("max"))) * 100 + "%");
                    }
                }
            });

            $rangeInput.on("input", function() {
                let minVal = parseInt($rangeInput.eq(0).val()),
                    maxVal = parseInt($rangeInput.eq(1).val());

                if (maxVal - minVal < priceGap) {
                    if ($(this).hasClass("range-min")) {
                        $rangeInput.eq(0).val(maxVal - priceGap);
                        minVal = maxVal - priceGap;
                    } else {
                        $rangeInput.eq(1).val(minVal + priceGap);
                        maxVal = minVal + priceGap;
                    }
                }
                $priceInput.eq(0).val(minVal);
                $priceInput.eq(1).val(maxVal);
                $range.css("left", (minVal / parseInt($rangeInput.eq(0).attr("max"))) * 100 + "%");
                $range.css("right", 100 - (maxVal / parseInt($rangeInput.eq(1).attr("max"))) * 100 + "%");
            });
        });
    </script>
@endpush