@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Editar Variedad</h4>
            <div class="page-title-right">
                <a href="{{ route('variedades.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        @include('admin.message')
        
        <form action="{{ route('variedades.update', $variedad->ID_RECORD) }}" method="post" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <!-- Código (readonly) -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="CO_VARIEDA">Código</label>
                                <input type="text" name="CO_VARIEDA" id="CO_VARIEDA" 
                                       class="form-control" 
                                       value="{{ $variedad->CO_VARIEDA }}" 
                                       readonly>
                            </div>
                        </div>

                        <!-- Descripción -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="DE_VARIEDA">Descripción *</label>
                                <input type="text" name="DE_VARIEDA" id="DE_VARIEDA" 
                                       class="form-control @error('DE_VARIEDA') is-invalid @enderror" 
                                       placeholder="Descripción de Variedad" 
                                       value="{{ old('DE_VARIEDA', $variedad->DE_VARIEDA) }}" 
                                       maxlength="50" required>
                                @error('DE_VARIEDA')
                                <p class="invalid-feedback">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Categoría -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="CO_CATEGOR">Categoría *</label>
                                <select name="CO_CATEGOR" id="CO_CATEGOR" 
                                        class="form-control @error('CO_CATEGOR') is-invalid @enderror" required>
                                    <option value="">Seleccione Categoría</option>
                                    @foreach($categories as $categoria)
                                        <option value="{{ $categoria->CO_CATEGOR }}" 
                                                {{ old('CO_CATEGOR', $variedad->CO_CATEGOR) == $categoria->CO_CATEGOR ? 'selected' : '' }}>
                                            {{ $categoria->DE_CATEGOR }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('CO_CATEGOR')
                                <p class="invalid-feedback">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Subcategoría -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="CO_SUBCATE">Subcategoría *</label>
                                <select name="CO_SUBCATE" id="CO_SUBCATE" 
                                        class="form-control @error('CO_SUBCATE') is-invalid @enderror" required>
                                    <option value="">Cargando...</option>
                                </select>
                                @error('CO_SUBCATE')
                                <p class="invalid-feedback">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Estado Web -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="WEB_VTA">Mostrar en Web</label>
                                <select name="WEB_VTA" id="WEB_VTA" class="form-select">
                                    <option value="S" {{ old('WEB_VTA', $variedad->WEB_VTA) == 'S' ? 'selected' : '' }}>Sí</option>
                                    <option value="N" {{ old('WEB_VTA', $variedad->WEB_VTA) == 'N' ? 'selected' : '' }}>No</option>
                                </select>
                            </div>
                        </div>

                        <!-- Orden -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="sort_order">Orden</label>
                                <input type="number" name="sort_order" id="sort_order" 
                                       class="form-control @error('sort_order') is-invalid @enderror" 
                                       placeholder="Orden de visualización" 
                                       value="{{ old('sort_order', $variedad->sort_order) }}">
                                @error('sort_order')
                                <p class="invalid-feedback">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Slug -->
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="slug">Slug URL</label>
                                <input type="text" name="slug" id="slug" 
                                       class="form-control @error('slug') is-invalid @enderror" 
                                       placeholder="slug-url-amigable" 
                                       value="{{ old('slug', $variedad->slug) }}">
                                @error('slug')
                                <p class="invalid-feedback">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Imagen actual -->
                        @if($variedad->image)
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label>Imagen Actual</label>
                                <div>
                                    <img src="{{ asset('uploads/variedad/thumb/' . $variedad->image) }}" 
                                         alt="{{ $variedad->DE_VARIEDA }}" 
                                         style="max-height: 150px;">
                                </div>
                            </div>
                        </div>
                        @endif

                        <!-- Nueva imagen -->
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="image">{{ $variedad->image ? 'Cambiar Imagen' : 'Imagen' }}</label>
                                <input type="file" name="image" id="image" 
                                       class="form-control @error('image') is-invalid @enderror" 
                                       accept="image/*">
                                <small class="text-muted">Formatos: JPG, PNG, GIF. Tamaño máximo: 2MB</small>
                                @error('image')
                                <p class="invalid-feedback">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SEO Card -->
            <div class="card mb-3">
                <div class="card-header">
                    <h4>Configuración SEO</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="meta_title">Meta Título</label>
                                <input type="text" name="meta_title" id="meta_title" 
                                       class="form-control" 
                                       placeholder="Título para SEO"
                                       value="{{ old('meta_title', $variedad->meta_title) }}">
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="meta_description">Meta Descripción</label>
                                <textarea name="meta_description" id="meta_description" 
                                          class="form-control" rows="3"
                                          placeholder="Descripción para SEO">{{ old('meta_description', $variedad->meta_description) }}</textarea>
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="meta_keywords">Meta Palabras Clave</label>
                                <input type="text" name="meta_keywords" id="meta_keywords" 
                                       class="form-control" 
                                       placeholder="palabra1, palabra2, palabra3"
                                       value="{{ old('meta_keywords', $variedad->meta_keywords) }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit -->
            <div class="pb-5 pt-3">
                <button type="submit" class="btn btn-primary">Actualizar</button>
                <a href="{{ route('variedades.index') }}" class="btn btn-outline-dark ms-3">Cancelar</a>
            </div>
        </form>

@endsection

@section('customJs')
<script>
$(document).ready(function() {
    // Valor actual de subcategoría
    var currentSubcategoria = '{{ old('CO_SUBCATE', $variedad->CO_SUBCATE) }}';

    // Cargar subcategorías cuando se selecciona categoría
    function loadSubcategorias(categoriaId, selectedValue) {
        if (categoriaId) {
            $.ajax({
                url: '{{ route("variedades.get-subcategories") }}',
                type: 'GET',
                data: { category_code: categoriaId },
                success: function(data) {
                    var options = '<option value="">Seleccione Subcategoría</option>';
                    $.each(data, function(key, value) {
                        var selected = (value.CO_SUBCATE == selectedValue) ? 'selected' : '';
                        options += '<option value="' + value.CO_SUBCATE + '" ' + selected + '>' + value.DE_SUBCATE + '</option>';
                    });
                    $('#CO_SUBCATE').html(options);
                }
            });
        }
    }

    // Cargar datos iniciales
    var initialCategoria = $('#CO_CATEGOR').val();
    if (initialCategoria) {
        loadSubcategorias(initialCategoria, currentSubcategoria);
    }

    // Evento de cambio de categoría
    $('#CO_CATEGOR').on('change', function() {
        var categoriaId = $(this).val();
        
        if (categoriaId) {
            loadSubcategorias(categoriaId, null);
        } else {
            $('#CO_SUBCATE').html('<option value="">Primero seleccione categoría</option>');
        }
    });

    // Generar slug automáticamente
    $('#DE_VARIEDA').on('blur', function() {
        if ($('#slug').val() == '') {
            var slug = $(this).val()
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim();
            $('#slug').val(slug);
        }
    });
});
</script>
@endsection