@extends('root')
@section('title', 'Balance')

@push('styles')
<style>
    .balance-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 1rem;
        padding: 2rem;
        color: white;
        position: relative;
        overflow: hidden;
    }
    .balance-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    }
    .balance-hero .balance-amount {
        font-size: 2.5rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }
    .balance-hero .balance-label {
        opacity: 0.9;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .stat-card {
        border-radius: 0.75rem;
        border: 1px solid rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }
    .stat-icon.success { background: rgba(40, 199, 111, 0.12); color: #28c76f; }
    .stat-icon.danger { background: rgba(234, 84, 85, 0.12); color: #ea5455; }
    .stat-icon.info { background: rgba(0, 207, 232, 0.12); color: #00cfe8; }
    .stat-icon.warning { background: rgba(255, 159, 67, 0.12); color: #ff9f43; }
    
    .transaction-card {
        border-radius: 0.75rem;
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .transaction-card .nav-tabs {
        border-bottom: 2px solid #f1f3f4;
    }
    .transaction-card .nav-tabs .nav-link {
        border: none;
        color: #6c757d;
        font-weight: 500;
        padding: 0.75rem 1.5rem;
        position: relative;
    }
    .transaction-card .nav-tabs .nav-link.active {
        color: #667eea;
        background: transparent;
    }
    .transaction-card .nav-tabs .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .table-modern {
        border-collapse: separate;
        border-spacing: 0;
    }
    .table-modern thead th {
        background: #f8f9fa;
        border: none;
        color: #6c757d;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.875rem 1rem;
    }
    .table-modern tbody tr {
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .table-modern tbody tr:hover {
        background: #f8f9fa;
    }
    .table-modern tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f4;
    }
    .badge-modern {
        padding: 0.4rem 0.75rem;
        border-radius: 6px;
        font-weight: 500;
        font-size: 0.75rem;
    }
    .badge-success-soft { background: rgba(40, 199, 111, 0.12); color: #28c76f; }
    .badge-warning-soft { background: rgba(255, 159, 67, 0.12); color: #ff9f43; }
    .badge-danger-soft { background: rgba(234, 84, 85, 0.12); color: #ea5455; }
    .badge-secondary-soft { background: rgba(108, 117, 125, 0.12); color: #6c757d; }
    .badge-info-soft { background: rgba(0, 207, 232, 0.12); color: #00cfe8; }
    .badge-primary-soft { background: rgba(102, 126, 234, 0.12); color: #667eea; }
    
    .topup-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        padding: 0.875rem 2rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    .topup-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    }
    
    .detail-modal .modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .detail-modal .modal-header .btn-close {
        filter: brightness(0) invert(1);
    }
    .detail-item {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f3f4;
    }
    .detail-item:last-child {
        border-bottom: none;
    }
    .detail-item .label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }
    .detail-item .value {
        font-weight: 500;
        color: #333;
    }
    
    .quick-actions {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    .quick-action-btn {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
    }
    .empty-state {
        padding: 3rem;
        text-align: center;
    }
    .empty-state i {
        font-size: 3rem;
        color: #dee2e6;
        margin-bottom: 1rem;
    }
    .empty-state p {
        color: #6c757d;
        margin-bottom: 1.5rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Balance',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('client.balance'), 'label' => 'Balance'],
        ],
        'current' => 'Balance'
    ])

    <div class="row g-4">
        <!-- Balance Hero Section -->
        <div class="col-lg-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="ti ti-wallet fs-4"></i>
                        <span>Saldo Saat Ini</span>
                    </div>
                    <h2 class="mb-0 text-white">Rp {{ number_format($client->balance, 0, ',', '.') }}</h2>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-body">
                    <h6 class="text-muted mb-3">Quick Actions</h6>
                    <div class="quick-actions">
                    
                        <a href="{{ route('client.topup.index') }}" class="btn btn-outline-primary w-100 mb-2">
                            <i class="ti ti-plus me-1"></i> Topup Saldo
                        </a>
                        <a href="{{ route('client.invoice.index') }}" class="btn btn-outline-success w-100">
                            <i class="ti ti-receipt me-1"></i> Invoice Topup
                        </a>    
                    </div>  
                </div>
            </div>
        </div>

        <!-- Transaction History -->
        <div class="col-lg-8">
            <div class="card transaction-card">
                <div class="card-header bg-white border-0 pt-3">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ !request('balance_page') ? 'active' : '' }}" data-bs-toggle="tab" data-bs-target="#tab-transactions" type="button">
                                <i class="ti ti-credit-card me-1"></i>Transaksi Topup
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ request('balance_page') ? 'active' : '' }}" data-bs-toggle="tab" data-bs-target="#tab-balance" type="button">
                                <i class="ti ti-history me-1"></i>Riwayat Saldo
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <!-- Transactions Tab -->
                        <div class="tab-pane fade {{ !request('balance_page') ? 'show active' : '' }}" id="tab-transactions" role="tabpanel">
                            @if($transactions->isEmpty())
                                <div class="empty-state">
                                    <i class="ti ti-receipt-off d-block"></i>
                                    <p>Belum ada transaksi topup</p>
                                    <a href="{{ route('client.topup.index') }}" class="btn topup-btn text-white">
                                        <i class="ti ti-plus me-1"></i>Topup Sekarang
                                    </a>
                                </div>
                            @else
                                <div class="table-responsive">
                                    <table class="table table-modern">
                                        <thead>
                                            <tr>
                                                <th>Order ID</th>
                                                <th>Nominal</th>
                                                <th>Metode</th>
                                                <th>Status</th>
                                                <th>Tanggal</th>
                                                <th class="text-end">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($transactions as $tx)
                                            <tr onclick="showTransactionDetail({{ $tx->id }})" style="cursor: pointer;">
                                                <td>
                                                    <code class="small bg-light px-2 py-1 rounded">{{ Str::limit($tx->order_id, 20) }}</code>
                                                </td>
                                                <td class="fw-semibold">{{ $tx->formatted_amount }}</td>
                                                <td>
                                                    <span class="text-muted">{{ $tx->payment_channel ?? 'N/A' }}</span>
                                                </td>
                                                <td>
                                                    @switch($tx->status)
                                                        @case('SUCCESS')
                                                            <span class="badge badge-modern badge-success-soft">
                                                                <i class="ti ti-check me-1"></i>{{ $tx->status }}
                                                            </span>
                                                            @break
                                                        @case('PENDING')
                                                            <span class="badge badge-modern badge-warning-soft">
                                                                <i class="ti ti-clock me-1"></i>{{ $tx->status }}
                                                            </span>
                                                            @break
                                                        @case('EXPIRED')
                                                            <span class="badge badge-modern badge-danger-soft">
                                                                <i class="ti ti-x me-1"></i>{{ $tx->status }}
                                                            </span>
                                                            @break
                                                        @default
                                                            <span class="badge badge-modern badge-secondary-soft">{{ $tx->status }}</span>
                                                    @endswitch
                                                </td>
                                                <td>
                                                    <span class="text-muted small">{{ $tx->created_at->format('d M Y') }}</span>
                                                    <br>
                                                    <span class="text-muted small opacity-75">{{ $tx->created_at->format('H:i') }}</span>
                                                </td>
                                                <td class="text-end">
                                                    <button class="btn btn-sm btn-light" onclick="event.stopPropagation(); showTransactionDetail({{ $tx->id }})">
                                                        <i class="ti ti-eye"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-3 d-flex justify-content-center justify-content-md-end">
                                    {{ $transactions->links('pagination::bootstrap-5') }}
                                </div>
                            @endif
                        </div>

                        <!-- Balance History Tab -->
                        <div class="tab-pane fade {{ request('balance_page') ? 'show active' : '' }}" id="tab-balance" role="tabpanel">
                            @if($balanceHistories->isEmpty())
                                <div class="empty-state">
                                    <i class="ti ti-history d-block"></i>
                                    <p>Belum ada riwayat saldo</p>
                                </div>
                            @else
                                <div class="table-responsive">
                                    <table class="table table-modern">
                                        <thead>
                                            <tr>
                                                <th>Ref ID</th>
                                                <th>Tipe</th>
                                                <th>Nominal</th>
                                                <th>Saldo</th>
                                                <th>Tanggal</th>
                                                <th class="text-end">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($balanceHistories as $history)
                                            <tr onclick="showBalanceDetail({{ $history->id }})" style="cursor: pointer;">
                                                <td>
                                                    <code class="small bg-light px-2 py-1 rounded">{{ Str::limit($history->reference_id, 15) }}</code>
                                                </td>
                                                <td>
                                                    @switch($history->type)
                                                        @case('TOPUP')
                                                            <span class="badge badge-modern badge-success-soft">
                                                                <i class="ti ti-arrow-up me-1"></i>TOPUP
                                                            </span>
                                                            @break
                                                        @case('DEDUCTION')
                                                            <span class="badge badge-modern badge-danger-soft">
                                                                <i class="ti ti-arrow-down me-1"></i>DEDUCTION
                                                            </span>
                                                            @break
                                                        @case('MANUAL')
                                                            <span class="badge badge-modern badge-info-soft">
                                                                <i class="ti ti-edit me-1"></i>MANUAL
                                                            </span>
                                                            @break
                                                        @case('REFUND')
                                                            <span class="badge badge-modern badge-primary-soft">
                                                                <i class="ti ti-receipt-refund me-1"></i>REFUND
                                                            </span>
                                                            @break
                                                        @default
                                                            <span class="badge badge-modern badge-secondary-soft">{{ $history->type }}</span>
                                                    @endswitch
                                                </td>
                                                <td>
                                                    <span class="fw-semibold {{ $history->type === 'TOPUP' || $history->type === 'REFUND' ? 'text-success' : 'text-danger' }}">
                                                        {{ $history->formatted_amount }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <span class="text-muted small">Rp {{ number_format($history->balance_before, 0, ',', '.') }}</span>
                                                        <i class="ti ti-arrow-right text-muted"></i>
                                                        <span class="fw-medium">Rp {{ number_format($history->balance_after, 0, ',', '.') }}</span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-muted small">{{ $history->created_at->format('d M Y') }}</span>
                                                    <br>
                                                    <span class="text-muted small opacity-75">{{ $history->created_at->format('H:i') }}</span>
                                                </td>
                                                <td class="text-end">
                                                    <button class="btn btn-sm btn-light" onclick="event.stopPropagation(); showBalanceDetail({{ $history->id }})">
                                                        <i class="ti ti-eye"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            @endforeach 
                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-3 d-flex justify-content-center justify-content-md-end">
                                    {{ $balanceHistories->links('pagination::bootstrap-5') }}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Transaction Detail Modal -->
<div class="modal fade detail-modal" id="transactionDetailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="ti ti-receipt me-2"></i>Detail Transaksi
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="transactionDetailContent">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Balance Detail Modal -->
<div class="modal fade detail-modal" id="balanceDetailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="ti ti-history me-2"></i>Detail Riwayat Saldo
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="balanceDetailContent">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Transaction data for details
const transactions = @json($transactions->items());
const balanceHistories = @json($balanceHistories->items());

function formatRupiah(amount) {
    return 'Rp ' + parseFloat(amount || 0).toLocaleString('id-ID');
}

function formatDate(dateStr) {
    const date = new Date(dateStr);
    const options = { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' };
    return date.toLocaleDateString('id-ID', options);
}

function getStatusBadge(status) {
    const badges = {
        'SUCCESS': '<span class="badge badge-modern badge-success-soft"><i class="ti ti-check me-1"></i>SUCCESS</span>',
        'PENDING': '<span class="badge badge-modern badge-warning-soft"><i class="ti ti-clock me-1"></i>PENDING</span>',
        'EXPIRED': '<span class="badge badge-modern badge-danger-soft"><i class="ti ti-x me-1"></i>EXPIRED</span>',
        'FAILED': '<span class="badge badge-modern badge-danger-soft"><i class="ti ti-x me-1"></i>FAILED</span>'
    };
    return badges[status] || `<span class="badge badge-modern badge-secondary-soft">${status}</span>`;
}

function getTypeBadge(type) {
    const badges = {
        'TOPUP': '<span class="badge badge-modern badge-success-soft"><i class="ti ti-arrow-up me-1"></i>TOPUP</span>',
        'DEDUCTION': '<span class="badge badge-modern badge-danger-soft"><i class="ti ti-arrow-down me-1"></i>DEDUCTION</span>',
        'MANUAL': '<span class="badge badge-modern badge-info-soft"><i class="ti ti-edit me-1"></i>MANUAL</span>',
        'REFUND': '<span class="badge badge-modern badge-primary-soft"><i class="ti ti-receipt-refund me-1"></i>REFUND</span>'
    };
    return badges[type] || `<span class="badge badge-modern badge-secondary-soft">${type}</span>`;
}

function showTransactionDetail(id) {
    const tx = transactions.find(t => t.id === id);
    if (!tx) {
        toastr.error('Transaksi tidak ditemukan');
        return;
    }
    
    const content = `
        <div class="text-center mb-4">
            ${getStatusBadge(tx.status)}
            <h3 class="mt-3 mb-1">${formatRupiah(tx.amount)}</h3>
            <small class="text-muted">Nominal Topup</small>
        </div>
        
        <div class="detail-item">
            <div class="label">Order ID</div>
            <div class="value"><code>${tx.order_id}</code></div>
        </div>
        
        ${tx.transaction_id ? `
        <div class="detail-item">
            <div class="label">Transaction ID</div>
            <div class="value"><code>${tx.transaction_id}</code></div>
        </div>
        ` : ''}
        
        <div class="detail-item">
            <div class="label">Metode Pembayaran</div>
            <div class="value">${tx.payment_channel || 'N/A'}</div>
        </div>
        
        <div class="detail-item">
            <div class="label">Gateway</div>
            <div class="value">${tx.gateway || 'N/A'}</div>
        </div>
        
        <div class="row">
            <div class="col-6">
                <div class="detail-item">
                    <div class="label">Nominal</div>
                    <div class="value">${formatRupiah(tx.amount)}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="detail-item">
                    <div class="label">Admin Fee</div>
                    <div class="value">${formatRupiah(tx.admin_fee || 0)}</div>
                </div>
            </div>
        </div>
        
        <div class="detail-item bg-light rounded p-3 mt-2">
            <div class="d-flex justify-content-between align-items-center">
                <span class="text-muted">Total Bayar</span>
                <span class="h5 mb-0 fw-bold">${formatRupiah(tx.total_amount || tx.amount)}</span>
            </div>
        </div>
        
        <div class="row mt-3">
            <div class="col-6">
                <div class="detail-item">
                    <div class="label">Tanggal Dibuat</div>
                    <div class="value">${formatDate(tx.created_at)}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="detail-item">
                    <div class="label">${tx.paid_at ? 'Tanggal Bayar' : 'Expired At'}</div>
                    <div class="value">${tx.paid_at ? formatDate(tx.paid_at) : (tx.expired_at ? formatDate(tx.expired_at) : 'N/A')}</div>
                </div>
            </div>
        </div>
        
        ${tx.status === 'PENDING' && tx.payment_url ? `
        <div class="mt-4">
            <a href="${tx.payment_url}" target="_blank" class="btn topup-btn text-white w-100">
                <i class="ti ti-external-link me-2"></i>Bayar Sekarang
            </a>
        </div>
        ` : ''}
    `;
    
    document.getElementById('transactionDetailContent').innerHTML = content;
    new bootstrap.Modal(document.getElementById('transactionDetailModal')).show();
}

function showBalanceDetail(id) {
    const history = balanceHistories.find(h => h.id === id);
    if (!history) {
        toastr.error('Riwayat tidak ditemukan');
        return;
    }
    
    const isPositive = history.type === 'TOPUP' || history.type === 'REFUND';
    const amountClass = isPositive ? 'text-success' : 'text-danger';
    const amountPrefix = isPositive ? '+' : '-';
    
    const content = `
        <div class="text-center mb-4">
            ${getTypeBadge(history.type)}
            <h3 class="mt-3 mb-1 ${amountClass}">${amountPrefix}${formatRupiah(Math.abs(history.amount))}</h3>
            <small class="text-muted">Perubahan Saldo</small>
        </div>
        
        <div class="detail-item">
            <div class="label">Reference ID</div>
            <div class="value"><code>${history.reference_id}</code></div>
        </div>
        
        <div class="detail-item">
            <div class="label">Tipe Transaksi</div>
            <div class="value">${getTypeBadge(history.type)}</div>
        </div>
        
        ${history.description ? `
        <div class="detail-item">
            <div class="label">Deskripsi</div>
            <div class="value">${history.description}</div>
        </div>
        ` : ''}
        
        <div class="row">
            <div class="col-6">
                <div class="detail-item">
                    <div class="label">Saldo Sebelum</div>
                    <div class="value text-muted">${formatRupiah(history.balance_before)}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="detail-item">
                    <div class="label">Saldo Sesudah</div>
                    <div class="value fw-bold">${formatRupiah(history.balance_after)}</div>
                </div>
            </div>
        </div>
        
        <div class="detail-item bg-light rounded p-3 mt-2">
            <div class="d-flex justify-content-between align-items-center">
                <span class="text-muted">Perubahan</span>
                <span class="h5 mb-0 fw-bold ${amountClass}">${amountPrefix}${formatRupiah(Math.abs(history.amount))}</span>
            </div>
        </div>
        
        <div class="detail-item mt-3">
            <div class="label">Tanggal</div>
            <div class="value">${formatDate(history.created_at)}</div>
        </div>
    `;
    
    document.getElementById('balanceDetailContent').innerHTML = content;
    new bootstrap.Modal(document.getElementById('balanceDetailModal')).show();
}
</script>
@endpush