@extends('layouts.app')

@section('title', 'Pago de Comisiones')

@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-money-bill-wave me-2 text-primary"></i>Pago de Comisiones
            </h1>
            <p class="text-muted mb-0 small">Gestionar y procesar pagos de comisiones a vendedores</p>
        </div>
        <div>
            <a href="{{ route('admin.reports.commissions') }}" class="btn btn-info me-2">
                <i class="fas fa-chart-bar me-2"></i>Ver Reporte
            </a>
            <form action="{{ route('admin.gestor.commission-payments.sync-status') }}" method="POST" class="d-inline">
                @csrf
                <button type="submit" class="btn btn-secondary" title="Actualizar estados de comisiones según el estado de las facturas">
                    <i class="fas fa-sync me-2"></i>Actualizar Estados
                </button>
            </form>
        </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 Comisiones</h6>
                    <h4 class="text-primary">{{ number_format($stats['total_commissions'] ?? 0, 0) }}</h4>
                    <small class="text-muted">Registros</small>
                </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">Total Pagable</h6>
                    <h4 class="text-success">${{ number_format($stats['total_payable'] ?? 0, 2) }}</h4>
                    <small class="text-muted">USD</small>
                </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">Total Pagado</h6>
                    <h4 class="text-info">${{ number_format($stats['total_paid'] ?? 0, 2) }}</h4>
                    <small class="text-muted">USD</small>
                </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">Pendiente</h6>
                    <h4 class="text-warning">${{ number_format($stats['total_pending'] ?? 0, 2) }}</h4>
                    <small class="text-muted">USD</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <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-filter me-2"></i>Filtros
            </h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.gestor.commission-payments.index') }}">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Vendedor</label>
                        <select name="salesman_id" class="form-select">
                            <option value="">Todos los vendedores</option>
                            @foreach($salesmen as $salesman)
                                <option value="{{ $salesman->id }}" {{ request('salesman_id') == $salesman->id ? 'selected' : '' }}>
                                    {{ $salesman->first_name }} {{ $salesman->last_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Estado</label>
                        <select name="status" class="form-select">
                            <option value="">Todos los estados</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pendiente</option>
                            <option value="earned" {{ request('status') == 'earned' ? 'selected' : '' }}>Ganada</option>
                            <option value="partial" {{ request('status') == 'partial' ? 'selected' : '' }}>Parcial</option>
                            <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Pagada</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Fecha Desde</label>
                        <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Fecha Hasta</label>
                        <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                    </div>
                </div>
                <div class="row mt-3">
                    <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.gestor.commission-payments.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times me-2"></i>Limpiar
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Formulario de Pago -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 bg-primary text-white">
            <h6 class="m-0 font-weight-bold">
                <i class="fas fa-money-check-alt me-2"></i>Procesar Pago de Comisiones
            </h6>
        </div>
        <div class="card-body">
            <form id="paymentForm" method="POST" action="{{ route('admin.gestor.commission-payments.store') }}">
                @csrf
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Fecha de Pago <span class="text-danger">*</span></label>
                        <input type="date" name="payment_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Método de Pago <span class="text-danger">*</span></label>
                        <select name="payment_method" id="payment_method" class="form-select" required>
                            <option value="bank_transfer">Transferencia Bancaria</option>
                            <option value="cash">Efectivo</option>
                            <option value="check">Cheque</option>
                            <option value="other">Otro</option>
                        </select>
                    </div>
                    <div class="col-md-3" id="bank_account_group">
                        <label class="form-label">Cuenta Bancaria <span class="text-danger">*</span></label>
                        <select name="bank_account_id" id="bank_account_id" class="form-select">
                            <option value="">Seleccione una cuenta</option>
                            @foreach($bankAccounts as $account)
                                <option value="{{ $account->id }}" data-balance="{{ $account->current_balance }}">
                                    {{ $account->account_number }} - {{ $account->bank->name ?? 'N/A' }} (Saldo: ${{ number_format($account->current_balance, 2) }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3" id="petty_cash_group" style="display: none;">
                        <label class="form-label">Caja Chica <span class="text-danger">*</span></label>
                        <select name="petty_cash_account_id" id="petty_cash_account_id" class="form-select">
                            <option value="">Seleccione una cuenta</option>
                            @foreach($pettyCashAccounts as $account)
                                <option value="{{ $account->id }}" data-balance="{{ $account->current_balance }}">
                                    {{ $account->name }} (Saldo: ${{ number_format($account->current_balance, 2) }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Número de Referencia</label>
                        <input type="text" name="reference_number" class="form-control" placeholder="Opcional">
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Notas</label>
                        <textarea name="notes" class="form-control" rows="2" placeholder="Notas adicionales sobre el pago"></textarea>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <button type="submit" class="btn btn-success" id="submitPaymentBtn">
                            <i class="fas fa-check me-2"></i>Procesar Pago
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabla de Comisiones -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list me-2"></i>Comisiones
            </h6>
        </div>
        <div class="card-body">
            <form id="commissionsForm">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th width="50">
                                    <input type="checkbox" id="select_all_commissions">
                                </th>
                                <th>Factura</th>
                                <th>Tipo Doc.</th>
                                <th>Moneda</th>
                                <th>Vendedor</th>
                                <th>Fec. Venta</th>
                                <th>Monto Base (USD)</th>
                                <th>%</th>
                                <th>Comisión (USD)</th>
                                <th>Pagado</th>
                                <th>Pendiente</th>
                                <th>Monto a Pagar</th>
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($commissions as $commission)
                                @php
                                    // Calcular monto pagado directamente desde la relación cargada
                                    // Si la relación está cargada, usar sum() sobre la colección, sino hacer query
                                    if ($commission->relationLoaded('payments')) {
                                        $paidAmount = $commission->payments->sum('amount');
                                    } else {
                                        $paidAmount = $commission->payments()->sum('amount');
                                    }
                                    $remainingAmount = $commission->commission_amount_usd - $paidAmount;
                                    $canPay = $remainingAmount > 0 && in_array($commission->status, ['earned', 'pending', 'partial']);
                                @endphp
                                <tr>
                                    <td>
                                        @if($canPay)
                                            <input type="checkbox" 
                                                   name="commission_ids[]" 
                                                   class="commission-checkbox" 
                                                   value="{{ $commission->id }}"
                                                   data-amount="{{ $remainingAmount }}"
                                                   data-commission-id="{{ $commission->id }}">
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('admin.sales.invoices.show', $commission->sales_invoice_id) }}" target="_blank">
                                            {{ $commission->salesInvoice->invoice_number ?? 'N/A' }}
                                        </a>
                                    </td>
                                    <td>
                                        @if($commission->document_type === 'invoice')
                                            <span class="badge bg-success">Factura</span>
                                        @else
                                            <span class="badge bg-info">Nota</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($commission->sale_currency)
                                            <span class="badge bg-secondary">{{ strtoupper($commission->sale_currency) }}</span>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </td>
                                    <td>{{ $commission->salesman->first_name ?? '' }} {{ $commission->salesman->last_name ?? '' }}</td>
                                    <td>{{ $commission->invoice_date ? $commission->invoice_date->format('d/m/Y') : 'N/A' }}</td>
                                    <td>
                                        ${{ number_format($commission->commissionable_amount_usd, 2) }}
                                        @if($commission->commissionable_base)
                                            <br><small class="text-muted">
                                                Base: {{ $commission->commissionable_base === 'subtotal' ? 'Subtotal' : 'Total' }}
                                            </small>
                                        @endif
                                    </td>
                                    <td>{{ number_format($commission->commission_rate_applied, 2) }}%</td>
                                    <td><strong>${{ number_format($commission->commission_amount_usd, 2) }}</strong></td>
                                    <td>${{ number_format($paidAmount, 2) }}</td>
                                    <td>
                                        @if($remainingAmount > 0)
                                            <strong class="text-warning">${{ number_format($remainingAmount, 2) }}</strong>
                                        @else
                                            <span class="text-success">$0.00</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($canPay)
                                            <input type="number" 
                                                   step="0.01" 
                                                   min="0.01" 
                                                   max="{{ $remainingAmount }}"
                                                   class="form-control form-control-sm payment-amount-input" 
                                                   name="payment_amounts[{{ $commission->id }}]"
                                                   value="{{ $remainingAmount }}"
                                                   data-commission-id="{{ $commission->id }}"
                                                   data-max-amount="{{ $remainingAmount }}"
                                                   disabled
                                                   style="width: 120px;">
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @php
                                            $invoice = $commission->salesInvoice;
                                            $isInvoicePaid = $invoice && ($invoice->amount_due ?? $invoice->total_amount_usd ?? 0) <= 0.01;
                                            $isOverdue = $commission->isOverdue();
                                            
                                            // Determinar el estado a mostrar
                                            $displayStatus = $commission->status;
                                            $displayText = $commission->status_text;
                                            $displayColor = $commission->status_color;
                                            
                                            // Determinar el texto del tooltip
                                            $tooltipText = '';
                                            if ($isOverdue && $commission->status === 'pending') {
                                                $displayStatus = 'overdue';
                                                $displayText = 'Fuera de Tiempo';
                                                $displayColor = 'danger';
                                                $tooltipText = 'Comisión fuera de tiempo - La factura excedió el límite de ' . ($commission->payment_days_limit ?? 30) . ' días sin pagarse';
                                            } elseif (!$isInvoicePaid && $commission->status === 'pending') {
                                                $displayText = 'En Espera';
                                                $tooltipText = 'En espera - La factura aún no está pagada';
                                            }
                                        @endphp
                                        <span class="badge bg-{{ $displayColor }}" @if($tooltipText) title="{{ $tooltipText }}" @endif>
                                            {{ $displayText }}
                                        </span>
                                        @if($isOverdue && $commission->status === 'pending')
                                            <br><small class="text-danger"><i class="fas fa-exclamation-triangle"></i> Fuera de tiempo</small>
                                        @elseif(!$isInvoicePaid && $commission->status === 'pending')
                                            <br><small class="text-warning"><i class="fas fa-clock"></i> Factura pendiente</small>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="13" class="text-center py-5">
                                        <div class="empty-state">
                                            <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
                                            <h5 class="text-muted">No hay comisiones disponibles</h5>
                                            <p class="text-muted">No se encontraron comisiones que cumplan con los filtros seleccionados.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </form>

            <!-- Paginación -->
            <div class="mt-3">
                {{ $commissions->links() }}
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const paymentMethod = document.getElementById('payment_method');
    const bankAccountGroup = document.getElementById('bank_account_group');
    const pettyCashGroup = document.getElementById('petty_cash_group');
    const bankAccountSelect = document.getElementById('bank_account_id');
    const pettyCashSelect = document.getElementById('petty_cash_account_id');
    const paymentForm = document.getElementById('paymentForm');
    const selectAllCheckbox = document.getElementById('select_all_commissions');
    const commissionCheckboxes = document.querySelectorAll('.commission-checkbox');
    const submitBtn = document.getElementById('submitPaymentBtn');

    // Toggle entre banco y caja chica según método de pago
    paymentMethod.addEventListener('change', function() {
        if (this.value === 'cash') {
            bankAccountGroup.style.display = 'none';
            pettyCashGroup.style.display = 'block';
            bankAccountSelect.removeAttribute('required');
            pettyCashSelect.setAttribute('required', 'required');
        } else {
            bankAccountGroup.style.display = 'block';
            pettyCashGroup.style.display = 'none';
            pettyCashSelect.removeAttribute('required');
            bankAccountSelect.setAttribute('required', 'required');
        }
    });

    // Seleccionar todas las comisiones
    selectAllCheckbox.addEventListener('change', function() {
        commissionCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateSubmitButton();
    });

    // Actualizar botón de envío cuando se seleccionan comisiones
    commissionCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateSubmitButton();
            // Habilitar/deshabilitar el input de monto según el checkbox
            const commissionId = this.dataset.commissionId || this.value;
            const amountInput = document.querySelector(`input[name="payment_amounts[${commissionId}]"]`);
            if (amountInput) {
                amountInput.disabled = !this.checked;
            }
        });
    });

    // Validar inputs de monto a pagar
    document.querySelectorAll('.payment-amount-input').forEach(input => {
        input.addEventListener('change', function() {
            const maxAmount = parseFloat(this.dataset.maxAmount || 0);
            const currentValue = parseFloat(this.value || 0);
            
            if (currentValue > maxAmount) {
                alert(`El monto a pagar no puede ser mayor al pendiente ($${maxAmount.toFixed(2)})`);
                this.value = maxAmount;
            } else if (currentValue <= 0) {
                alert('El monto a pagar debe ser mayor a cero');
                this.value = maxAmount;
            }
            
            updateSubmitButton();
        });
    });

    function updateSubmitButton() {
        const selected = document.querySelectorAll('.commission-checkbox:checked');
        if (selected.length > 0) {
            submitBtn.disabled = false;
            submitBtn.textContent = `Procesar Pago (${selected.length} comisión(es))`;
        } else {
            submitBtn.disabled = true;
            submitBtn.textContent = 'Procesar Pago';
        }
    }

    // Validar formulario antes de enviar
    paymentForm.addEventListener('submit', function(e) {
        const selected = document.querySelectorAll('.commission-checkbox:checked');
        if (selected.length === 0) {
            e.preventDefault();
            alert('Por favor, seleccione al menos una comisión para pagar.');
            return false;
        }

        // Habilitar temporalmente los inputs deshabilitados para que se envíen
        const disabledInputs = document.querySelectorAll('.payment-amount-input:disabled');
        disabledInputs.forEach(input => {
            input.disabled = false;
        });

        // Agregar las comisiones seleccionadas al formulario
        selected.forEach(checkbox => {
            const commissionId = checkbox.dataset.commissionId || checkbox.value;
            
            // Agregar commission_id
            const commissionInput = document.createElement('input');
            commissionInput.type = 'hidden';
            commissionInput.name = 'commission_ids[]';
            commissionInput.value = checkbox.value;
            paymentForm.appendChild(commissionInput);

            // Asegurar que el payment_amount esté en el formulario
            const amountInput = document.querySelector(`input[name="payment_amounts[${commissionId}]"]`);
            if (amountInput) {
                // Habilitar temporalmente si está deshabilitado
                if (amountInput.disabled) {
                    amountInput.disabled = false;
                }
                // Asegurar que el valor sea válido
                const amountToPay = parseFloat(amountInput.value) || 0;
                const maxAmount = parseFloat(checkbox.dataset.amount || 0);
                
                // Validar que el monto no exceda el máximo
                if (amountToPay > maxAmount) {
                    console.warn(`Monto ${amountToPay} excede el máximo ${maxAmount}, ajustando...`);
                    amountInput.value = maxAmount;
                } else if (amountToPay <= 0) {
                    // Si el monto es 0 o inválido, usar el pendiente completo
                    console.warn(`Monto ${amountToPay} es inválido, usando máximo ${maxAmount}`);
                    amountInput.value = maxAmount;
                }
                
                // Log para debugging
                console.log(`Comisión ${commissionId}: Monto a pagar = ${amountInput.value}, Máximo = ${maxAmount}`);
            } else {
                // Si no existe el input, crearlo con el valor del dataset
                const newAmountInput = document.createElement('input');
                newAmountInput.type = 'hidden';
                newAmountInput.name = `payment_amounts[${commissionId}]`;
                newAmountInput.value = checkbox.dataset.amount || 0;
                paymentForm.appendChild(newAmountInput);
                console.log(`Input creado para comisión ${commissionId} con valor ${newAmountInput.value}`);
            }
        });

        // Calcular monto total desde los inputs de monto a pagar
        let totalAmount = 0;
        selected.forEach(checkbox => {
            const commissionId = checkbox.dataset.commissionId || checkbox.value;
            const amountInput = document.querySelector(`input[name="payment_amounts[${commissionId}]"]`);
            if (amountInput) {
                const amountToPay = parseFloat(amountInput.value) || 0;
                if (amountToPay > 0) {
                    totalAmount += amountToPay;
                }
            } else {
                // Fallback: usar el monto pendiente completo
                totalAmount += parseFloat(checkbox.dataset.amount || 0);
            }
        });

        // Verificar saldo
        const paymentMethodValue = paymentMethod.value;
        let accountBalance = 0;
        
        if (paymentMethodValue === 'cash') {
            const selectedPettyCash = pettyCashSelect.options[pettyCashSelect.selectedIndex];
            if (selectedPettyCash && selectedPettyCash.dataset.balance) {
                accountBalance = parseFloat(selectedPettyCash.dataset.balance);
            }
        } else {
            const selectedBank = bankAccountSelect.options[bankAccountSelect.selectedIndex];
            if (selectedBank && selectedBank.dataset.balance) {
                accountBalance = parseFloat(selectedBank.dataset.balance);
            }
        }

        if (accountBalance < totalAmount) {
            e.preventDefault();
            alert(`Saldo insuficiente. Saldo disponible: $${accountBalance.toFixed(2)}. Monto requerido: $${totalAmount.toFixed(2)}`);
            return false;
        }

        // Confirmar antes de enviar
        if (!confirm(`¿Está seguro de procesar el pago de ${selected.length} comisión(es) por un total de $${totalAmount.toFixed(2)} USD?`)) {
            e.preventDefault();
            return false;
        }
    });

    // Inicializar estado del botón y deshabilitar inputs inicialmente
    updateSubmitButton();
    
    // Deshabilitar todos los inputs de monto inicialmente
    document.querySelectorAll('.payment-amount-input').forEach(input => {
        input.disabled = true;
    });
});
</script>
@endpush
@endsection