@extends('layouts.admin')

@section('titulo_admin')
    Crear Nueva Categoría
@endsection

@section('contenido_admin')
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 mb-6">Añadir una Nueva Categoría de Pizza</h2>

        <form action="{{ route('admin.categorias.store') }}" method="POST">
            @csrf

            <div class="mb-4">
                <label for="nombre_categoria" class="block text-gray-700 text-sm font-bold mb-2">Nombre de la Categoría:</label>
                <input type="text" id="nombre_categoria" name="nombre_categoria"
                       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500 @error('nombre_categoria') border-red-500 @enderror"
                       value="{{ old('nombre_categoria') }}" required>
                @error('nombre_categoria')
                    <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label for="descripcion_categoria" class="block text-gray-700 text-sm font-bold mb-2">Descripción (Opcional):</label>
                <textarea id="descripcion_categoria" name="descripcion_categoria" rows="3"
                          class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500 @error('descripcion_categoria') border-red-500 @enderror"
                          placeholder="Una breve descripción de esta categoría de pizzas.">{{ old('descripcion_categoria') }}</textarea>
                @error('descripcion_categoria')
                    <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex items-center justify-between">
                <button type="submit"
                        class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors">
                    Guardar Categoría
                </button>
                <a href="{{ route('admin.categorias.index') }}"
                   class="inline-block align-baseline font-bold text-sm text-gray-500 hover:text-gray-800">
                    Cancelar
                </a>
            </div>
        </form>
    </div>
@endsection