@extends('layouts.admin')
@section('header', 'Manage Services')
@section('content')
<div class="mb-4 flex justify-between">
    <a href="{{ route('admin.services.create') }}" class="bg-teal-600 text-white px-4 py-2 rounded">Add Service</a>
</div>
<div class="bg-white rounded shadow overflow-x-auto">
    <table class="w-full whitespace-nowrap">
        <thead>
            <tr class="text-left font-bold bg-gray-50 border-b">
                <th class="px-6 py-3">Title</th>
                <th class="px-6 py-3">Slug</th>
                <th class="px-6 py-3">Status</th>
                <th class="px-6 py-3">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($services as $service)
            <tr class="border-b focus-within:bg-gray-100 hover:bg-gray-100">
                <td class="px-6 py-4">{{ $service->title }}</td>
                <td class="px-6 py-4">{{ $service->slug }}</td>
                <td class="px-6 py-4">{{ $service->is_active ? 'Active' : 'Inactive' }}</td>
                <td class="px-6 py-4 flex space-x-2">
                    <a href="{{ route('admin.services.edit', $service) }}" class="text-indigo-600 hover:text-indigo-900">Edit</a>
                    <form action="{{ route('admin.services.destroy', $service) }}" method="POST" onsubmit="return confirm('Delete this service?');">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-900">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection
