@extends('frontend.layouts.app')
@section('title')
    {{ $title ?? 'Page header' }}
@endsection

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

@push('style')
@endpush

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

    <!-- ======================= Ads Listings Start  ============================ -->
    <div class="listings_section pt-2 pb-5">
        <div class="container">
            <div class="bg-light rounded-1 shadow-sm">
                <div class="px-3">
                    <div class="row">
                        <!-- listings sidebar -->
                        <div class="col-lg-3 border_end">
                            <div class="seller_shop mt-4 rounded"
                                style="background-image: url('{{ getPhoto($seller?->cover_image) }}');">
                                <div class="logo">
                                    <img src="{{ getAvatar($seller?->image) }}" class="img-fluid"
                                        alt="{{ $seller?->name }}">
                                </div>
                            </div>
                            <div class="seller_about py-3">
                                <div class="shop_name mb-2">{{ $seller?->name }}</div>
                                <div class="seller_shop_tag mb-1 d-sm-flex align-items-center">
                                    @if ($seller->user_type == '1')
                                        <div class="member me-3 text-uppercase">
                                            <i class="fa fa-star"></i>
                                            Member
                                        </div>
                                    @else
                                        @if ($seller?->is_verified_seller == '1')
                                            <a class="text-decoration-none verified-seller">
                                                <img src="{{  asset('assets/images/verified-seller.png') }}" alt="verified">
                                                <span> Verified </span>
                                            </a>
                                        @endif
                                    @endif
                                </div>
                                <div class="member_since">Member
                                    since {{ Carbon\Carbon::parse($seller?->created_at)->format('M d, Y') }}</div>
                                <hr>
                                @if ($seller->user_type == '2' || $seller->user_type == '3')
                                    <div class="provider-rating mt-3">
                                        @if ($totalReviews > 0)
                                            <div class="d-flex align-items-center mb-2">
                                                <div class="stars">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        @php
                                                            // Check if the current star should be full, half, or empty
                                                            $currentRating = floor($averageRating);
                                                            $isHalfStar = ($averageRating - $currentRating) >= 0.5;
                                                        @endphp

                                                        @if ($i <= $currentRating)
                                                            <i class="fa-solid fa-star text-warning"></i> <!-- Full Star -->
                                                        @elseif ($i == $currentRating + 1 && $isHalfStar)
                                                            <i class="fa-regular fa-star-half-stroke text-warning"></i>
                                                            {{-- <i class="fa-solid fa-star-half text-warning"></i> <!-- Half Star --> --}}
                                                        @else
                                                            <i class="fa-solid fa-star text-muted"></i> <!-- Empty Star -->
                                                        @endif
                                                    @endfor
                                                </div>
                                                <span class="ms-2 fw-bold">{{ number_format($averageRating, 1) }} / 5</span>
                                            </div>
                                            <a href="{{ route('user.service_review', $seller->id) }}" class="text-decoration-none">View All ({{ $totalReviews }} Reviews)</a>
                                        @else
                                            <div class="d-flex align-items-center mb-2">
                                                <div class="stars">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        <i class="fa-solid fa-star text-muted"></i> <!-- Blank Star -->
                                                    @endfor
                                                </div>
                                                <span class="ms-2 fw-bold">No reviews yet</span>
                                            </div>
                                        @endif

                                    </div>
                                    <hr>
                                @endif
                                <div class="seller_social_media">
                                    @if ($seller?->facebook_url)
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon me-2">
                                                <i class="fa-brands fa-facebook"></i>
                                            </div>
                                            <div class="link">
                                                <a href="{{ $seller?->facebook_url }}"
                                                    target="_blank">{{ $seller?->facebook_url }}</a>
                                            </div>
                                        </div>
                                    @endif
                                    @if ($seller?->youtube_url)
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="icon me-2">
                                                <i class="fa-brands fa-youtube"></i>
                                            </div>
                                            <div class="link">
                                                <a href="{{ $seller?->youtube_url }}"
                                                    target="_blank">{{ $seller?->youtube_url }}</a>
                                            </div>
                                        </div>
                                    @endif

                                </div>
                                @if ($seller?->facebook_url || $seller?->youtube_url)
                                    <hr>
                                @endif
                                <div class="seller_address">
                                    <div class="d-flex align-items-center mb-4">
                                        <div class="icon me-2">
                                            <img src="{{ asset('assets/images/icons/email.svg') }}" alt="Email">
                                        </div>
                                        <div class="email">
                                            <a href="mailto:{{ $seller?->email }}">Send Email</a>
                                        </div>
                                    </div>

                                    @if ($seller?->phone)
                                        <div class="d-flex align-items-center mb-4">
                                            <div class="icon me-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                    stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone">
                                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                                                </svg>
                                            </div>
                                            <div class="email">
                                                <a href="tel:{{ $seller->phone }}">{{ $seller->phone }}</a>
                                            </div>
                                        </div>
                                    @endif

                                    @if ($seller?->address)
                                        <div class="d-flex align-items-center">
                                            <div class="icon me-2">
                                                <img src="{{ asset('assets/images/icons/location2.svg') }}" alt="Email">
                                            </div>

                                            <div class="email">
                                                <span>{{ $seller?->address }}, {{$seller?->state}}, {{$seller->city?->name}}</span>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                @if (($seller->user_type == '2' || $seller->user_type == '3') && $seller->short_description)
                                    <div class="p-3 border-bottom services-info">
                                        <h4> About Me</h4>
                                        <p id="service-details-text">
                                            <span id="service-preview">{{ Str::limit($seller->short_description, 100) }}</span>
                                            <span id="service-full-text" style="display: none;">{{ $seller->short_description }}</span>
                                        </p>
                                        <button id="seller-details-view-toggle" class="btn btn-sm btn-info text-white">
                                            Show More <i class="fa-solid fa-arrow-down"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <!-- listings ads -->
                        <div class="col-lg-9">
                            <div class="listings_wrap mt-4">
                                @forelse($seller_ads as $ads)
                                    <!-- list item -->
                                    <div class="listing_item bg-white mb-2 rounded position-relative">

                                        <!-- If nee class d-block stretched-link-->
                                        <div class="d-flex position-relative w-100">
                                            <a href="{{ route('ads.details', ['location' => $ads?->city_slug, 'category' => $ads?->category_slug, 'scategory' => $ads->subcategory_slug, 'slug' => $ads?->slug]) }}"
                                                class="listing_img">
                                                <img src="{{ getPhoto($ads?->thumbnail) }}" class="me-3"
                                                    alt="{{ $ads?->title }}">
                                            </a>
                                            <div class="listing_content w-100 overflow-hidden">
                                                <a
                                                    href="{{ route('ads.details', ['location' => $ads?->city_slug, 'category' => $ads?->category_slug, 'scategory' => $ads->subcategory_slug, 'slug' => $ads?->slug]) }}">
                                                    <h2 class="mb-1 listing_name">{{ $ads?->title }}</h2>
                                                </a>
                                                <!--<div class="car_info mb-1">62.000 km</div>-->
                                                <div class="listing_tag mb-1 d-sm-flex align-items-center">
                                                    <div class="member me-3 text-uppercase">
                                                        <i class="fa fa-star"></i>
                                                        Member
                                                    </div>
                                                    @if ($seller?->is_verified_seller == '1')
                                                        <div class="verified text-uppercase">
                                                            <i class="fa fa-check-square"></i>
                                                            Verified
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="listing_info mb-1">{{ $ads?->belongsToRegion?->name }}
                                                    , {{ $ads?->belongsToCategory?->name }}</div>
                                                @if ($ads->category_slug && $ads->category_slug != 'jobs')
                                                    <div class="listing_price">
                                                        @if ($ads->negotiable == '1')
                                                            Negotiable
                                                        @else
                                                            {{ $setting?->currency_symbol }} {{ $ads?->price }}
                                                        @endif
                                                    </div>
                                                @endif
                                                {{-- <div class="listing_price">{{ $setting?->currency_symbol }}
                                                    {{ $ads?->price }}</div> --}}
                                                <div class="date text-end">
                                                    {{ $ads?->created_at->diffForHumans(['parts' => 2]) }}</div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="text-center text-danger">
                                        <h4>No Ads Found</h4>
                                    </div>
                                @endforelse
                            </div>
                            <!-- pagination -->
                            <div class="listing_pagination mb-4 mt-4 d-flex justify-content-center">
                                {{ $seller_ads->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================= Ads Listings End  ============================ -->



@endsection

@push('scripts')
<script>
    $(document).ready(function() {
    $('#seller-details-view-toggle').on('click', function() {
        var fullText = $('#service-full-text').text();
        var previewText = $('#service-preview').text();

        // Toggle visibility of the full text and preview text
        if ($(this).text().includes('Show More')) {
            $('#service-preview').hide();
            $('#service-full-text').show();
            $(this).html('Show Less <i class="fa-solid fa-arrow-up"></i>');
        } else {
            $('#service-preview').show();
            $('#service-full-text').hide();
            $(this).html('Show More <i class="fa-solid fa-arrow-down"></i>');
        }
    });
});

</script>

@endpush