@extends('admin::layouts.admin')

@section('title', 'Main Wallet Game')

@section('content')
<div class="main-wallet-page">
    {{-- Header Card --}}
    <div class="header-card">
        <div class="header-icon">
            <i class="fas fa-coins"></i>
        </div>
        <h1 class="header-title">Saldo Dompet Utama Permainan</h1>
    </div>

    <div class="row">
        <div class="col-md-6">
            {{-- Total Points Card --}}
            <div class="total-points-card">
                <span class="total-label">Total Saldo: <strong>2500 Koin</strong></span>

                {{-- <span class="total-value">Total Poin: <strong>{{ $totalPoin }} Koin</strong></span> --}}
            </div>

        </div>
        <div class="col-md-6">
            {{-- Total Points Card --}}
            <div class="total-points-card">
                <span class="total-label">Total Penukaran Koin: <strong style="color: #007bff;">1000 Koin</strong></span>
                <span class="total-value">Total Penukaran Poin: <strong>{{ $totalPoin }} Poin</strong></span>
            </div>

        </div>
    </div>

    {{-- Data Table Card --}}
    <div class="data-table-card">
        <table class="data-table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Poin</th>
                    <th>Tanggal</th>
                    <th>Koin</th>
                    <th>Wallet</th>
                    <th>Status Redeem</th>
                </tr>
            </thead>
            <tbody>
                @forelse($redeemData as $data)
                <tr>
                    <td>{{ $data->user_name }}</td>
                    <td class="poin-value">{{ $data->poin }}</td>
                    <td>{{ $data->tanggal }}</td>
                    <td class="koin-value">{{ $data->koin }}</td>
                    <td class="wallet-value">{{ $data->wallet }}</td>
                    <td class="wallet-value">{{ $data->status }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="text-align: center; padding: 40px; color: #9ca3af;">
                        Belum ada data redeem poin
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

        {{-- Pagination --}}
        <div class="table-footer">
            <div class="showing-text">Showing 1-10 from 05</div>
            <div class="pagination-controls">
                <span class="rows-label">Rows per page:</span>
                <select class="rows-select">
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <button class="page-btn prev-btn" disabled>
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="page-btn next-btn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .main-wallet-page {
        padding: 24px;
        max-width: 1400px;
    }

    /* Header Card */
    .header-card {
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
        border-radius: 16px;
        padding: 24px 32px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
    }

    .header-icon {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
    }

    .header-title {
        color: white;
        font-size: 24px;
        font-weight: 600;
        margin: 0;
    }

    /* Total Points Card */
    .total-points-card {
        background: linear-gradient(135deg, #312e81 0%, #4c1d95 100%);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 12px;
        padding: 20px 32px;
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .total-label {
        color: #e9d5ff;
        font-size: 18px;
        font-weight: 500;
    }

    .total-value {
        color: #e9d5ff;
        font-size: 18px;
        font-weight: 400;
    }

    .total-value strong {
        color: #fbbf24;
        font-weight: 700;
    }

    /* Data Table Card */
    .data-table-card {
        background: #1e1b4b;
        border: 1px solid rgba(168, 85, 247, 0.2);
        border-radius: 12px;
        overflow: hidden;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table thead {
        background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
    }

    .data-table thead th {
        padding: 20px 24px;
        text-align: left;
        font-size: 16px;
        font-weight: 600;
        color: #e9d5ff;
        border: none;
    }

    .data-table tbody {
        background: #0f0a1e;
    }

    .data-table tbody tr {
        border-bottom: 1px solid rgba(168, 85, 247, 0.1);
        transition: background-color 0.2s;
    }

    .data-table tbody tr:hover {
        background: rgba(124, 58, 237, 0.1);
    }

    .data-table tbody tr:last-child {
        border-bottom: none;
    }

    .data-table tbody td {
        padding: 20px 24px;
        font-size: 15px;
        color: #e5e7eb;
    }

    .poin-value,
    .koin-value {
        color: white;
        font-weight: 500;
    }

    .wallet-value {
        color: #c084fc;
        font-weight: 500;
    }

    /* Table Footer */
    .table-footer {
        background: #0f0a1e;
        padding: 16px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid rgba(168, 85, 247, 0.1);
    }

    .showing-text {
        color: #9ca3af;
        font-size: 14px;
    }

    .pagination-controls {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .rows-label {
        color: #9ca3af;
        font-size: 14px;
    }

    .rows-select {
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 6px;
        padding: 6px 32px 6px 12px;
        color: #e5e7eb;
        font-size: 14px;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
    }

    .rows-select:focus {
        outline: none;
        border-color: #a855f7;
    }

    .page-btn {
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 6px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e5e7eb;
        cursor: pointer;
        transition: all 0.2s;
    }

    .page-btn:hover:not(:disabled) {
        background: rgba(168, 85, 247, 0.2);
        border-color: #a855f7;
    }

    .page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .main-wallet-page {
            padding: 16px;
        }

        .header-card {
            padding: 20px 24px;
        }

        .header-title {
            font-size: 20px;
        }

        .total-points-card {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .data-table-card {
            overflow-x: auto;
        }

        .data-table {
            min-width: 600px;
        }

        .table-footer {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }

        .pagination-controls {
            width: 100%;
            justify-content: space-between;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    // Pagination functionality
    document.querySelector('.rows-select').addEventListener('change', function(e) {
        console.log('Rows per page changed to:', e.target.value);
        // TODO: Implement actual pagination
    });

    document.querySelectorAll('.page-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (!this.disabled) {
                console.log('Page navigation:', this.classList.contains('prev-btn') ? 'Previous' : 'Next');
                // TODO: Implement actual page navigation
            }
        });
    });
</script>
@endpush