@extends('admin.layout')
@section('title', 'Services')
@section('page-title', 'Manage Services')

@section('content')
<div class="flex items-center justify-between mb-6">
    <p class="text-gray-400 text-sm">{{ $services->count() }} services total</p>
    <a href="{{ route('admin.services.create') }}" class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all flex items-center gap-2">
        <i class="fas fa-plus text-xs"></i> Add Service
    </a>
</div>

@if($services->count() > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach($services as $service)
            <div class="bg-gray-900 border border-gray-800 rounded-2xl p-5 hover:border-gray-700 transition-all">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background: {{ $service->color ?? '#6366f1' }}20">
                        <i class="{{ $service->icon ?? 'fas fa-code' }} text-lg" style="color: {{ $service->color ?? '#6366f1' }}"></i>
                    </div>
                    <div class="flex items-center gap-1">
                        <a href="{{ route('admin.services.edit', $service) }}" class="w-8 h-8 bg-indigo-500/10 hover:bg-indigo-500 text-indigo-400 hover:text-white rounded-lg flex items-center justify-center transition-all text-xs">
                            <i class="fas fa-edit"></i>
                        </a>
                        @include('admin.partials.delete-btn', ['route' => route('admin.services.destroy', $service)])
                    </div>
                </div>
                <h3 class="text-white font-bold mb-2">{{ $service->title }}</h3>
                <p class="text-gray-400 text-sm leading-relaxed line-clamp-2">{{ $service->description }}</p>
                <div class="mt-3 flex items-center gap-2">
                    <span class="text-xs text-gray-500">Order: {{ $service->order }}</span>
                    <span class="w-1 h-1 bg-gray-700 rounded-full"></span>
                    <span class="text-xs {{ $service->is_active ? 'text-green-400' : 'text-red-400' }}">
                        {{ $service->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
            </div>
        @endforeach
    </div>
@else
    @include('admin.partials.empty-state', [
        'icon' => 'fas fa-cogs',
        'title' => 'No Services Yet',
        'description' => 'Add your company services.',
        'actionRoute' => route('admin.services.create'),
        'actionText' => 'Add First Service',
    ])
@endif
@endsection