@extends('layouts.site')

@section('meta_title')
    {{ __('site.repairs_title') }} — {{ brand_name() }}
@endsection

@section('title', __('site.repairs_title'))

@section('content')
    <div class="site-container space-y-6 pb-8 px-2" data-reveal="page">
        <header class=" px-2 py-4" data-reveal="soft">
            <h1 class="text-xl font-bold">{{ __('site.repairs_title') }}</h1>
            <p class="mt-2 text-sm text-brand-muted">{{ __('site.repairs_subtitle') }}</p>
        </header>

        @if ($categories->isNotEmpty())
            <x-site.category-tabs
                :categories="$categories"
                route-name="site.repairs.index"
                :current-category-id="$categoryId"
            />
        @endif

        @if ($orders->isNotEmpty())
            <section class="space-y-4">
                <h2 class="text-lg font-semibold">{{ __('site.repairs_completed') }}</h2>
                <ul class="eca-card-grid eca-card-grid--services">
                    @foreach ($orders as $order)
                        <li class="repair-ticket-card rounded-xl border border-brand-border p-4">
                            <p class="text-xs font-mono text-brand-muted">{{ $order->tracking_code }}</p>
                            <p class="mt-1 font-medium">{{ $order->device_name }}</p>
                            @if ($order->category)
                                <p class="mt-1 text-sm text-brand-muted">{{ locale_category_name($order->category) }}</p>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </section>
        @endif

        @if ($services->isNotEmpty())
            <section class="space-y-4">
                <div class="eca-section-heading">
                    <h2>{{ __('site.repairs_related_services') }}</h2>
                    <a href="{{ route('site.services.index', array_filter(['locale' => app()->getLocale(), 'category_id' => $categoryId])) }}">{{ __('site.view_all') }}</a>
                </div>
                <ul class="eca-services-pipeline">
                    @foreach ($services as $service)
                        <li class="eca-services-pipeline__item">
                            <x-site.cards.service :service="$service" />
                        </li>
                    @endforeach
                </ul>
            </section>
        @endif

        @if ($orders->isEmpty() && $services->isEmpty())
            <p class="rounded-lg border border-dashed border-brand-border px-6 py-12 text-center text-brand-muted">{{ __('site.repairs_empty') }}</p>
        @endif
    </div>
@endsection