@extends('customer.layouts.mobile')

@section('title', 'Pembayaran Invoice')
@section('page-title', 'Pembayaran')

@php
    $showBackButton = true;
@endphp

@section('content')
<!-- Invoice Summary -->
<div style="background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: var(--border-radius); padding: 20px; margin-bottom: 20px; color: white;">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
        <div>
            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">{{ $invoice->nomor_invoice ?? 'Invoice #' . $invoice->id }}</h3>
            <p style="margin: 4px 0 0 0; font-size: 14px; opacity: 0.9;">{{ \Carbon\Carbon::parse($invoice->tanggal_invoice)->format('d M Y') }}</p>
        </div>
        <span style="background: {{ \Carbon\Carbon::parse($invoice->tanggal_jatuh_tempo)->isPast() ? 'rgba(245, 101, 101, 0.9)' : 'rgba(237, 137, 54, 0.9)' }}; color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 500;">
            {{ \Carbon\Carbon::parse($invoice->tanggal_jatuh_tempo)->isPast() ? 'TERLAMBAT' : 'BELUM BAYAR' }}
        </span>
    </div>
    
    <div style="background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 16px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
            <span style="font-size: 14px; opacity: 0.8;">Total Tagihan</span>
            <span style="font-size: 24px; font-weight: 700;" id="totalAmount">
                Rp {{ number_format($invoice->total_amount ?? 0, 0, ',', '.') }}
            </span>
        </div>
        
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <span style="font-size: 12px; opacity: 0.8;">Jatuh Tempo</span>
            <span style="font-size: 12px; font-weight: 600;">{{ \Carbon\Carbon::parse($invoice->tanggal_jatuh_tempo)->format('d M Y') }}</span>
        </div>
        
        @if(\Carbon\Carbon::parse($invoice->tanggal_jatuh_tempo)->isPast())
            <div style="background: rgba(245, 101, 101, 0.2); border-radius: 4px; padding: 8px; margin-top: 8px;">
                <p style="margin: 0; font-size: 12px; color: white;">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    Tagihan terlambat {{ \Carbon\Carbon::parse($invoice->tanggal_jatuh_tempo)->diffInDays() }} hari
                </p>
            </div>
        @endif
    </div>
</div>

<!-- Voucher Section -->
<div class="mobile-card mb-4">
    <div class="mobile-card-header">
        <i class="bi bi-ticket-perforated me-2"></i>
        Kode Voucher (Opsional)
    </div>
    <div class="mobile-card-body">
        <div style="display: flex; gap: 8px;">
            <input type="text" 
                   class="form-control-mobile" 
                   id="voucherCode" 
                   placeholder="Masukkan kode voucher"
                   style="flex: 1;">
            <button class="btn-mobile-sm btn-primary-mobile" onclick="applyVoucher()" id="voucherBtn">
                <i class="bi bi-check"></i>
                Terapkan
            </button>
        </div>
        <div id="voucherResult" class="mt-2" style="display: none;"></div>
    </div>
</div>

