@extends('layouts.app')

@section('title', 'Detalles de Cuenta por Cobrar')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-money-bill-wave mr-2"></i>
                            Cuenta por Cobrar: {{ $account->account_number }}
                        </h3>
                        <div>
                            <a href="{{ route('admin.sales.accounts-receivable.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left mr-1"></i>
                                Volver
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    {{-- Mensajes de éxito y error --}}
                    @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" aria-label="Close"></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" aria-label="Close"></button>
                        </div>
                    @endif

                    {{-- Notificación WhatsApp --}}
                    @if(session('whatsapp_link'))
                        <div class="alert alert-info alert-dismissible fade show d-flex justify-content-between align-items-center" role="alert">
                            <div>
                                <i class="fab fa-whatsapp me-2"></i>
                                <span>¡El pago fue registrado! ¿Quieres notificar al cliente por WhatsApp?</span>
                            </div>
                            <a href="{{ session('whatsapp_link') }}" target="_blank" class="btn btn-success btn-sm ms-3">
                                <i class="fab fa-whatsapp me-1"></i> Enviar Notificación por WhatsApp
                            </a>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <!-- Información de la cuenta -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6>Información de la Cuenta</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6"><strong>Número:</strong></div>
                                        <div class="col-6">{{ $account->account_number ?? 'AR-' . str_pad($account->id ?? 0, 6, '0', STR_PAD_LEFT) }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6"><strong>Fecha:</strong></div>
                                        <div class="col-6">{{ $account->invoice_date ? $account->invoice_date->format('d/m/Y') : ($account->created_at ? $account->created_at->format('d/m/Y') : 'N/A') }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6"><strong>Vencimiento:</strong></div>
                                        <div class="col-6">{{ $account->due_date ? $account->due_date->format('d/m/Y') : 'N/A' }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6"><strong>Estado:</strong></div>
                                        <div class="col-6">
                                            @php
                                                $statusClasses = [
                                                    'pending' => 'badge-warning',
                                                    'partial' => 'badge-primary',
                                                    'paid' => 'badge-success',
                                                    'overdue' => 'badge-danger',
                                                    'cancelled' => 'badge-dark'
                                                ];
                                                $statusLabels = [
                                                    'pending' => 'Pendiente',
                                                    'partial' => 'Pago Parcial',
                                                    'paid' => 'Pagado',
                                                    'overdue' => 'Vencido',
                                                    'cancelled' => 'Cancelado'
                                                ];
                                                $status = $account->status ?? 'pending';
                                            @endphp
                                            <span class="badge {{ $statusClasses[$status] ?? 'badge-secondary' }}">
                                                {{ $statusLabels[$status] ?? ucfirst($status) }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6"><strong>Monto Original:</strong></div>
                                        <div class="col-6">{{ $account->currency ?? 'USD' }} {{ number_format($account->original_amount, 2) }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6"><strong>Saldo Actual:</strong></div>
                                        <div class="col-6"><strong>${{ number_format($account->current_balance ?? 0, 2) }} USD</strong></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6"><strong>Moneda:</strong></div>
                                        <div class="col-6">{{ $account->currency ?? 'USD' }}</div>
                                    </div>
                                    @if($account->salesInvoice)
                                    <div class="row">
                                        <div class="col-6"><strong>Factura:</strong></div>
                                        <div class="col-6">
                                            <a href="{{ route('admin.sales.invoices.show', $account->salesInvoice) }}">
                                                {{ $account->salesInvoice->invoice_number }}
                                            </a>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h6>Información del Cliente</h6>
                                </div>
                                <div class="card-body">
                                    @if($account->client)
                                        <div class="row">
                                            <div class="col-6"><strong>Empresa:</strong></div>
                                            <div class="col-6">{{ $account->client->business_name }}</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6"><strong>NIT:</strong></div>
                                            <div class="col-6">{{ $account->client->tax_id ?? 'N/A' }}</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6"><strong>Teléfono:</strong></div>
                                            <div class="col-6">{{ $account->client->phone ?? 'N/A' }}</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6"><strong>Email:</strong></div>
                                            <div class="col-6">{{ $account->client->email ?? 'N/A' }}</div>
                                        </div>
                                    @else
                                        <div class="alert alert-warning">Cliente no encontrado</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Resumen financiero -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-success"><i class="fas fa-dollar-sign"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Monto Original</span>
                                    <span class="info-box-number">{{ $account->currency ?? 'USD' }} {{ number_format($account->original_amount, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-warning"><i class="fas fa-exclamation-triangle"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Saldo Actual</span>
                                    <span class="info-box-number">${{ number_format($account->current_balance ?? 0, 2) }} USD</span>
                                    <small class="text-muted d-block">Saldo Pendiente</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-info"><i class="fas fa-hand-holding-usd"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Total Pagado</span>
                                    <span class="info-box-number">{{ $account->currency ?? 'USD' }} {{ number_format($account->total_paid ?? 0, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-primary"><i class="fas fa-percentage"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Descuentos</span>
                                    <span class="info-box-number">{{ $account->currency ?? 'USD' }} {{ number_format($account->discount_amount ?? 0, 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Historial de pagos -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h5>Historial de Pagos</h5>
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th>Fecha</th>
                                            <th>Monto</th>
                                            <th>Método</th>
                                            <th>Bancos</th>
                                            <th>Referencia</th>
                                            <th>Notas</th>
                                            <th>Registrado por</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse(($account->payments ?? collect()) as $payment)
                                            @php
                                                $amountVEF = $payment->payment_amount_original ?? null;
                                                $amountUSD = $payment->payment_amount ?? 0;
                                                $hasBanks = !empty($payment->issuing_bank_name) || !empty($payment->receiving_bank_name);
                                                // Genera el enlace WhatsApp para este pago específico
                                                $waLink = null;
                                                try {
                                                    $waLink = (new \App\Services\PaymentNotificationService())->generateWhatsAppLink($payment);
                                                } catch (\Exception $e) {
                                                    // Silenciar errores al generar enlace
                                                }
                                            @endphp
                                            <tr>
                                                <td>{{ $payment->payment_date ? (\Carbon\Carbon::parse($payment->payment_date)->format('d/m/Y')) : 'N/A' }}</td>
                                                <td>
                                                    <strong class="text-success">${{ number_format($amountUSD, 2) }}</strong>
                                                    @if($amountVEF)
                                                        <br><small class="text-muted">{{ number_format($amountVEF, 2) }} VEF</small>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="badge badge-info">{{ $payment->payment_method_text ?? ucfirst($payment->payment_method ?? 'N/A') }}</span>
                                                </td>
                                                <td>
                                                    @if($hasBanks)
                                                        @if($payment->issuing_bank_name)
                                                            <small><strong>Emisor:</strong> {{ $payment->issuing_bank_name }}</small><br>
                                                        @endif
                                                        @if($payment->receiving_bank_name)
                                                            <small><strong>Receptor:</strong> {{ $payment->receiving_bank_name }}</small>
                                                        @endif
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td>{{ $payment->payment_reference_number ?? $payment->payment_reference ?? $payment->reference ?? 'N/A' }}</td>
                                                <td>{{ Str::limit($payment->notes ?? 'N/A', 50) }}</td>
                                                <td>{{ ($payment->createdBy->name ?? $payment->receivedBy->name ?? 'N/A') }}</td>
                                                <td>
                                                    @if($waLink)
                                                        <a href="{{ $waLink }}" target="_blank" class="btn btn-sm btn-success" title="Notificar por WhatsApp">
                                                            <i class="fab fa-whatsapp"></i>
                                                        </a>
                                                    @else
                                                        <span class="text-muted small">-</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="8" class="text-center text-muted">No hay pagos registrados</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Historial de descuentos -->
                    @if(($account->discounts ?? collect())->count() > 0)
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5>Historial de Descuentos</h5>
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>Fecha</th>
                                                <th>Monto</th>
                                                <th>Porcentaje</th>
                                                <th>Motivo</th>
                                                <th>Aplicado por</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($account->discounts as $discount)
                                                <tr>
                                                    <td>{{ $discount->applied_date ? (\Carbon\Carbon::parse($discount->applied_date)->format('d/m/Y')) : 'N/A' }}</td>
                                                    <td>${{ number_format($discount->discount_amount ?? $discount->amount ?? 0, 2) }}</td>
                                                    <td>{{ $discount->discount_percentage ?? $discount->percentage ? number_format($discount->discount_percentage ?? $discount->percentage, 2) . '%' : 'N/A' }}</td>
                                                    <td>{{ $discount->description ?? $discount->reason ?? 'N/A' }}</td>
                                                    <td>{{ ($discount->appliedBy->name ?? $discount->createdBy->name ?? 'N/A') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Historial de penalizaciones -->
                    @if(($account->penalties ?? collect())->count() > 0)
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5>Historial de Penalizaciones</h5>
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>Fecha</th>
                                                <th>Monto</th>
                                                <th>Porcentaje</th>
                                                <th>Motivo</th>
                                                <th>Aplicado por</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($account->penalties as $penalty)
                                                <tr>
                                                    <td>{{ $penalty->applied_date ? (\Carbon\Carbon::parse($penalty->applied_date)->format('d/m/Y')) : 'N/A' }}</td>
                                                    <td>${{ number_format($penalty->penalty_amount ?? $penalty->amount ?? 0, 2) }}</td>
                                                    <td>{{ $penalty->penalty_percentage ?? $penalty->percentage ? number_format($penalty->penalty_percentage ?? $penalty->percentage, 2) . '%' : 'N/A' }}</td>
                                                    <td>{{ $penalty->description ?? $penalty->reason ?? 'N/A' }}</td>
                                                    <td>{{ ($penalty->appliedBy->name ?? $penalty->createdBy->name ?? 'N/A') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="card-footer">
                    <div class="d-flex justify-content-between">
                        <div>
                            @if($account->status !== 'paid')
                                <button type="button" class="btn btn-success" onclick="addPayment()">
                                    <i class="fas fa-plus mr-1"></i>
                                    Agregar Pago
                                </button>
                                <button type="button" class="btn btn-warning mr-2" onclick="addDiscount()">
                                    <i class="fas fa-percentage mr-1"></i>
                                    Agregar Descuento
                                </button>
                                <button type="button" class="btn btn-danger" onclick="addPenalty()">
                                    <i class="fas fa-exclamation-triangle mr-1"></i>
                                    Agregar Penalización
                                </button>
                            @endif
                        </div>
                        <div>
                            <button type="button" class="btn btn-info" onclick="printAccount()">
                                <i class="fas fa-print mr-1"></i>
                                Imprimir
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para agregar pago -->
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="paymentModalLabel">
                    <i class="fas fa-money-bill-wave mr-2"></i>Agregar Pago
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="paymentForm" method="POST">
                @csrf
                <div class="modal-body">
                    <!-- Método de Pago -->
                    <div class="form-group">
                        <label for="payment_method" class="font-weight-bold">Forma de Pago <span class="text-danger">*</span></label>
                        <select class="form-control" id="payment_method" name="payment_method" required>
                            <option value="">Seleccionar método</option>
                            <option value="efectivo">Efectivo</option>
                            <option value="transferencia">Transferencia</option>
                            <option value="pago_movil">Pago Móvil</option>
                            <option value="cheque">Cheque</option>
                            <option value="tarjeta">Tarjeta</option>
                        </select>
                    </div>

                    <!-- Moneda del Pago (solo para Efectivo y Transferencia) -->
                    <div id="currency-fields" style="display: none;">
                        <div class="form-group">
                            <label for="payment_currency" class="font-weight-bold">Moneda del Pago <span class="text-danger">*</span></label>
                            <select class="form-control" id="payment_currency" name="payment_currency">
                                <option value="VEF">VEF (Bolívares)</option>
                                <option value="USD">USD (Dólares)</option>
                            </select>
                            <small class="form-text text-muted" id="currency-help"></small>
                        </div>
                    </div>

                    <!-- Campo para Tasa Real del Día de Pago (mostrar solo cuando la moneda es VEF) -->
                    <div id="rate-real-field" style="display: none;">
                        <div class="form-group">
                            <label for="tasa_pago_real" class="font-weight-bold">Tasa Real del Día de Pago <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">1 USD =</span>
                                </div>
                                <input type="number" step="0.01" class="form-control" id="tasa_pago_real" name="tasa_pago_real" 
                                       placeholder="{{ number_format($rateReal ?? 1, 2) }}" 
                                       value="{{ number_format($rateReal ?? 1, 2) }}" required>
                                <div class="input-group-append">
                                    <span class="input-group-text">VEF</span>
                                </div>
                            </div>
                            <small class="form-text text-info">
                                <i class="fas fa-info-circle"></i> Ingrese la tasa real a la cual se compraron los USD el día del pago.
                                Esta tasa se usará para calcular el equivalente en USD que se aplicará al saldo.
                            </small>
                        </div>
                    </div>

                    <!-- Campos para Transferencia y Pago Móvil -->
                    <div id="bank-fields" style="display: none;">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="issuing_bank_id" class="font-weight-bold">Banco Emisor <span class="text-danger">*</span></label>
                                    <select class="form-control" id="issuing_bank_id" name="issuing_bank_id">
                                        <option value="">Seleccionar banco emisor</option>
                                        @foreach($banks ?? [] as $bank)
                                            <option value="{{ $bank->id }}">{{ $bank->name }} ({{ $bank->code }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="receiving_bank_id" class="font-weight-bold">Banco Receptor <span class="text-danger">*</span></label>
                                    <select class="form-control" id="receiving_bank_id" name="receiving_bank_id">
                                        <option value="">Seleccionar banco receptor</option>
                                        @foreach($banks ?? [] as $bank)
                                            <option value="{{ $bank->id }}">{{ $bank->name }} ({{ $bank->code }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Referencia -->
                    <div class="form-group">
                        <label for="reference" class="font-weight-bold">Referencia</label>
                        <input type="text" class="form-control" id="reference" name="reference" placeholder="Número de referencia del pago">
                    </div>

                    <!-- Monto del Pago -->
                    <div class="form-group">
                        <label for="payment_amount" class="font-weight-bold">Monto del Pago <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="currency-label">VEF</span>
                            </div>
                            <input type="number" step="0.01" class="form-control" id="payment_amount" name="payment_amount" placeholder="0.00" required>
                        </div>
                        <small class="form-text text-muted" id="amount-help">Ingrese el monto pagado</small>
                    </div>

                    <!-- Información de Tasas y Cálculo -->
                    <div class="alert alert-info" id="calculation-info" style="display: none;">
                        <div class="row mb-2">
                            <div class="col-md-4">
                                <strong>Tasa Legal:</strong><br>
                                <span id="rate_legal_display">1 USD = {{ number_format($rateLegal ?? 1, 4) }} VEF</span>
                            </div>
                            <div class="col-md-4">
                                <strong>Tasa Real:</strong><br>
                                <span id="rate_real_display">1 USD = {{ number_format($rateReal ?? 1, 4) }} VEF</span>
                            </div>
                            <div class="col-md-4">
                                <strong>Monto Real USD (Entrando):</strong><br>
                                <span class="h5 text-success" id="real_usd_display">$0.00</span>
                                <br><small class="text-muted">Basado en: Factura ${{ number_format($invoiceAmountUSD ?? 0, 2) }}<br>
                                <em>(Referencial: (Factura × Tasa Real) / Tasa Legal)</em></small>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <strong>Monto a Aplicar USD (Tasa Real):</strong><br>
                                <span class="h5 text-primary" id="equivalent_usd_display">$0.00</span>
                                <br><small class="text-info"><em>Este es el monto que se guardará para reportes y contables</em></small>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted">
                                    <strong>Fórmula:</strong> Monto Real USD = Monto Pagado VEF / Tasa Real<br>
                                    <em>(La tasa real es la tasa a la que realmente compramos los USD para reportes y contables)</em>
                                </small>
                            </div>
                        </div>
                    </div>

                    <!-- Campos ocultos -->
                    <input type="hidden" id="payment_amount_usd" name="payment_amount_usd" value="0">
                    <input type="hidden" id="payment_currency_hidden" name="payment_currency_hidden" value="VEF">
                    <input type="hidden" id="exchange_rate_legal" name="exchange_rate_legal" value="{{ $rateLegal ?? 1 }}">
                    <input type="hidden" id="exchange_rate_real" name="exchange_rate_real" value="{{ $rateReal ?? 1 }}">

                    <!-- Fecha del Pago -->
                    <div class="form-group">
                        <label for="payment_date" class="font-weight-bold">Fecha del Pago <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="payment_date" name="payment_date" required>
                    </div>

                    <!-- Notas -->
                    <div class="form-group">
                        <label for="notes">Notas</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="Información adicional sobre el pago"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times mr-1"></i>Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-check mr-1"></i>Agregar Pago
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para agregar descuento -->
<div class="modal fade" id="discountModal" tabindex="-1" aria-labelledby="discountModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title" id="discountModalLabel">
                    <i class="fas fa-percentage mr-2"></i>Agregar Descuento
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="discountForm" method="POST">
                @csrf
                <div class="modal-body">
                    <!-- Monto del Descuento -->
                    <div class="form-group">
                        <label for="discount_amount" class="font-weight-bold">Monto del Descuento (USD) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">$</span>
                            </div>
                            <input type="number" step="0.01" class="form-control" id="discount_amount" name="discount_amount" placeholder="0.00" required>
                        </div>
                        <small class="form-text text-muted">Ingrese el monto del descuento en USD</small>
                    </div>

                    <!-- Porcentaje del Descuento (opcional) -->
                    <div class="form-group">
                        <label for="discount_percentage" class="font-weight-bold">Porcentaje del Descuento (%)</label>
                        <div class="input-group">
                            <input type="number" step="0.01" class="form-control" id="discount_percentage" name="discount_percentage" placeholder="0.00" min="0" max="100">
                            <div class="input-group-append">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>
                        <small class="form-text text-muted">Opcional: Ingrese el porcentaje del descuento</small>
                    </div>

                    <!-- Motivo del Descuento -->
                    <div class="form-group">
                        <label for="discount_reason" class="font-weight-bold">Motivo del Descuento <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="discount_reason" name="discount_reason" placeholder="Ej: Descuento por pronto pago" required>
                    </div>

                    <!-- Fecha del Descuento -->
                    <div class="form-group">
                        <label for="discount_date" class="font-weight-bold">Fecha del Descuento <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="discount_date" name="discount_date" required>
                    </div>

                    <!-- Notas -->
                    <div class="form-group">
                        <label for="discount_notes">Notas</label>
                        <textarea class="form-control" id="discount_notes" name="notes" rows="3" placeholder="Información adicional sobre el descuento"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times mr-1"></i>Cancelar
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-check mr-1"></i>Agregar Descuento
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para agregar penalización -->
<div class="modal fade" id="penaltyModal" tabindex="-1" aria-labelledby="penaltyModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="penaltyModalLabel">
                    <i class="fas fa-exclamation-triangle mr-2"></i>Agregar Penalización
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="penaltyForm" method="POST">
                @csrf
                <div class="modal-body">
                    <!-- Monto de la Penalización -->
                    <div class="form-group">
                        <label for="penalty_amount" class="font-weight-bold">Monto de la Penalización (USD) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">$</span>
                            </div>
                            <input type="number" step="0.01" class="form-control" id="penalty_amount" name="penalty_amount" placeholder="0.00" required>
                        </div>
                        <small class="form-text text-muted">Ingrese el monto de la penalización en USD</small>
                    </div>

                    <!-- Porcentaje de la Penalización (opcional) -->
                    <div class="form-group">
                        <label for="penalty_percentage" class="font-weight-bold">Porcentaje de la Penalización (%)</label>
                        <div class="input-group">
                            <input type="number" step="0.01" class="form-control" id="penalty_percentage" name="penalty_percentage" placeholder="0.00" min="0" max="100">
                            <div class="input-group-append">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>
                        <small class="form-text text-muted">Opcional: Ingrese el porcentaje de la penalización</small>
                    </div>

                    <!-- Motivo de la Penalización -->
                    <div class="form-group">
                        <label for="penalty_reason" class="font-weight-bold">Motivo de la Penalización <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="penalty_reason" name="penalty_reason" placeholder="Ej: Penalización por pago tardío" required>
                    </div>

                    <!-- Fecha de la Penalización -->
                    <div class="form-group">
                        <label for="penalty_date" class="font-weight-bold">Fecha de la Penalización <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="penalty_date" name="penalty_date" required>
                    </div>

                    <!-- Notas -->
                    <div class="form-group">
                        <label for="penalty_notes">Notas</label>
                        <textarea class="form-control" id="penalty_notes" name="notes" rows="3" placeholder="Información adicional sobre la penalización"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times mr-1"></i>Cancelar
                    </button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-check mr-1"></i>Agregar Penalización
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Estilos específicos para este modal - se aplican después del CSS global */
    #paymentModal {
        z-index: 9999 !important;
    }
    
    #paymentModal .modal-dialog {
        z-index: 10000 !important;
        max-height: 90vh !important;
        margin: 1.75rem auto !important;
    }
    
    #paymentModal .modal-content {
        z-index: 10001 !important;
        max-height: 90vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #paymentModal .modal-body {
        overflow-y: auto !important;
        max-height: calc(90vh - 200px) !important;
        padding: 1.5rem !important;
    }
    
    #paymentModal .modal-header {
        flex-shrink: 0 !important;
    }
    
    #paymentModal .modal-footer {
        flex-shrink: 0 !important;
        border-top: 1px solid #dee2e6 !important;
        padding: 1rem !important;
    }
    
    /* Asegurar que el scroll funcione correctamente */
    #paymentModal .modal-dialog-scrollable .modal-body {
        overflow-y: auto !important;
    }
    
    /* Estilos para los otros modales también */
    #discountModal .modal-dialog,
    #penaltyModal .modal-dialog {
        max-height: 90vh !important;
    }
    
    #discountModal .modal-content,
    #penaltyModal .modal-content {
        max-height: 90vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #discountModal .modal-body,
    #penaltyModal .modal-body {
        overflow-y: auto !important;
        max-height: calc(90vh - 200px) !important;
    }
</style>
@endpush

@push('scripts')
<script>
@php
    $accountId = isset($account) && $account ? $account->id : null;
    $rateLegalValue = $rateLegal ?? 1;
    $rateRealValue = $rateReal ?? 1;
    // Monto de la factura en USD (original_amount es el monto a cobrar en USD)
    $invoiceAmountUSD = $account->original_amount ?? 0;
@endphp
@if($accountId)
const ACCOUNT_ID = {{ $accountId }};
const RATE_LEGAL = {{ $rateLegalValue }};
const RATE_REAL = {{ $rateRealValue }};
const INVOICE_AMOUNT_USD = {{ $invoiceAmountUSD }};

// Obtener saldo pendiente desde el DOM
const CURRENT_BALANCE_USD = parseFloat('{{ $account->current_balance ?? 0 }}') || 0;

function addPayment() {
    document.getElementById('paymentForm').action = '/admin/sales/accounts-receivable/' + ACCOUNT_ID + '/add-payment';
    document.getElementById('payment_date').value = new Date().toISOString().split('T')[0];
    
    // Limpiar campos
    $('#payment_method').val('');
    $('#payment_currency').val('VEF');
    $('#payment_amount').val('');
    $('#tasa_pago_real').val(RATE_REAL.toFixed(2)); // Resetear a tasa real por defecto
    $('#reference').val('');
    $('#notes').val('');
    $('#issuing_bank_id').val('');
    $('#receiving_bank_id').val('');
    $('#bank-fields').hide();
    $('#currency-fields').hide();
    $('#rate-real-field').hide();
    $('#calculation-info').hide();
    $('#equivalent_usd_display').text('$0.00');
    $('#real_usd_display').text('$0.00');
    $('#payment_amount_usd').val('0');
    updateCurrencyLabel();
    
    // Usar Bootstrap 5 Modal API
    const paymentModalElement = document.getElementById('paymentModal');
    
    // Asegurar que el modal esté en el body para evitar problemas de z-index
    if (paymentModalElement && paymentModalElement.parentElement !== document.body) {
        document.body.appendChild(paymentModalElement);
    }
    
    const paymentModal = new bootstrap.Modal(paymentModalElement, {
        backdrop: 'static',
        keyboard: false
    });
    
    // Forzar z-index antes de mostrar
    if (paymentModalElement) {
        paymentModalElement.style.zIndex = '9999';
        paymentModalElement.style.position = 'fixed';
    }
    
    paymentModal.show();
    
    // Asegurar z-index después de mostrar (con un pequeño delay para que Bootstrap termine su animación)
    setTimeout(function() {
        if (paymentModalElement) {
            paymentModalElement.style.zIndex = '9999';
        }
        const backdrop = document.querySelector('.modal-backdrop');
        if (backdrop) {
            backdrop.style.zIndex = '9998';
            backdrop.style.position = 'fixed';
        }
    }, 150);
}

// Actualizar etiqueta de moneda
function updateCurrencyLabel() {
    const currency = $('#payment_currency').val() || 'VEF';
    $('#currency-label').text(currency);
    $('#payment_currency_hidden').val(currency);
}

// Mostrar/ocultar campos según método de pago
$(document).on('change', '#payment_method', function() {
    const method = $(this).val();
    
    // Mostrar/ocultar campos de banco
    if (method === 'transferencia' || method === 'pago_movil') {
        $('#bank-fields').show();
        $('#issuing_bank_id').prop('required', true);
        $('#receiving_bank_id').prop('required', true);
        
        // Pago móvil solo VEF, transferencia puede ser VEF o USD
        if (method === 'pago_movil') {
            $('#currency-fields').hide();
            $('#payment_currency').val('VEF');
            $('#currency-help').text('Pago Móvil solo acepta VEF');
            $('#rate-real-field').show();
            $('#tasa_pago_real').prop('required', true);
        } else {
            $('#currency-fields').show();
            $('#currency-help').text('Seleccione la moneda de la transferencia');
            // Mostrar tasa real solo si selecciona VEF
            if ($('#payment_currency').val() === 'VEF') {
                $('#rate-real-field').show();
                $('#tasa_pago_real').prop('required', true);
            }
        }
    } else if (method === 'efectivo') {
        $('#bank-fields').hide();
        $('#issuing_bank_id').prop('required', false);
        $('#receiving_bank_id').prop('required', false);
        $('#issuing_bank_id').val('');
        $('#receiving_bank_id').val('');
        $('#currency-fields').show();
        $('#currency-help').text('Seleccione si el efectivo es en VEF o USD');
        // Mostrar tasa real solo si selecciona VEF
        if ($('#payment_currency').val() === 'VEF') {
            $('#rate-real-field').show();
            $('#tasa_pago_real').prop('required', true);
        }
    } else {
        $('#bank-fields').hide();
        $('#currency-fields').hide();
        $('#rate-real-field').hide();
        $('#issuing_bank_id').prop('required', false);
        $('#receiving_bank_id').prop('required', false);
        $('#issuing_bank_id').val('');
        $('#receiving_bank_id').val('');
        $('#tasa_pago_real').prop('required', false);
        $('#payment_currency').val('USD'); // Cheque y tarjeta generalmente en USD
    }
    
    updateCurrencyLabel();
    calculateAmounts();
});

// Cambiar moneda
$(document).on('change', '#payment_currency', function() {
    const currency = $(this).val();
    updateCurrencyLabel();
    
    // Mostrar/ocultar campo de tasa real según la moneda
    if (currency === 'VEF') {
        $('#rate-real-field').show();
        $('#tasa_pago_real').prop('required', true);
    } else {
        $('#rate-real-field').hide();
        $('#tasa_pago_real').prop('required', false);
    }
    
    calculateAmounts();
});

// Calcular montos cuando se ingresa el monto del pago
$(document).on('input', '#payment_amount', function() {
    calculateAmounts();
});

// Recalcular cuando cambia la tasa real
$(document).on('input', '#tasa_pago_real', function() {
    calculateAmounts();
    // Actualizar el campo oculto exchange_rate_real
    $('#exchange_rate_real').val($(this).val());
});

function calculateAmounts() {
    const method = $('#payment_method').val();
    const currency = $('#payment_currency').val() || (method === 'pago_movil' ? 'VEF' : (method === 'efectivo' ? 'VEF' : 'USD'));
    const amount = parseFloat($('#payment_amount').val()) || 0;
    
    // Obtener la tasa real ingresada por el usuario (o usar la por defecto)
    const tasaPagoReal = parseFloat($('#tasa_pago_real').val()) || RATE_REAL || 1;
    
    // Ocultar cálculo si no hay monto o método
    if (!amount || !method) {
        $('#calculation-info').hide();
        $('#equivalent_usd_display').text('$0.00');
        $('#real_usd_display').text('$0.00');
        $('#payment_amount_usd').val('0');
        return;
    }
    
    let amountUSD = 0; // Monto a aplicar (siempre en USD a tasa real para reportes y contables)
    let realUSD = 0; // Monto real informativo (para mostrar)
    
    if (currency === 'USD') {
        // Si el pago es en USD, el monto real es directo
        amountUSD = amount;
        realUSD = amount;
        
        // Validar que no se pague más de lo debido
        if (amountUSD > CURRENT_BALANCE_USD) {
            amountUSD = CURRENT_BALANCE_USD;
            $('#payment_amount').val(amountUSD.toFixed(2));
            alert('El monto excede el saldo pendiente. Se ajustará al saldo disponible: $' + amountUSD.toFixed(2) + ' USD');
        }
    } else {
        // Si el pago es en VEF
        // CRÍTICO: Para reportes y contables, debemos usar TASA REAL ingresada por el usuario
        // Monto Real USD = Monto Pagado VEF / Tasa Real
        // Esta es la tasa a la que realmente compramos los USD el día del pago
        if (tasaPagoReal > 0) {
            amountUSD = amount / tasaPagoReal; // Monto real a aplicar (tasa real del día)
            
            // Calcular también el monto según tasa legal para referencia
            // Monto Real Informático = (Monto Factura × Tasa Real) / Tasa Legal
            if (RATE_LEGAL > 0 && tasaPagoReal > 0) {
                realUSD = (INVOICE_AMOUNT_USD * tasaPagoReal) / RATE_LEGAL;
            } else {
                realUSD = amountUSD;
            }
            
            // Validar que no se pague más de lo debido
            if (amountUSD > CURRENT_BALANCE_USD) {
                // Ajustar el monto en VEF para que no exceda el saldo
                const maxAmountVEF = CURRENT_BALANCE_USD * tasaPagoReal;
                $('#payment_amount').val(maxAmountVEF.toFixed(2));
                amountUSD = CURRENT_BALANCE_USD;
                alert('El monto excede el saldo pendiente. Se ajustará al saldo disponible: ' + maxAmountVEF.toFixed(2) + ' VEF ($' + amountUSD.toFixed(2) + ' USD)');
            }
        } else {
            // Fallback: usar tasa legal si no hay tasa real
            if (RATE_LEGAL > 0) {
                amountUSD = amount / RATE_LEGAL;
            } else {
                amountUSD = amount;
            }
            realUSD = amountUSD;
        }
        
        // Actualizar el campo oculto exchange_rate_real con la tasa ingresada
        $('#exchange_rate_real').val(tasaPagoReal.toFixed(4));
        
        // Actualizar la visualización de la tasa real en el info box
        $('#rate_real_display').text('1 USD = ' + tasaPagoReal.toFixed(4) + ' VEF');
    }
    
    // Mostrar información de cálculo si es VEF
    if (currency === 'VEF' && amount > 0 && RATE_LEGAL > 0 && tasaPagoReal > 0) {
        $('#calculation-info').show();
        $('#real_usd_display').text('$' + realUSD.toFixed(2));
    } else {
        $('#calculation-info').hide();
    }
    
    // El monto a aplicar SIEMPRE es el real (tasa real del día)
    $('#equivalent_usd_display').text('$' + amountUSD.toFixed(2));
    $('#payment_amount_usd').val(amountUSD.toFixed(2));
}

@else
function addPayment() {
    console.error('Account ID not available');
    alert('Error: No se pudo obtener el ID de la cuenta.');
}
@endif

function addDiscount() {
    document.getElementById('discountForm').action = '/admin/sales/accounts-receivable/' + ACCOUNT_ID + '/add-discount';
    document.getElementById('discount_date').value = new Date().toISOString().split('T')[0];
    
    // Limpiar campos
    $('#discount_amount').val('');
    $('#discount_percentage').val('');
    $('#discount_reason').val('');
    $('#discount_notes').val('');
    
    // Usar Bootstrap 5 Modal API
    const discountModalElement = document.getElementById('discountModal');
    
    // Asegurar que el modal esté en el body
    if (discountModalElement && discountModalElement.parentElement !== document.body) {
        document.body.appendChild(discountModalElement);
    }
    
    const discountModal = new bootstrap.Modal(discountModalElement, {
        backdrop: 'static',
        keyboard: false
    });
    
    // Forzar z-index antes de mostrar
    if (discountModalElement) {
        discountModalElement.style.zIndex = '9999';
        discountModalElement.style.position = 'fixed';
    }
    
    discountModal.show();
    
    // Asegurar z-index después de mostrar
    setTimeout(function() {
        if (discountModalElement) {
            discountModalElement.style.zIndex = '9999';
        }
        const backdrop = document.querySelector('.modal-backdrop');
        if (backdrop) {
            backdrop.style.zIndex = '9998';
            backdrop.style.position = 'fixed';
        }
    }, 150);
}

function addPenalty() {
    document.getElementById('penaltyForm').action = '/admin/sales/accounts-receivable/' + ACCOUNT_ID + '/add-penalty';
    document.getElementById('penalty_date').value = new Date().toISOString().split('T')[0];
    
    // Limpiar campos
    $('#penalty_amount').val('');
    $('#penalty_percentage').val('');
    $('#penalty_reason').val('');
    $('#penalty_notes').val('');
    
    // Usar Bootstrap 5 Modal API
    const penaltyModalElement = document.getElementById('penaltyModal');
    
    // Asegurar que el modal esté en el body
    if (penaltyModalElement && penaltyModalElement.parentElement !== document.body) {
        document.body.appendChild(penaltyModalElement);
    }
    
    const penaltyModal = new bootstrap.Modal(penaltyModalElement, {
        backdrop: 'static',
        keyboard: false
    });
    
    // Forzar z-index antes de mostrar
    if (penaltyModalElement) {
        penaltyModalElement.style.zIndex = '9999';
        penaltyModalElement.style.position = 'fixed';
    }
    
    penaltyModal.show();
    
    // Asegurar z-index después de mostrar
    setTimeout(function() {
        if (penaltyModalElement) {
            penaltyModalElement.style.zIndex = '9999';
        }
        const backdrop = document.querySelector('.modal-backdrop');
        if (backdrop) {
            backdrop.style.zIndex = '9998';
            backdrop.style.position = 'fixed';
        }
    }, 150);
}

function printAccount() {
    // Implementar impresión
    alert('Funcionalidad de impresión en desarrollo');
}
</script>
@endpush