@use('app\Helpers\Helpers')
@use('App\Enums\FavouriteListEnum')
@extends('frontend.layout.master')
@php
    $activeType = request()->type ?? 'provider';
@endphp
@push('css')
    <!-- Flatpicker css -->
    <link rel="stylesheet" type="text/css" href="{{ asset('frontend/css/vendors/flatpickr/flatpickr.min.css') }}">
@endpush
@section('title', __('frontend::static.wishlist.wishlist'))
@section('breadcrumb')
    <nav class="breadcrumb breadcrumb-icon">
        <a class="breadcrumb-item" href="{{ url('/') }}"><i class="iconsax" icon-name="home-2"></i>
            {{ __('frontend::static.wishlist.home') }}</a>
        <a class="breadcrumb-item"
            href="{{ route('frontend.service.index') }}">{{ __('frontend::static.wishlist.services') }}</a>
        <span class="breadcrumb-item active">{{ __('frontend::static.wishlist.wishlist') }}</span>
    </nav>
@endsection
@section('content')
    <!-- Service List Section Start -->
    <section class="service-list-section section-b-space">
        <div class="container-fluid-lg">
            <div class="service-list-content">
                <div class="favorite-tab">
                    {{-- <h3>Wishlist</h3> --}}
                    <ul class="nav nav-tabs" id="faviconTab">
                        <li class="nav-item">
                            <button class="nav-link {{ $activeType == 'provider' ? 'show active' : '' }}" id="provider-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#provider">{{ __('frontend::static.wishlist.provider') }}</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link {{ $activeType == 'service' ? 'show active' : '' }}" id="service-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#service">{{ __('frontend::static.wishlist.service') }}</button>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" id="faviconTabContent">
                    <div class="tab-pane fade {{ $activeType == 'provider' ? 'show active' : '' }}" id="provider">
                        <div class="row g-sm-4 g-3">
                            @forelse ($providers as $provider)
                                <div class="col-3">
                                    <div class="expert-content">
                                        <div class="card dark-card gray-card">
                                            <div class="top-card">
                                                <div class="dark-card-img">
                                                    <img src="{{ Helpers::isFileExistsFromURL($provider->provider?->media?->first()?->getUrl(), true) }}"
                                                        alt="{{ $provider->provider?->name }}"
                                                        class="img-fluid profile-pic lozad">
                                                        @auth
                                                            <div class="like-icon active"
                                                                 data-provider-id="{{ $provider->provider?->id }}">
                                                                <img class="img-fluid icon outline-icon" src="{{ asset('frontend/images/svg/heart-outline.svg') }}" alt="wishlist">
                                                                <img class="img-fluid icon fill-icon" src="{{ asset('frontend/images/svg/heart-fill.svg') }}" alt="wishlisted">
                                                            </div>
                                                        @endauth
                                                </div>

                                                <div class="dark-card-name">
                                                    <div class="card-title">
                                                        <a
                                                            href="{{ route('frontend.provider.details', ['slug' => $provider->provider->slug]) }}">
                                                            <h4>{{ $provider->provider?->name }}</h4>
                                                        </a>
                                                        <div class="rate">
                                                            <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                                alt="star" class="img-fluid star">
                                                            <small>{{ $provider->provider?->review_ratings }}</small>
                                                        </div>
                                                    </div>
                                                    <div class="location">
                                                        <i class="iconsax" icon-name="location"></i>
                                                        <h5>{{ $provider->provider?->primary_address?->state?->name }}
                                                            -
                                                            {{ $provider->provider?->primary_address?->country?->name }}
                                                        </h5>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="card-detail">
                                                    <p>{{ $provider->provider?->primary_address?->address }},
                                                        {{ $provider->provider?->primary_address?->postal_code }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col w-100">
                                    <div class="no-data-found">
                                        <img class="img-fluid no-data-img" src="{{ asset('frontend/images/no-data.svg') }}"
                                            alt="">
                                        <p>{{ __('frontend::static.wishlist.providers_not_found') }}</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                        @if (count($providers ?? []))
                            @if ($providers?->lastPage() > 1)
                                <div class="row">
                                    <div class="col-12">
                                        <div class="pagination-main section-b-space">
                                            <ul>
                                                {!! $providers->appends(['type' => 'provider'])->links() !!}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endif
                    </div>
                    <div class="tab-pane fade {{ $activeType == 'service' ? 'show active' : '' }}" id="service">
                        <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
                            @forelse ($services as $service)
                                <div class="col">
                                    <div class="card card-gray">
                                        <div class="card-image">
                                            <div class="time">
                                                <i class="iconsax" icon-name="clock"></i>
                                                <span>{{ $service->service?->duration }} M</span>
                                            </div>
                                            <div class="discount-tag">{{ $service?->service?->discount }}%</div>
                                            <a href="#!" class="card-img">
                                                <img src="{{ $service->service?->web_img_thumb_url }}" alt="feature"
                                                    class="img-fluid">
                                            </a>
                                            @auth
                                                <div class="like-icon active" id="favouriteDiv"
                                                    data-service-id="{{ $service->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
                                        </div>

                                        <div class="card-body">
                                            <div class="service-title">
                                                <h4>
                                                    <a
                                                        href="{{ route('frontend.service.details', $service->service->slug) }}">{{ $service->service->title }}</a>
                                                </h4>
                                                <div class="price-number">
                                                    <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->service?->service_rate) }}</small>
                                                    <del>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->service?->price) }}</del>
                                                </div>
                                            </div>
                                            <div class="card-footer">
                                                <div class="footer-detail">
                                                    <img src="{{ Helpers::isFileExistsFromURL($service?->service?->user?->media?->first()->getURL(), true) }}"
                                                        alt="feature" class="img-fluid">
                                                    <div>
                                                        <p>{{ $service?->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?->service?->user?->review_ratings ?? 'Unrated' }}</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="no-data-found">
                                    <img class="img-fluid no-data-img" src="{{ asset('frontend/images/no-data.svg') }}"
                                        alt="">
                                    <p>{{ __('frontend::static.wishlist.services_not_found') }}</p>
                                </div>
                            @endforelse
                        </div>
                        @if (count($services ?? []))
                            @if ($services?->lastPage() > 1)
                                <div class="row">
                                    <div class="col-12">
                                        <div class="pagination-main section-b-space">
                                            <ul>
                                                {!! $services->appends(['type' => 'service'])->links() !!}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>

        </div>

    </section>
    @forelse($services as $service)
        @if ($service->service)
            @includeIf('frontend.inc.modal', ['service' => $service->service])
        @endif
    @empty
    @endforelse
    <!-- Service List Section End -->
@endsection

@push('js')
    <!-- Flat-picker js -->
    <script src="{{ asset('frontend/js/flat-pickr/flatpickr.js') }}"></script>
    <script src="{{ asset('frontend/js/flat-pickr/custom-flatpickr.js') }}"></script>

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