@extends('layouts.admin_lbb')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endpush

@section('page-title', 'Token & Billing')

@section('content')
<div class="row g-4">
    <!-- Form Beli Token -->
    <div class="col-lg-3 col-12">
        <!-- Saldo Token -->
        <div class="card">
            <div class="card-body">
                <div class="text-center">
                    <div class="text-muted">Saldo Token Saat Ini</div>
                    <div class="display-4 fw-bold text-success">{{ number_format($tokenBalance, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <i class="bi bi-cart-plus me-2"></i>
                Beli Token
            </div>
            <div class="card-body">
                <form action="{{ route('admin.token.purchase.store') }}" method="POST" id="purchaseTokenForm">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Jumlah Token</label>
                        <input type="number" name="token_amount" class="form-control" id="tokenAmount" value="100" min="10" step="10" oninput="calculateTotal()" onchange="validateTokenAmount()" required>
                        <small class="text-muted">Minimal pembelian: 10 token</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Harga per Token</label>
                        <input type="text" class="form-control" value="Rp {{ number_format($tokenPrice, 0, ',', '.') }}" readonly>
                        <input type="hidden" name="token_price" value="{{ $tokenPrice }}">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Metode Pembayaran</label>
                        <select class="form-select" name="payment_method" id="paymentMethod" onchange="calculateTotal()" required>
                            @if(isset($bankAccounts))
                                @foreach($bankAccounts as $bank)
                                    <option value="{{ strtolower($bank->bank) }}">{{ $bank->bank }}</option>
                                @endforeach
                            @else
                                <option value="seabank">Seabank</option>
                                <option value="mandiri">Mandiri</option>
                                <option value="dana">DANA</option>
                            @endif
                        </select>
                    </div>
                    
                    <!-- Informasi Rekening -->
                    <div class="mb-3" id="bankInfoBox">
                        <div class="alert alert-info mb-0">
                            <div class="d-flex align-items-center">
                                
                                <div>
                                    <strong>Transfer ke:</strong><br>
                                    <i class="bi bi-bank2"></i>
                                    <span id="bankName">{{ $bankAccounts->first()->bank ?? 'Seabank' }}</span> - <strong id="bankAccount">{{ $bankAccounts->first()->nomer ?? '1234567890' }}</strong><br>
                                    <small class="text-muted">a.n. {{ $bankAccounts->first()->nama ?? 'Admin CBT' }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" class="form-control" id="adminFee" value="Rp 0" readonly>
                    <input type="hidden" name="admin_fee" id="adminFeeInput" value="0">
                    
                    <div class="info-box mb-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Subtotal</span>
                            <span id="subtotal" class="fw-bold">Rp 0</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Biaya Admin</span>
                            <span id="feeDisplay" class="fw-bold">Rp 0</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between">
                            <span class="fw-bold fs-5">Total</span>
                            <span id="totalBayar" class="fw-bold fs-5 text-success">Rp 0</span>
                        </div>
                    </div>
                    
                    <button type="button" class="btn btn-primary w-100" onclick="confirmPurchase()">
                        <i class="bi bi-cart-check me-2"></i>
                        Beli Token
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Riwayat Pembelian & Penggunaan -->
    <div class="col-lg-9">
        <ul class="nav nav-tabs mb-3" id="tokenTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ !request()->has('type') ? 'active' : '' }}" id="purchase-tab-btn" data-bs-toggle="tab" data-bs-target="#purchase-tab-pane" type="button">
                    <i class="bi bi-cart-check me-2"></i> Pembelian
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ request()->has('type') ? 'active' : '' }}" id="usage-tab-btn" data-bs-toggle="tab" data-bs-target="#usage-tab-pane" type="button">
                    <i class="bi bi-clock-history me-2"></i> Penggunaan
                </button>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="tokenTabContent">
            <!-- Tab: Riwayat Pembelian -->
            <div class="tab-pane fade {{ !request()->has('type') ? 'show active' : '' }}" id="purchase-tab-pane" role="tabpanel">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <i class="bi bi-clock-history me-2"></i>
                            Riwayat Pembelian
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                Filter
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ route('admin.token.index') }}">Semua</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.token.index', ['status' => 'pending']) }}">Menunggu Pembayaran</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.token.index', ['status' => 'verification']) }}">Menunggu Verifikasi</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.token.index', ['status' => 'approved']) }}">Disetujui</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.token.index', ['status' => 'cancelled']) }}">Ditolak</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        @if($tokenOrders->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th width="15%">Tanggal</th>
                                        <th width="15%">Bank</th>
                                        <th width="12%">Jumlah</th>
                                        <th width="20%">Total</th>
                                        <th width="38%">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tokenOrders as $order)
                                    <tr data-bs-toggle="modal" data-bs-target="#detailModal-{{ $order->id }}" style="cursor: pointer;" class="align-middle">
                                        <td data-label="Tanggal">{{ $order->created_at->format('d M Y') }}</td>
                                        <td data-label="Bank">
                                            <span class="badge bg-light text-dark border">
                                                <i class="bi bi-bank2 me-1"></i>{{$order->payment_method}}
                                            </span>
                                        </td>
                                        <td data-label="Jumlah" class="text-end">{{ number_format($order->token_amount, 0, ',', '.') }}</td>
                                        <td data-label="Total" class="text-end">Rp {{ number_format($order->total_price, 0, ',', '.') }}</td>
                                        <td data-label="Status">
                                            @if($order->status == 'completed')
                                                <span class="badge bg-success">Selesai</span>
                                            @elseif($order->status == 'pending')
                                                <span class="badge bg-secondary">Menunggu Pembayaran</span>
                                            @elseif($order->status == 'verification')
                                                <span class="badge bg-warning">Menunggu Verifikasi</span>
                                            @elseif($order->status == 'cancelled')
                                                <span class="badge bg-danger">Ditolak</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Laravel Pagination (always show when data exists) -->
                        <div class="card-footer d-flex justify-content-between align-items-center">
                            <div class="text-muted small">
                                Menampilkan {{ ($tokenOrders->currentPage() - 1) * $tokenOrders->perPage() + 1 }} - {{ min($tokenOrders->currentPage() * $tokenOrders->perPage(), $tokenOrders->total()) }} dari {{ $tokenOrders->total() }} pembelian
                            </div>
                            <nav>
                                <ul class="pagination pagination-sm mb-0">
                                    @if($tokenOrders->onFirstPage())
                                        <li class="page-item disabled">
                                            <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $tokenOrders->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a>
                                        </li>
                                    @endif
                                    
                                    @foreach($tokenOrders->getUrlRange(1, $tokenOrders->lastPage()) as $page => $url)
                                        @if($page == $tokenOrders->currentPage())
                                            <li class="page-item active">
                                                <span class="page-link">{{ $page }}</span>
                                            </li>
                                        @elseif($page == 1 || $page == $tokenOrders->lastPage() || ($page >= $tokenOrders->currentPage() - 1 && $page <= $tokenOrders->currentPage() + 1))
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $tokenOrders->appends(request()->query())->url($page) }}">{{ $page }}</a>
                                            </li>
                                        @elseif($page == $tokenOrders->currentPage() - 2 || $page == $tokenOrders->currentPage() + 2)
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        @endif
                                    @endforeach

                                    @if($tokenOrders->hasMorePages())
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $tokenOrders->appends(request()->query())->nextPageUrl() }}"><i class="bi bi-chevron-right"></i></a>
                                        </li>
                                    @else
                                        <li class="page-item disabled">
                                            <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                                        </li>
                                    @endif
                                </ul>
                            </nav>
                        </div>
                        @else
                        <div class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-1"></i>
                            <p class="mt-3">Belum ada riwayat pembelian</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Tab: Riwayat Penggunaan -->
            <div class="tab-pane fade {{ request()->has('type') ? 'show active' : '' }}" id="usage-tab-pane" role="tabpanel">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <i class="bi bi-clock-history me-2"></i>
                            Riwayat Penggunaan Token
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                Filter
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ route('admin.token.index') }}">Semua</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.token.index', ['type' => 'inject']) }}">Inject</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.token.index', ['type' => 'usage']) }}">Usage</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.token.index', ['type' => 'refund']) }}">Refund</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        @if($tokenTransactions->count() > 0)
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th width="60">No</th>
                                        <th>Keterangan</th>
                                        <th>Tanggal</th>
                                        <th>Token</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tokenTransactions as $transaction)
                                    <tr>
                                        <td data-label="No" class="text-center">{{ $loop->index + 1 + (($tokenTransactions->currentPage() - 1) * $tokenTransactions->perPage()) }}</td>
                                        <td data-label="Keterangan">
                                            <div class="fw-bold">{{ $transaction->notes ?? ($transaction->type == 'inject' ? 'Pembelian Token' : 'Penggunaan Token') }}</div>
                                            @if($transaction->created_by)
                                            <small class="text-muted">Oleh: {{ $transaction->createdBy->name ?? 'Sistem' }}</small>
                                            @endif
                                        </td>
                                        <td data-label="Tanggal">{{ $transaction->created_at->format('d M Y') }}</td>
                                        <td data-label="Token"><strong class="{{ $transaction->type == 'inject' ? 'text-success' : 'text-danger' }}">{{ number_format($transaction->amount, 0, ',', '.') }}</strong></td>
                                        <td data-label="Status">
                                            @if($transaction->type == 'inject')
                                                <span class="badge badge-success">
                                                    <i class="bi bi-arrow-down-circle-fill me-1"></i>Inject
                                                </span>
                                            @elseif($transaction->type == 'refund')
                                                <span class="badge badge-warning">
                                                    <i class="bi bi-arrow-up-circle-fill me-1"></i>Refund
                                                </span>
                                            @else
                                                <span class="badge badge-danger">
                                                    <i class="bi bi-arrow-up-circle-fill me-1"></i>Usage
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Usage Pagination (always show when data exists) -->
                        <div class="card-footer d-flex justify-content-between align-items-center">
                            <div class="text-muted small">
                                Menampilkan {{ ($tokenTransactions->currentPage() - 1) * $tokenTransactions->perPage() + 1 }} - {{ min($tokenTransactions->currentPage() * $tokenTransactions->perPage(), $tokenTransactions->total()) }} dari {{ $tokenTransactions->total() }} transaksi
                            </div>
                            <nav>
                                <ul class="pagination pagination-sm mb-0">
                                    @if($tokenTransactions->onFirstPage())
                                        <li class="page-item disabled">
                                            <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $tokenTransactions->appends(request()->query())->previousPageUrl() }}"><i class="bi bi-chevron-left"></i></a>
                                        </li>
                                    @endif
                                    
                                    @foreach($tokenTransactions->getUrlRange(1, $tokenTransactions->lastPage()) as $page => $url)
                                        @if($page == $tokenTransactions->currentPage())
                                            <li class="page-item active">
                                                <span class="page-link">{{ $page }}</span>
                                            </li>
                                        @elseif($page == 1 || $page == $tokenTransactions->lastPage() || ($page >= $tokenTransactions->currentPage() - 1 && $page <= $tokenTransactions->currentPage() + 1))
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $tokenTransactions->appends(request()->query())->url($page) }}">{{ $page }}</a>
                                            </li>
                                        @elseif($page == $tokenTransactions->currentPage() - 2 || $page == $tokenTransactions->currentPage() + 2)
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        @endif
                                    @endforeach

                                    @if($tokenTransactions->hasMorePages())
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $tokenTransactions->appends(request()->query())->nextPageUrl() }}"><i class="bi bi-chevron-right"></i></a>
                                        </li>
                                    @else
                                        <li class="page-item disabled">
                                            <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                                        </li>
                                    @endif
                                </ul>
                            </nav>
                        </div>
                        @else
                        <div class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-1"></i>
                            <p class="mt-3">Belum ada riwayat penggunaan token</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail Transaksi -->
