@extends('layouts.app')

@section('content')
<div class="p-6 max-w-3xl mx-auto">

    {{-- HEADER --}}
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">
            Editar Área
        </h1>

        <a href="{{ route('areas.index') }}"
           class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg shadow">
           ← Volver
        </a>
    </div>

    {{-- ERRORES --}}
    @if ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            <strong>Ups... hubo errores:</strong>
            <ul class="mt-2 list-disc list-inside text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- FORM --}}
    <div class="bg-white shadow-md rounded-lg p-6">
        <form action="{{ route('areas.update', $area) }}" method="POST">
            @csrf
            @method('PUT')

            {{-- NOMBRE --}}
            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">
                    Nombre *
                </label>
                <input type="text" name="nombre"
                       value="{{ old('nombre', $area->nombre) }}"
                       class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring focus:border-blue-300 @error('nombre') border-red-500 @enderror"
                       required>

                @error('nombre')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- DESCRIPCIÓN --}}
            <div class="mb-4">
                <label class="block text-gray-700 font-medium mb-1">
                    Descripción
                </label>
                <textarea name="descripcion"
                          rows="3"
                          class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring focus:border-blue-300 @error('descripcion') border-red-500 @enderror">{{ old('descripcion', $area->descripcion) }}</textarea>

                @error('descripcion')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- ESTADO --}}
            <div class="mb-6">
                <label class="block text-gray-700 font-medium mb-1">
                    Estado
                </label>
                <select name="estado"
                        class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring focus:border-blue-300">
                    <option value="1" {{ old('estado', $area->estado) == 1 ? 'selected' : '' }}>
                        Activo
                    </option>
                    <option value="0" {{ old('estado', $area->estado) == 0 ? 'selected' : '' }}>
                        Inactivo
                    </option>
                </select>
            </div>

            {{-- BOTONES --}}
            <div class="flex justify-end gap-2">
                <a href="{{ route('areas.index') }}"
                   class="bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg">
                   Cancelar
                </a>

                <button type="submit"
                        class="bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-lg shadow">
                    Actualizar Área
                </button>
            </div>

        </form>
    </div>

</div>
@endsection