@extends('layouts.comercio')

@section('title', 'Crear Producto')

@section('content')
<div class="container py-4">

    <h2 class="mb-4">➕ Crear nuevo producto / servicio</h2>

    <div class="card shadow-sm">
        <div class="card-body">

            {{-- Mensajes de error --}}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>Hay errores en el formulario:</strong>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

                {{-- Nombre --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Nombre del producto</label>
                    <input type="text" name="nombre" 
                           class="form-control @error('nombre') is-invalid @enderror"
                           value="{{ old('nombre') }}"
                           required>
                </div>

                {{-- Tipo --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Tipo</label>
                    <select name="tipo" 
                            class="form-select @error('tipo') is-invalid @enderror"
                            required>
                        <option value="producto" {{ old('tipo') === "producto" ? 'selected' : '' }}>Producto</option>
                        <option value="servicio" {{ old('tipo') === "servicio" ? 'selected' : '' }}>Servicio</option>
                    </select>
                </div>

                {{-- Precio --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Precio (opcional)</label>
                    <input type="number" name="precio" 
                           class="form-control @error('precio') is-invalid @enderror"
                           value="{{ old('precio') }}"
                           placeholder="Ej: 9900">
                    <small class="text-muted">Deja vacío si no aplica.</small>
                </div>

                {{-- Descripción --}}
                <div class="mb-3">
                    <label class="form-label fw-semibold">Descripción</label>
                    <textarea name="descripcion" 
                              class="form-control @error('descripcion') is-invalid @enderror"
                              rows="4">{{ old('descripcion') }}</textarea>
                </div>

                {{-- Imagen principal --}}
                <div class="mb-4">
                    <label class="form-label fw-semibold">Imagen principal</label>
                    <input type="file" name="imagen" 
                           class="form-control @error('imagen') is-invalid @enderror"
                           accept="image/*">
                    <small class="text-muted">Será la imagen destacada del producto.</small>
                </div>

                {{-- Galería de imágenes --}}
                <div class="mb-4">
                    <label class="form-label fw-semibold">Galería de imágenes adicionales</label>
                    <input type="file" name="galeria[]" 
                           class="form-control @error('galeria.*') is-invalid @enderror"
                           accept="image/*"
                           multiple>
                    <small class="text-muted">Puedes subir varias imágenes (máx 2MB c/u).</small>
                </div>

                {{-- Publicado --}}
                <div class="form-check form-switch mb-4">
                    <input class="form-check-input" type="checkbox" 
                           id="publicado" name="publicado"
                           {{ old('publicado') ? 'checked' : '' }}>
                    <label class="form-check-label fw-semibold" for="publicado">
                        Publicar inmediatamente
                    </label>
                </div>

                <div class="d-flex justify-content-end">
                    <a href="{{ route('comercios.productos.index') }}" class="btn btn-secondary me-2">
                        Cancelar
                    </a>
                    <button type="submit" class="btn btn-primary">
                        Crear producto
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>
@endsection