@use('app\Helpers\Helpers')
@use('App\Enums\FavouriteListEnum')
@use('App\Enums\SymbolPositionEnum')
@use('App\Enums\FrontEnum')
@php
    $locale = app()->getLocale();
    $mediaItems = $service?->getMedia('image')?->filter(function ($media) use ($locale) {
        return $media->getCustomProperty('language') === $locale;
    });
    $imageUrl = $mediaItems?->count() > 0 ? $mediaItems?->first()?->getUrl() : FrontEnum::getPlaceholderImageUrl();
@endphp
@extends('frontend.layout.master')

@section('title', $service?->title)
@section('meta_description', $service?->meta_description ?? $service?->description)
@section('og_title', $service?->meta_title ?? $service?->title)
@section('og_description', $service?->meta_description ?? $service?->description)
@section('og_image', $imageUrl)
@section('twitter_title', $service?->meta_title ?? $service?->title)
@section('twitter_description', $service?->meta_description ?? $service?->description)
@section('twitter_image', $imageUrl)

@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>
        <a class="breadcrumb-item" href="{{ route('frontend.service.index') }}">{{ __('frontend::static.services.services') }}</a>
        <span class="breadcrumb-item active">{{ $service?->title }}</span>
    </nav>
@endsection


@section('content')
    <!-- Service List Section Start -->
    <section class="service-list-section">
        <div class="container-fluid-lg">
            <div class="row service-list-content g-sm-4 g-3">
                <div class="col-12">
                    <div class="outside-arrow">
                        <div class="swiper service-detail-slider">
                            <div class="swiper-wrapper">
                                @foreach ($service->web_img_galleries_url as $imageUrl)
                                    <div class="swiper-slide">
                                        <div class="service-img">
                                            @php
                                                $consumerId = auth()->id();
                                                $favouriteServiceId = \App\Models\FavouriteList::where(
                                                    'consumer_id',
                                                    $consumerId,
                                                )
                                                    ->pluck('service_id')
                                                    ->toArray();
                                            @endphp
                                            <img src="{{ $imageUrl }}" alt="offer" class="img-fluid">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <div class="arrow-slider-box">
                            <button class="swiper-button-prev5 swiper-button-prev">
                                <i class="iconsax" icon-name="chevron-left"></i>
                            </button>
                            <button class="swiper-button-next5 swiper-button-next">
                                <i class="iconsax" icon-name="chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-8 col-lg-7">
                    <div class="detail-content service-details-content m-0">
                        <div class="title">
                            <h3>{{ $service->title }}</h3>
                            @if ($service->discount)
                                <span class="badge danger-light-badge">
                                    {{ $service->discount }}% {{ __('frontend::static.services.discount') }}
                                </span>
                            @endif
                        </div>
                        <div>
                            {!! $service->content !!}
                        </div>
                    </div>
                </div>

                @auth
                    @includeIf('frontend.inc.modal', ['service' => $service])
                @endauth

                <div class="col-xxl-4 col-lg-5">
                    <div class="provider-detail mb-4">
                        <label class="mb-3">{{ __('frontend::static.services.provider_details') }}</label>
                        <div class="provider-content">
                            <div class="profile">
                                <a href="{{ route('frontend.provider.details', ['slug' => $service?->user?->slug]) }}">
                                    <img src="{{ $service?->user?->media?->first()?->original_url ?? asset('frontend/images/user.png') }}" alt="{{ $service?->user->name }}" class="img">
                                </a>
                                <a href="{{ route('frontend.provider.details', ['slug' => $service?->user?->slug]) }}">
                                    <h3>{{ $service?->user->name }}</h3>
                                </a>
                            </div>
                            <div class="profile-detail">
                                <ul>
                                    @if ($service?->user->known_languages && count($service?->user->known_languages))
                                        <li>
                                            <label
                                                for="language">{{ __('frontend::static.services.known_language') }}</label>
                                            <span>{{ implode($service?->user->known_languages) }}</span>
                                        </li>
                                    @endif
                                    <li class="success">
                                        <label>{{ __('frontend::static.services.service_delivered') }}</label>
                                        <span>{{ $service?->user->served }}</span>
                                    </li>
                                    @if ($service?->user?->experience_duration && $service?->user?->experience_interval)
                                        <li class="danger">
                                            <label>{{ __('frontend::static.services.experience')}}</label>
                                            <span>{{$service?->user?->experience_duration}} {{$service?->user?->experience_interval}} {{ __('frontend::static.services.of_experience')}}</span>
                                        </li>    
                                    @endif
                                    <li>
                                        <label>{{ __('frontend::static.home_page.duration')}}</label>
                                        <span>{{ __('frontend::static.services.around') }} {{ $service?->duration }} {{ $service?->duration_unit }}</span>
                                    </li>
                                    <li>
                                        <label>{{ __('frontend::static.home_page.required_servicemen') }}</label>
                                        <span>{{ $service?->required_servicemen }}</span>
                                    </li>
                                    @if($service->price || $service->service_rate)
                                        <li class="total">
                                            <label>{{ __('frontend::static.services.amount') }} :</label>
                                            <div>                                                
                                                @if(!empty($service?->discount) && $service?->discount > 0)
                                                    @if (Helpers::getDefaultCurrency()->symbol_position === SymbolPositionEnum::LEFT)
                                                        <del>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</del>
                                                        <span class="value">{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->service_rate) }}</span>
                                                    @else
                                                        <del>{{ Helpers::covertDefaultExchangeRate($service->price) }} {{ Helpers::getDefaultCurrencySymbol() }}</del>
                                                        <span class="value">{{ Helpers::covertDefaultExchangeRate($service->service_rate) }} {{ Helpers::getDefaultCurrencySymbol() }}</span>
                                                    @endif
                                                @else
                                                    @if (Helpers::getDefaultCurrency()->symbol_position === SymbolPositionEnum::LEFT)
                                                        <span class="value">{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</span>
                                                    @else
                                                        <span class="value">{{ Helpers::covertDefaultExchangeRate($service->price) }} {{ Helpers::getDefaultCurrencySymbol() }}</span>
                                                    @endif
                                                @endif
                                            </div>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn book-now-btn btn-solid mt-4" data-bs-toggle="modal"
                        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 }}">
                        {{ __('frontend::static.services.book_now') }}<span class="spinner-border spinner-border-sm"
                            style="display: none;"></span>
                    </button>
                </div>
            </div>
        </div>
    </section>
    <!-- Service List Section End -->

    <!-- Featured Service Section Start -->
    <section class="service-list-section section-b-space">
        <div class="container-fluid-lg">
            <div class="title-1">
                <h6><span>Service</span></h6>
                <h2>{{ __('frontend::static.services.featured_services') }}</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste fugit pariatur sequi dolorem hic dolores
                    soluta laborum.</p>
                <a class="view-all" href="{{ route('frontend.service.index') }}">
                    {{ __('frontend::static.services.view_all') }}
                    <i class="iconsax" icon-name="arrow-right"></i>
                </a>
            </div>
            <div class="outside-arrow">
                <div class="swiper service-list-content feature-slider slider-pagination arrow-slider">
                    <div class="swiper-wrapper">
                        @foreach ($recentService as $service)
                            <div class="swiper-slide">
                                <div class="card card-gray">
                                    @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
                                    <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">
                                        </a>
                                    </div>
                                    <div class="card-body">
                                        <div class="service-title">
                                            @if ($service?->title)
                                                <h4><a
                                                        href="{{ route('frontend.service.details', $service?->slug) }}">{{ $service?->title }}</a>
                                                </h4>
                                            @endif
                                            @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>
                                                        <del>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</del>
                                                    @else
                                                        <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</small>
                                                    @endif

                                                    <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="{{ $service?->user?->media?->first()?->getURL() }}"
                                                    alt="feature" class="img-fluid">
                                                    <div class="footer-content">
                                                        <div>
                                                            <a href="#!">
                                                                <p>{{ $service?->user?->name }}</p>
                                                            </a>
                                                            <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>
                        @endforeach
                    </div>
                </div>
                <div class="arrow-slider-box">
                    <button class="swiper-button-prev">
                        <i class="iconsax" icon-name="chevron-left"></i>
                    </button>
                    <button class="swiper-button-next">
                        <i class="iconsax" icon-name="chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>
    <!-- Featured Service Section End -->

    @forelse($recentService as $service)
        @includeIf('frontend.inc.modal', ['service' => $service])
    @empty
    @endforelse
@endsection

@push('js')
    <script>
        "use strict";
        $(function() {
            const input = $('#quantityInput');
            $('#add').on('click', () => {
                let val = +input.val();
                if (val < +input.attr('max')) input.val(val + 1);
            });
            $('#minus').on('click', () => {
                let val = +input.val();
                if (val > +input.attr('min')) input.val(val - 1);
            });
        });
    </script>
    @auth
        <script src="{{ asset('frontend/js/custom-wishlist.js') }}"></script>
    @endauth
@endpush