@extends('layouts.app')

@section('title', __('Services'))

@section('content')
    <!-- Services Header Section -->
    <section class="services-header bg-primary text-white py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1 class="fw-bold mb-3">{{ __('Find the Perfect Service') }}</h1>
                    <p class="lead">{{ __('Browse through our wide range of services and find the perfect match for your needs.') }}</p>
                </div>
                <div class="col-lg-6">
                    <div class="card shadow border-0">
                        <div class="card-body p-4">
                            <form action="{{ route('booking.search') }}" method="GET">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="category" class="form-label">{{ __('Category') }}</label>
                                        <select class="form-select" id="category" name="category">
                                            <option value="">{{ __('All Categories') }}</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="location" class="form-label">{{ __('Location') }}</label>
                                        <input type="text" class="form-control" id="location" name="location" 
                                            value="{{ request('location') }}" placeholder="{{ __('Enter location') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="price_range" class="form-label">{{ __('Price Range') }}</label>
                                        <select class="form-select" id="price_range" name="price_range">
                                            <option value="">{{ __('Any Price') }}</option>
                                            <option value="0-50" {{ request('price_range') == '0-50' ? 'selected' : '' }}>{{ __('$0 - $50') }}</option>
                                            <option value="50-100" {{ request('price_range') == '50-100' ? 'selected' : '' }}>{{ __('$50 - $100') }}</option>
                                            <option value="100-200" {{ request('price_range') == '100-200' ? 'selected' : '' }}>{{ __('$100 - $200') }}</option>
                                            <option value="200+" {{ request('price_range') == '200+' ? 'selected' : '' }}>{{ __('$200+') }}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="rating" class="form-label">{{ __('Rating') }}</label>
                                        <select class="form-select" id="rating" name="rating">
                                            <option value="">{{ __('Any Rating') }}</option>
                                            <option value="4+" {{ request('rating') == '4+' ? 'selected' : '' }}>{{ __('4+ Stars') }}</option>
                                            <option value="3+" {{ request('rating') == '3+' ? 'selected' : '' }}>{{ __('3+ Stars') }}</option>
                                            <option value="2+" {{ request('rating') == '2+' ? 'selected' : '' }}>{{ __('2+ Stars') }}</option>
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary w-100">{{ __('Search Services') }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services List Section -->
    <section class="services-list py-5">
        <div class="container">
            <div class="row">
                <!-- Filters Sidebar -->
                <div class="col-lg-3 mb-4">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">{{ __('Filters') }}</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('booking.search') }}" method="GET" id="filter-form">
                                <!-- Categories Filter -->
                                <div class="mb-4">
                                    <h6 class="fw-bold">{{ __('Categories') }}</h6>
                                    <div class="categories-filter">
                                        @foreach($categories as $category)
                                            <div class="form-check">
                                                <input class="form-check-input filter-checkbox" type="checkbox" name="categories[]" 
                                                    value="{{ $category->id }}" id="category-{{ $category->id }}"
                                                    {{ in_array($category->id, request('categories', [])) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="category-{{ $category->id }}">
                                                    {{ $category->name }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <!-- Price Range Filter -->
                                <div class="mb-4">
                                    <h6 class="fw-bold">{{ __('Price Range') }}</h6>
                                    <div class="price-range-filter">
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="price_range" 
                                                value="" id="price-any" {{ !request('price_range') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="price-any">
                                                {{ __('Any Price') }}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="price_range" 
                                                value="0-50" id="price-0-50" {{ request('price_range') == '0-50' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="price-0-50">
                                                {{ __('$0 - $50') }}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="price_range" 
                                                value="50-100" id="price-50-100" {{ request('price_range') == '50-100' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="price-50-100">
                                                {{ __('$50 - $100') }}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="price_range" 
                                                value="100-200" id="price-100-200" {{ request('price_range') == '100-200' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="price-100-200">
                                                {{ __('$100 - $200') }}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="price_range" 
                                                value="200+" id="price-200-plus" {{ request('price_range') == '200+' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="price-200-plus">
                                                {{ __('$200+') }}
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Rating Filter -->
                                <div class="mb-4">
                                    <h6 class="fw-bold">{{ __('Rating') }}</h6>
                                    <div class="rating-filter">
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="rating" 
                                                value="" id="rating-any" {{ !request('rating') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="rating-any">
                                                {{ __('Any Rating') }}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="rating" 
                                                value="4+" id="rating-4-plus" {{ request('rating') == '4+' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="rating-4-plus">
                                                <div class="rating text-warning">
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star text-muted"></i>
                                                </div>
                                                {{ __('& Up') }}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="rating" 
                                                value="3+" id="rating-3-plus" {{ request('rating') == '3+' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="rating-3-plus">
                                                <div class="rating text-warning">
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star text-muted"></i>
                                                    <i class="bi bi-star text-muted"></i>
                                                </div>
                                                {{ __('& Up') }}
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input filter-checkbox" type="radio" name="rating" 
                                                value="2+" id="rating-2-plus" {{ request('rating') == '2+' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="rating-2-plus">
                                                <div class="rating text-warning">
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star-fill"></i>
                                                    <i class="bi bi-star text-muted"></i>
                                                    <i class="bi bi-star text-muted"></i>
                                                    <i class="bi bi-star text-muted"></i>
                                                </div>
                                                {{ __('& Up') }}
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Apply Filters Button -->
                                <button type="submit" class="btn btn-primary w-100">{{ __('Apply Filters') }}</button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Services Grid -->
                <div class="col-lg-9">
                    <!-- Sort Options -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h4 class="mb-0">{{ __('Available Services') }}</h4>
                            <p class="text-muted mb-0">{{ $services->total() }} {{ __('services found') }}</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <label for="sort-by" class="me-2">{{ __('Sort by:') }}</label>
                            <select class="form-select form-select-sm" id="sort-by" name="sort">
                                <option value="relevance" {{ request('sort') == 'relevance' ? 'selected' : '' }}>{{ __('Relevance') }}</option>
                                <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>{{ __('Price: Low to High') }}</option>
                                <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>{{ __('Price: High to Low') }}</option>
                                <option value="rating" {{ request('sort') == 'rating' ? 'selected' : '' }}>{{ __('Highest Rating') }}</option>
                                <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>{{ __('Newest') }}</option>
                            </select>
                        </div>
                    </div>

                    <!-- Services List -->
                    <div class="row">
                        @forelse($services as $service)
                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="card h-100 border-0 shadow-sm service-card">
                                    <div class="position-relative">
                                        <img src="{{ asset($service->image ?? 'images/service-placeholder.jpg') }}" class="card-img-top" alt="{{ $service->name }}">
                                        @if($service->is_featured)
                                            <span class="badge bg-warning position-absolute top-0 start-0 m-2">{{ __('Featured') }}</span>
                                        @endif
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <span class="badge bg-primary">{{ $service->category->name }}</span>
                                            <div class="rating text-warning">
                                                @for($i = 1; $i <= 5; $i++)
                                                    <i class="bi bi-star-fill {{ $i <= $service->rating ? '' : 'text-muted' }}"></i>
                                                @endfor
                                                <span class="text-muted ms-1">({{ $service->reviews_count }})</span>
                                            </div>
                                        </div>
                                        <h5 class="card-title">{{ $service->name }}</h5>
                                        <p class="card-text text-muted">{{ Str::limit($service->description, 80) }}</p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <span class="fw-bold">{{ $service->price_formatted }}</span>
                                                @if($service->original_price > $service->price)
                                                    <span class="text-decoration-line-through text-muted ms-2">{{ $service->original_price_formatted }}</span>
                                                @endif
                                            </div>
                                            <a href="{{ route('booking.service.details', $service->slug) }}" class="btn btn-sm btn-outline-primary">{{ __('View Details') }}</a>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white border-0 pt-0">
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset($service->provider->avatar ?? 'images/avatar-placeholder.jpg') }}" class="rounded-circle me-2" width="30" height="30" alt="{{ $service->provider->name }}">
                                            <small class="text-muted">{{ $service->provider->name }}</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12">
                                <div class="alert alert-info text-center">
                                    <i class="bi bi-info-circle me-2"></i>
                                    {{ __('No services found matching your criteria. Please try different filters.') }}
                                </div>
                            </div>
                        @endforelse
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-center mt-4">
                        {{ $services->appends(request()->except('page'))->links() }}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Auto-submit filter form when sort option changes
        $('#sort-by').change(function() {
            const sortValue = $(this).val();
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.set('sort', sortValue);
            window.location.href = currentUrl.toString();
        });

        // Auto-submit filter form when checkboxes change
        $('.filter-checkbox').change(function() {
            $('#filter-form').submit();
        });
    });
</script>
@endsection