@foreach($tokenOrders as $order)
<div class="modal fade" id="detailModal-{{ $order->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-receipt me-2"></i>
                    Detail Transaksi
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="info-box mb-0">
                            <h6><i class="bi bi-receipt me-2"></i>Informasi Transaksi</h6>
                            <div class="mb-2">
                                <span class="text-muted">ID Transaksi:</span>
                                <span class="fw-bold ms-2">#{{ str_pad($order->id, 6, '0', STR_PAD_LEFT) }}</span>
                            </div>
                            <div class="mb-2">
                                <span class="text-muted">Tanggal:</span>
                                <span class="fw-bold ms-2">{{ $order->created_at->format('d M Y, H:i') }}</span>
                            </div>
                            <div class="mb-2">
                                <span class="text-muted">Status:</span>
                                @if($order->status == 'approved')
                                    <span class="badge badge-success ms-2">Disetujui</span>
                                @elseif($order->status == 'pending')
                                    <span class="badge badge-info ms-2">Menunggu Pembayaran</span>
                                @elseif($order->status == 'verification')
                                    <span class="badge badge-warning ms-2">Menunggu Verifikasi</span>
                                @elseif($order->status == 'cancelled')
                                    <span class="badge badge-danger ms-2">Ditolak</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-box mb-0" style="background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); border-color: var(--primary);">
                            <h6><i class="bi bi-coin me-2"></i>Detail Pembelian</h6>
                            <div class="mb-2">
                                <span class="text-muted">Jumlah Token:</span>
                                <span class="fw-bold text-success ms-2">{{ number_format($order->token_amount, 0, ',', '.') }} Token</span>
                            </div>
                            <div class="mb-2">
                                <span class="text-muted">Harga/Token:</span>
                                <span class="fw-bold ms-2">Rp {{ number_format($order->token_price, 0, ',', '.') }}</span>
                            </div>
                            <div>
                                <span class="text-muted">Total Bayar:</span>
                                <span class="fw-bold text-success fs-5 ms-2">Rp {{ number_format($order->total_price, 0, ',', '.') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4">
                    <h6><i class="bi bi-bank me-2"></i>Informasi Pembayaran</h6>
                    <div class="table-responsive">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td width="40%">Metode Pembayaran</td>
                                    <td><strong>{{ ucfirst($order->payment_method ?? '-') }}</strong></td>
                                </tr>
                                <tr>
                                    <td>Nomor Rekening</td>
                                    <td>
                                        <strong class="text-success">
                                            @if(isset($bankAccounts) && isset($bankAccounts[strtolower($order->payment_method ?? '')]))
                                                {{ $bankAccounts[strtolower($order->payment_method ?? '')]->nomer }}
                                            @else
                                                -
                                            @endif
                                        </strong>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Subtotal</td>
                                    <td>Rp {{ number_format($order->token_amount * $order->token_price, 0, ',', '.') }}</td>
                                </tr>
                                <tr>
                                    <td>Biaya Admin</td>
                                    <td>Rp {{ number_format($order->total_price - ($order->token_amount * $order->token_price), 0, ',', '.') }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Total Bayar</strong></td>
                                    <td><strong class="text-success fs-4">Rp {{ number_format($order->total_price, 0, ',', '.') }}</strong></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                @if($order->status == 'pending')
                <div class="mt-4">
                    <h6><i class="bi bi-upload me-2"></i>Upload Bukti Transfer</h6>
                    <form action="{{ route('admin.token.proof.upload', $order->id) }}" method="POST" enctype="multipart/form-data" class="upload-proof-form" data-order-id="{{ $order->id }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Bukti Transfer <span class="text-danger">*</span></label>
                            <input type="file" name="proof" class="form-control" accept="image/*" required>
                            <small class="text-muted">Format: JPG, PNG, JPEG (Max 2MB)</small>
                        </div>
                        <div class="d-flex gap-2 justify-content-end">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-upload me-2"></i>Upload & Submit
                            </button>
                        </div>
                    </form>
                </div>
                @else
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endforeach

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
// Data rekening dari database
const bankAccounts = {
    @php
        if(isset($bankAccounts)) {
            foreach($bankAccounts as $key => $bank) {
                echo "'{$key}': { name: '{$bank->bank}', number: '{$bank->nomer}', owner: '{$bank->nama}' },";
            }
        }
    @endphp
};

// Validasi token amount
function validateTokenAmount() {
    const tokenAmountInput = document.getElementById('tokenAmount');
    if (!tokenAmountInput) {
        console.error('Element tokenAmount tidak ditemukan');
        return false;
    }
    
    const minValue = parseInt(tokenAmountInput.min);
    const currentValue = parseInt(tokenAmountInput.value);
    
    if (currentValue < minValue) {
        Swal.fire({
            icon: 'warning',
            title: 'Peringatan',
            text: `Jumlah token tidak boleh kurang dari ${minValue}.`,
            confirmButtonColor: '#F59E0B'
        });
        tokenAmountInput.value = minValue;
        calculateTotal();
        return false;
    }
    
    return true;
}

// Functions
function calculateTotal() {    
    const tokenAmountInput = document.getElementById('tokenAmount');
    const pricePerTokenInput = document.querySelector('input[name="token_price"]');
    
    if (!tokenAmountInput) {
        console.error('Element tokenAmount tidak ditemukan');
        return;
    }
    
    const tokenAmount = parseInt(tokenAmountInput.value) || 0;
    const pricePerToken = parseInt(pricePerTokenInput?.value) || 5000;
    const randomFee = Math.floor(Math.random() * 999) + 1;
    const subtotal = tokenAmount * pricePerToken;
    const total = subtotal + randomFee;    
    // Update total
    const subtotalEl = document.getElementById('subtotal');
    const totalEl = document.getElementById('totalBayar');
    const feeDisplayEl = document.getElementById('feeDisplay');
    const adminFeeEl = document.getElementById('adminFee');
    const adminFeeInputEl = document.getElementById('adminFeeInput');
    
    if (subtotalEl) subtotalEl.textContent = 'Rp ' + subtotal.toLocaleString('id-ID');
    if (adminFeeEl) adminFeeEl.value = 'Rp ' + randomFee.toLocaleString('id-ID');
    if (adminFeeInputEl) adminFeeInputEl.value = randomFee;
    if (feeDisplayEl) feeDisplayEl.textContent = 'Rp ' + randomFee.toLocaleString('id-ID');
    if (totalEl) totalEl.textContent = 'Rp ' + total.toLocaleString('id-ID');
    
    // Update informasi rekening berdasarkan metode pembayaran
    const paymentMethodEl = document.getElementById('paymentMethod');
    if (paymentMethodEl) {
        const paymentMethod = paymentMethodEl.value.toLowerCase(); // Convert to lowercase
        const bankInfo = bankAccounts[paymentMethod] || bankAccounts.seabank;
        
        const bankNameEl = document.getElementById('bankName');
        const bankAccountEl = document.getElementById('bankAccount');
        
        if (bankNameEl) bankNameEl.textContent = bankInfo.name;
        if (bankAccountEl) bankAccountEl.textContent = bankInfo.number;
    }
}

function confirmPurchase() {
    // Validasi token amount sebelum lanjut
    if (!validateTokenAmount()) {
        return;
    }
    
    if (typeof Swal === 'undefined') {
        alert('SweetAlert2 tidak tersedia. Menggunakan konfirmasi browser default.');
        document.getElementById('purchaseTokenForm').submit();
        return;
    }
    
    const tokenAmount = document.getElementById('tokenAmount').value;
    const totalBayar = document.getElementById('totalBayar').textContent;
    const paymentMethod = document.getElementById('paymentMethod');
    const selectedMethod = paymentMethod.options[paymentMethod.selectedIndex].text;
    const subtotal = document.getElementById('subtotal').textContent;
    const feeDisplay = document.getElementById('feeDisplay').textContent;
    const bankName = document.getElementById('bankName').textContent;
    const bankAccount = document.getElementById('bankAccount').textContent;
    
    Swal.fire({
        title: 'Beli Token?',
        html: `
            <div style="text-align: left;">
                <p style="margin-bottom: 8px;"><strong>Jumlah Token:</strong> <span class="text-success">${tokenAmount}</span></p>
                <p style="margin-bottom: 8px;"><strong>Metode Pembayaran:</strong> ${selectedMethod}</p>
                <p style="margin-bottom: 8px;"><strong>Transfer ke:</strong> ${bankName} - <strong>${bankAccount}</strong></p>
                <p style="margin-bottom: 8px;"><strong>Subtotal:</strong> ${subtotal}</p>
                <p style="margin-bottom: 8px;"><strong>Biaya Admin:</strong> ${feeDisplay}</p>
                <hr style="margin: 12px 0;">
                <p style="margin-bottom: 0; font-size: 1.1em;"><strong>Total Bayar:</strong> <span class="text-success" style="font-size: 1.2em;">${totalBayar}</span></p>
            </div>
        `,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Beli',
        cancelButtonText: 'Batal',
        reverseButtons: true,
        width: '500px'
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('purchaseTokenForm').submit();
        }
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // First, update bank info based on selected payment method
    const paymentMethodEl = document.getElementById('paymentMethod');
    if (paymentMethodEl && bankAccounts) {
        const paymentMethod = paymentMethodEl.value.toLowerCase();
        const bankInfo = bankAccounts[paymentMethod] || Object.values(bankAccounts)[0];
        
        const bankNameEl = document.getElementById('bankName');
        const bankAccountEl = document.getElementById('bankAccount');
        
        if (bankNameEl) bankNameEl.textContent = bankInfo.name;
        if (bankAccountEl) bankAccountEl.textContent = bankInfo.number;
    }
    
    // Then calculate total
    calculateTotal();
    
    // Handle upload proof forms
    document.querySelectorAll('.upload-proof-form').forEach(function(form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            const modal = this.closest('.modal');
            
            // Show loading
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Uploading...';
            
            fetch(this.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: formData
            })
            .then(async response => {
                const data = await response.json().catch(() => null);
                if (!response.ok) {
                    const message = data && data.message ? data.message : 'Gagal mengupload bukti transfer. Silakan coba lagi.';
                    throw new Error(message);
                }
                return data;
            })
            .then(data => {
                if (data.success) {
                    // Close modal
                    const modalInstance = bootstrap.Modal.getInstance(modal);
                    modalInstance.hide();
                    
                    // Show success message
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: data.message || 'Bukti transfer berhasil diupload. Menunggu verifikasi admin.',
                        confirmButtonColor: '#28a745'
                    });
                    
                    // Reload page after short delay
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    throw new Error(data.message || 'Terjadi kesalahan.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: error.message || 'Terjadi kesalahan. Silakan coba lagi.',
                    confirmButtonColor: '#dc3545'
                });
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            });
        });
    });
});
</script>

@endsection