<!-- Payment Methods -->
<div class="mobile-card mb-4">
    <div class="mobile-card-header">
        <i class="bi bi-credit-card me-2"></i>
        Pilih Metode Pembayaran
    </div>
    <div class="mobile-card-body">
        <form action="{{ route('customer.payment.confirm', $invoice->id) }}" method="POST" enctype="multipart/form-data" id="paymentForm">
            @csrf
            
            <!-- Hidden inputs -->
            <input type="hidden" name="voucher_code" id="voucherCodeInput" value="">
            <input type="hidden" name="voucher_discount" id="voucherDiscountInput" value="0">
            <input type="hidden" name="original_amount" id="originalAmountInput" value="{{ $invoice->total_amount ?? 0 }}">
            <input type="hidden" name="final_amount" id="finalAmountInput" value="{{ $invoice->total_amount ?? 0 }}">
            
            <!-- 🎯 PERBAIKAN: Upload bukti transfer untuk semua metode -->
            <div id="buktiTransferContainer" style="display: none;">
                <div class="form-group-mobile" style="margin-top: 16px;">
                    <label class="form-label-mobile">Upload Bukti Transfer *</label>
                    <input type="file" name="bukti_transfer" id="buktiTransferInput" class="form-control-mobile" accept="image/*">
                    <small style="color: var(--secondary); font-size: 12px;">Format: JPG, PNG (Max: 2MB)</small>
                </div>
                <div class="form-group-mobile">
                    <label class="form-label-mobile">Catatan (Opsional)</label>
                    <textarea name="catatan" class="form-control-mobile" rows="3" placeholder="Catatan tambahan..."></textarea>
                </div>
            </div>
            
            <div class="mobile-grid">
                @if($primaryGateway)
                <!-- Quick Payment Gateway - LANGSUNG KE GATEWAY AKTIF -->
                <label class="payment-method-mobile" for="payment_gateway">
                    <input type="radio" name="metode_pembayaran" id="payment_gateway" value="payment_gateway" required>
                    <div class="payment-method-content">
                        <div class="payment-method-icon" style="background: linear-gradient(135deg, var(--success) 0%, #38a169 100%);">
                            <i class="{{ $primaryGateway->icon }}"></i>
                        </div>
                        <div class="payment-method-info">
                            <h6>{{ $primaryGateway->display_name }}</h6>
                            <p>E-Wallet, VA, QRIS</p>
                        </div>
                        <div class="payment-method-badge">
                            <span>Otomatis</span>
                        </div>
                    </div>
                </label>
                @else
                <!-- No Active Gateway -->
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    Payment gateway tidak tersedia. Silakan pilih metode pembayaran lain.
                </div>
                @endif
                
                <!-- Bank Transfer -->
                <label class="payment-method-mobile" for="bank_transfer">
                    <input type="radio" name="metode_pembayaran" id="bank_transfer" value="bank_transfer" required>
                    <div class="payment-method-content">
                        <div class="payment-method-icon" style="background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);">
                            <i class="bi bi-bank"></i>
                        </div>
                        <div class="payment-method-info">
                            <h6>Transfer Bank</h6>
                            <p>Manual ke rekening</p>
                        </div>
                        <div class="payment-method-badge">
                            <span>Manual</span>
                        </div>
                    </div>
                </label>
                
                <!-- Advanced Gateway (Gateway Selection) -->
                @if($activeGateways->count() > 1)
                <label class="payment-method-mobile" for="advanced_gateway">
                    <input type="radio" name="metode_pembayaran" id="advanced_gateway" value="advanced_gateway" required>
                    <div class="payment-method-content">
                        <div class="payment-method-icon" style="background: linear-gradient(135deg, var(--info) 0%, #3182ce 100%);">
                            <i class="bi bi-gear"></i>
                        </div>
                        <div class="payment-method-info">
                            <h6>Pilih Gateway</h6>
                            <p>{{ $activeGateways->pluck('display_name')->join(', ') }}</p>
                        </div>
                        <div class="payment-method-badge">
                            <span>{{ $activeGateways->count() }} Pilihan</span>
                        </div>
                    </div>
                </label>
                @endif

                <!-- Cash Payment -->
                <label class="payment-method-mobile" for="cash">
                    <input type="radio" name="metode_pembayaran" id="cash" value="cash" required>
                    <div class="payment-method-content">
                        <div class="payment-method-icon" style="background: linear-gradient(135deg, var(--warning) 0%, #dd6b20 100%);">
                            <i class="bi bi-cash-stack"></i>
                        </div>
                        <div class="payment-method-info">
                            <h6>Bayar Langsung</h6>
                            <p>Datang ke kantor</p>
                        </div>
                        <div class="payment-method-badge">
                            <span>Offline</span>
                        </div>
                    </div>
                </label>
            </div>
            
            @error('metode_pembayaran')
                <div class="text-danger mt-2" style="font-size: 12px;">
                    <i class="bi bi-exclamation-circle me-1"></i>
                    {{ $message }}
                </div>
            @enderror
        </form>
    </div>
</div>

<!-- Payment Details -->
<div id="paymentDetails" class="mobile-card mb-4" style="display: none;">
    <div class="mobile-card-header">
        <i class="bi bi-info-circle me-2"></i>
        <span id="paymentDetailsTitle">Detail Pembayaran</span>
    </div>
    <div class="mobile-card-body" id="paymentDetailsContent">
        <!-- Content will be loaded dynamically -->
    </div>
