@extends('layouts.app')

@section('title', $service->name)

@section('content')
    <!-- Service Details Header -->
    <section class="service-header bg-primary text-white py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-2">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-white">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('booking.search') }}" class="text-white">{{ __('Services') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('booking.search', ['category' => $service->category_id]) }}" class="text-white">{{ $service->category->name }}</a></li>
                            <li class="breadcrumb-item active text-white-50" aria-current="page">{{ $service->name }}</li>
                        </ol>
                    </nav>
                    <span class="badge bg-light text-primary mb-3">{{ $service->category->name }}</span>
                    <h1 class="fw-bold mb-3">{{ $service->name }}</h1>
                    <div class="d-flex align-items-center mb-3">
                        <div class="rating text-warning me-2">
                            @for($i = 1; $i <= 5; $i++)
                                <i class="bi bi-star-fill {{ $i <= $service->rating ? '' : 'text-white-50' }}"></i>
                            @endfor
                        </div>
                        <span>{{ $service->rating }} ({{ $service->reviews_count }} {{ __('reviews') }})</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <img src="{{ asset($service->provider->avatar ?? 'images/avatar-placeholder.jpg') }}" class="rounded-circle me-2" width="40" height="40" alt="{{ $service->provider->name }}">
                        <div>
                            <p class="mb-0">{{ __('Provided by') }} <strong>{{ $service->provider->name }}</strong></p>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-geo-alt me-1"></i>
                                <span>{{ $service->provider->address ?? __('Location not specified') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mt-4 mt-lg-0">
                    <div class="card border-0 shadow">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4 class="fw-bold mb-0">{{ $service->price_formatted }}</h4>
                                @if($service->original_price > $service->price)
                                    <span class="badge bg-danger">{{ __('Save') }} {{ number_format((($service->original_price - $service->price) / $service->original_price) * 100) }}%</span>
                                @endif
                            </div>
                            @if($service->original_price > $service->price)
                                <p class="text-decoration-line-through text-muted">{{ $service->original_price_formatted }}</p>
                            @endif
                            <p class="mb-4">{{ __('Duration') }}: {{ $service->duration }} {{ __('minutes') }}</p>
                            <a href="{{ route('booking.select-datetime', $service->id) }}" class="btn btn-primary btn-lg w-100">{{ __('Book Now') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Service Details Content -->
    <section class="service-details py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <!-- Service Images -->
                    <div class="service-images mb-5">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <img src="{{ asset($service->image ?? 'images/service-placeholder.jpg') }}" class="img-fluid rounded" alt="{{ $service->name }}">
                            </div>
                            <div class="col-md-4">
                                <div class="row">
                                    @foreach($service->images->take(2) as $image)
                                        <div class="col-6 col-md-12 mb-3">
                                            <img src="{{ asset($image->path) }}" class="img-fluid rounded" alt="{{ $service->name }}">
                                        </div>
                                    @endforeach
                                    @if($service->images->count() > 2)
                                        <div class="col-6 col-md-12 mb-3 position-relative">
                                            <img src="{{ asset($service->images[2]->path) }}" class="img-fluid rounded" alt="{{ $service->name }}">
                                            @if($service->images->count() > 3)
                                                <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-50 rounded d-flex align-items-center justify-content-center">
                                                    <span class="text-white fw-bold">+{{ $service->images->count() - 3 }} {{ __('more') }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Service Tabs -->
                    <ul class="nav nav-tabs mb-4" id="serviceTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">{{ __('Description') }}</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="false">{{ __('Details') }}</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">{{ __('Reviews') }}</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq" type="button" role="tab" aria-controls="faq" aria-selected="false">{{ __('FAQ') }}</button>
                        </li>
                    </ul>

                    <div class="tab-content" id="serviceTabContent">
                        <!-- Description Tab -->
                        <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                            <div class="service-description">
                                <h4 class="mb-3">{{ __('About This Service') }}</h4>
                                <div class="mb-4">
                                    {!! $service->description !!}
                                </div>
                            </div>
                        </div>

                        <!-- Details Tab -->
                        <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">
                            <div class="service-details">
                                <h4 class="mb-3">{{ __('Service Details') }}</h4>
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                                <span>{{ __('Duration') }}</span>
                                                <span class="fw-bold">{{ $service->duration }} {{ __('minutes') }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                                <span>{{ __('Category') }}</span>
                                                <span class="fw-bold">{{ $service->category->name }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                                <span>{{ __('Provider') }}</span>
                                                <span class="fw-bold">{{ $service->provider->name }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                                <span>{{ __('Location') }}</span>
                                                <span class="fw-bold">{{ $service->location ?? __('Not specified') }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                                <span>{{ __('Availability') }}</span>
                                                <span class="fw-bold">{{ $service->is_available ? __('Available') : __('Not Available') }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                                <span>{{ __('Cancellation Policy') }}</span>
                                                <span class="fw-bold">{{ $service->cancellation_policy ?? __('Standard') }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reviews Tab -->
                        <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                            <div class="service-reviews">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h4 class="mb-0">{{ __('Customer Reviews') }}</h4>
                                    <div class="d-flex align-items-center">
                                        <div class="rating text-warning me-2">
                                            @for($i = 1; $i <= 5; $i++)
                                                <i class="bi bi-star-fill {{ $i <= $service->rating ? '' : 'text-muted' }}"></i>
                                            @endfor
                                        </div>
                                        <span>{{ $service->rating }} ({{ $service->reviews_count }})</span>
                                    </div>
                                </div>

                                <!-- Rating Breakdown -->
                                <div class="rating-breakdown mb-4">
                                    <div class="row align-items-center mb-2">
                                        <div class="col-3 col-md-2">
                                            <div class="d-flex align-items-center">
                                                <span class="me-2">5</span>
                                                <i class="bi bi-star-fill text-warning"></i>
                                            </div>
                                        </div>
                                        <div class="col-7 col-md-8">
                                            <div class="progress" style="height: 8px;">
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $service->reviews_count > 0 ? ($service->reviews_5_star / $service->reviews_count) * 100 : 0 }}%" aria-valuenow="{{ $service->reviews_count > 0 ? ($service->reviews_5_star / $service->reviews_count) * 100 : 0 }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <span class="text-muted small">{{ $service->reviews_5_star }}</span>
                                        </div>
                                    </div>
                                    <!-- Repeat for 4, 3, 2, 1 stars -->
                                    <div class="row align-items-center mb-2">
                                        <div class="col-3 col-md-2">
                                            <div class="d-flex align-items-center">
                                                <span class="me-2">4</span>
                                                <i class="bi bi-star-fill text-warning"></i>
                                            </div>
                                        </div>
                                        <div class="col-7 col-md-8">
                                            <div class="progress" style="height: 8px;">
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $service->reviews_count > 0 ? ($service->reviews_4_star / $service->reviews_count) * 100 : 0 }}%" aria-valuenow="{{ $service->reviews_count > 0 ? ($service->reviews_4_star / $service->reviews_count) * 100 : 0 }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <span class="text-muted small">{{ $service->reviews_4_star }}</span>
                                        </div>
                                    </div>
                                    <!-- Continue for 3, 2, 1 stars -->
                                </div>

                                <!-- Reviews List -->
                                <div class="reviews-list">
                                    @forelse($service->reviews as $review)
                                        <div class="card mb-3 border-0 shadow-sm">
                                            <div class="card-body">
                                                <div class="d-flex mb-3">
                                                    <img src="{{ asset($review->user->avatar ?? 'images/avatar-placeholder.jpg') }}" class="rounded-circle me-3" width="50" height="50" alt="{{ $review->user->name }}">
                                                    <div>
                                                        <h6 class="mb-1">{{ $review->user->name }}</h6>
                                                        <div class="d-flex align-items-center">
                                                            <div class="rating text-warning me-2">
                                                                @for($i = 1; $i <= 5; $i++)
                                                                    <i class="bi bi-star-fill {{ $i <= $review->rating ? '' : 'text-muted' }}"></i>
                                                                @endfor
                                                            </div>
                                                            <small class="text-muted">{{ $review->created_at->diffForHumans() }}</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                <p class="mb-0">{{ $review->comment }}</p>
                                                @if($review->provider_reply)
                                                    <div class="mt-3 ps-4 border-start">
                                                        <p class="mb-1"><strong>{{ __('Provider Response') }}:</strong></p>
                                                        <p class="mb-0 text-muted">{{ $review->provider_reply }}</p>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @empty
                                        <div class="alert alert-info">
                                            <i class="bi bi-info-circle me-2"></i>
                                            {{ __('No reviews yet for this service.') }}
                                        </div>
                                    @endforelse
                                </div>

                                <!-- Pagination -->
                                @if($service->reviews->count() > 0)
                                    <div class="d-flex justify-content-center mt-4">
                                        {{ $service->reviews->links() }}
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- FAQ Tab -->
                        <div class="tab-pane fade" id="faq" role="tabpanel" aria-labelledby="faq-tab">
                            <div class="service-faq">
                                <h4 class="mb-4">{{ __('Frequently Asked Questions') }}</h4>
                                <div class="accordion" id="faqAccordion">
                                    @forelse($service->faqs as $index => $faq)
                                        <div class="accordion-item border-0 shadow-sm mb-3">
                                            <h2 class="accordion-header" id="faq-heading-{{ $index }}">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-collapse-{{ $index }}" aria-expanded="false" aria-controls="faq-collapse-{{ $index }}">
                                                    {{ $faq->question }}
                                                </button>
                                            </h2>
                                            <div id="faq-collapse-{{ $index }}" class="accordion-collapse collapse" aria-labelledby="faq-heading-{{ $index }}" data-bs-parent="#faqAccordion">
                                                <div class="accordion-body">
                                                    {{ $faq->answer }}
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="alert alert-info">
                                            <i class="bi bi-info-circle me-2"></i>
                                            {{ __('No FAQs available for this service.') }}
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mt-5 mt-lg-0">
                    <!-- Provider Info Card -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title mb-4">{{ __('About the Provider') }}</h5>
                            <div class="d-flex align-items-center mb-3">
                                <img src="{{ asset($service->provider->avatar ?? 'images/avatar-placeholder.jpg') }}" class="rounded-circle me-3" width="60" height="60" alt="{{ $service->provider->name }}">
                                <div>
                                    <h6 class="mb-1">{{ $service->provider->name }}</h6>
                                    <div class="d-flex align-items-center">
                                        <div class="rating text-warning me-2">
                                            @for($i = 1; $i <= 5; $i++)
                                                <i class="bi bi-star-fill {{ $i <= $service->provider->rating ? '' : 'text-muted' }}"></i>
                                            @endfor
                                        </div>
                                        <small>{{ $service->provider->rating }} ({{ $service->provider->reviews_count }})</small>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-3">{{ Str::limit($service->provider->bio, 150) }}</p>
                            <div class="d-flex align-items-center mb-3">
                                <i class="bi bi-geo-alt me-2"></i>
                                <span>{{ $service->provider->address ?? __('Location not specified') }}</span>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <i class="bi bi-calendar-check me-2"></i>
                                <span>{{ __('Member since') }} {{ $service->provider->created_at->format('M Y') }}</span>
                            </div>
                            <a href="{{ route('provider.profile', $service->provider->id) }}" class="btn btn-outline-primary w-100">{{ __('View Profile') }}</a>
                        </div>
                    </div>

                    <!-- Similar Services Card -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title mb-4">{{ __('Similar Services') }}</h5>
                            @forelse($similarServices as $similarService)
                                <div class="d-flex mb-3">
                                    <img src="{{ asset($similarService->image ?? 'images/service-placeholder.jpg') }}" class="rounded me-3" width="60" height="60" alt="{{ $similarService->name }}">
                                    <div>
                                        <h6 class="mb-1">{{ $similarService->name }}</h6>
                                        <div class="d-flex align-items-center mb-1">
                                            <div class="rating text-warning me-2">
                                                @for($i = 1; $i <= 5; $i++)
                                                    <i class="bi bi-star-fill {{ $i <= $similarService->rating ? '' : 'text-muted' }}"></i>
                                                @endfor
                                            </div>
                                            <small>{{ $similarService->rating }}</small>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-bold">{{ $similarService->price_formatted }}</span>
                                            <a href="{{ route('booking.service.details', $similarService->slug) }}" class="btn btn-sm btn-outline-primary">{{ __('View') }}</a>
                                        </div>
                                    </div>
                                </div>
                                @if(!$loop->last)
                                    <hr>
                                @endif
                            @empty
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle me-2"></i>
                                    {{ __('No similar services found.') }}
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="cta-section py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <h2 class="mb-3">{{ __('Ready to Book This Service?') }}</h2>
                    <p class="lead mb-4">{{ __('Secure your appointment now and enjoy a seamless booking experience.') }}</p>
                    <a href="{{ route('booking.select-datetime', $service->id) }}" class="btn btn-primary btn-lg">{{ __('Book Now') }}</a>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Initialize any service details page specific components
    });
</script>
@endsection