@extends('layouts.guest')

@section('title', $seo['title'])

@section('content')
<div class="mb-8">
    <h1 class="text-3xl font-bold">{{ __('All Services') }}</h1>
    <p class="text-gray-500 mt-2">{{ __('Browse our complete catalog of SMM services') }}</p>
</div>

<form method="GET" class="mb-8">
    <div class="relative">
        <input type="text" name="search" value="{{ $search }}" placeholder="{{ __('Search services...') }}"
               class="w-full px-4 py-3 pl-10 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
        <svg class="absolute left-3 top-3.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
    </div>
</form>

@if($categories->isEmpty())
    <div class="text-center py-16">
        <p class="text-gray-500">{{ __('No services found. Check back soon!') }}</p>
    </div>
@endif

@foreach($categories as $category)
    @if($category->services->isEmpty()) @continue @endif
    <div class="mb-12">
        <div class="flex items-center gap-3 mb-4">
            @if($category->icon)
                <span class="text-2xl">{{ $category->icon }}</span>
            @endif
            <h2 class="text-2xl font-bold">{{ $category->name }}</h2>
            <span class="px-2 py-0.5 text-xs font-medium bg-gray-100 rounded-full">{{ $category->services->count() }}</span>
        </div>
        <div class="overflow-x-auto bg-white rounded-xl border border-gray-200">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Service') }}</th>
                        <th class="text-right px-4 py-3 font-medium text-gray-600">{{ __('Rate /1000') }}</th>
                        <th class="text-right px-4 py-3 font-medium text-gray-600">{{ __('Min') }}</th>
                        <th class="text-right px-4 py-3 font-medium text-gray-600">{{ __('Max') }}</th>
                        <th class="text-center px-4 py-3 font-medium text-gray-600">{{ __('Speed') }}</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($category->services as $service)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    @if($service->icon)
                                        <span class="text-lg">{{ $service->icon }}</span>
                                    @endif
                                    <div>
                                        <p class="font-medium">{{ $service->name }}</p>
                                        <p class="text-xs text-gray-400 line-clamp-1">{{ $service->description }}</p>
                                    </div>
                                </div>
                                <div class="flex gap-1 mt-1.5">
                                    @if($service->refill)<span class="px-1.5 py-0.5 text-[10px] font-medium bg-green-50 text-green-700 rounded">Refill</span>@endif
                                    @if($service->cancel)<span class="px-1.5 py-0.5 text-[10px] font-medium bg-yellow-50 text-yellow-700 rounded">Cancel</span>@endif
                                    @if($service->is_featured)<span class="px-1.5 py-0.5 text-[10px] font-medium bg-indigo-50 text-indigo-700 rounded">Featured</span>@endif
                                </div>
                            </td>
                            <td class="px-4 py-3 text-right font-semibold">{{ currency($service->rateFor(auth()->user())) }}</td>
                            <td class="px-4 py-3 text-right text-gray-600">{{ number_format($service->min) }}</td>
                            <td class="px-4 py-3 text-right text-gray-600">{{ number_format($service->max) }}</td>
                            <td class="px-4 py-3 text-center text-gray-600">{{ $service->speed ?? '—' }}</td>
                            <td class="px-4 py-3 text-right">
                                <a href="{{ auth()->check() ? route('user.orders.service', $service) : route('login') }}"
                                   class="px-3 py-1.5 text-xs font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 whitespace-nowrap">
                                    {{ auth()->check() ? __('Order') : __('Login') }}
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endforeach
@endsection