@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8 px-4">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-900">Trust Services</h1>
        <a href="{{ route('admin.trust-services.create') }}" class="inline-flex items-center px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700">
            + Add Service
        </a>
    </div>

    @if($services->isEmpty())
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 text-center text-gray-600">
            No trust services configured yet. Create one to get started.
        </div>
    @else
        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-200 bg-gray-50">
                        <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Name</th>
                        <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Mode</th>
                        <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">URL</th>
                        <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Active</th>
                        <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Sort</th>
                        <th class="px-6 py-3 text-right text-sm font-semibold text-gray-700">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($services as $service)
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-6 py-4 text-gray-900 font-medium">{{ $service->name }}</td>
                            <td class="px-6 py-4">
                                <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $service->verification_mode === 'automated' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700' }}">
                                    {{ ucfirst($service->verification_mode) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600"><a href="{{ $service->url }}" target="_blank" class="text-blue-600 hover:text-blue-700 underline">{{ $service->url }}</a></td>
                            <td class="px-6 py-4">
                                @if($service->is_active)
                                    <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">Active</span>
                                @else
                                    <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700">Inactive</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-gray-600">{{ $service->sort_order }}</td>
                            <td class="px-6 py-4 text-right">
                                <a href="{{ route('admin.trust-services.edit', $service) }}" class="text-blue-600 hover:text-blue-700 text-sm font-medium mr-3">Edit</a>
                                <form method="POST" action="{{ route('admin.trust-services.destroy', $service) }}" class="inline" onsubmit="return confirm('Delete this service?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-700 text-sm font-medium">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection