@extends('layouts.admin')
@section('title', 'Metadata Registry')
@section('subtitle', 'Manage Dublin Core element and qualifier fields')

@section('content')
<div class="grid lg:grid-cols-3 gap-8">
    <!-- Left: Add Field Form -->
    <div class="lg:col-span-1">
        <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-8 sticky top-24">
            <h3 class="font-black text-slate-800 text-base mb-2">Add Metadata Field</h3>
            <p class="text-xs text-slate-400 font-medium mb-6">Create a new Dublin Core field mapping</p>

            <form action="{{ route('admin.metadata.store') }}" method="POST" class="space-y-6">
                @csrf
                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Element (required)</label>
                    <input type="text" name="element" required placeholder="e.g. contributor" value="{{ old('element') }}"
                        class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary">
                </div>

                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Qualifier (optional)</label>
                    <input type="text" name="qualifier" placeholder="e.g. author" value="{{ old('qualifier') }}"
                        class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary">
                    <p class="text-[10px] text-slate-400 mt-1 font-medium">Leave empty or enter 'none' if no qualifier is needed.</p>
                </div>

                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Scope Note / Description</label>
                    <textarea name="scope_note" rows="3" placeholder="Describe the usage of this metadata field..."
                        class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:border-primary resize-none">{{ old('scope_note') }}</textarea>
                </div>

                <button type="submit" class="w-full py-4 bg-primary text-white font-black rounded-2xl text-xs uppercase tracking-widest shadow-lg shadow-primary/30 hover:scale-[1.02] active:scale-[0.98] transition-all">
                    Add Field
                </button>
            </form>
        </div>
    </div>

    <!-- Right: Fields Registry List -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-6 border-b border-slate-100">
                <h3 class="font-black text-slate-800 text-base">Dublin Core Schema Registry</h3>
            </div>
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100">
                        <th class="text-left px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Field Identifier</th>
                        <th class="text-left px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Scope Note</th>
                        <th class="text-left px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach($fields as $field)
                        <tr class="hover:bg-slate-50/60 transition-colors">
                            <td class="px-6 py-4">
                                <span class="font-mono text-xs font-bold text-primary bg-primary/5 px-2.5 py-1.5 rounded-lg">
                                    dc.{{ $field->element }}@if($field->qualifier && $field->qualifier !== 'none').{{ $field->qualifier }}@endif
                                </span>
                            </td>
                            <td class="px-6 py-4 text-xs font-medium text-slate-500 max-w-xs">
                                {{ $field->scope_note ?: 'No description provided.' }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('admin.metadata.edit', $field) }}" class="p-2 rounded-xl bg-slate-50 hover:bg-primary hover:text-white text-slate-400 transition-all" title="Edit">
                                        <span class="material-icons text-sm">edit</span>
                                    </a>
                                    @if($field->id > 6)
                                        @if(auth()->user()->role === 'admin')
                                            <form action="{{ route('admin.metadata.destroy', $field) }}" method="POST" onsubmit="return confirm('Delete this metadata field?')">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="p-2 rounded-xl bg-red-50 hover:bg-red-500 text-red-400 hover:text-white transition-all">
                                                    <span class="material-icons text-sm">delete_outline</span>
                                                </button>
                                            </form>
                                        @endif
                                    @else
                                        <span class="text-[10px] text-slate-300 font-bold uppercase tracking-widest px-2 select-none">System</span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection