@extends('frontend.layouts.app')

@section('title') {{ $title ?? 'Service Provider' }} @endsection
@section('meta')
<meta property="og:title" content="{{ $og_title }}" />
<meta property="og:description" content="{{ $og_description }}" />
<meta property="og:image" content="{{ getSeoImage($og_image) }}" />
@endsection

@push('style') @endpush

@section('content')
    <!-- ======================= breadcrumb start  ============================ -->
    @include('frontend.layouts.includes.breadcrumb',
    ['links' => [[$title => route('frontend.about')]]])
    <!-- ======================= breadcrumb end  ============================ -->

    <!-- ======================= Service Provider Start  ============================ -->
    <div class="service_pro_profile pb-3 pb-lg-5">
        <div class="container">
            <div style="height: 50vh; background-image: url({{ $seller->cover_image ? asset($seller->cover_image) : asset('assets/images/service-provider-hero.jpg') }}); background-size: cover; background-position: top;" class="position-relative w-100">
                <div class="position-absolute text-white d-flex flex-column align-items-start justify-content-end" style="top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.25);">
                    <div class="d-block">
                        <div class="col-md-3 mb-4 ms-4">
                            <img class="profile-img position-relative" src="{{ $seller->image ? asset($seller->image) : asset('assets/images/service-provider-profile.jpg') }}" alt="service provider">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 mt-3">
                    <div class="card rounded-0" style="position: sticky; top: 80px;">
                        <div class="p-3 border-bottom">
                            <h1 class="mb-1">  {{$seller->name}} </h1>
                            <h4 class="mb-0"> Best Service, Best Price </h4>
                            <a class="text-decoration-none verified-seller">
                                <img src="{{  asset('assets/images/verified-seller.png') }}" alt="verified">
                                <span> Verified </span>
                            </a>
                            <span class="join d-block"> Member since {{date('M Y', strtotime($seller->created_at))}} </span>
                            <div class="d-flex align-items-center">
                                <i class="fa-solid fa-eye"></i>
                                <span class="fw-bold d-inline-block ms-2 me-1"> 342 </span>
                                <span class="d-inline-block"> Views </span>
                            </div>
                        </div>
                        {{-- <div class="p-3 border-bottom">
                            <span class="service-current-status fw-bold"> Open </span>
                            <span> Closes 9:00 pm </span>
                        </div> --}}

                        @if ($seller->phone)
                            <div class="p-3 border-bottom calling-info">
                                <div class="d-flex align-items-center">
                                    <i class="fa-solid fa-phone"></i>
                                    <div class="ms-3">
                                        <span class="d-block fw-bold"> {{$seller->phone}} </span>
                                        <span class="d-block"> Service Provider Phone Number </span>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="p-3 border-bottom location-info">
                            <div class="d-flex">
                                <i class="fa-solid fa-location-dot"></i>
                                <div class="ms-3">
                                    <span class="d-block">
                                        {{$seller->address}}
                                        {{-- Shop No. 12, Ground Floor,
                                        Prestige Plaza, Ngong Road
                                        Nairobi, Kenya
                                        P.O. Box 12345-00100 --}}
                                    </span>
                                    {{-- <a href="https://maps.app.goo.gl/qvGtDMBqsqrKjfzT8" target="_blank" class="d-block"> Show on map </a> --}}
                                </div>
                            </div>
                        </div>

                        {{-- <div class="p-3 border-bottom services-info">
                            <h4> About This Service </h4>
                            <p id="service-details-text"> An online cleaner services provider offers convenient cleaning solutions for homes and offices through websites or mobile apps. Customers can easily book services like general cleaning, deep cleaning, or specialized tasks such as carpet and window cleaning. These platforms provide transparent pricing, flexible scheduling, and professional cleaners vetted for quality and reliability. Many also use eco-friendly cleaning products, ensuring sustainable practices. With secure online payments and dedicated customer support, these services save time, offer convenience, and maintain high standards of cleanliness for a variety of spaces. </p>
                            <button id="service-details-view-toggle">
                                Show More <i class="fa-solid fa-arrow-down"></i>
                            </button>
                        </div> --}}
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card border-0 py-3">
                        {{-- Search Btn --}}
                        {{-- <div class="position-relative">
                            <form action="">
                                <input type="text" class="form-control form-input rounded-0" placeholder="Search anything...">
                                <button type="submit" href="#" class="search-icon position-absolute">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                </button>
                            </form>
                        </div> --}}

                        {{-- Services Category List Items (Start) --}}
                        <h4 class="mb-0 mt-3 mb-2 fs-5"> Services Category List </h4>

                        @foreach($subCategories as $service)
                            <div class="listing_item border p-2 d-flex justify-content-between align-items-center position-relative mb-3">
                                <div class="media mb-0">
                                    <div class="media-body">
                                        <h5 class="my-0 fs-6"> {{ $service->name }} </h5>
                                        <div class="mb-0 mt-2">
                                            <span class="service-star pe-2">
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star"></i>
                                                <i class="fa-solid fa-star-half-stroke"></i>
                                                <i class="fa-regular fa-star"></i>
                                            </span>
                                            <span class="rating-parent">
                                                <i class="fa-solid fa-thumbs-up bg-success"></i>
                                                86%
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <a class="txt-btn border-0 d-block" href="{{ route('user.service_review', $service->id) }}">
                                        <i class="fa-solid fa-arrow-right-long"></i>
                                        View Details
                                    </a>
                                </div>
                            </div>
                        @endforeach

                        {{-- <div class="listing_item border p-2 d-flex justify-content-between align-items-center position-relative mb-3">
                            <div class="media mb-0">
                                <img class="align-self-center mr-3" src="{{ asset('assets/images/services-item-1.jpg') }}" alt="">
                                <div class="media-body">
                                    <h5 class="my-0 fs-6"> Floor polishing </h5>
                                    <p class="mb-3 fs-12"> Office Cleaning </p>
                                    <div class="mb-0">
                                        <span class="service-star pe-2">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star-half-stroke"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </span>
                                        <span class="rating-parent">
                                            <i class="fa-solid fa-thumbs-up bg-success"></i>
                                            86%
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <a class="txt-btn border-0 d-block" href="{{route('user.service_review')}}">
                                    <i class="fa-solid fa-arrow-right-long"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        <div class="listing_item border p-2 d-flex justify-content-between align-items-center position-relative mb-3">
                            <div class="media mb-0">
                                <img class="align-self-center mr-3" src="{{ asset('assets/images/services-item-2.jpg') }}" alt="">
                                <div class="media-body">
                                    <h5 class="my-0 fs-6"> Remove post-construction dust </h5>
                                    <p class="mb-3 fs-12"> Post-Construction Cleaning </p>
                                    <div class="mb-0">
                                        <span class="service-star pe-2">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star-half-stroke"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </span>
                                        <span class="rating-parent">
                                            <i class="fa-solid fa-thumbs-up bg-success"></i>
                                            81%
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <a class="txt-btn border-0 d-block" href="{{route('user.service_review')}}">
                                    <i class="fa-solid fa-arrow-right-long"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        <div class="listing_item border p-2 d-flex justify-content-between align-items-center position-relative mb-3">
                            <div class="media mb-0">
                                <img class="align-self-center mr-3" src="{{ asset('assets/images/services-item-3.jpg') }}" alt="">
                                <div class="media-body">
                                    <h5 class="my-0 fs-6"> Clean under and behind furniture </h5>
                                    <p class="mb-3 fs-12"> Deep Cleaning </p>
                                    <div class="mb-0">
                                        <span class="service-star pe-2">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star-half-stroke"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </span>
                                        <span class="rating-parent">
                                            <i class="fa-solid fa-thumbs-up bg-success"></i>
                                            70%
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <a class="txt-btn border-0 d-block" href="{{route('user.service_review')}}">
                                    <i class="fa-solid fa-arrow-right-long"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        <div class="listing_item border p-2 d-flex justify-content-between align-items-center position-relative mb-3">
                            <div class="media mb-0">
                                <img class="align-self-center mr-3" src="{{ asset('assets/images/services-item-4.jpg') }}" alt="">
                                <div class="media-body">
                                    <h5 class="my-0 fs-6"> Carpet shampoo cleaning </h5>
                                    <p class="mb-3 fs-12"> Carpet and Upholstery Cleaning </p>
                                    <div class="mb-0">
                                        <span class="service-star pe-2">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star-half-stroke"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </span>
                                        <span class="rating-parent">
                                            <i class="fa-solid fa-thumbs-up bg-success"></i>
                                            86%
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <a class="txt-btn border-0 d-block" href="{{route('user.service_review')}}">
                                    <i class="fa-solid fa-arrow-right-long"></i>
                                    View Details
                                </a>
                            </div>
                        </div>
                        <div class="listing_item border p-2 d-flex justify-content-between align-items-center position-relative mb-3">
                            <div class="media mb-0">
                                <img class="align-self-center mr-3" src="{{ asset('assets/images/services-item-5.jpg') }}" alt="">
                                <div class="media-body">
                                    <h5 class="my-0 fs-6"> Remove post-construction dust </h5>
                                    <p class="mb-3 fs-12"> Post-Construction Cleaning </p>
                                    <div class="mb-0">
                                        <span class="service-star pe-2">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star-half-stroke"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </span>
                                        <span class="rating-parent">
                                            <i class="fa-solid fa-thumbs-up bg-success"></i>
                                            86%
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <a class="txt-btn border-0 d-block" href="{{route('user.service_review')}}">
                                    <i class="fa-solid fa-arrow-right-long"></i>
                                    View Details
                                </a>
                            </div>
                        </div> --}}
                        {{-- Services Category List Items (End) --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================= Service Provider End  ============================ -->
@endsection

@push('script')

@endpush