@extends('root')
@section('title', 'Riwayat Topup')

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

    <div class="row g-4">
        <!-- Saldo Saat Ini -->
        <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">
                    <a href="{{ route('client.topup.index') }}" class="btn btn-primary w-100">
                        <i class="ti ti-plus me-1"></i> Topup Saldo
                    </a>
                </div>
            </div>
        </div>

        <!-- Transaction History -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-transactions" type="button">
                                Transaksi Topup
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-balance" type="button">
                                Riwayat Saldo
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <!-- Transactions Tab -->
                        <div class="tab-pane fade show active" id="tab-transactions" role="tabpanel">
                            @if($transactions->isEmpty())
                                <div class="text-center py-5 text-muted">
                                    <i class="ti ti-receipt-off fs-1 mb-2 d-block"></i>
                                    <p>Belum ada transaksi topup</p>
                                </div>
                            @else
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>Order ID</th>
                                                <th>Gateway</th>
                                                <th>Nominal</th>
                                                <th>Fee Layanan</th>
                                                <th>Saldo Tersedia</th>
                                                <th>Status</th>
                                                <th>Tanggal</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($transactions as $tx)
                                            <tr>
                                                <td>
                                                    <code class="small">{{ $tx->order_id }}</code>
                                                </td>
                                                <td>
                                                    @if($tx->gateway === 'pakar_digital')
                                                        <span class="badge bg-primary">Pakar Digital</span>
                                                    @else
                                                        <span class="badge bg-success">Midtrans</span>
                                                    @endif
                                                </td>
                                                <td>{{ $tx->formatted_amount }}</td>
                                                <td class="text-danger">
                                                    @if($tx->service_fee > 0)
                                                        -{{ $tx->formatted_service_fee }}
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td class="text-success fw-semibold">
                                                    @if($tx->net_amount > 0)
                                                        {{ $tx->formatted_net_amount }}
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if(strtolower($tx->status) === 'success')
                                                        <span class="badge bg-success">{{ $tx->status }}</span>
                                                    @elseif(strtolower($tx->status) === 'pending')
                                                        <span class="badge bg-warning text-dark">{{ $tx->status }}</span>
                                                        @if($tx->expired_at && $tx->expired_at->isPast())
                                                            <br><small class="text-danger">Expired</small>
                                                        @endif
                                                    @elseif(strtolower($tx->status) === 'expired')
                                                        <span class="badge bg-danger">{{ $tx->status }}</span>
                                                    @else
                                                        <span class="badge bg-secondary">{{ $tx->status }}</span>
                                                    @endif
                                                </td>
                                                <td class="text-muted small">{{ $tx->created_at->format('d M Y H:i') }}</td>
                                                <td>
                                                    @if(strtolower($tx->status) === 'pending')
                                                        @if($tx->expired_at && $tx->expired_at->isFuture() && $tx->payment_url)
                                                            <a href="{{ $tx->payment_url }}" class="btn btn-primary btn-sm" target="_blank">
                                                                <i class="ti ti-external-link me-1"></i>Bayar
                                                            </a>
                                                        @else
                                                            <form action="{{ route('client.topup.retry', $tx->order_id) }}" method="POST" class="d-inline">
                                                                @csrf
                                                                <button type="submit" class="btn btn-warning btn-sm">
                                                                    <i class="ti ti-refresh me-1"></i>Bayar Kembali
                                                                </button>
                                                            </form>
                                                        @endif
                                                    @elseif(strtolower($tx->status) === 'expired')
                                                        <form action="{{ route('client.topup.retry', $tx->order_id) }}" method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="btn btn-warning btn-sm">
                                                                <i class="ti ti-refresh me-1"></i>Bayar Kembali
                                                            </button>
                                                        </form>
                                                    @elseif(strtolower($tx->status) === 'success')
                                                        <span class="text-success small"><i class="ti ti-check"></i> Lunas</span>
                                                    @else
                                                        <span class="text-muted small">-</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-3">
                                    {{ $transactions->links() }}
                                </div>
                            @endif
                        </div>

                        <!-- Balance History Tab -->
                        <div class="tab-pane fade" id="tab-balance" role="tabpanel">
                            @if($balanceHistories->isEmpty())
                                <div class="text-center py-5 text-muted">
                                    <i class="ti ti-history fs-1 mb-2 d-block"></i>
                                    <p>Belum ada riwayat saldo</p>
                                </div>
                            @else
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>Ref ID</th>
                                                <th>Tipe</th>
                                                <th>Nominal</th>
                                                <th>Saldo Sebelum</th>
                                                <th>Saldo Sesudah</th>
                                                <th>Tanggal</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($balanceHistories as $history)
                                            <tr>
                                                <td><code class="small">{{ Str::limit($history->reference_id, 15) }}</code></td>
                                                <td>
                                                    <span class="badge {{ $history->type_badge_class }}">{{ $history->type }}</span>
                                                </td>
                                                <td class="{{ $history->type === 'TOPUP' ? 'text-success' : 'text-danger' }}">
                                                    {{ $history->formatted_amount }}
                                                </td>
                                                <td class="text-muted">Rp {{ number_format($history->balance_before, 0, ',', '.') }}</td>
                                                <td>Rp {{ number_format($history->balance_after, 0, ',', '.') }}</td>
                                                <td class="text-muted small">{{ $history->created_at->format('d M Y H:i') }}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-3">
                                    {{ $balanceHistories->links() }}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection