@extends('admin.layouts.index-template', [
    'pageTitle' => $pageTitle ?? 'Stock Reservado por Sucursales',
    'items' => $products,
    'icon' => 'lock',
    'module' => 'Stock Reservado',
    'createRoute' => null,
    'indexRoute' => route('stock.reserved'),
    'searchPlaceholder' => 'Buscar por título, SKU o descripción...',
    'emptyIcon' => 'lock',
    'emptyTitle' => 'No hay productos',
    'emptyMessage' => 'No se encontraron productos con los criterios de búsqueda',
    'stats' => [
        'all' => [
            'label' => 'Total',
            'count' => isset($products) && method_exists($products, 'total') ? $products->total() : \App\Models\Stock::where('BORRADO', 'N')->count(),
            'color' => 'primary',
            'icon' => 'lock'
        ],
        'active' => [
            'label' => 'Activos',
            'count' => \App\Models\Stock::where('WEB_VTA', 'S')->where('BORRADO', 'N')->count(),
            'color' => 'success',
            'icon' => 'checkbox-circle'
        ],
        'inactive' => [
            'label' => 'Inactivos', 
            'count' => \App\Models\Stock::where(function($q) {
                $q->where('WEB_VTA', '!=', 'S')
                  ->orWhereNull('WEB_VTA');
            })->where('BORRADO', 'N')->count(),
            'color' => 'secondary',
            'icon' => 'pause-circle'
        ],
        'reserved' => [
            'label' => 'Con Reservas',
            'count' => \App\Models\Stock::where('WW_RESE', '>', 0)->where('BORRADO', 'N')->count(),
            'color' => 'warning',
            'icon' => 'lock'
        ]
    ]
])

@push('css')
    <style>
    .stock-table {
        font-size: 0.85rem;
    }
    .stock-value {
        text-align: right;
        font-weight: 500;
    }
    .stock-header {
        background-color: #f8f9fa;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    .stock-zero {
        color: #6c757d;
    }
    .stock-positive {
        color: #fd7e14;
        font-weight: 600;
    }
    </style>
@endpush

@section('filters')
    <!-- Mismos filtros que inventory -->
    <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="updateSubcategoriesAndSubmit()">
            <option value="">Todas</option>
            @if(isset($categories))
                @foreach($categories as $category)
                    <option value="{{ $category->CO_CATEGOR }}" 
                            {{ request('category') == $category->CO_CATEGOR ? 'selected' : '' }}>
                        {{ $category->DE_CATEGOR }}
                    </option>
                @endforeach
            @endif
        </select>
    </div>
    
    <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>
            @if(isset($subcategories))
                @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
            @endif
        </select>
    </div>
    
    <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="updateSubvarietiesAndSubmit()">
            <option value="">Todas</option>
            @if(isset($varieties))
                @foreach($varieties as $variety)
                    <option value="{{ $variety->CO_VARIEDA }}" 
                            data-subcategory="{{ $variety->CO_SUBCATE }}"
                            data-category="{{ $variety->CO_CATEGOR }}"
                            {{ request('variety') == $variety->CO_VARIEDA ? 'selected' : '' }}>
                        {{ $variety->DE_VARIEDA }}
                    </option>
                @endforeach
            @endif
        </select>
    </div>
    
    <div class="col-md-2">
        <label class="form-label small">Subvariedad</label>
        <select name="subvariety" id="subvariety-filter" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Todas</option>
            @if(isset($subvarieties))
                @foreach($subvarieties as $subvariety)
                    <option value="{{ $subvariety->CO_SUBVARI }}" 
                            data-variety="{{ $subvariety->CO_VARIEDA }}"
                            data-subcategory="{{ $subvariety->CO_SUBCATE }}"
                            data-category="{{ $subvariety->CO_CATEGOR }}"
                            {{ request('subvariety') == $subvariety->CO_SUBVARI ? 'selected' : '' }}>
                        {{ $subvariety->DE_SUBVARI }}
                    </option>
                @endforeach
            @endif
        </select>
    </div>
    
    <div class="col-md-2">
        <label class="form-label small">Estado</label>
        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Todos</option>
            <option value="S" {{ request('status') === 'S' ? 'selected' : '' }}>Activo</option>
            <option value="N" {{ request('status') === 'N' ? 'selected' : '' }}>Inactivo</option>
        </select>
    </div>
    
    <div class="col-md-2">
        <label class="form-label small">Destacados</label>
        <select name="featured" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Todos</option>
            <option value="Si" {{ request('featured') === 'Si' ? 'selected' : '' }}>Sí</option>
            <option value="No" {{ request('featured') === 'No' ? 'selected' : '' }}>No</option>
        </select>
    </div>
@endsection

@section('table-headers')
    <tr>
        <th width="80">Imagen</th>
        <th>Producto</th>
        <th width="80">Total</th>
        @include('admin.stock.partials.sucursales-headers')
        <th width="80">Estado</th>
    </tr>
@endsection

