<x-app-layout>
    <x-slot name="header">Nueva Dirección</x-slot>

    <div class="max-w-2xl mx-auto bg-white rounded-xl shadow p-6">
        <form action="{{ route('admin.direcciones.store') }}" method="POST" class="space-y-5">
            @csrf

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Código <span class="text-red-500">*</span></label>
                <input type="text" name="codigo" value="{{ old('codigo') }}"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-green-500 focus:border-green-500 uppercase"
                    placeholder="Ej: DTIC" required>
                @error('codigo') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Nombre <span class="text-red-500">*</span></label>
                <input type="text" name="nombre" value="{{ old('nombre') }}"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-green-500 focus:border-green-500"
                    placeholder="Ej: Dirección de Tecnología e Información" required>
                @error('nombre') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Descripción</label>
                <textarea name="descripcion" rows="3"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-green-500 focus:border-green-500"
                    placeholder="Descripción opcional...">{{ old('descripcion') }}</textarea>
            </div>

            <div class="flex items-center gap-2">
                <input type="checkbox" name="activo" id="activo" value="1"
                    {{ old('activo', '1') ? 'checked' : '' }}
                    class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                <label for="activo" class="text-sm text-gray-700">Activo</label>
            </div>

            <div class="flex gap-3 pt-2">
                <button type="submit"
                    class="bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-lg text-sm font-medium">
                    Guardar
                </button>
                <a href="{{ route('admin.direcciones.index') }}"
                    class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-5 py-2 rounded-lg text-sm font-medium">
                    Cancelar
                </a>
            </div>
        </form>
    </div>
</x-app-layout>
