@extends('layouts.app')
@section('title', 'Custom Fields')
@section('page-title', 'Dynamic Fields')
@section('page-subtitle', 'Global field definitions for employee onboarding')
@section('breadcrumbs')
    @include('layouts.components.breadcrumbs', ['items' => [['label' => 'Admin', 'url' => '/admin/dashboard'], ['label' => 'Custom Fields']]])
@endsection
@section('page-actions')
    <a href="{{ route('admin.custom-fields.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 Field
    </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="module" class="form-select w-auto" onchange="this.form.submit()">
                <option value="">All Modules</option>
                <option value="employee" {{ request('module') === 'employee' ? 'selected' : '' }}>Employee</option>
                <option value="company" {{ request('module') === 'company' ? 'selected' : '' }}>Company</option>
            </select>
        </form>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Label</th><th>Key</th><th>Type</th><th>Module</th><th>Section</th><th>Required</th><th>Status</th><th class="text-right">Actions</th></tr></thead>
            <tbody>
                @forelse($fields as $f)
                <tr>
                    <td class="font-medium text-gray-800">{{ $f->field_label }}</td>
                    <td><code class="text-xxs bg-gray-100 px-1.5 py-0.5 rounded">{{ $f->field_key }}</code></td>
                    <td><span class="badge badge-info">{{ $f->field_type }}</span></td>
                    <td>{{ ucfirst($f->module) }}</td>
                    <td>{{ ucfirst($f->section) }}</td>
                    <td>
                        @if($f->is_required)<span class="text-danger-500 text-xs font-medium">Required</span>
                        @else<span class="text-gray-400 text-xs">Optional</span>@endif
                    </td>
                    <td>
                        @if($f->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.custom-fields.edit', $f) }}" 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.custom-fields.destroy', $f) }}" id="del-cf-{{ $f->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 Field',message:'Delete &quot;{{ $f->field_label }}&quot;? This also removes all stored values.',confirmText:'Delete',action:()=>document.getElementById('del-cf-{{ $f->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="8">@include('layouts.components.empty-state', ['icon' => 'box', 'title' => 'No custom fields', 'message' => 'Define dynamic fields for employee onboarding.', 'actionUrl' => route('admin.custom-fields.create'), 'actionLabel' => 'Add Field'])</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($fields->hasPages())<div class="px-5 py-3 border-t border-gray-100">@include('layouts.components.pagination', ['paginator' => $fields])</div>@endif
</div>
@endsection