@section('table-body')
    @foreach($products as $product)
    @php
        $productImage = $product->stock_images->first();
    @endphp
    <tr class="stock-table">
        <td>
            @if(!empty($productImage->image))
                <img src="{{ asset('/uploads/product/small/'.$productImage->image) }}"
                     class="product-thumbnail" 
                     alt="{{ $product->DE_ARTI }}"
                     style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">
            @else
                <div class="d-flex align-items-center justify-content-center" 
                     style="width: 40px; height: 40px; border-radius: 4px; border: 2px dashed #dee2e6; background-color: #f8f9fa;">
                    <i class="ri-image-line text-secondary"></i>
                </div>
            @endif
        </td>
        <td>
            <div>
                <strong style="font-size: 0.85rem;">{{ Str::limit($product->DE_ARTI, 35) }}</strong>
                <br><small class="text-muted">{{ $product->CO_ARTI }}</small>
                @if($product->categoria)
                    <br><small class="text-muted">{{ $product->categoria->DE_CATEGOR }}</small>
                @endif
            </div>
        </td>
        <td class="stock-value">
            @php
                $totalReserved = $product->WW_RESE ?? 0;
            @endphp
            <span class="badge {{ $totalReserved > 0 ? 'bg-warning' : 'badge-light' }}">
                {{ number_format($totalReserved, 2) }}
            </span>
        </td>
        @include('admin.stock.partials.sucursales-cells')
        <td>
            @if($product->WEB_VTA == 'S')
                <span class="badge bg-success">Activo</span>
            @else
                <span class="badge bg-secondary">Inactivo</span>
            @endif
        </td>
    </tr>
    @endforeach
@endsection

@push('js')
<script>
// Mismas funciones de filtros que inventory
function updateSubcategoriesAndSubmit() {
    const categorySelect = document.getElementById('category-filter');
    const subcategorySelect = document.getElementById('subcategory-filter');
    const varietySelect = document.getElementById('variety-filter');
    const subvarietySelect = document.getElementById('subvariety-filter');
    const selectedCategory = categorySelect.value;
    
    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';
            }
        }
    });
    
    const currentSubcategory = subcategorySelect.value;
    if (currentSubcategory !== '') {
        const currentOption = subcategorySelect.querySelector(`option[value="${currentSubcategory}"]`);
        if (currentOption && currentOption.style.display === 'none') {
            subcategorySelect.value = '';
        }
    }
    
    updateVarietiesFilter();
    updateSubvarietiesFilter();
    categorySelect.form.submit();
}

function updateVarietiesAndSubmit() {
    const subcategorySelect = document.getElementById('subcategory-filter');
    const varietySelect = document.getElementById('variety-filter');
    const subvarietySelect = document.getElementById('subvariety-filter');
    
    updateVarietiesFilter();
    updateSubvarietiesFilter();
    
    const currentVariety = varietySelect.value;
    if (currentVariety !== '') {
        const currentOption = varietySelect.querySelector(`option[value="${currentVariety}"]`);
        if (currentOption && currentOption.style.display === 'none') {
            varietySelect.value = '';
        }
    }
    
    subcategorySelect.form.submit();
}

function updateSubvarietiesAndSubmit() {
    const varietySelect = document.getElementById('variety-filter');
    const subvarietySelect = document.getElementById('subvariety-filter');
    
    updateSubvarietiesFilter();
    
    const currentSubvariety = subvarietySelect.value;
    if (currentSubvariety !== '') {
        const currentOption = subvarietySelect.querySelector(`option[value="${currentSubvariety}"]`);
        if (currentOption && currentOption.style.display === 'none') {
            subvarietySelect.value = '';
        }
    }
    
    varietySelect.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;
    
    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';
        }
    });
    
    const currentVariety = varietySelect.value;
    if (currentVariety !== '') {
        const currentOption = varietySelect.querySelector(`option[value="${currentVariety}"]`);
        if (currentOption && currentOption.style.display === 'none') {
            varietySelect.value = '';
        }
    }
}

function updateSubvarietiesFilter() {
    const categorySelect = document.getElementById('category-filter');
    const subcategorySelect = document.getElementById('subcategory-filter');
    const varietySelect = document.getElementById('variety-filter');
    const subvarietySelect = document.getElementById('subvariety-filter');
    const selectedCategory = categorySelect.value;
    const selectedSubcategory = subcategorySelect.value;
    const selectedVariety = varietySelect.value;
    
    const subvarietyOptions = subvarietySelect.querySelectorAll('option');
    subvarietyOptions.forEach(option => {
        if (option.value === '') {
            option.style.display = 'block';
        } else {
            const optionCategory = option.getAttribute('data-category');
            const optionSubcategory = option.getAttribute('data-subcategory');
            const optionVariety = option.getAttribute('data-variety');
            
            let show = true;
            if (selectedCategory !== '' && optionCategory !== selectedCategory) {
                show = false;
            }
            if (selectedSubcategory !== '' && optionSubcategory !== selectedSubcategory) {
                show = false;
            }
            if (selectedVariety !== '' && optionVariety !== selectedVariety) {
                show = false;
            }
            
            option.style.display = show ? 'block' : 'none';
        }
    });
    
    const currentSubvariety = subvarietySelect.value;
    if (currentSubvariety !== '') {
        const currentOption = subvarietySelect.querySelector(`option[value="${currentSubvariety}"]`);
        if (currentOption && currentOption.style.display === 'none') {
            subvarietySelect.value = '';
        }
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('category-filter');
    const subcategorySelect = document.getElementById('subcategory-filter');
    const varietySelect = document.getElementById('variety-filter');
    const subvarietySelect = document.getElementById('subvariety-filter');
    
    if (categorySelect && categorySelect.value) {
        updateVarietiesFilter();
        updateSubvarietiesFilter();
    }
    if (subcategorySelect && subcategorySelect.value) {
        updateVarietiesFilter();
        updateSubvarietiesFilter();
    }
    if (varietySelect && varietySelect.value) {
        updateSubvarietiesFilter();
    }
});
</script>
@endpush