@extends('layouts.admin')

@section('title', 'Chi tiết giao dịch rút tiền #' . $withdrawal->id)

@section('content')
<style>
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.page-header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    margin-bottom: 30px;
    color: white;
}

.page-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
}

.page-header p {
    margin: 10px 0 0 0;
    opacity: 0.9;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.back-button:hover {
    background: rgba(255,255,255,0.3);
    color: white;
}

.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.detail-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
}

.card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
}

.detail-value {
    flex: 2;
    text-align: right;
    color: white;
}

.highlight-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #e53e3e;
}

.transaction-id {
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.status-active {
    background: #c6f6d5;
    color: #22543d;
}

.status-banned {
    background: #fed7d7;
    color: #742a2a;
}

.json-data {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;
}

.json-data pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-wrap;
    word-break: break-all;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.history-table th {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
}

.history-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: white;
}

.history-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.amount-cell {
    font-weight: 600;
    color: #e53e3e;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.7);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .admin-container {
        padding: 15px;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .detail-value {
        text-align: left;
    }
    
    .history-table {
        font-size: 0.8rem;
    }
    
    .history-table th,
    .history-table td {
        padding: 8px;
    }
}
</style>

<div class="admin-container">
    <!-- Back Button -->
    <a href="{{ route('admin.withdraw-history.index') }}" class="back-button">
        <i class="fas fa-arrow-left"></i>
        Quay lại danh sách
    </a>

    <!-- Page Header -->
    <div class="page-header">
        <h1><i class="fas fa-file-alt"></i> Chi tiết giao dịch rút tiền</h1>
        <p>Thông tin chi tiết giao dịch #{{ $withdrawal->id }}</p>
    </div>

    <div class="detail-grid">
        <!-- Main Transaction Details -->
        <div class="detail-card">
            <div class="card-title">
                <i class="fas fa-info-circle"></i>
                Thông tin giao dịch
            </div>

            <div class="detail-row">
                <span class="detail-label">ID Giao dịch:</span>
                <span class="detail-value">{{ $withdrawal->id }}</span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Mã giao dịch:</span>
                <span class="detail-value">
                    <span class="transaction-id">{{ $withdrawal->transaction_id }}</span>
                </span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Số coins rút:</span>
                <span class="detail-value highlight-value">{{ number_format($withdrawal->coins_spent) }}</span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Loại giao dịch:</span>
                <span class="detail-value">{{ $withdrawal->item_type }}</span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Tên dịch vụ:</span>
                <span class="detail-value">{{ $withdrawal->item_name }}</span>
            </div>

            @if($withdrawal->description)
            <div class="detail-row">
                <span class="detail-label">Mô tả:</span>
                <span class="detail-value">{{ $withdrawal->description }}</span>
            </div>
            @endif

            <div class="detail-row">
                <span class="detail-label">IP Address:</span>
                <span class="detail-value">
                    <span style="font-family: monospace;">{{ $withdrawal->ip_address ?? 'N/A' }}</span>
                </span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Thời gian tạo:</span>
                <span class="detail-value">
                    {{ \Carbon\Carbon::parse($withdrawal->created_at)->format('d/m/Y H:i:s') }}
                    <br>
                    <small style="color: #718096;">{{ \Carbon\Carbon::parse($withdrawal->created_at)->diffForHumans() }}</small>
                </span>
            </div>

            @if($itemData)
            <div class="detail-row">
                <span class="detail-label">Chi tiết giao dịch:</span>
                <span class="detail-value">
                    <div class="json-data">
                        <pre>{{ json_encode($itemData, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                    </div>
                </span>
            </div>
            @endif
        </div>

        <!-- Account Information -->
        <div class="detail-card">
            <div class="card-title">
                <i class="fas fa-user"></i>
                Thông tin tài khoản
            </div>

            <div class="detail-row">
                <span class="detail-label">Username:</span>
                <span class="detail-value">{{ $withdrawal->username }}</span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Email:</span>
                <span class="detail-value">{{ $withdrawal->Email ?? 'N/A' }}</span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Trạng thái:</span>
                <span class="detail-value">
                    @if($withdrawal->account_status == 1)
                        <span class="status-badge status-active">Hoạt động</span>
                    @else
                        <span class="status-badge status-banned">Bị khóa</span>
                    @endif
                </span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Ngày tạo TK:</span>
                <span class="detail-value">
                    {{ $withdrawal->account_created ? \Carbon\Carbon::parse($withdrawal->account_created)->format('d/m/Y') : 'N/A' }}
                </span>
            </div>

            <div class="detail-row">
                <span class="detail-label">Đăng nhập cuối:</span>
                <span class="detail-value">
                    {{ $withdrawal->last_login ? \Carbon\Carbon::parse($withdrawal->last_login)->format('d/m/Y H:i') : 'N/A' }}
                </span>
            </div>

            @if($itemData && isset($itemData['character_name']))
            <div class="detail-row">
                <span class="detail-label">Nhân vật nhận:</span>
                <span class="detail-value">{{ $itemData['character_name'] }}</span>
            </div>
            @endif

            @if($itemData && isset($itemData['game_userid']))
            <div class="detail-row">
                <span class="detail-label">Game User ID:</span>
                <span class="detail-value">
                    <span style="font-family: monospace;">{{ $itemData['game_userid'] }}</span>
                </span>
            </div>
            @endif
        </div>
    </div>

    <!-- User's Other Withdrawals -->
    <div class="detail-card">
        <div class="card-title">
            <i class="fas fa-history"></i>
            Lịch sử rút tiền khác của {{ $withdrawal->username }}
        </div>

        @if($userWithdrawals->count() > 0)
            <table class="history-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Mã giao dịch</th>
                        <th>Số coins</th>
                        <th>Nhân vật</th>
                        <th>Thời gian</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($userWithdrawals as $userWithdrawal)
                    <tr>
                        <td>{{ $userWithdrawal->id }}</td>
                        <td>
                            <span class="transaction-id" style="font-size: 0.8rem;">
                                {{ $userWithdrawal->transaction_id }}
                            </span>
                        </td>
                        <td>
                            <span class="amount-cell">{{ number_format($userWithdrawal->coins_spent) }}</span>
                        </td>
                        <td>
                            @php
                                $userData = json_decode($userWithdrawal->item_data, true);
                                $characterName = $userData['character_name'] ?? 'N/A';
                            @endphp
                            {{ $characterName }}
                        </td>
                        <td>
                            {{ \Carbon\Carbon::parse($userWithdrawal->created_at)->format('d/m/Y H:i') }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <p>Không có giao dịch rút tiền nào khác</p>
            </div>
        @endif
    </div>
</div>

@endsection