@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">Crear 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.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <!-- Código -->
                        <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 @error('CO_VARIEDA') is-invalid @enderror" 
                                       placeholder="Código de Variedad" 
                                       value="{{ old('CO_VARIEDA') }}" 
                                       maxlength="15" required>
                                @error('CO_VARIEDA')
                                <p class="invalid-feedback">{{ $message }}</p>
                                @enderror
                            </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') }}" 
                                       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') == $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="">Primero seleccione categoría</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', 'S') == 'S' ? 'selected' : '' }}>Sí</option>
                                    <option value="N" {{ old('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', 100) }}">
                                @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') }}">
                                <small class="text-muted">Se generará automáticamente si se deja vacío</small>
                                @error('slug')
                                <p class="invalid-feedback">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Imagen -->
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="image">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') }}">
                            </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') }}</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') }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

@endsection

@section('customJs')
<script>
$(document).ready(function() {
    // 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);
        }
    });

    // Cargar subcategorías cuando se selecciona categoría
    $('#CO_CATEGOR').on('change', function() {
        var categoriaId = $(this).val();
        $('#CO_SUBCATE').html('<option value="">Cargando...</option>');
        
        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) {
                        options += '<option value="' + value.CO_SUBCATE + '">' + value.DE_SUBCATE + '</option>';
                    });
                    $('#CO_SUBCATE').html(options);
                }
            });
        } else {
            $('#CO_SUBCATE').html('<option value="">Primero seleccione categoría</option>');
        }
    });

    // Si hay old values, cargar las opciones
    @if(old('CO_CATEGOR'))
        $('#CO_CATEGOR').trigger('change');
        setTimeout(function() {
            $('#CO_SUBCATE').val('{{ old('CO_SUBCATE') }}');
        }, 500);
    @endif
});
</script>
@endsection