@php
    // Initialize variables with defaults to prevent undefined errors
    $connected_wallet = $connected_wallet ?? null;
    $total_points = $total_points ?? 0;
    $point_history = $point_history ?? collect([]);
@endphp

@extends('core::layouts.dashboard')

@section('title', $title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard/wallet.css') }}?v={{ time() }}">
@endpush

@section('content')
<div class="wallet-page">
    <!-- Wallet Header Section -->
    <div class="wallet-header">
        <div class="wallet-connected">
            <h2 class="wallet-title">Wallet yang Terhubung</h2>
            <div class="wallet-platform-badge">
                {{ strtoupper($connected_wallet->platform->name ?? 'BELUM TERHUBUNG') }}
            </div>
        </div>
        
        <div class="wallet-info">
            <div class="wallet-info-item">
                <span class="wallet-info-label">Address:</span>
                <span class="wallet-info-value">{{ $connected_wallet->wallet_address ?? '-' }}</span>
            </div>
            <div class="wallet-info-item">
                <span class="wallet-info-label">Total Poin:</span>
                <span class="wallet-info-value highlight">{{ number_format($total_points ?? 0) }} Poin</span>
            </div>
        </div>
    </div>

    <!-- Data Table Section -->
    <div class="data-table-section">
        <div class="section-header">
            <div class="section-icon">
                <i class="fas fa-table"></i>
            </div>
            <h3 class="section-title">Data Tabel Riwayat Poin</h3>
        </div>

        <!-- Search Box -->
        <div class="search-container">
            <div class="search-label">Cari Data</div>
            <div class="search-wrapper">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="Cari data" id="searchInput">
            </div>
        </div>

        <!-- Data Table -->
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Tipe</th>
                        <th>Poin</th>
                        <th>Wallet</th>
                        <th>Tanggal</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($point_history as $history)
                    <tr>
                        <td>
                            <div class="transaction-type">
                                <span class="type-title">{{ $history->source_label ?? 'Game Reward' }}</span>
                                @if($history->game)
                                <span class="type-subtitle">{{ $history->game->name }}</span>
                                @elseif($history->description)
                                <span class="type-subtitle">{{ $history->description }}</span>
                                @endif
                            </div>
                        </td>
                        <td>
                            <span class="point-value {{ $history->amount > 0 ? 'positive' : 'negative' }}">
                                {{ $history->amount > 0 ? '+' : '' }}{{ number_format($history->amount) }}
                            </span>
                        </td>
                        <td>
                            <span class="wallet-name">{{ $history->wallet->platform->name ?? $connected_wallet->platform->name ?? 'Indodax' }}</span>
                        </td>
                        <td>
                            <span class="transaction-date">{{ \Carbon\Carbon::parse($history->created_at)->format('d/m/Y') }}</span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center empty-state">
                            <div class="empty-icon">
                                <i class="fas fa-inbox"></i>
                            </div>
                            <p>Belum ada riwayat transaksi poin</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if(method_exists($point_history, 'hasPages') && $point_history->hasPages())
        <div class="pagination-wrapper">
            <div class="pagination-info">
                Showing {{ $point_history->firstItem() ?? 0 }}-{{ $point_history->lastItem() ?? 0 }} from {{ $point_history->total() ?? 0 }}
            </div>

            <div class="pagination-controls">
                <label for="rowsPerPage">Rows per page:</label>
                <select id="rowsPerPage" class="rows-select" onchange="changeRowsPerPage(this.value)">
                    <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                    <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                </select>

                <div class="pagination-buttons">
                    <button class="pagination-btn" 
                            onclick="window.location='{{ $point_history->previousPageUrl() }}'" 
                            {{ $point_history->onFirstPage() ? 'disabled' : '' }}>
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="pagination-btn" 
                            onclick="window.location='{{ $point_history->nextPageUrl() }}'" 
                            {{ !$point_history->hasMorePages() ? 'disabled' : '' }}>
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
function changeRowsPerPage(perPage) {
    const url = new URL(window.location.href);
    url.searchParams.set('per_page', perPage);
    window.location.href = url.toString();
}

// Simple search functionality
document.getElementById('searchInput')?.addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const rows = document.querySelectorAll('.data-table tbody tr');
    
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
    });
});
</script>
@endpush
@endsection