@extends('layouts.app')

@section('title', 'Comisiones por Producto - ' . $salesman->full_name)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-percentage me-2"></i>Comisiones por Producto
                    </h1>
                    <p class="text-muted mb-0">
                        Asignar porcentajes de comisión por producto para: <strong>{{ $salesman->full_name }}</strong>
                    </p>
                    <p class="text-muted mb-0">
                        <small>Comisión General del Vendedor: <strong>{{ $salesman->commission_rate ?? 0 }}%</strong></small>
                    </p>
                </div>
                <div>
                    <a href="{{ route('admin.gestor.salesmen.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Volver a Vendedores
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Asignación Masiva -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-bolt me-2"></i>Asignación Masiva de Comisiones
                    </h6>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.gestor.salesmen.bulk-assign-product-commissions', $salesman) }}" id="bulkCommissionForm">
                        @csrf
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="bulk_commission_rate">Porcentaje de Comisión (%)</label>
                                    <input type="number" 
                                           class="form-control" 
                                           id="bulk_commission_rate" 
                                           name="commission_rate" 
                                           min="0" 
                                           max="100" 
                                           step="0.01" 
                                           required
                                           placeholder="Ej: 5.00">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="bulk_apply_to">Aplicar a</label>
                                    <select class="form-control" id="bulk_apply_to" name="apply_to" required>
                                        <option value="selected">Productos Seleccionados</option>
                                        <option value="all">Todos los Productos</option>
                                        <option value="by_category">Por Categoría</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3" id="category_field" style="display: none;">
                                <div class="form-group">
                                    <label for="bulk_category_id">Categoría</label>
                                    <select class="form-control" id="bulk_category_id" name="category_id">
                                        <option value="">Seleccione una categoría</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="d-flex gap-2">
                                        <button type="submit" class="btn btn-primary w-100">
                                            <i class="fas fa-save me-2"></i>Asignar Comisión
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="override_existing" name="override_existing" value="1">
                                    <label class="form-check-label" for="override_existing">
                                        Sobrescribir comisiones existentes
                                    </label>
                                </div>
                            </div>
                        </div>
                        <!-- product_ids se agregará dinámicamente en el submit -->
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros y Búsqueda -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="search_products">Buscar Producto</label>
                                <input type="text" 
                                       class="form-control" 
                                       id="search_products" 
                                       placeholder="Nombre, código o SKU">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="filter_category">Filtrar por Categoría</label>
                                <select class="form-control" id="filter_category">
                                    <option value="">Todas las categorías</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="filter_commission">Filtrar por Comisión</label>
                                <select class="form-control" id="filter_commission">
                                    <option value="">Todas</option>
                                    <option value="assigned">Con Comisión Asignada</option>
                                    <option value="not_assigned">Sin Comisión Asignada</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <button type="button" class="btn btn-secondary w-100" id="clear_filters">
                                    <i class="fas fa-times me-2"></i>Limpiar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Productos -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-boxes me-2"></i>Productos y Comisiones
                        <span class="badge bg-info ms-2" id="products_count">{{ $products->count() }}</span>
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="products_table">
                            <thead class="thead-light">
                                <tr>
                                    <th width="50">
                                        <input type="checkbox" id="select_all_products">
                                    </th>
                                    <th>Código</th>
                                    <th>Producto</th>
                                    <th>Categoría</th>
                                    <th>Comisión Producto</th>
                                    <th>Comisión Vendedor</th>
                                    <th>Comisión Asignada</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($products as $product)
                                    <tr data-product-id="{{ $product['id'] }}" 
                                        data-category-id="{{ $product['category_id'] ?? '' }}"
                                        data-commission-status="{{ $product['current_commission'] ? 'assigned' : 'not_assigned' }}">
                                        <td>
                                            <input type="checkbox" 
                                                   class="product-checkbox" 
                                                   value="{{ $product['id'] }}">
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ $product['code'] }}</span>
                                        </td>
                                        <td>
                                            <strong>{{ $product['name'] }}</strong>
                                            @if($product['brand'])
                                                <br><small class="text-muted">{{ $product['brand'] }}</small>
                                            @endif
                                        </td>
                                        <td>{{ $product['category'] }}</td>
                                        <td>
                                            <span class="badge bg-info">{{ number_format($product['product_commission'], 2) }}%</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-warning">{{ number_format($product['salesman_commission'], 2) }}%</span>
                                        </td>
                                        <td>
                                            @if($product['current_commission'] !== null)
                                                <span class="badge bg-success" id="commission_badge_{{ $product['id'] }}">
                                                    {{ number_format($product['current_commission'], 2) }}%
                                                </span>
                                                @if($product['notes'])
                                                    <br><small class="text-muted" title="{{ $product['notes'] }}">
                                                        <i class="fas fa-info-circle"></i>
                                                    </small>
                                                @endif
                                            @else
                                                <span class="badge bg-secondary" id="commission_badge_{{ $product['id'] }}">
                                                    No asignada
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            <button type="button" 
                                                    class="btn btn-sm btn-primary assign-commission-btn" 
                                                    data-product-id="{{ $product['id'] }}"
                                                    data-product-name="{{ $product['name'] }}"
                                                    data-current-commission="{{ $product['current_commission'] ?? '' }}"
                                                    data-notes="{{ $product['notes'] ?? '' }}">
                                                <i class="fas fa-edit"></i> Asignar
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Asignar Comisión Individual -->
<div class="modal fade" id="assignCommissionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Asignar Comisión por Producto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="assignCommissionForm">
                <div class="modal-body">
                    <input type="hidden" id="modal_product_id" name="product_id">
                    <div class="mb-3">
                        <label for="modal_product_name" class="form-label">Producto</label>
                        <input type="text" class="form-control" id="modal_product_name" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="modal_commission_rate" class="form-label">Porcentaje de Comisión (%)</label>
                        <input type="number" 
                               class="form-control" 
                               id="modal_commission_rate" 
                               name="commission_rate" 
                               min="0" 
                               max="100" 
                               step="0.01" 
                               required>
                        <small class="form-text text-muted">Ingrese un valor entre 0 y 100</small>
                    </div>
                    <div class="mb-3">
                        <label for="modal_notes" class="form-label">Notas (Opcional)</label>
                        <textarea class="form-control" 
                                  id="modal_notes" 
                                  name="notes" 
                                  rows="3" 
                                  maxlength="1000"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar Comisión</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const salesmanId = {{ $salesman->id }};
    const assignCommissionUrl = '{{ route("admin.gestor.salesmen.assign-product-commission", $salesman) }}';
    const updateCommissionUrl = '{{ route("admin.gestor.salesmen.update-product-commission", ":id") }}';
    const removeCommissionUrl = '{{ route("admin.gestor.salesmen.remove-product-commission", ":id") }}';
    
    let assignCommissionModal = new bootstrap.Modal(document.getElementById('assignCommissionModal'));
    let currentCommissionId = null;

    // Mostrar/ocultar campo de categoría según la opción seleccionada
    document.getElementById('bulk_apply_to').addEventListener('change', function() {
        const categoryField = document.getElementById('category_field');
        if (this.value === 'by_category') {
            categoryField.style.display = 'block';
            document.getElementById('bulk_category_id').required = true;
        } else {
            categoryField.style.display = 'none';
            document.getElementById('bulk_category_id').required = false;
        }
    });

    // Seleccionar todos los productos
    document.getElementById('select_all_products').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.product-checkbox');
        checkboxes.forEach(cb => cb.checked = this.checked);
        updateBulkProductIds();
    });

    // Actualizar lista de productos seleccionados
    document.querySelectorAll('.product-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateBulkProductIds();
        });
    });

    function updateBulkProductIds() {
        // Esta función ya no es necesaria, pero la mantenemos por compatibilidad
        // Los product_ids se obtienen directamente en el submit
    }

    // Filtros
    document.getElementById('search_products').addEventListener('input', filterTable);
    document.getElementById('filter_category').addEventListener('change', filterTable);
    document.getElementById('filter_commission').addEventListener('change', filterTable);
    document.getElementById('clear_filters').addEventListener('click', function() {
        document.getElementById('search_products').value = '';
        document.getElementById('filter_category').value = '';
        document.getElementById('filter_commission').value = '';
        filterTable();
    });

    function filterTable() {
        const search = document.getElementById('search_products').value.toLowerCase();
        const category = document.getElementById('filter_category').value;
        const commission = document.getElementById('filter_commission').value;

        const rows = document.querySelectorAll('#products_table tbody tr');
        let visibleCount = 0;

        rows.forEach(row => {
            const productName = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
            const productCode = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
            const categoryId = row.getAttribute('data-category-id');
            const commissionStatus = row.getAttribute('data-commission-status');

            const matchesSearch = !search || productName.includes(search) || productCode.includes(search);
            const matchesCategory = !category || categoryId == category;
            const matchesCommission = !commission || commissionStatus === commission;

            if (matchesSearch && matchesCategory && matchesCommission) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        document.getElementById('products_count').textContent = visibleCount;
    }

    // Abrir modal para asignar comisión
    document.querySelectorAll('.assign-commission-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const productId = this.getAttribute('data-product-id');
            const productName = this.getAttribute('data-product-name');
            const currentCommission = this.getAttribute('data-current-commission');
            const notes = this.getAttribute('data-notes');

            document.getElementById('modal_product_id').value = productId;
            document.getElementById('modal_product_name').value = productName;
            document.getElementById('modal_commission_rate').value = currentCommission || '';
            document.getElementById('modal_notes').value = notes || '';

            // Buscar si existe una comisión para obtener su ID
            fetch(`/admin/gestor/salesmen/${salesmanId}/product-commissions/check/${productId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.exists && data.commission_id) {
                        currentCommissionId = data.commission_id;
                    } else {
                        currentCommissionId = null;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    currentCommissionId = null;
                });

            assignCommissionModal.show();
        });
    });

    // Enviar formulario de asignación de comisión
    document.getElementById('assignCommissionForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const productId = formData.get('product_id');
        const url = currentCommissionId 
            ? updateCommissionUrl.replace(':id', currentCommissionId)
            : assignCommissionUrl;

        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                product_id: productId,
                commission_rate: formData.get('commission_rate'),
                notes: formData.get('notes'),
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Actualizar la fila en la tabla
                const row = document.querySelector(`tr[data-product-id="${productId}"]`);
                const badge = row.querySelector(`#commission_badge_${productId}`);
                badge.textContent = data.commission.commission_rate + '%';
                badge.className = 'badge bg-success';
                row.setAttribute('data-commission-status', 'assigned');

                assignCommissionModal.hide();
                showNotification('Comisión asignada exitosamente', 'success');
            } else {
                showNotification(data.message || 'Error al asignar la comisión', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Error al asignar la comisión', 'error');
        });
    });

    // Formulario de asignación masiva
    document.getElementById('bulkCommissionForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const applyTo = document.getElementById('bulk_apply_to').value;
        
        // Obtener productos seleccionados
        const selectedCheckboxes = document.querySelectorAll('.product-checkbox:checked');
        const productIds = Array.from(selectedCheckboxes).map(cb => cb.value);

        if (applyTo === 'selected' && productIds.length === 0) {
            showNotification('Debe seleccionar al menos un producto', 'error');
            return false;
        }

        if (applyTo === 'by_category' && !document.getElementById('bulk_category_id').value) {
            showNotification('Debe seleccionar una categoría', 'error');
            return false;
        }

        // Crear un formulario dinámico con los datos correctos
        const form = this;
        const formData = new FormData(form);
        
        // Agregar product_ids como array solo si es 'selected'
        if (applyTo === 'selected' && productIds.length > 0) {
            productIds.forEach(id => {
                formData.append('product_ids[]', id);
            });
        } else if (applyTo === 'all' || applyTo === 'by_category') {
            // No enviar product_ids si es 'all' o 'by_category'
            // El backend no los requiere en estos casos
        }

        // Enviar el formulario
        fetch(form.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
            body: formData
        })
        .then(response => {
            if (response.redirected) {
                window.location.href = response.url;
            } else {
                return response.text();
            }
        })
        .then(html => {
            if (html) {
                // Si hay respuesta HTML, podría ser un error de validación
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const errorElement = doc.querySelector('.alert-danger');
                if (errorElement) {
                    showNotification(errorElement.textContent.trim(), 'error');
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Error al asignar las comisiones', 'error');
        });
    });

    function showNotification(message, type) {
        // Implementar notificación (puede usar toastr, sweetalert, etc.)
        alert(message);
    }
});
</script>
@endpush