@extends('admin.layouts.index-template', [
    'pageTitle' => 'Variedades',
    'items' => $variedades,
    'icon' => 'stack',
    'module' => 'Variedades',
    'createRoute' => route('variedades.create'),
    'indexRoute' => route('variedades.index'),
    'searchPlaceholder' => 'Buscar por nombre, código o categoría...',
    'emptyIcon' => 'layer-group',
    'emptyTitle' => 'No hay variedades',
    'emptyMessage' => 'Comience agregando su primera variedad al catálogo',
    'stats' => [
        'all' => [
            'label' => 'Total',
            'count' => $variedades->total(),
            'color' => 'primary',
            'icon' => 'stack'
        ],
        'active' => [
            'label' => 'Activas',
            'count' => \App\Models\Varieweb::where('WEB_VTA', 'S')->where('BORRADO', 'N')->count(),
            'color' => 'success',
            'icon' => 'checkbox-circle'
        ],
        'inactive' => [
            'label' => 'Inactivas', 
            'count' => \App\Models\Varieweb::where('WEB_VTA', 'N')->where('BORRADO', 'N')->count(),
            'color' => 'secondary',
            'icon' => 'pause-circle'
        ],
        'show_home' => [
            'label' => 'Inicio',
            'count' => \App\Models\Varieweb::where('showHome', 'Yes')->where('BORRADO', 'N')->count(),
            'color' => 'warning',
            'icon' => 'home'
        ],
        'no_image' => [
            'label' => 'Sin Imagen',
            'count' => \App\Models\Varieweb::where('BORRADO', 'N')
                ->where(function($query) {
                    $query->whereNull('image')
                          ->orWhere('image', '');
                })->count(),
            'color' => 'info',
            'icon' => 'image'
        ],
        'no_products' => [
            'label' => 'Sin Productos',
            'count' => \App\Models\Varieweb::doesntHave('productos')->where('BORRADO', 'N')->count(),
            'color' => 'danger',
            'icon' => 'error-warning'
        ]
    ]
])

@push('css')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@section('header-buttons')
    <a href="{{ route('variedades.create') }}" class="btn btn-primary">
        <i class="ri-add-line"></i> Nueva Variedad
    </a>
@endsection

@section('action-buttons')
    <button type="button" class="btn btn-success btn-sm me-2" title="Exportar variedades">
        <i class="ri-file-excel-line"></i> Exportar
    </button>
@endsection

@section('filters')
    <!-- Filtro por Categoría -->
    <div class="col-md-3">
        <label class="form-label small">Categoría</label>
        <select name="category" id="category-filter" class="form-select form-select-sm" onchange="updateSubcategoriesAndSubmit()">
            <option value="">Todas</option>
            @foreach($categories as $category)
                <option value="{{ $category->CO_CATEGOR }}" {{ request('category') == $category->CO_CATEGOR ? 'selected' : '' }}>
                    {{ $category->DE_CATEGOR }}
                </option>
            @endforeach
        </select>
    </div>
    
    <!-- Filtro por Subcategoría -->
    <div class="col-md-3">
        <label class="form-label small">Subcategoría</label>
        <select name="subcategory" id="subcategory-filter" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Todas</option>
            @foreach($subcategories as $subcategory)
                <option value="{{ $subcategory->CO_SUBCATE }}" 
                        data-category="{{ $subcategory->CO_CATEGOR }}"
                        {{ request('subcategory') == $subcategory->CO_SUBCATE ? 'selected' : '' }}>
                    {{ $subcategory->DE_SUBCATE }}
                </option>
            @endforeach
        </select>
    </div>
    
    <!-- Filtro por Estado -->
    <div class="col-md-2">
        <label class="form-label small">Estado</label>
        <select name="web_vta" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Todos</option>
            <option value="S" {{ request('web_vta') === 'S' ? 'selected' : '' }}>Activa</option>
            <option value="N" {{ request('web_vta') === 'N' ? 'selected' : '' }}>Inactiva</option>
        </select>
    </div>
@endsection

@section('table-headers')
    <tr>
        <th width="140">Código</th>
        <th width="80">Imagen</th>
        <th>Variedad</th>
        <th>Categoría</th>
        <th>Subcategoría</th>
        <th width="100">Productos</th>
        <th width="100">Estado</th>
        <th width="100">Inicio</th>
        <th width="100">Orden</th>
        <th width="120">SEO con IA</th>
        <th width="120">Acciones</th>
    </tr>
@endsection

