@php
    // Initialize variables with defaults to prevent undefined errors
    $connected_wallet = $connected_wallet ?? null;
    $total_points = $total_points ?? 0;
    $redeem_history = $redeem_history ?? collect([]);
    $min_redeem_points = $min_redeem_points ?? 10;
@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/redeem.css') }}?v={{ time() }}">
@endpush

@section('content')
<div class="redeem-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 class="wallet-info-item">
                <button class="redeem-btn" onclick="openRedeemModal()" {{ $total_points < $min_redeem_points ? 'disabled' : '' }}>
                    Redeem Poin
                </button>
            </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 Redeem 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>Poin</th>
                        <th>Tanggal</th>
                        <th>Koin</th>
                        <th>Wallet</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($redeem_history as $redeem)
                    <tr>
                        <td>
                            <span class="point-value negative">
                                {{ number_format($redeem->points_converted ?? 0) }}
                            </span>
                        </td>
                        <td>
                            <span class="transaction-date">{{ \Carbon\Carbon::parse($redeem->created_at)->format('d/m/Y') }}</span>
                        </td>
                        <td>
                            <span class="coin-value positive">
                                +{{ number_format($redeem->coins_received ?? 0) }} 🪙
                            </span>
                        </td>
                        <td>
                            <span class="wallet-name">{{ $redeem->wallet->platform->name ?? $connected_wallet->platform->name ?? 'Indodax' }}</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 redeem poin</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if(method_exists($redeem_history, 'hasPages') && $redeem_history->hasPages())
        <div class="pagination-wrapper">
            <div class="pagination-info">
                Showing {{ $redeem_history->firstItem() ?? 0 }}-{{ $redeem_history->lastItem() ?? 0 }} from {{ $redeem_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='{{ $redeem_history->previousPageUrl() }}'" 
                            {{ $redeem_history->onFirstPage() ? 'disabled' : '' }}>
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="pagination-btn" 
                            onclick="window.location='{{ $redeem_history->nextPageUrl() }}'" 
                            {{ !$redeem_history->hasMorePages() ? 'disabled' : '' }}>
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Redeem Modal -->
<div id="redeemModal" class="modal">
    <div class="modal-overlay" onclick="closeRedeemModal()"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">REDEEM</h3>
        </div>
        
        <div class="modal-body">
            <p class="modal-description">Redeem poin pada Wallet yang terkoneksi</p>
            
            <div class="redeem-info">
                <span class="redeem-amount">+{{ $min_redeem_points }} 🪙</span>
            </div>
            
            <form id="redeemForm" action="#" method="POST">
                @csrf
                <input type="hidden" name="points_to_redeem" value="{{ $min_redeem_points }}">
            </form>
        </div>
        
        <div class="modal-footer">
            <button type="button" class="btn-cancel" onclick="closeRedeemModal()">Batal</button>
            <button type="button" class="btn-redeem" onclick="submitRedeem()">Redeem Poin</button>
        </div>
    </div>
</div>

@push('scripts')
<script>
function openRedeemModal() {
    document.getElementById('redeemModal').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeRedeemModal() {
    document.getElementById('redeemModal').classList.remove('active');
    document.body.style.overflow = '';
}

function submitRedeem() {
    // TODO: Implement when backend route is ready
    alert('Fitur redeem akan segera aktif setelah backend siap');
    closeRedeemModal();
    
    // Uncomment when route is ready:
    // if (confirm('Apakah Anda yakin ingin menukar {{ $min_redeem_points }} poin menjadi koin?')) {
    //     document.getElementById('redeemForm').submit();
    // }
}

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';
    });
});

// Close modal with ESC key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeRedeemModal();
    }
});
</script>
@endpush
@endsection