@use('app\Helpers\Helpers')
@extends('frontend.layout.master')

@section('title', $provider?->name)

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

@section('content')

    <!-- Service List Section Start -->
    <section class="service-list-section section-b-space">
        <div class="container-fluid-lg">
            <div class="row g-xl-5 service-list-content">
                <div class="col-custom-3 filter-sidebar">
                    <div class="filter sticky">
                        <div class="provider-card">
                            <div class="provider-detail">
                                <div class="provider-content">
                                    @auth
                                        <div class="like-icon" id="favouriteDiv" data-provider-id="{{ $provider?->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="profile-bg"></div> --}}
                                    <div class="left-profile-box">
                                        <div class="profile">
                                            @php
                                                $profileImg = $provider?->media?->first()?->getUrl();
                                            @endphp
                                            @if (Helpers::isFileExistsFromURL($profileImg))
                                                <img src="{{ $profileImg }}" alt="{{ $provider?->name }}"
                                                    class="img-fluid provider-profile-img">
                                            @else
                                                <span
                                                    class="profile-name initial-letter">{{ substr($provider?->name, 0, 1) }}</span>
                                            @endif

                                            <div>
                                                <div class="d-flex align-content-center gap-2">
                                                    <h3>{{ $provider?->name }}</h3>
                                                    {{-- <div class="rate">
                                                        <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                            alt="star" class="img-fluid star">
                                                        <small>{{ $provider?->review_ratings }}</small>
                                                    </div> --}}
                                                </div>
                                                <div class="location">
                                                    <i class="iconsax" icon-name="location"></i>
                                                    <h5>{{ $provider?->primary_address?->state?->name }}-{{ $provider?->primary_address?->country?->name }}
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="delivered">
                                            <span>Services delivered :</span>
                                            <small>{{ $provider->served }}</small>
                                        </div>
                                    </div>
                                    <label class="provider-title text-title">Details of Provider</label>
                                    <div class="profile-info">
                                        <div class="mb-3">
                                            <label>
                                                <i class="iconsax" icon-name="mail"></i>
                                                Mail
                                            </label>
                                            @if ($provider?->email)
                                                <p>{{ $provider?->email }}</p>
                                            @else
                                                <p>Email Not Found</p>
                                            @endif
                                        </div>
                                        <div class="mb-3">
                                            <label>
                                                <i class="iconsax" icon-name="phone"></i>
                                                Call
                                            </label>
                                            @if ($provider?->code && $provider?->phone)
                                                <p>+{{ $provider?->code }} {{ $provider?->phone }}</p>
                                            @else
                                                <p>NUmber Not Found</p>
                                            @endif
                                        </div>
                                        @if (count($provider->knownLanguages))
                                            <div>
                                                <label>
                                                    <i class="iconsax" icon-name="globe"></i>
                                                    Known languages
                                                </label>
                                                <div class="d-flex align-content-center gap-3 mt-2">
                                                    @foreach ($provider?->knownLanguages as $knownLanguages)
                                                        <button
                                                            class="btn btn-solid-gray">{{ $knownLanguages?->key }}</button>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    @php
                                        $providerReviews = $provider?->provider_rating_list ?? [];
                                        $percentages = Helpers::getRatingPercentages(
                                            $providerReviews,
                                            $provider?->reviews_count,
                                        );
                                    @endphp
                                    <div class="rating-bars">
                                        @forelse($percentages as $index => $percentage)
                                            <div class="rating-bar">
                                                <div class="left">{{ 5 - $index }}
                                                    {{ __('frontend::static.providers.star') }}</div>
                                                <div class="progress bar">
                                                    <div class="progress-bar progress-bar-striped progress-bar-animated bar-item" style="width: {{ $percentage }}%">
                                                    </div>
                                                </div>
                                                <div class="right">{{ round($percentage, 2) }}%</div>
                                            </div>
                                        @empty
                                            <p>{{ __('frontend::static.providers.reviews_not_found') }}</p>
                                        @endforelse
                                    </div>

                                    <div class="provider-detail-tab mt-4">
                                        <ul class="nav nav-tabs" id="providerDetailTab" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="provider-service-tab"
                                                    data-bs-toggle="tab" data-bs-target="#provider-service" type="button"
                                                    role="tab" aria-controls="provider-service"
                                                    aria-selected="false">{{ __('frontend::static.providers.services') }}</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="provider-review-tab" data-bs-toggle="tab"
                                                    data-bs-target="#provider-review" type="button" role="tab"
                                                    aria-controls="provider-review"
                                                    aria-selected="true">{{ __('frontend::static.providers.reviews') }}</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-custom-9">
                    <div class="tab-content m-0" id="providerDetailTabContent">
                        <div class="tab-pane fade show active" id="provider-service" role="tabpanel"
                            aria-labelledby="provider-service-tab">
                            <div class="row ratio3_2 row-cols-sm-1 row-cols-lg-2 row-cols-xl-3 g-4">
                                @forelse($services as $service)
                                    <div class="col">
                                        <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="overflow-hidden b-r-5">
                                                <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 class="time">
                                                        <i class="iconsax" icon-name="clock"></i>
                                                        <span>{{ $service?->duration }}
                                                            {{ $service?->duration_unit }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="service-title">
                                                    <h4>
                                                        <a
                                                            href="{{ route('frontend.service.details', $service?->slug) }}">{{ $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>
                                                </div>
                                                <div class="service-detail mt-1">
                                                    <p class="description">{{ $service?->description }}</p>
                                                </div>
                                                <button type="button" class="btn  book-now-btn btn-outline mt-2"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#bookServiceModal-{{ $service->id }}"
                                                    data-login-url="{{ route('frontend.login') }}"
                                                    data-check-login-url="{{ route('frontend.check.login') }}"
                                                    id="bookNowButton">
                                                    {{ __('frontend::static.providers.book_now') }}
                                                    <span class="spinner-border spinner-border-sm"
                                                        style="display: none;"></span>
                                                </button>
                                            </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.providers.service_not_found') }}</p>
                                    </div>
                                @endforelse
                            </div>

                            @if (count($services ?? []))
                                @if ($services?->lastPage() > 1)
                                    <div class="col-12">
                                        <div class="pagination-main pt-0 section-b-space">
                                            <ul class="pagination-box">
                                                {!! $services->links() !!}
                                            </ul>
                                        </div>
                                    </div>
                                @endif
                            @endif
                        </div>
                        <div class="tab-pane fade" id="provider-review" role="tabpanel"
                            aria-labelledby="provider-review-tab">
                            <div class="reviews-main">
                                @php
                                    $reviews = $provider?->reviews()?->get();
                                @endphp
                                @forelse($reviews as $review)
                                    <div class="reviews">
                                        <div class="person-detail">
                                            <img src="{{ $review?->consumer?->media?->first()?->getUrl() }}"
                                                alt="feature">
                                            <div>
                                                <h6>{{ $review?->consumer?->name }}</h6>
                                                <p>“{{ $review?->description }}”</p>
                                            </div>
                                        </div>
                                        <div class="rating">
                                            <div class="rate">
                                                <img src="{{ asset('frontend/images/svg/star.svg') }}" alt="star"
                                                    class="img-fluid star">
                                                <small>{{ $review?->rating }}</small>
                                            </div>
                                            <ul class="overview-list">
                                                <li>{{ $review?->created_at->diffForHumans() }}</li>
                                            </ul>
                                        </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.providers.reviews_not_found') }}</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>
    <!-- Service List Section End -->

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

@endsection

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