@extends('layouts.app')
@section('content')
<div class="container">
    <section class="activity">
        <header class="activity__header">
            <nav class="activity__nav">
                <ul class="surface">
                    <li class="{{ $type == 'saldo' ? 'activity__nav--active' : '' }}">
                        <button data-type="saldo" class="btn btn--primary">Saldo</button>
                    </li>

                    <li class="{{ $type == 'slot' ? 'activity__nav--active' : '' }}">
                        <button data-type="slot" class="btn btn--primary">Slot</button>
                    </li>

                    <li class="{{ $type == 'casino' ? 'activity__nav--active' : '' }}">
                        <button data-type="casino" class="btn btn--primary">Casino</button>
                    </li>

                    <li class="{{ $type == 'arcade' ? 'activity__nav--active' : '' }}">
                        <button data-type="arcade" class="btn btn--primary">Arcade</button>
                    </li>

                    <li class="{{ $type == 'fishing' ? 'activity__nav--active' : '' }}">
                        <button data-type="fishing" class="btn btn--primary">Fishing</button>
                    </li>

                    <li class="{{ $type == 'lotto' ? 'activity__nav--active' : '' }}">
                        <button data-type="lotto" class="btn btn--primary">Lotto</button>
                    </li>

                    <li class="{{ $type == 'sports' ? 'activity__nav--active' : '' }}">
                        <button data-type="sports" class="btn btn--primary">Sports</button>
                    </li>
                </ul>
            </nav>
        </header>
        <div class="activity__content surface">

            @if($type === 'saldo')

            @forelse($transactions as $trx)
            <div class="activity__item activity__item--payment">

                <span class="activity__item__id">#{{ $trx->trxid }}</span>

                <span class="activity__item__service">
                    {{ $trx->payment_type ?? 'system' }}
                </span>

                <span class="activity__item__type">
                    {{ ucfirst($trx->payment_type) }}
                </span>

                <span class="activity__item__amount">
                    Rp {{ number_format($trx->amount, 0, ',', '.') }}
                </span>

                @php
                $statusClass = match($trx->status) {
                'success' => 'chip--success',
                'pending' => 'chip--warning',
                'failed','cancel' => 'chip--danger',
                default => 'chip--muted'
                };

                $statusText = match($trx->status) {
                'success' => 'Disetujui',
                'pending' => 'Menunggu',
                'failed' => 'Ditolak',
                'cancel' => 'Dibatalkan',
                default => 'Unknown'
                };
                @endphp

                <div class="chip chip--md {{ $statusClass }}">
                    {{ $statusText }}
                </div>

                <span class="activity__item__updated">
                    {{ \Carbon\Carbon::parse($trx->created_at)->format('d/m/Y, H:i') }}
                </span>

            </div>
            @empty
            <div data-v-2eed8a3c="" class="alert alert--info">
                <i data-v-0e010622="" class="icon-info icon--lg"></i>
                <p>Saat ini belum ada data saldo pada akun anda.</p>
            </div>
            @endforelse

            @endif

            @if($type !== 'saldo')

            @forelse($playgames as $pg)
            <div class="activity__item activity__item--game">

                <span class="activity__item__id">
                    #{{ $pg->id }}
                </span>

                <span class="activity__item__service">
                    {{ $pg->game_provider }}
                </span>

                <span class="activity__item__type">
                    {{ $pg->game_name ?? $pg->game_code }}
                </span>

                <span class="activity__item__amount">
                    Rp {{ number_format($pg->balance_before ?? 0, 0, ',', '.') }}
                </span>

                <div class="chip chip--md chip--success">
                    Played
                </div>

                <span class="activity__item__updated">
                    {{ \Carbon\Carbon::parse($pg->created_at)->format('d/m/Y, H:i') }}
                </span>

            </div>
            @empty
            <div data-v-2eed8a3c="" class="alert alert--info">
                <i data-v-0e010622="" class="icon-info icon--lg"></i>
                <p>Saat ini belum ada aktivitas pada akun anda.</p>
            </div>
            @endforelse

            @endif
        </div>
        <div class="activity__load">

            @if($type === 'saldo' && $transactions->hasMorePages())
            <button data-v-2eed8a3c="" href="{{ $transactions->nextPageUrl() }}" class="btn btn--accent btn--sm">
                Muat lebih banyak
                </a>
                @endif

                @if($type !== 'saldo' && $playgames->hasMorePages())
                <button data-v-2eed8a3c="" href="{{ $playgames->nextPageUrl() }}" class="btn btn--accent btn--sm">
                    Muat lebih banyak
                    </a>
                    @endif

        </div>
    </section>
</div>
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {

        document.querySelectorAll('.activity__nav button').forEach(btn => {

            btn.addEventListener('click', () => {

                const type = btn.dataset.type;
                if (!type) return;

                const url = new URL(window.location.href);

                url.searchParams.set('type', type);

                window.location.href = url.toString();
            });

        });

    });
</script>
@endpush
@endsection