@extends('layouts.app')

@section('content')
    <div class=" mx-auto bg-white p-6 rounded shadow">
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-xl font-bold">Sign Types</h1>
            <a href="{{ route('sign-types.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded">+ Add Sign Type</a>
        </div>

        @if (session('success'))
            <div class="mb-4 text-green-600 font-medium">{{ session('success') }}</div>
        @endif

        <table class="w-full border">
            <thead class="bg-gray-200">
                <tr>
                    <th class="p-2 border">#</th>
                    <th class="p-2 border text-left">Name</th>
                    <th class="p-2 border text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($signTypes as $index => $type)
                    <tr>
                        <td class="p-2 border text-center">{{ $index + 1 }}</td>
                        <td class="p-2 border">{{ $type->name }}</td>
                        <td class="p-2 border text-center space-x-2">
                            <a href="{{ route('sign-types.edit', $type->id) }}" class="text-blue-600">Edit</a>
                            {{-- <form action="{{ route('sign-types.destroy', $type->id) }}" method="POST" class="inline-block"
                                onsubmit="return confirm('Delete this sign type?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600">Delete</button>
                            </form> --}}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="p-2 border text-center text-gray-500">No sign types found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection