@extends('layouts.app')

@section('title', 'Catálogo de Productos')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-book me-2 text-info"></i>Catálogo de Productos
            </h1>
            <p class="text-muted mb-0 small">Genera un catálogo visual de productos con imágenes y precios</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.reports.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0">
                <i class="fas fa-filter me-2"></i>Filtros y Opciones
            </h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.reports.catalog') }}" id="catalogForm" class="row g-3">
                <div class="col-md-3">
                    <label for="catalog_type" class="form-label">Tipo de Catálogo</label>
                    <select name="catalog_type" id="catalog_type" class="form-select" onchange="handleCatalogTypeChange()">
                        <option value="name" {{ ($catalogType ?? 'name') == 'name' ? 'selected' : '' }}>Ordenado por Nombre</option>
                        <option value="brand" {{ ($catalogType ?? '') == 'brand' ? 'selected' : '' }}>Ordenado por Marcas</option>
                        <option value="category" {{ ($catalogType ?? '') == 'category' ? 'selected' : '' }}>Ordenado por Categorías</option>
                        <option value="custom" {{ ($catalogType ?? '') == 'custom' ? 'selected' : '' }}>Catálogo Personalizado</option>
                    </select>
                </div>
                <div class="col-md-2" id="searchField">
                    <label for="search" class="form-label">Buscar</label>
                    <input type="text" name="search" id="search" class="form-control" value="{{ request('search') }}" placeholder="Nombre, SKU, Código...">
                </div>
                <div class="col-md-2" id="categoryField">
                    <label for="category_id" class="form-label">Categoría</label>
                    <select name="category_id" id="category_id" class="form-select">
                        <option value="">Todas</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2" id="brandField">
                    <label for="brand_id" class="form-label">Marca</label>
                    <select name="brand_id" id="brand_id" class="form-select">
                        <option value="">Todas</option>
                        @foreach($brands as $brand)
                            <option value="{{ $brand->id }}" {{ request('brand_id') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="currency" class="form-label">Moneda</label>
                    <select name="currency" id="currency" class="form-select">
                        @foreach($currencies as $curr)
                            @if($curr == 'REF')
                                <option value="{{ $curr }}" {{ $currency == $curr ? 'selected' : '' }}>REF (Precio Real)</option>
                            @else
                                <option value="{{ $curr }}" {{ $currency == $curr ? 'selected' : '' }}>{{ $curr }}</option>
                            @endif
                        @endforeach
                    </select>
                    @if($currency == 'REF')
                        <small class="text-muted">REF = (USD × Tasa Real) ÷ Tasa Legal</small>
                    @endif
                </div>
                <div class="col-md-2">
                    <label for="rate_type" class="form-label">Tipo de Tasa</label>
                    <select name="rate_type" id="rate_type" class="form-select">
                        <option value="real" {{ ($rateType ?? 'real') == 'real' ? 'selected' : '' }}>Tasa Real</option>
                        <option value="legal" {{ ($rateType ?? '') == 'legal' ? 'selected' : '' }}>Tasa Legal</option>
                    </select>
                    <small class="text-muted">Para USD: usar tasa legal</small>
                </div>
                <div class="col-md-2">
                    <label for="products_per_page" class="form-label">Productos por Página</label>
                    <select name="products_per_page" id="products_per_page" class="form-select">
                        <option value="8" {{ $productsPerPage == 8 ? 'selected' : '' }}>8 (2x4)</option>
                        <option value="12" {{ $productsPerPage == 12 ? 'selected' : '' }}>12 (3x4)</option>
                        <option value="16" {{ $productsPerPage == 16 ? 'selected' : '' }}>16 (4x4)</option>
                        <option value="20" {{ $productsPerPage == 20 ? 'selected' : '' }}>20 (4x5)</option>
                        <option value="24" {{ $productsPerPage == 24 ? 'selected' : '' }}>24 (4x6)</option>
                    </select>
                </div>
                <div class="col-md-1" id="statusField">
                    <label for="status" class="form-label">Estado</label>
                    <select name="status" id="status" class="form-select">
                        <option value="active" {{ request('status', 'active') == 'active' ? 'selected' : '' }}>Activos</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactivos</option>
                        <option value="" {{ request('status') == '' ? 'selected' : '' }}>Todos</option>
                    </select>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-2"></i>Filtrar
                    </button>
                    <a href="{{ route('admin.reports.catalog') }}" class="btn btn-secondary">
                        <i class="fas fa-redo me-2"></i>Limpiar
                    </a>
                    <a href="{{ route('admin.reports.catalog', array_merge(request()->all(), ['print' => '1'])) }}" class="btn btn-success" target="_blank">
                        <i class="fas fa-print me-2"></i>Vista Previa / Imprimir
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Resumen -->
    <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>
        <strong>Total de productos:</strong> {{ $products->count() }} | 
        <strong>Moneda:</strong> {{ $currency }} | 
        <strong>Tasa:</strong> {{ ($rateType ?? 'real') == 'legal' ? 'Legal' : 'Real' }} |
        <strong>Productos por página:</strong> {{ $productsPerPage }} |
        <strong>Tipo:</strong> 
        @if(($catalogType ?? 'name') == 'name')
            Ordenado por Nombre
        @elseif(($catalogType ?? '') == 'brand')
            Ordenado por Marcas
        @elseif(($catalogType ?? '') == 'category')
            Ordenado por Categorías
        @elseif(($catalogType ?? '') == 'custom')
            Catálogo Personalizado
        @endif
    </div>

    <!-- Catálogo Personalizado -->
    @if(($catalogType ?? '') == 'custom')
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-edit me-2"></i>Seleccionar Productos para el Catálogo
                </h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <input type="text" id="productSearch" class="form-control" placeholder="Buscar productos para agregar...">
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-success" onclick="addSelectedProducts()">
                            <i class="fas fa-plus me-2"></i>Agregar Seleccionados
                        </button>
                        <button type="button" class="btn btn-danger" onclick="clearCustomCatalog()">
                            <i class="fas fa-trash me-2"></i>Limpiar Catálogo
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6>Productos Disponibles</h6>
                        <div style="max-height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                            @if($allProducts && $allProducts->count() > 0)
                                @foreach($allProducts as $product)
                                    <div class="form-check mb-2 product-item" data-product-id="{{ $product->id }}" data-product-name="{{ strtolower($product->name) }}">
                                        <input class="form-check-input product-checkbox" type="checkbox" value="{{ $product->id }}" id="product_{{ $product->id }}">
                                        <label class="form-check-label" for="product_{{ $product->id }}">
                                            {{ $product->name }} 
                                            <small class="text-muted">({{ $product->category->name ?? 'Sin categoría' }})</small>
                                        </label>
                                    </div>
                                @endforeach
                            @else
                                <p class="text-muted">No hay productos disponibles</p>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6>Productos Seleccionados ({{ count(request('selected_products', [])) }})</h6>
                        <div id="selectedProductsList" style="max-height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 5px; min-height: 100px;">
                            @if(request('selected_products'))
                                @foreach($products as $product)
                                    <div class="alert alert-light d-flex justify-content-between align-items-center mb-2" id="selected_{{ $product->id }}">
                                        <span>{{ $product->name }}</span>
                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeProduct({{ $product->id }})">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                @endforeach
                            @else
                                <p class="text-muted">No hay productos seleccionados</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
    function handleCatalogTypeChange() {
        const catalogType = document.getElementById('catalog_type').value;
        const searchField = document.getElementById('searchField');
        const categoryField = document.getElementById('categoryField');
        const brandField = document.getElementById('brandField');
        const statusField = document.getElementById('statusField');
        
        if (catalogType === 'custom') {
            // Ocultar campos de filtro para catálogo personalizado
            searchField.style.display = 'none';
            categoryField.style.display = 'none';
            brandField.style.display = 'none';
            statusField.style.display = 'none';
        } else {
            // Mostrar campos de filtro
            searchField.style.display = 'block';
            categoryField.style.display = 'block';
            brandField.style.display = 'block';
            statusField.style.display = 'block';
        }
    }

    // Inicializar al cargar la página
    document.addEventListener('DOMContentLoaded', function() {
        handleCatalogTypeChange();
        
        // Ocultar/mostrar campo de tipo de tasa según moneda seleccionada
        const currencySelect = document.getElementById('currency');
        const rateTypeField = document.getElementById('rateTypeField');
        if (currencySelect && rateTypeField) {
            function toggleRateTypeField() {
                if (currencySelect.value === 'REF') {
                    rateTypeField.style.display = 'none';
                } else {
                    rateTypeField.style.display = 'block';
                }
            }
            currencySelect.addEventListener('change', toggleRateTypeField);
            toggleRateTypeField(); // Ejecutar al cargar
        }
        
        // Búsqueda de productos en catálogo personalizado
        const productSearch = document.getElementById('productSearch');
        if (productSearch) {
            productSearch.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                const productItems = document.querySelectorAll('.product-item');
                productItems.forEach(item => {
                    const productName = item.getAttribute('data-product-name');
                    if (productName.includes(searchTerm)) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        }
    });

    function addSelectedProducts() {
        const checkboxes = document.querySelectorAll('.product-checkbox:checked');
        const selectedIds = Array.from(checkboxes).map(cb => cb.value);
        
        if (selectedIds.length === 0) {
            alert('Por favor, selecciona al menos un producto');
            return;
        }

        // Agregar a la URL y recargar
        const form = document.getElementById('catalogForm');
        const formData = new FormData(form);
        formData.delete('selected_products[]');
        selectedIds.forEach(id => {
            formData.append('selected_products[]', id);
        });
        
        const params = new URLSearchParams();
        for (const [key, value] of formData.entries()) {
            if (key === 'selected_products[]') {
                params.append('selected_products[]', value);
            } else {
                params.append(key, value);
            }
        }
        
        window.location.href = '{{ route("admin.reports.catalog") }}?' + params.toString();
    }

    function removeProduct(productId) {
        const form = document.getElementById('catalogForm');
        const formData = new FormData(form);
        const currentSelected = Array.from(formData.getAll('selected_products[]')).map(id => parseInt(id));
        const newSelected = currentSelected.filter(id => id !== productId);
        
        const params = new URLSearchParams();
        for (const [key, value] of formData.entries()) {
            if (key !== 'selected_products[]') {
                params.append(key, value);
            }
        }
        newSelected.forEach(id => {
            params.append('selected_products[]', id);
        });
        
        window.location.href = '{{ route("admin.reports.catalog") }}?' + params.toString();
    }

    function clearCustomCatalog() {
        if (confirm('¿Estás seguro de que deseas limpiar el catálogo personalizado?')) {
            const form = document.getElementById('catalogForm');
            const formData = new FormData(form);
            const params = new URLSearchParams();
            for (const [key, value] of formData.entries()) {
                if (key !== 'selected_products[]') {
                    params.append(key, value);
                }
            }
            window.location.href = '{{ route("admin.reports.catalog") }}?' + params.toString();
        }
    }
</script>
@endpush
@endsection