@extends('admin.layouts.app')

@section('title', 'Services')
@section('subtitle', 'Maintain the dynamic service catalog shown on the website and service detail pages.')

@section('content')
    <div class="admin-card admin-library">
        <div class="admin-toolbar">
            <div>
                <p class="admin-section-title">Service library</p>
                <p class="admin-section-subtitle">{{ $services->total() }} services in the catalog.</p>
            </div>
            <a href="{{ route('admin.services.create') }}" class="admin-button">New service</a>
        </div>

        <form method="GET" class="admin-form-grid admin-form-grid--two admin-library__filters">
            <div class="admin-field">
                <label for="filter-category">Category</label>
                <select id="filter-category" name="category">
                    <option value="">All categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category }}" @selected(request('category') === $category)>{{ $category }}</option>
                    @endforeach
                </select>
            </div>
            <div class="admin-field">
                <label for="filter-tag">Tag</label>
                <select id="filter-tag" name="tag">
                    <option value="">All tags</option>
                    @foreach($tags as $tag)
                        <option value="{{ $tag }}" @selected(request('tag') === $tag)>{{ $tag }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-wrap gap-3">
                <button type="submit" class="admin-button">Apply filters</button>
                <a href="{{ route('admin.services.index') }}" class="admin-button admin-button--secondary">Reset</a>
            </div>
        </form>

        <div class="mt-6 admin-library__stack">
            @forelse($services as $service)
                <article class="admin-library__item">
                    <div class="admin-library__content">
                        <div class="admin-library__title-row">
                            <span class="admin-library__thumb">
                                <img src="{{ $service->icon_url }}" alt="{{ $service->title }} icon">
                            </span>
                            <div class="min-w-0">
                                <div class="admin-library__heading">
                                    <p class="admin-library__title">{{ $service->title }}</p>
                                    @if($service->category)
                                        <span class="admin-chip">{{ $service->category }}</span>
                                    @endif
                                    @foreach((array) $service->tags as $tag)
                                        <span class="admin-chip">{{ $tag }}</span>
                                    @endforeach
                                </div>
                                <p class="admin-library__description">{{ $service->short_description ?: 'Service content is ready to be expanded with benefits, media, and SEO details.' }}</p>
                                <p class="admin-library__meta">
                                    <span>/service/{{ $service->slug }}</span>
                                    @if(! is_null($service->sort_order))
                                        <span class="admin-library__meta-divider">&middot;</span>
                                        <span>Order {{ $service->sort_order }}</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="admin-library__actions">
                        <a href="{{ route('services.show', $service->slug) }}" class="admin-button admin-button--ghost" target="_blank" rel="noopener">View</a>
                        <a href="{{ route('admin.services.edit', $service) }}" class="admin-button admin-button--secondary">Edit</a>
                        <form method="POST" action="{{ route('admin.services.destroy', $service) }}" onsubmit="return confirm('Delete this service?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="admin-button admin-button--danger">Delete</button>
                        </form>
                    </div>
                </article>
            @empty
                <div class="admin-empty">No services found for the current filters.</div>
            @endforelse
        </div>

        <div class="mt-6">
            {{ $services->links() }}
        </div>
    </div>
@endsection
