@extends('layouts.app')

@section('title', 'Comisiones por Producto')

@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-percent me-2 text-primary"></i>Gestión de Comisiones por Producto
            </h1>
            <p class="text-muted mb-0 small">Asigne porcentajes de comisión a productos de manera individual o global</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Estadísticas -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center border-primary">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Total Productos</h6>
                    <h4 class="text-primary">{{ number_format($stats['total_products'] ?? 0, 0) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center border-success">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Con Comisión</h6>
                    <h4 class="text-success">{{ number_format($stats['with_commission'] ?? 0, 0) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center border-warning">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Sin Comisión</h6>
                    <h4 class="text-warning">{{ number_format($stats['without_commission'] ?? 0, 0) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center border-info">
                <div class="card-body">
                    <h6 class="text-muted mb-2">Promedio Comisión</h6>
                    <h4 class="text-info">{{ number_format($stats['avg_commission'] ?? 0, 2) }}%</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros y Acción Global -->
    <div class="card shadow mb-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Filtros y Asignación Global</h5>
        </div>
        <div class="card-body">
            <!-- Filtros -->
            <form method="GET" action="{{ route('admin.commissions.products.index') }}" class="mb-4">
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="search" class="form-label">Buscar</label>
                            <input type="text" class="form-control" id="search" name="search" 
                                   value="{{ request('search') }}" placeholder="Nombre, SKU o código">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="category_id" class="form-label">Categoría</label>
                            <select class="form-select" id="category_id" name="category_id">
                                <option value="">Todas las categorías</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="has_commission" class="form-label">Estado Comisión</label>
                            <select class="form-select" id="has_commission" name="has_commission">
                                <option value="">Todos</option>
                                <option value="yes" {{ request('has_commission') == 'yes' ? 'selected' : '' }}>Con Comisión</option>
                                <option value="no" {{ request('has_commission') == 'no' ? 'selected' : '' }}>Sin Comisión</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="fas fa-search me-2"></i>Filtrar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <!-- Asignación Global -->
            <div class="border-top pt-3">
                <h6 class="mb-3"><i class="fas fa-globe me-2"></i>Asignación Global de Comisión</h6>
                <form method="POST" action="{{ route('admin.commissions.products.bulk-update') }}" id="bulkUpdateForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="global_commission_rate" class="form-label">Porcentaje de Comisión (%)</label>
                                <input type="number" class="form-control" id="global_commission_rate" 
                                       name="commission_rate" step="0.01" min="0" max="100" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="apply_to" class="form-label">Aplicar a</label>
                                <select class="form-select" id="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>
                                    <option value="by_brand">Por Marca</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3" id="category_field" style="display: none;">
                            <div class="mb-3">
                                <label for="bulk_category_id" class="form-label">Categoría</label>
                                <select class="form-select" id="bulk_category_id" name="category_id">
                                    <option value="">Seleccionar...</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3" id="brand_field" style="display: none;">
                            <div class="mb-3">
                                <label for="bulk_brand_id" class="form-label">Marca</label>
                                <select class="form-select" id="bulk_brand_id" name="brand_id">
                                    <option value="">Seleccionar...</option>
                                    @foreach($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label class="form-label">&nbsp;</label>
                                <button type="submit" class="btn btn-success w-100" onclick="return confirm('¿Está seguro de aplicar esta comisión a los productos seleccionados?');">
                                    <i class="fas fa-check me-2"></i>Aplicar
                                </button>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="product_ids" id="selected_product_ids" value="">
                </form>
            </div>
        </div>
    </div>

    <!-- Tabla de Productos -->
    <div class="card shadow">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-list me-2"></i>Productos</h5>
            <div>
                <button type="button" class="btn btn-sm btn-light" id="selectAll">
                    <i class="fas fa-check-square me-2"></i>Seleccionar Todos
                </button>
                <button type="button" class="btn btn-sm btn-light" id="deselectAll">
                    <i class="fas fa-square me-2"></i>Deseleccionar Todos
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-sm table-hover mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th width="40">
                                <input type="checkbox" id="selectAllCheckbox">
                            </th>
                            <th>Código</th>
                            <th>Producto</th>
                            <th>Categoría</th>
                            <th>SKU</th>
                            <th>Precio Venta (USD)</th>
                            <th>Comisión (%)</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $product)
                            <tr>
                                <td>
                                    <input type="checkbox" class="product-checkbox" value="{{ $product->id }}">
                                </td>
                                <td>{{ $product->code }}</td>
                                <td>
                                    <strong>{{ $product->name }}</strong>
                                    @if($product->brand)
                                        <br><small class="text-muted">{{ $product->brand->name }}</small>
                                    @endif
                                </td>
                                <td>{{ $product->category->name ?? 'N/A' }}</td>
                                <td>{{ $product->sku }}</td>
                                <td>${{ number_format($product->selling_price_usd ?? $product->selling_price ?? 0, 2) }}</td>
                                <td>
                                    <div class="input-group input-group-sm" style="width: 120px;">
                                        <input type="number" 
                                               class="form-control commission-input" 
                                               data-product-id="{{ $product->id }}"
                                               value="{{ number_format($product->commission_rate ?? 0, 2) }}" 
                                               step="0.01" 
                                               min="0" 
                                               max="100"
                                               style="width: 80px;">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </td>
                                <td>
                                    <button type="button" 
                                            class="btn btn-sm btn-primary save-commission" 
                                            data-product-id="{{ $product->id }}"
                                            title="Guardar">
                                        <i class="fas fa-save"></i>
                                    </button>
                                    @if($product->commission_rate > 0)
                                        <button type="button" 
                                                class="btn btn-sm btn-danger remove-commission" 
                                                data-product-id="{{ $product->id }}"
                                                title="Eliminar comisión">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <i class="fas fa-inbox fa-2x text-muted mb-2"></i>
                                    <p class="text-muted">No hay productos que coincidan con los filtros seleccionados.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    Mostrando {{ $products->firstItem() ?? 0 }} a {{ $products->lastItem() ?? 0 }} de {{ $products->total() }} productos
                </div>
                <div>
                    {{ $products->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        // Seleccionar/Deseleccionar todos
        $('#selectAllCheckbox').on('change', function() {
            $('.product-checkbox').prop('checked', $(this).is(':checked'));
            updateSelectedProducts();
        });

        $('.product-checkbox').on('change', function() {
            updateSelectedProducts();
        });

        $('#selectAll').on('click', function() {
            $('.product-checkbox').prop('checked', true);
            $('#selectAllCheckbox').prop('checked', true);
            updateSelectedProducts();
        });

        $('#deselectAll').on('click', function() {
            $('.product-checkbox').prop('checked', false);
            $('#selectAllCheckbox').prop('checked', false);
            updateSelectedProducts();
        });

        function updateSelectedProducts() {
            const selected = $('.product-checkbox:checked').map(function() {
                return $(this).val();
            }).get();
            $('#selected_product_ids').val(JSON.stringify(selected));
        }

        // Mostrar/ocultar campos según la opción seleccionada
        $('#apply_to').on('change', function() {
            const value = $(this).val();
            $('#category_field').hide();
            $('#brand_field').hide();
            $('#bulk_category_id').prop('required', false);
            $('#bulk_brand_id').prop('required', false);

            if (value === 'by_category') {
                $('#category_field').show();
                $('#bulk_category_id').prop('required', true);
            } else if (value === 'by_brand') {
                $('#brand_field').show();
                $('#bulk_brand_id').prop('required', true);
            }
        });

        // Guardar comisión individual
        $('.save-commission').on('click', function() {
            const productId = $(this).data('product-id');
            const input = $(`.commission-input[data-product-id="${productId}"]`);
            const commissionRate = parseFloat(input.val());

            if (isNaN(commissionRate) || commissionRate < 0 || commissionRate > 100) {
                alert('Por favor ingrese un porcentaje válido entre 0 y 100.');
                return;
            }

            $.ajax({
                url: `/admin/commissions/products/${productId}`,
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                data: JSON.stringify({
                    commission_rate: commissionRate
                }),
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        location.reload();
                    } else {
                        alert(response.message || 'Error al guardar la comisión.');
                    }
                },
                error: function(xhr) {
                    const error = xhr.responseJSON?.message || 'Error al guardar la comisión.';
                    alert(error);
                }
            });
        });

        // Eliminar comisión
        $('.remove-commission').on('click', function() {
            if (!confirm('¿Está seguro de eliminar la comisión de este producto?')) {
                return;
            }

            const productId = $(this).data('product-id');

            $.ajax({
                url: `/admin/commissions/products/${productId}/remove`,
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json'
                },
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        location.reload();
                    } else {
                        alert(response.message || 'Error al eliminar la comisión.');
                    }
                },
                error: function(xhr) {
                    const error = xhr.responseJSON?.message || 'Error al eliminar la comisión.';
                    alert(error);
                }
            });
        });

        // Actualizar productos seleccionados al cargar
        updateSelectedProducts();
    });
</script>
@endpush
@endsection