@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-book me-2"></i>Configurar Catálogo de Productos
        </h1>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.reports.product-catalog.preview') }}" class="btn btn-info">
                <i class="fas fa-eye me-2"></i>Vista Previa
            </a>
            <a href="{{ route('admin.config.reports.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.reports.product-catalog.generate') }}">
        @csrf
        
        <!-- Configuración General -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-cog me-2"></i>Configuración General
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="currency" class="form-label">Moneda <span class="text-danger">*</span></label>
                        <select name="currency" id="currency" class="form-select" required>
                            @foreach($currencies as $currency)
                                <option value="{{ $currency }}" {{ old('currency', 'USD') == $currency ? 'selected' : '' }}>
                                    {{ $currency }}
                                </option>
                            @endforeach
                        </select>
                        @error('currency')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4">
                        <label for="price_level" class="form-label">Nivel de Precio <span class="text-danger">*</span></label>
                        <select name="price_level" id="price_level" class="form-select" required>
                            @foreach($priceLevels as $key => $label)
                                <option value="{{ $key }}" {{ old('price_level', 'retail') == $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('price_level')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4">
                        <label for="layout" class="form-label">Diseño <span class="text-danger">*</span></label>
                        <select name="layout" id="layout" class="form-select" required>
                            @foreach($layouts as $key => $label)
                                <option value="{{ $key }}" {{ old('layout', 'grid') == $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('layout')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <div class="row g-3 mt-2">
                    <div class="col-md-4">
                        <label for="items_per_page" class="form-label">Productos por Página</label>
                        <input type="number" name="items_per_page" id="items_per_page" class="form-control" 
                               value="{{ old('items_per_page', 12) }}" min="1" max="50">
                        @error('items_per_page')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4">
                        <div class="form-check mt-4">
                            <input type="checkbox" name="show_stock_status" id="show_stock_status" class="form-check-input" 
                                   {{ old('show_stock_status', true) ? 'checked' : '' }}>
                            <label for="show_stock_status" class="form-check-label">
                                Mostrar Estado de Stock
                            </label>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="form-check mt-4">
                            <input type="checkbox" name="group_by_category" id="group_by_category" class="form-check-input" 
                                   {{ old('group_by_category', true) ? 'checked' : '' }}>
                            <label for="group_by_category" class="form-check-label">
                                Agrupar por Categoría
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filtros de Productos -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-secondary">
                    <i class="fas fa-filter me-2"></i>Filtros de Productos
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="search" class="form-label">Buscar Producto</label>
                        <input type="text" name="search" id="search" class="form-control" 
                               value="{{ old('search') }}" placeholder="Nombre, código o descripción...">
                    </div>
                    
                    <div class="col-md-6">
                        <label for="category_ids" class="form-label">Categorías</label>
                        <select name="category_ids[]" id="category_ids" class="form-select" multiple>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" 
                                        {{ in_array($category->id, old('category_ids', [])) ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        <small class="form-text text-muted">Mantén presionado Ctrl para seleccionar múltiples categorías</small>
                    </div>
                </div>
                
                <div class="row g-3 mt-2">
                    <div class="col-md-6">
                        <label for="brand_ids" class="form-label">Marcas</label>
                        <select name="brand_ids[]" id="brand_ids" class="form-select" multiple>
                            @foreach($brands as $brand)
                                <option value="{{ $brand->id }}" 
                                        {{ in_array($brand->id, old('brand_ids', [])) ? 'selected' : '' }}>
                                    {{ $brand->name }}
                                </option>
                            @endforeach
                        </select>
                        <small class="form-text text-muted">Mantén presionado Ctrl para seleccionar múltiples marcas</small>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="form-check mt-4">
                            <input type="checkbox" name="only_with_stock" id="only_with_stock" class="form-check-input" 
                                   {{ old('only_with_stock') ? 'checked' : '' }}>
                            <label for="only_with_stock" class="form-check-label">
                                Solo productos con stock disponible
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Configuración de Impresión -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-info">
                    <i class="fas fa-print me-2"></i>Configuración de Impresión
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="paper_size" class="form-label">Tamaño de Papel</label>
                        <select name="paper_size" id="paper_size" class="form-select">
                            <option value="A4" {{ old('paper_size', 'A4') == 'A4' ? 'selected' : '' }}>A4</option>
                            <option value="A3" {{ old('paper_size') == 'A3' ? 'selected' : '' }}>A3</option>
                            <option value="Letter" {{ old('paper_size') == 'Letter' ? 'selected' : '' }}>Letter</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4">
                        <label for="orientation" class="form-label">Orientación</label>
                        <select name="orientation" id="orientation" class="form-select">
                            <option value="portrait" {{ old('orientation', 'portrait') == 'portrait' ? 'selected' : '' }}>Vertical</option>
                            <option value="landscape" {{ old('orientation') == 'landscape' ? 'selected' : '' }}>Horizontal</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4">
                        <label for="font_size" class="form-label">Tamaño de Fuente</label>
                        <select name="font_size" id="font_size" class="form-select">
                            <option value="8" {{ old('font_size', '10') == '8' ? 'selected' : '' }}>8pt</option>
                            <option value="9" {{ old('font_size') == '9' ? 'selected' : '' }}>9pt</option>
                            <option value="10" {{ old('font_size', '10') == '10' ? 'selected' : '' }}>10pt</option>
                            <option value="11" {{ old('font_size') == '11' ? 'selected' : '' }}>11pt</option>
                            <option value="12" {{ old('font_size') == '12' ? 'selected' : '' }}>12pt</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botones de Acción -->
        <div class="card shadow mb-4">
            <div class="card-body text-center">
                <button type="submit" class="btn btn-primary btn-lg me-3">
                    <i class="fas fa-magic me-2"></i>Generar Catálogo
                </button>
                <a href="{{ route('admin.reports.product-catalog.preview') }}" class="btn btn-info btn-lg me-3">
                    <i class="fas fa-eye me-2"></i>Vista Previa
                </a>
                <a href="{{ route('admin.config.reports.index') }}" class="btn btn-secondary btn-lg">
                    <i class="fas fa-times me-2"></i>Cancelar
                </a>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Actualizar vista previa cuando cambien los filtros
    const form = document.querySelector('form');
    const previewBtn = document.querySelector('a[href*="preview"]');
    
    // Interceptar clic en vista previa para enviar datos actuales
    previewBtn.addEventListener('click', function(e) {
        e.preventDefault();
        
        // Crear formulario temporal para vista previa
        const tempForm = document.createElement('form');
        tempForm.method = 'POST';
        tempForm.action = '{{ route("admin.reports.product-catalog.preview") }}';
        
        // Agregar token CSRF
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        tempForm.appendChild(csrfToken);
        
        // Copiar datos del formulario principal
        const formData = new FormData(form);
        for (let [key, value] of formData.entries()) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = value;
            tempForm.appendChild(input);
        }
        
        document.body.appendChild(tempForm);
        tempForm.submit();
    });
    
    // Mostrar/ocultar campos según el layout seleccionado
    const layoutSelect = document.getElementById('layout');
    const itemsPerPageDiv = document.getElementById('items_per_page').closest('.col-md-4');
    
    function toggleLayoutFields() {
        if (layoutSelect.value === 'table') {
            itemsPerPageDiv.style.display = 'none';
        } else {
            itemsPerPageDiv.style.display = 'block';
        }
    }
    
    layoutSelect.addEventListener('change', toggleLayoutFields);
    toggleLayoutFields(); // Ejecutar al cargar
});
</script>
@endpush
@endsection