@extends('admin.layouts.index-template', [
    'pageTitle' => 'SubVariedades',
    'items' => $subvariedades,
    'icon' => 'stack',
    'module' => 'SubVariedades',
    'createRoute' => route('subvariedades.create'),
    'indexRoute' => route('subvariedades.index'),
    'searchPlaceholder' => 'Buscar por nombre, código o categoría...',
    'emptyIcon' => 'layer-group',
    'emptyTitle' => 'No hay subvariedades',
    'emptyMessage' => 'Comience agregando su primera subvariedad al catálogo',
    'stats' => [
        'all' => [
            'label' => 'Total',
            'count' => $subvariedades->total(),
            'color' => 'primary',
            'icon' => 'stack'
        ],
        'active' => [
            'label' => 'Activas',
            'count' => \App\Models\Subvaweb::where('WEB_VTA', 'S')->where('BORRADO', 'N')->count(),
            'color' => 'success',
            'icon' => 'checkbox-circle'
        ],
        'inactive' => [
            'label' => 'Inactivas', 
            'count' => \App\Models\Subvaweb::where('WEB_VTA', 'N')->where('BORRADO', 'N')->count(),
            'color' => 'secondary',
            'icon' => 'pause-circle'
        ],
        'show_home' => [
            'label' => 'Inicio',
            'count' => \App\Models\Subvaweb::where('showHome', 'Yes')->where('BORRADO', 'N')->count(),
            'color' => 'warning',
            'icon' => 'home'
        ],
        'no_image' => [
            'label' => 'Sin Imagen',
            'count' => \App\Models\Subvaweb::where('BORRADO', 'N')
                ->where(function($query) {
                    $query->whereNull('image')
                          ->orWhere('image', '');
                })->count(),
            'color' => 'info',
            'icon' => 'image'
        ],
        'no_products' => [
            'label' => 'Sin Productos',
            'count' => \App\Models\Subvaweb::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('subvariedades.create') }}" class="btn btn-primary">
        <i class="ri-add-line"></i> Nueva SubVariedad
    </a>
@endsection

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

@section('filters')
    <!-- Filtro por Categoría -->
    <div class="col-md-2">
        <label class="form-label small">Categoría</label>
        <select name="category" id="category-filter" class="form-select form-select-sm" onchange="updateFiltersAndSubmit()">
            <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-2">
        <label class="form-label small">Subcategoría</label>
        <select name="subcategory" id="subcategory-filter" class="form-select form-select-sm" onchange="updateVarietiesAndSubmit()">
            <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 Variedad -->
    <div class="col-md-2">
        <label class="form-label small">Variedad</label>
        <select name="variety" id="variety-filter" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Todas</option>
            @foreach($varieties as $variety)
                <option value="{{ $variety->CO_VARIEDA }}" 
                        data-category="{{ $variety->CO_CATEGOR }}"
                        data-subcategory="{{ $variety->CO_SUBCATE }}"
                        {{ request('variety') == $variety->CO_VARIEDA ? 'selected' : '' }}>
                    {{ $variety->DE_VARIEDA }}
                </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="170">Código</th>
        <th width="80">Imagen</th>
        <th>SubVariedad</th>
        <th>Categoría</th>
        <th>Subcategoría</th>
        <th>Variedad</th>
        <th width="80">Productos</th>
        <th width="80">Estado</th>
        <th width="80">Inicio</th>
        <th width="60">Orden</th>
        <th width="100">SEO con IA</th>
        <th width="120">Acciones</th>
    </tr>
@endsection

@section('table-body')
    @foreach($subvariedades as $subvariedad)
    <tr>
        <td>{{ trim($subvariedad->CO_CATEGOR) }} / {{ trim($subvariedad->CO_SUBCATE) }} / {{ trim($subvariedad->CO_VARIEDA) }} / {{ trim($subvariedad->CO_SUBVARI) }}</td>
        <td>
            @if(!empty($subvariedad->image))
                <img src="{{ asset('uploads/subvariety/thumb/'.$subvariedad->image) }}" 
                     class="img-thumbnail" 
                     alt="{{ $subvariedad->DE_SUBVARI }}"
                     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>{{ $subvariedad->DE_SUBVARI ?? 'Sin nombre' }}</strong>
                <br><small class="text-muted">Código: {{ $subvariedad->CO_SUBVARI }}</small>
            </div>
        </td>
        <td>
            <span class="badge badge-light" style="font-size: 11px;">{{ $subvariedad->categoria ? $subvariedad->categoria->DE_CATEGOR : 'Sin categoría' }}</span>
        </td>
        <td>
            <span class="badge badge-light" style="font-size: 11px;">{{ $subvariedad->subcategoria ? $subvariedad->subcategoria->DE_SUBCATE : 'Sin subcategoría' }}</span>
        </td>
        <td>
            <span class="badge badge-light" style="font-size: 11px;">{{ $subvariedad->variedad ? $subvariedad->variedad->DE_VARIEDA : 'Sin variedad' }}</span>
        </td>
        <td>
            @if($subvariedad->productos_count > 0)
                <span class="badge bg-primary">{{ $subvariedad->productos_count }}</span>
            @else
                <span class="badge badge-light">0</span>
            @endif
        </td>
        <td>
            @if($subvariedad->WEB_VTA == 'S')
                <span class="badge bg-success">Activa</span>
            @else
                <span class="badge bg-secondary">Inactiva</span>
            @endif
        </td>
        <td>
            @if($subvariedad->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">{{ $subvariedad->OR_SUBVARI ?? 0 }}</span>
        </td>
        <td>
            @if($subvariedad->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('subvariedades.images', [trim($subvariedad->CO_CATEGOR), trim($subvariedad->CO_SUBCATE), trim($subvariedad->CO_VARIEDA), trim($subvariedad->CO_SUBVARI)]) }}" class="btn btn-sm btn-info" title="Imágenes">
                    <i class="ri-image-line"></i>
                </a>

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

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

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

@push('scripts')
<script>
function updateFiltersAndSubmit() {
    const categorySelect = document.getElementById('category-filter');
    const subcategorySelect = document.getElementById('subcategory-filter');
    const varietySelect = document.getElementById('variety-filter');
    const selectedCategory = categorySelect.value;
    
    // Filtrar subcategorías basadas en la categoría seleccionada
    const subcatOptions = subcategorySelect.querySelectorAll('option');
    subcatOptions.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 = '';
        }
    }
    
    // Filtrar variedades
    updateVarietiesFilter();
    
    // Submit form
    categorySelect.form.submit();
}

