@extends('layouts.admin')

@section('titulo_admin')
    Crear Nueva Pizza
@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 Pizza al Menú</h2>

        <form action="{{ route('admin.pizzas.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Columna Izquierda: Datos de la Pizza -->
                <div>
                    <div class="mb-4">
                        <label for="nombre_pizza" class="block text-gray-700 text-sm font-bold mb-2">Nombre de la Pizza:</label>
                        <input type="text" id="nombre_pizza" name="nombre_pizza"
                               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-red-500 @error('nombre_pizza') border-red-500 @enderror"
                               value="{{ old('nombre_pizza') }}" required>
                        @error('nombre_pizza')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="ingredientes_pizza" class="block text-gray-700 text-sm font-bold mb-2">Ingredientes:</label>
                        <textarea id="ingredientes_pizza" name="ingredientes_pizza" rows="4"
                                  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-red-500 @error('ingredientes_pizza') border-red-500 @enderror"
                                  required>{{ old('ingredientes_pizza') }}</textarea>
                        @error('ingredientes_pizza')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="precio_base" class="block text-gray-700 text-sm font-bold mb-2">Precio Base (€):</label>
                        <input type="number" id="precio_base" name="precio_base" step="0.01" min="0.01"
                               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-red-500 @error('precio_base') border-red-500 @enderror"
                               value="{{ old('precio_base') }}" required>
                        @error('precio_base')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="categoria_id" class="block text-gray-700 text-sm font-bold mb-2">Categoría:</label>
                        <select id="categoria_id" name="categoria_id"
                                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-red-500 @error('categoria_id') border-red-500 @enderror"
                                required>
                            <option value="">Selecciona una categoría</option>
                            @foreach ($todasLasCategorias as $categoria)
                                <option value="{{ $categoria->id }}" {{ old('categoria_id') == $categoria->id ? 'selected' : '' }}>
                                    {{ $categoria->nombre_categoria }}
                                </option>
                            @endforeach
                        </select>
                        @error('categoria_id')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Columna Derecha: Imagen y Disponibilidad -->
                <div>
                    <div class="mb-4">
                        <label for="imagen_pizza" class="block text-gray-700 text-sm font-bold mb-2">Imagen de la Pizza (Opcional):</label>
                        <input type="file" id="imagen_pizza" name="imagen_pizza"
                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer @error('imagen_pizza') border-red-500 @enderror">
                        @error('imagen_pizza')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500">JPG, PNG, GIF, SVG (Máx. 2MB)</p>
                    </div>

                    <div class="mb-6">
                        <label class="inline-flex items-center">
                            <input type="checkbox" name="disponible" value="1" class="form-checkbox h-5 w-5 text-red-600"
                                {{ old('disponible', true) ? 'checked' : '' }}>
                            <span class="ml-2 text-gray-700 text-sm font-bold">Disponible en el menú</span>
                        </label>
                        @error('disponible')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-between mt-6">
                <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 Pizza
                </button>
                <a href="{{ route('admin.pizzas.index') }}"
                   class="inline-block align-baseline font-bold text-sm text-gray-500 hover:text-gray-800">
                    Cancelar
                </a>
            </div>
        </form>
    </div>
@endsection