@section('table-body')
    @foreach($variedades as $variedad)
    <tr>
        <td>{{ trim($variedad->CO_CATEGOR) }} / {{ trim($variedad->CO_SUBCATE) }} / {{ trim($variedad->CO_VARIEDA) }}</td>
        <td>
            @if(!empty($variedad->image))
                <img src="{{ asset('uploads/variety/thumb/'.$variedad->image) }}" 
                     class="img-thumbnail" 
                     alt="{{ $variedad->DE_VARIEDA }}"
                     style="width: 50px; height: 50px; object-fit: cover;">
            @else
                <div class="d-flex align-items-center justify-content-center" 
                     style="width: 50px; height: 50px; border-radius: 4px; border: 2px dashed #dee2e6; background-color: #f8f9fa;">
                    <i class="ri-image-line text-secondary" style="font-size: 1.2rem;"></i>
                </div>
            @endif
        </td>
        <td>
            <div>
                <strong>{{ $variedad->DE_VARIEDA ?? 'Sin nombre' }}</strong>
                <br><small class="text-muted">Código: {{ $variedad->CO_VARIEDA }}</small>
            </div>
        </td>
        <td>
            <span class="badge badge-light">{{ $variedad->categoria ? $variedad->categoria->DE_CATEGOR : 'Sin categoría' }}</span>
        </td>
        <td>
            <span class="badge badge-light">{{ $variedad->subcategoria ? $variedad->subcategoria->DE_SUBCATE : 'Sin subcategoría' }}</span>
        </td>
        <td>
            @if($variedad->productos_count > 0)
                <span class="badge bg-primary">{{ $variedad->productos_count }}</span>
            @else
                <span class="badge badge-light">0</span>
            @endif
        </td>
        <td>
            @if($variedad->WEB_VTA == 'S')
                <span class="badge bg-success">Activa</span>
            @else
                <span class="badge bg-secondary">Inactiva</span>
            @endif
        </td>
        <td>
            @if($variedad->showHome == 'Yes')
                <span class="badge bg-warning">Sí</span>
            @else
                <span class="badge badge-light">No</span>
            @endif
        </td>
        <td>
            <span class="badge bg-info">{{ $variedad->OR_VARIEDA ?? 0 }}</span>
        </td>
        <td>
            @if($variedad->ai_seo_enabled)
                <span class="badge bg-success">
                    <i class="ri-robot-line"></i> Generado
                </span>
            @else
                <span class="badge bg-secondary">No generado</span>
            @endif
        </td>
        <td>
            <div class="d-flex gap-1">
                <a href="{{ route('variedades.images', [trim($variedad->CO_CATEGOR), trim($variedad->CO_SUBCATE), trim($variedad->CO_VARIEDA)]) }}" class="btn btn-sm btn-info" title="Imágenes">
                    <i class="ri-image-line"></i>
                </a>

                <a href="{{ route('variedades.seo', [trim($variedad->CO_CATEGOR), trim($variedad->CO_SUBCATE), trim($variedad->CO_VARIEDA)]) }}" class="btn btn-sm btn-success" title="SEO">
                    <i class="ri-global-line"></i>
                </a>

                <a href="{{ route('variedades.edit', [trim($variedad->CO_CATEGOR), trim($variedad->CO_SUBCATE), trim($variedad->CO_VARIEDA)]) }}" class="btn btn-sm btn-warning" title="Editar">
                    <i class="ri-pencil-line"></i>
                </a>

                @if($variedad->subvariedades_count > 0)
                <a href="{{ route('subvariedades.index') }}?category={{ $variedad->CO_CATEGOR }}&subcategory={{ $variedad->CO_SUBCATE }}&variety={{ $variedad->CO_VARIEDA }}" class="btn btn-sm btn-primary" title="Ver Subvariedades ({{ $variedad->subvariedades_count }})">
                    <i class="ri-organization-chart"></i>
                </a>
                @endif

                @if($variedad->productos_count > 0)
                <a href="{{ route('products.index') }}?category={{ $variedad->CO_CATEGOR }}&subcategory={{ $variedad->CO_SUBCATE }}&variety={{ $variedad->CO_VARIEDA }}" class="btn btn-sm btn-dark" title="Ver Productos ({{ $variedad->productos_count }})">
                    <i class="ri-inbox-unarchive-line"></i>
                </a>
                @endif
            </div>
        </td>
    </tr>
    @endforeach
@endsection

@push('scripts')
<script>
function updateSubcategoriesAndSubmit() {
    const categorySelect = document.getElementById('category-filter');
    const subcategorySelect = document.getElementById('subcategory-filter');
    const selectedCategory = categorySelect.value;
    
    // Filtrar subcategorías basadas en la categoría seleccionada
    const options = subcategorySelect.querySelectorAll('option');
    options.forEach(option => {
        if (option.value === '') {
            option.style.display = 'block';
        } else {
            const optionCategory = option.getAttribute('data-category');
            if (selectedCategory === '' || optionCategory === selectedCategory) {
                option.style.display = 'block';
            } else {
                option.style.display = 'none';
            }
        }
    });
    
    // Reset subcategory selection if it's not valid for the selected category
    const currentSubcategory = subcategorySelect.value;
    if (currentSubcategory !== '') {
        const currentOption = subcategorySelect.querySelector(`option[value="${currentSubcategory}"]`);
        if (currentOption && currentOption.style.display === 'none') {
            subcategorySelect.value = '';
        }
    }
    
    // Submit form
    categorySelect.form.submit();
}

// Execute filter on page load to show only relevant subcategories
document.addEventListener('DOMContentLoaded', function() {
    // Filter subcategories on initial load
    const categorySelect = document.getElementById('category-filter');
    const subcategorySelect = document.getElementById('subcategory-filter');
    const selectedCategory = categorySelect.value;
    
    if (selectedCategory) {
        const options = subcategorySelect.querySelectorAll('option');
        options.forEach(option => {
            if (option.value === '') {
                option.style.display = 'block';
            } else {
                const optionCategory = option.getAttribute('data-category');
                if (optionCategory === selectedCategory) {
                    option.style.display = 'block';
                } else {
                    option.style.display = 'none';
                }
            }
        });
    }
    
    // AI SEO generation ahora se hace desde el formulario de edición
});
</script>
@endpush