</div>

<!-- Payment Summary -->
<div class="mobile-card mb-4">
    <div class="mobile-card-header">
        <i class="bi bi-receipt me-2"></i>
        Ringkasan Pembayaran
    </div>
    <div class="mobile-card-body">
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e2e8f0;">
            <span style="color: var(--secondary); font-size: 14px;">Subtotal</span>
            <span style="color: var(--dark); font-weight: 600; font-size: 14px;" id="subtotalAmount">
                Rp {{ number_format($invoice->total_amount ?? 0, 0, ',', '.') }}
            </span>
        </div>
        
        <div id="discountRow" style="display: none; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e2e8f0;">
            <span style="color: var(--success); font-size: 14px;">
                <i class="bi bi-ticket-perforated me-1"></i>
                Diskon Voucher
            </span>
            <span style="color: var(--success); font-weight: 600; font-size: 14px;" id="discountAmount">
                - Rp 0
            </span>
        </div>
        
        <div id="adminFeeRow" style="display: none; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e2e8f0;">
            <span style="color: var(--warning); font-size: 14px;">
                <i class="bi bi-plus-circle me-1"></i>
                Biaya Admin
            </span>
            <span style="color: var(--warning); font-weight: 600; font-size: 14px;" id="adminFeeAmount">
                + Rp 0
            </span>
        </div>
        
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; background: var(--light); border-radius: 8px; margin-top: 8px; padding-left: 12px; padding-right: 12px;">
            <span style="color: var(--dark); font-weight: 600; font-size: 16px;">Total Bayar</span>
            <span style="color: var(--primary); font-weight: 700; font-size: 18px;" id="finalTotalAmount">
                Rp {{ number_format($invoice->total_amount ?? 0, 0, ',', '.') }}
            </span>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="mobile-card">
    <div class="mobile-card-body">
        <div style="display: flex; gap: 12px;">
            <a href="{{ route('customer.invoices') }}" class="btn-mobile btn-outline-mobile" style="flex: 1;">
                <i class="bi bi-arrow-left me-1"></i>
                Kembali
            </a>
            <button type="button" class="btn-mobile btn-primary-mobile" style="flex: 2;" onclick="processPayment()" id="payBtn" disabled>
                <i class="bi bi-credit-card me-1"></i>
                Lanjutkan Pembayaran
            </button>
        </div>
    </div>
</div>

<!-- Help Section -->
<div class="mobile-card mt-4">
    <div class="mobile-card-header">
        <i class="bi bi-question-circle me-2"></i>
        Butuh Bantuan?
    </div>
    <div class="mobile-card-body">
        <div class="mobile-grid mobile-grid-2">
            <a href="https://wa.me/6281234567890?text=Halo, saya butuh bantuan untuk pembayaran invoice #{{ $invoice->id }}" class="quick-action-mobile">
                <div class="quick-action-icon" style="background: #25D366;">
                    <i class="bi bi-whatsapp"></i>
                </div>
                <p class="quick-action-title">WhatsApp</p>
            </a>
            
            <a href="tel:+6281234567890" class="quick-action-mobile">
                <div class="quick-action-icon" style="background: linear-gradient(135deg, var(--info) 0%, #3182ce 100%);">
                    <i class="bi bi-telephone"></i>
                </div>
                <p class="quick-action-title">Call Center</p>
            </a>
        </div>
        
        <div style="margin-top: 16px; padding: 12px; background: var(--light); border-radius: 8px;">
            <p style="margin: 0; font-size: 12px; color: var(--secondary); text-align: center;">
                <i class="bi bi-shield-check me-1"></i>
                Pembayaran Anda aman dan terlindungi
            </p>
        </div>
    </div>
</div>
@endsection

@push('css')
<style>
.payment-method-mobile {
    display: block;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    padding: 0;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    background: white;
}

.payment-method-mobile:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.payment-method-mobile input[type="radio"] {
    display: none;
}

.payment-method-mobile input[type="radio"]:checked + .payment-method-content {
    border-color: var(--primary);
    background: rgba(102, 126, 234, 0.05);
}

.payment-method-mobile input[type="radio"]:checked + .payment-method-content::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-method-mobile input[type="radio"]:checked + .payment-method-content::before {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
}

