@extends('layouts.app')
@section('title', 'Document Types')
@section('page-title', 'Document Types')
@section('page-subtitle', 'Configure employee and company document types')
@section('breadcrumbs')
    @include('layouts.components.breadcrumbs', ['items' => [['label' => 'Admin', 'url' => '/admin/dashboard'], ['label' => 'Document Types']]])
@endsection
@section('page-actions')
    <a href="{{ route('admin.document-types.create') }}" class="btn-primary">
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Add Type
    </a>
@endsection

@section('content')
<div class="card-static animate-fade-up">
    <div class="px-5 py-3 border-b border-gray-100">
        <form method="GET" class="flex items-center gap-2">
            <select name="category" class="form-select w-auto" onchange="this.form.submit()">
                <option value="">All Categories</option>
                <option value="employee" {{ request('category') === 'employee' ? 'selected' : '' }}>Employee</option>
                <option value="company" {{ request('category') === 'company' ? 'selected' : '' }}>Company</option>
            </select>
        </form>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Name</th><th>Category</th><th>Expiry Required</th><th>Onboarding</th><th>Status</th><th class="text-right">Actions</th></tr></thead>
            <tbody>
                @forelse($types as $t)
                <tr>
                    <td class="font-medium text-gray-800">{{ $t->name }}</td>
                    <td><span class="badge badge-info">{{ ucfirst($t->category) }}</span></td>
                    <td>
                        @if($t->requires_expiry)<span class="text-success-600 text-xs font-medium">Yes</span>
                        @else<span class="text-gray-400 text-xs">No</span>@endif
                    </td>
                    <td>
                        @if($t->mandatory_for_onboarding)<span class="text-danger-500 text-xs font-medium">Mandatory</span>
                        @else<span class="text-gray-400 text-xs">Optional</span>@endif
                    </td>
                    <td>
                        @if($t->is_active)<span class="badge badge-active"><span class="badge-dot"></span>Active</span>
                        @else<span class="badge badge-inactive">Inactive</span>@endif
                    </td>
                    <td class="text-right">
                        <div class="flex items-center justify-end gap-1">
                            <a href="{{ route('admin.document-types.edit', $t) }}" class="btn-icon w-8 h-8" title="Edit">
                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                            </a>
                            <form method="POST" action="{{ route('admin.document-types.destroy', $t) }}" id="del-dt-{{ $t->id }}">@csrf @method('DELETE')
                                <button type="button" class="btn-icon w-8 h-8 text-danger-500 hover:bg-danger-50" onclick="window.dispatchEvent(new CustomEvent('open-confirm',{detail:{title:'Delete Type',message:'Delete &quot;{{ $t->name }}&quot;?',confirmText:'Delete',action:()=>document.getElementById('del-dt-{{ $t->id }}').submit()}}))">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6">@include('layouts.components.empty-state', ['icon' => 'file', 'title' => 'No document types', 'message' => 'Define types like Passport, Visa, Labour Card.', 'actionUrl' => route('admin.document-types.create'), 'actionLabel' => 'Add Type'])</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($types->hasPages())<div class="px-5 py-3 border-t border-gray-100">@include('layouts.components.pagination', ['paginator' => $types])</div>@endif
</div>
@endsection