function updateVarietiesAndSubmit() {
    const subcategorySelect = document.getElementById('subcategory-filter');
    const varietySelect = document.getElementById('variety-filter');
    
    // Filtrar variedades antes de enviar
    updateVarietiesFilter();
    
    // Resetear variedad si no es válida para la subcategoría seleccionada
    const currentVariety = varietySelect.value;
    if (currentVariety !== '') {
        const currentOption = varietySelect.querySelector(`option[value="${currentVariety}"]`);
        if (currentOption && currentOption.style.display === 'none') {
            varietySelect.value = '';
        }
    }
    
    // Submit form
    subcategorySelect.form.submit();
}

function updateVarietiesFilter() {
    const categorySelect = document.getElementById('category-filter');
    const subcategorySelect = document.getElementById('subcategory-filter');
    const varietySelect = document.getElementById('variety-filter');
    const selectedCategory = categorySelect.value;
    const selectedSubcategory = subcategorySelect.value;
    
    // Filtrar variedades basadas en categoría y subcategoría
    const varietyOptions = varietySelect.querySelectorAll('option');
    varietyOptions.forEach(option => {
        if (option.value === '') {
            option.style.display = 'block';
        } else {
            const optionCategory = option.getAttribute('data-category');
            const optionSubcategory = option.getAttribute('data-subcategory');
            
            let show = true;
            if (selectedCategory !== '' && optionCategory !== selectedCategory) {
                show = false;
            }
            if (selectedSubcategory !== '' && optionSubcategory !== selectedSubcategory) {
                show = false;
            }
            
            option.style.display = show ? 'block' : 'none';
        }
    });
    
    // Reset variety selection if it's not valid
    const currentVariety = varietySelect.value;
    if (currentVariety !== '') {
        const currentOption = varietySelect.querySelector(`option[value="${currentVariety}"]`);
        if (currentOption && currentOption.style.display === 'none') {
            varietySelect.value = '';
        }
    }
}

// Delete functionality
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all filters on page load
    const categorySelect = document.getElementById('category-filter');
    const subcategorySelect = document.getElementById('subcategory-filter');
    const varietySelect = document.getElementById('variety-filter');
    const selectedCategory = categorySelect ? categorySelect.value : '';
    const selectedSubcategory = subcategorySelect ? subcategorySelect.value : '';
    
    // Step 1: Filter subcategories based on selected category
    if (categorySelect && subcategorySelect && selectedCategory) {
        const subcatOptions = subcategorySelect.querySelectorAll('option');
        subcatOptions.forEach(option => {
            if (option.value === '') {
                // Always show "Todas" option
                option.style.display = 'block';
            } else {
                const optionCategory = option.getAttribute('data-category');
                // Show only subcategories that match the selected category
                if (optionCategory === selectedCategory) {
                    option.style.display = 'block';
                } else {
                    option.style.display = 'none';
                }
            }
        });
    }
    
    // Step 2: Filter varieties based on selected category AND subcategory
    if (varietySelect && (selectedCategory || selectedSubcategory)) {
        const varietyOptions = varietySelect.querySelectorAll('option');
        varietyOptions.forEach(option => {
            if (option.value === '') {
                // Always show "Todas" option
                option.style.display = 'block';
            } else {
                const optionCategory = option.getAttribute('data-category');
                const optionSubcategory = option.getAttribute('data-subcategory');
                
                let shouldShow = true;
                
                // Filter by category if selected
                if (selectedCategory && optionCategory !== selectedCategory) {
                    shouldShow = false;
                }
                
                // Filter by subcategory if selected
                if (selectedSubcategory && optionSubcategory !== selectedSubcategory) {
                    shouldShow = false;
                }
                
                option.style.display = shouldShow ? 'block' : 'none';
            }
        });
    }
    
    // AI SEO generation ahora se hace desde el formulario de edición
});
</script>
@endpush