.payment-method-content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.payment-method-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.payment-method-icon i {
    font-size: 20px;
    color: white;
}

.payment-method-info {
    flex: 1;
}

.payment-method-info h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.payment-method-info p {
    margin: 0;
    font-size: 12px;
    color: var(--secondary);
}

.payment-method-badge {
    flex-shrink: 0;
}

.payment-method-badge span {
    background: var(--light);
    color: var(--secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.payment-method-mobile input[type="radio"]:checked + .payment-method-content .payment-method-badge span {
    background: var(--primary);
    color: white;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.payment-method-mobile:active {
    animation: pulse 0.3s ease;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Payment method selection
    const paymentMethods = document.querySelectorAll('input[name="metode_pembayaran"]');
    const paymentDetails = document.getElementById('paymentDetails');
    const paymentDetailsTitle = document.getElementById('paymentDetailsTitle');
    const paymentDetailsContent = document.getElementById('paymentDetailsContent');
    const payBtn = document.getElementById('payBtn');
    
    paymentMethods.forEach(method => {
        method.addEventListener('change', function() {
            if (this.checked) {
                showPaymentDetails(this.value);
                payBtn.disabled = false;
                
                // Add haptic feedback
                if (navigator.vibrate) {
                    navigator.vibrate(10);
                }
            }
        });
    });
    
    function showPaymentDetails(method) {
        paymentDetails.style.display = 'block';
        
        // 🎯 PERBAIKAN: Tampilkan/sembunyikan bukti transfer container
        const buktiTransferContainer = document.getElementById('buktiTransferContainer');
        const buktiTransferInput = document.getElementById('buktiTransferInput');
        
        if (method === 'bank_transfer' || method === 'ewallet') {
            buktiTransferContainer.style.display = 'block';
            buktiTransferInput.required = true;
        } else {
            buktiTransferContainer.style.display = 'none';
            buktiTransferInput.required = false;
        }
        
        switch(method) {
            case 'payment_gateway':
                paymentDetailsTitle.textContent = 'Payment Gateway';
                paymentDetailsContent.innerHTML = `
                    <div style="text-align: center; padding: 16px;">
                        <i class="bi bi-credit-card" style="font-size: 40px; color: var(--success); margin-bottom: 12px;"></i>
                        <p style="margin: 0; color: var(--secondary); font-size: 14px; margin-bottom: 12px;">
                            Klik tombol di bawah untuk melanjutkan ke halaman pembayaran
                        </p>
                        <div style="display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;">
                            <span style="background: #00D09C; color: white; padding: 3px 6px; border-radius: 3px; font-size: 9px;">GoPay</span>
                            <span style="background: #00AED6; color: white; padding: 3px 6px; border-radius: 3px; font-size: 9px;">DANA</span>
                            <span style="background: #007bff; color: white; padding: 3px 6px; border-radius: 3px; font-size: 9px;">VA Bank</span>
                            <span style="background: #28a745; color: white; padding: 3px 6px; border-radius: 3px; font-size: 9px;">QRIS</span>
                            <span style="background: #ff6b35; color: white; padding: 3px 6px; border-radius: 3px; font-size: 9px;">ShopeePay</span>
                        </div>
                    </div>
                `;
                break;
                
            case 'bank_transfer':
                paymentDetailsTitle.textContent = 'Transfer Bank';
                paymentDetailsContent.innerHTML = `
                    <div style="background: var(--light); border-radius: 8px; padding: 16px; margin-bottom: 16px;">
                        <h6 style="margin: 0 0 12px 0; color: var(--dark);">Rekening Tujuan:</h6>
                        ${getBankAccountInfo()}
                    </div>
                    <div style="padding: 12px; background: var(--warning); color: var(--dark); border-radius: 8px; margin-top: 12px; font-size: 12px;">
                        <i class="bi bi-info-circle me-2"></i>
                        <strong>Upload bukti transfer di bawah form ini!</strong>
                    </div>
                `;
                break;
                
            case 'ewallet':
                paymentDetailsTitle.textContent = 'E-Wallet Manual';
                paymentDetailsContent.innerHTML = `
                    <div style="background: var(--light); border-radius: 8px; padding: 16px; margin-bottom: 16px;">
                        <h6 style="margin: 0 0 12px 0; color: var(--dark);">E-Wallet yang Tersedia:</h6>
                        <div style="display: flex; gap: 12px; margin-bottom: 12px;">
                            <div style="text-align: center; flex: 1;">
                                <div style="width: 40px; height: 40px; background: #00D09C; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px;">
                                    <span style="color: white; font-weight: bold; font-size: 12px;">OVO</span>
                                </div>
                                <p style="margin: 0; font-size: 10px; color: var(--secondary);">081234567890</p>
                            </div>
                            <div style="text-align: center; flex: 1;">
                                <div style="width: 40px; height: 40px; background: #00AED6; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px;">
                                    <span style="color: white; font-weight: bold; font-size: 12px;">DANA</span>
                                </div>
                                <p style="margin: 0; font-size: 10px; color: var(--secondary);">081234567890</p>
                            </div>
                            <div style="text-align: center; flex: 1;">
                                <div style="width: 40px; height: 40px; background: #00AA13; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px;">
                                    <span style="color: white; font-weight: bold; font-size: 12px;">GP</span>
                                </div>
                                <p style="margin: 0; font-size: 10px; color: var(--secondary);">081234567890</p>
                            </div>
                        </div>
                    </div>
                    <div style="padding: 12px; background: var(--warning); color: var(--dark); border-radius: 8px; margin-top: 12px; font-size: 12px;">
                        <i class="bi bi-info-circle me-2"></i>
                        <strong>Upload bukti transfer di bawah form ini!</strong>
                    </div>
                `;
                break;
                
            case 'advanced_gateway':
                paymentDetailsTitle.textContent = 'Pilih Gateway';
                paymentDetailsContent.innerHTML = `
                    <div style="text-align: center; padding: 16px;">
                        <i class="bi bi-gear" style="font-size: 40px; color: var(--info); margin-bottom: 12px;"></i>
                        <p style="margin: 0; color: var(--secondary); font-size: 14px; margin-bottom: 12px;">
                            Pilih provider pembayaran yang diinginkan
                        </p>
                        <div style="display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;">
                            <span style="background: #007bff; color: white; padding: 3px 6px; border-radius: 3px; font-size: 9px;">Midtrans</span>
                            <span style="background: #17a2b8; color: white; padding: 3px 6px; border-radius: 3px; font-size: 9px;">Xendit</span>
                            <span style="background: #28a745; color: white; padding: 3px 6px; border-radius: 3px; font-size: 9px;">Tripay</span>
                        </div>
                    </div>
                `;
                break;
                
            case 'cash':
                paymentDetailsTitle.textContent = 'Bayar Langsung';
                paymentDetailsContent.innerHTML = `
                    <div style="text-align: center; padding: 20px;">
                        <i class="bi bi-geo-alt" style="font-size: 48px; color: var(--warning); margin-bottom: 16px;"></i>
                        <h6 style="margin: 0 0 8px 0; color: var(--dark);">Alamat Kantor</h6>
                        <p style="margin: 0; color: var(--secondary); font-size: 14px; margin-bottom: 16px;">
                            ${getOfficeAddress()}
                        </p>
                        <div style="background: var(--light); border-radius: 8px; padding: 12px; margin-bottom: 12px;">
                            <p style="margin: 0; font-size: 12px; color: var(--secondary);">
                                <i class="bi bi-clock me-1"></i>
                                Jam Operasional: Senin - Sabtu, 08:00 - 17:00
                            </p>
                        </div>
                        <div style="display: flex; gap: 8px;">
                            <a href="https://maps.google.com" class="btn-mobile btn-outline-mobile" style="flex: 1; font-size: 12px;">
                                <i class="bi bi-map me-1"></i>
                                Buka Maps
                            </a>
                            <a href="tel:+6281234567890" class="btn-mobile btn-outline-mobile" style="flex: 1; font-size: 12px;">
                                <i class="bi bi-telephone me-1"></i>
                                Telepon
                            </a>
                        </div>
                    </div>
                    <div class="form-group-mobile">
                        <label class="form-label-mobile">Catatan (Opsional)</label>
                        <textarea name="catatan" class="form-control-mobile" rows="3" placeholder="Rencana waktu kedatangan atau catatan lainnya..."></textarea>
                    </div>
                `;
                break;
        }
        
        // Scroll to payment details
        paymentDetails.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
});

function getBankAccountInfo() {
    @if(isset($perusahaan))
        return `
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <span style="color: var(--secondary); font-size: 12px;">Bank</span>
                <span style="color: var(--dark); font-weight: 600; font-size: 12px;">{{ $perusahaan->bank_name ?? 'BCA' }}</span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <span style="color: var(--secondary); font-size: 12px;">No. Rekening</span>
                <span style="color: var(--dark); font-weight: 600; font-size: 12px;" onclick="copyToClipboard('{{ $perusahaan->bank_account ?? '1234567890' }}')">
                    {{ $perusahaan->bank_account ?? '1234567890' }}
                    <i class="bi bi-copy ms-1" style="cursor: pointer;"></i>
                </span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="color: var(--secondary); font-size: 12px;">Atas Nama</span>
                <span style="color: var(--dark); font-weight: 600; font-size: 12px;">{{ $perusahaan->bank_account_name ?? $perusahaan->nama_perusahaan ?? 'PT. Internet Provider' }}</span>
            </div>
        `;
    @else
        return `
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <span style="color: var(--secondary); font-size: 12px;">Bank</span>
                <span style="color: var(--dark); font-weight: 600; font-size: 12px;">BCA</span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <span style="color: var(--secondary); font-size: 12px;">No. Rekening</span>
                <span style="color: var(--dark); font-weight: 600; font-size: 12px;" onclick="copyToClipboard('1234567890')">
                    1234567890
                    <i class="bi bi-copy ms-1" style="cursor: pointer;"></i>
                </span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="color: var(--secondary); font-size: 12px;">Atas Nama</span>
                <span style="color: var(--dark); font-weight: 600; font-size: 12px;">PT. Internet Provider</span>
            </div>
        `;
    @endif
}

function getOfficeAddress() {
    @if(isset($perusahaan))
        return `{{ $perusahaan->alamat ?? 'Jl. Contoh No. 123, Kota, Provinsi' }}`;
    @else
        return `Jl. Contoh No. 123, Kota, Provinsi`;
    @endif
}

function applyVoucher() {
    const voucherCode = document.getElementById('voucherCode').value.trim();
    const voucherBtn = document.getElementById('voucherBtn');
    const voucherResult = document.getElementById('voucherResult');
    
    if (!voucherCode) {
        showVoucherResult('Masukkan kode voucher terlebih dahulu', 'error');
        return;
    }
    
    // Show loading
    voucherBtn.innerHTML = '<i class="bi bi-arrow-clockwise" style="animation: spin 1s linear infinite;"></i> Memproses...';
    voucherBtn.disabled = true;
    
    // Simulate voucher validation (replace with actual API call)
    setTimeout(() => {
        // Mock voucher validation
        const mockVouchers = {
            'DISKON10': { discount: 10, type: 'percentage', valid: true },
            'HEMAT5000': { discount: 5000, type: 'fixed', valid: true },
            'NEWUSER': { discount: 15, type: 'percentage', valid: true }
        };
        
        const voucher = mockVouchers[voucherCode.toUpperCase()];
        
        if (voucher && voucher.valid) {
            const originalAmount = {{ $invoice->total_amount ?? 0 }};
            let discountAmount = 0;
            
            if (voucher.type === 'percentage') {
                discountAmount = originalAmount * (voucher.discount / 100);
            } else {
                discountAmount = voucher.discount;
            }
            
            const finalAmount = originalAmount - discountAmount;
            
            // Update UI
            updatePaymentSummary(originalAmount, discountAmount, finalAmount);
            
            // Update hidden inputs
            document.getElementById('voucherCodeInput').value = voucherCode.toUpperCase();
            document.getElementById('voucherDiscountInput').value = discountAmount;
            document.getElementById('finalAmountInput').value = finalAmount;
            
            showVoucherResult(`Voucher berhasil diterapkan! Hemat Rp ${formatNumber(discountAmount)}`, 'success');
            
            // Change button to remove voucher
            voucherBtn.innerHTML = '<i class="bi bi-x"></i> Hapus';
            voucherBtn.onclick = removeVoucher;
        } else {
            showVoucherResult('Kode voucher tidak valid atau sudah kadaluarsa', 'error');
        }
        
        voucherBtn.disabled = false;
    }, 1500);
}

function removeVoucher() {
    const originalAmount = {{ $invoice->total_amount ?? 0 }};
    
    // Reset UI
    updatePaymentSummary(originalAmount, 0, originalAmount);
    
    // Reset inputs
    document.getElementById('voucherCode').value = '';
    document.getElementById('voucherCodeInput').value = '';
    document.getElementById('voucherDiscountInput').value = '0';
    document.getElementById('finalAmountInput').value = originalAmount;
    
    // Hide voucher result
    document.getElementById('voucherResult').style.display = 'none';
    
    // Reset button
    const voucherBtn = document.getElementById('voucherBtn');
    voucherBtn.innerHTML = '<i class="bi bi-check"></i> Terapkan';
    voucherBtn.onclick = applyVoucher;
}

function updatePaymentSummary(originalAmount, discountAmount, finalAmount) {
    // Update total amount display
    document.getElementById('totalAmount').textContent = `Rp ${formatNumber(finalAmount)}`;
    document.getElementById('finalTotalAmount').textContent = `Rp ${formatNumber(finalAmount)}`;
    
    // Show/hide discount row
    const discountRow = document.getElementById('discountRow');
    if (discountAmount > 0) {
        discountRow.style.display = 'flex';
        document.getElementById('discountAmount').textContent = `- Rp ${formatNumber(discountAmount)}`;
    } else {
        discountRow.style.display = 'none';
    }
}

function showVoucherResult(message, type) {
    const voucherResult = document.getElementById('voucherResult');
    const bgColor = type === 'success' ? 'rgba(72, 187, 120, 0.1)' : 'rgba(245, 101, 101, 0.1)';
    const textColor = type === 'success' ? 'var(--success)' : 'var(--danger)';
    const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
    
    voucherResult.innerHTML = `
        <div style="background: ${bgColor}; color: ${textColor}; padding: 8px 12px; border-radius: 4px; font-size: 12px;">
            <i class="bi bi-${icon} me-1"></i>
            ${message}
        </div>
    `;
    voucherResult.style.display = 'block';
}

function processPayment() {
    const selectedMethod = document.querySelector('input[name="metode_pembayaran"]:checked');
    
    if (!selectedMethod) {
        showNotification('Pilih metode pembayaran terlebih dahulu', 'error');
        return;
    }
    
    // Validate required fields for manual payment methods
    if (['bank_transfer', 'ewallet'].includes(selectedMethod.value)) {
        const buktiTransfer = document.querySelector('input[name="bukti_transfer"]');
        if (!buktiTransfer || !buktiTransfer.files.length) {
            showNotification('Upload bukti transfer terlebih dahulu', 'error');
            return;
        }
    }
    
    // Show loading
    const payBtn = document.getElementById('payBtn');
    const originalContent = payBtn.innerHTML;
    payBtn.innerHTML = '<i class="bi bi-arrow-clockwise" style="animation: spin 1s linear infinite;"></i> Memproses...';
    payBtn.disabled = true;
    
    // Submit form
    setTimeout(() => {
        document.getElementById('paymentForm').submit();
    }, 1000);
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showNotification('Nomor rekening berhasil disalin', 'success');
    });
}

function formatNumber(number) {
    return new Intl.NumberFormat('id-ID').format(number);
}

function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `alert-mobile alert-${type}-mobile`;
    notification.style.position = 'fixed';
    notification.style.top = '80px';
    notification.style.left = '50%';
    notification.style.transform = 'translateX(-50%)';
    notification.style.zIndex = '9999';
    notification.style.minWidth = '280px';
    notification.style.maxWidth = '90%';
    notification.innerHTML = `
        <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} me-2"></i>
        ${message}
    `;
    
    document.body.appendChild(notification);
    
    // Auto-remove after 3 seconds
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(-50%) translateY(-10px)';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// Add CSS animations
const style = document.createElement('style');
style.textContent = `
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
`;
document.head.appendChild(style);
</script>
@endpush