@extends('layouts.app')

@section('title', 'Designation Management')
@section('no-page-header')

@section('content')
<div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Designation Management</h1>
    
    <div class="bg-white rounded shadow p-4 mb-4">
        <a href="{{ route('designations.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded">Add Designation</a>
    </div>
    
    <div class="bg-white rounded shadow">
        <table class="min-w-full">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-4 py-2 text-left">Name</th>
                    <th class="px-4 py-2 text-left">Description</th>
                    <th class="px-4 py-2 text-left">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($designations ?? [] as $designation)
                    <tr class="border-b">
                        <td class="px-4 py-2">{{ $designation->name }}</td>
                        <td class="px-4 py-2">{{ $designation->description }}</td>
                        <td class="px-4 py-2">
                            <a href="{{ route('designations.edit', $designation->id) }}" class="text-blue-600 mr-2">Edit</a>
                            <form action="{{ route('designations.destroy', $designation->id) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="px-4 py-2 text-center text-gray-500">No designations found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection