@extends('admin.layouts.admin')

@section('title', isset($category) ? 'Editar clasificación' : 'Nueva clasificación')

@section('content')

<div class="mb-3">
    <a href="{{ route('admin.clasificacion.index') }}" class="btn-back">← Clasificación</a>
</div>

<div class="admin-page-title">{{ isset($category) ? 'Editar: ' . $category->name : 'Nueva clasificación' }}</div>

<div class="row justify-content-center">
    <div class="col-12 col-lg-6">
        <div class="admin-card mt-4">
            <form method="POST"
                  action="{{ isset($category) ? route('admin.clasificacion.update', $category) : route('admin.clasificacion.store') }}"
                  class="fermenty-form" enctype="multipart/form-data">
                @csrf
                @if(isset($category)) @method('PUT') @endif

                <div class="mb-3">
                    <label class="form-label">Nombre</label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                           value="{{ old('name', $category->name ?? '') }}" placeholder="Láctica, Acética…" required>
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Descripción</label>
                    <textarea name="description" class="form-control" rows="3"
                              placeholder="Breve descripción del proceso...">{{ old('description', $category->description ?? '') }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label">Imagen de portada</label>
                    @if(isset($category) && $category->image_url)
                        <div class="mb-2">
                            <img src="{{ $category->thumbnail_url ?? $category->image_url }}" alt="{{ $category->name }}"
                                 style="height:88px;width:auto;border-radius:10px;object-fit:cover;border:1px solid #e6ece3;">
                        </div>
                    @endif
                    <input type="file" name="image" accept="image/jpeg,image/png,image/webp"
                           class="form-control @error('image') is-invalid @enderror">
                    <div class="form-text" style="font-size:0.8rem;">Se muestra en el catálogo público. JPG/PNG/WebP, máx. 4&nbsp;MB. Si no hay imagen, se usa el color.</div>
                    @error('image') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-6">
                        <label class="form-label">Color</label>
                        <input type="color" name="color" class="form-control form-control-color"
                               value="{{ old('color', $category->color ?? '#3A7A22') }}" title="Color de la clasificación">
                        <div class="form-text" style="font-size:0.8rem;">Anillo de progreso y acentos.</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Orden</label>
                        <input type="number" name="position" min="0" class="form-control"
                               value="{{ old('position', $category->position ?? 0) }}">
                        <div class="form-text" style="font-size:0.8rem;">Menor = antes.</div>
                    </div>
                </div>

                <div class="d-flex gap-3">
                    <button type="submit" class="btn btn-fermenty-primary">
                        {{ isset($category) ? 'Guardar cambios' : 'Crear' }}
                    </button>
                    <a href="{{ route('admin.clasificacion.index') }}" class="btn btn-fermenty-outline">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection