@extends('layouts.admin')
@section('title', 'Edit Metadata Field')
@section('subtitle', 'Modify Dublin Core element mapping details')

@section('content')
<div class="max-w-2xl">
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ route('admin.metadata.index') }}" class="flex items-center gap-2 text-xs font-bold text-slate-400 hover:text-primary uppercase tracking-widest transition-colors">
            <span class="material-icons text-sm">arrow_back</span> Back to Registry
        </a>
    </div>

    <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-8">
        <form action="{{ route('admin.metadata.update', $field) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <div>
                <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Element</label>
                <input type="text" name="element" required value="{{ old('element', $field->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</label>
                <input type="text" name="qualifier" value="{{ old('qualifier', $field->qualifier === 'none' ? '' : $field->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 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="4"
                    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', $field->scope_note) }}</textarea>
            </div>

            <div class="flex items-center gap-4">
                <button type="submit" class="px-10 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">
                    Save Changes
                </button>
                <a href="{{ route('admin.metadata.index') }}" class="px-8 py-4 bg-slate-100 text-slate-600 font-bold rounded-2xl text-xs uppercase tracking-widest hover:bg-slate-200 transition-all">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection