@extends('admin.layout')
@section('title', 'Lịch sử dòng tiền SePay')
@section('greeting') LỊCH SỬ <span>DÒNG TIỀN</span> @endsection
@section('subtitle') Theo dõi tất cả giao dịch nhận được từ SePay @endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-history" style="color:var(--accent);margin-right:8px;"></i>Giao dịch SePay</h3>
            <form method="GET" style="display:flex;flex-wrap:wrap;gap:8px;">
                <input type="text" name="search" class="ad-input" placeholder="Nội dung, mã giao dịch..." value="{{ request('search') }}" style="width:250px;">
                <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Tìm</button>
            </form>
        </div>

        <div style="overflow-x:auto;">
            <table class="ad-table">
                <thead>
                    <tr>
                        <th style="width:40px;"><input type="checkbox" id="selectAll" onclick="toggleAll(this)"></th>
                        <th>Thời gian</th>
                        <th>Gateway</th>
                        <th>Số tiền</th>
                        <th>Nội dung</th>
                        <th>Mã tham chiếu</th>
                        <th>Tài khoản nhận</th>
                        <th>Chi tiết</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($logs as $log)
                    <tr>
                        <td><input type="checkbox" class="row-checkbox" value="{{ $log->id }}" onclick="checkRow()"></td>
                        <td style="font-size:12px;color:var(--text-muted);">{{ \Carbon\Carbon::parse($log->transaction_date)->format('d/m/Y H:i') }}</td>
                        <td><span class="badge badge-info">{{ $log->gateway }}</span></td>
                        <td style="font-weight:700;color:{{ $log->transfer_type === 'in' ? '#10b981' : '#dc2626' }};">
                            {{ $log->transfer_type === 'in' ? '+' : '-' }}{{ number_format($log->transfer_amount) }}đ
                        </td>
                        <td style="font-size:12px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ $log->content }}">
                            {{ $log->content }}
                        </td>
                        <td style="font-family:monospace;font-size:11px;">{{ $log->reference_code }}</td>
                        <td style="font-size:11px;color:var(--text-muted);">{{ $log->account_number }}</td>
                        <td>
                            <div style="display:flex;gap:4px;">
                                <button type="button" class="btn btn-outline btn-sm" onclick="showPayload({{ $log->id }})" title="Xem mã nguồn">
                                    <i class="fas fa-code"></i>
                                </button>
                                <form method="POST" action="{{ route('admin.paymentLogs.delete', $log->id) }}" onsubmit="return confirm('Xóa vĩnh viễn giao dịch này?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" title="Xóa"><i class="fas fa-trash"></i></button>
                                </form>
                            </div>
                            <div id="payload-{{ $log->id }}" style="display:none;">{{ $log->payload }}</div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="8" style="text-align:center;color:var(--text-muted);padding:40px;">Chưa có giao dịch nào được ghi nhận.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{ $logs->links('admin.pagination') }}
    </div>

    {{-- Modal for JSON Payload --}}
    <div id="payloadModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1000;align-items:center;justify-content:center;padding:20px;">
        <div class="card" style="width:100%;max-width:600px;max-height:80vh;overflow-y:auto;background:var(--bg-card);">
            <div class="card-header" style="position:sticky;top:0;background:var(--bg-card);z-index:10;">
                <h3>Raw Payload</h3>
                <button onclick="closeModal()" class="btn btn-outline btn-sm">Đóng</button>
            </div>
            <div style="padding:20px;">
                <pre id="modalContent" style="background:#1a1a1a;color:#00ff00;padding:15px;border-radius:8px;font-size:12px;white-space:pre-wrap;word-break:break-all;"></pre>
            </div>
        </div>
    </div>
    {{-- Bulk Action Bar --}}
    <div id="bulkActionBar" style="display:none;position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--card);padding:12px 24px;border-radius:30px;box-shadow:0 10px 25px rgba(0,0,0,0.1);z-index:50;align-items:center;gap:16px;">
        <span style="font-weight:600;font-size:14px;"><span id="bulkCount">0</span> đã chọn</span>
        <form id="bulkDeleteForm" method="POST" action="{{ route('admin.paymentLogs.bulkDelete') }}" onsubmit="return confirm('Xóa vĩnh viễn các giao dịch đã chọn?')" style="margin:0;display:flex;gap:8px;">
            @csrf
            <input type="hidden" name="ids" id="bulkIds">
            <button type="button" class="btn btn-outline" onclick="cancelBulk()">Hủy</button>
            <button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i> Xóa tất cả</button>
        </form>
    </div>

    <script>
        function showPayload(id) {
            const raw = document.getElementById('payload-' + id).textContent;
            try {
                const json = JSON.parse(raw);
                document.getElementById('modalContent').textContent = JSON.stringify(json, null, 4);
            } catch(e) {
                document.getElementById('modalContent').textContent = raw;
            }
            document.getElementById('payloadModal').style.display = 'flex';
        }
        function closeModal() {
            document.getElementById('payloadModal').style.display = 'none';
        }

        // Bulk Delete Logic
        function toggleAll(source) {
            const checkboxes = document.querySelectorAll('.row-checkbox');
            checkboxes.forEach(cb => cb.checked = source.checked);
            updateBulkActionBar();
        }

        function checkRow() {
            const checkboxes = document.querySelectorAll('.row-checkbox');
            const allChecked = Array.from(checkboxes).every(cb => cb.checked);
            document.getElementById('selectAll').checked = allChecked && checkboxes.length > 0;
            updateBulkActionBar();
        }

        function cancelBulk() {
            const checkboxes = document.querySelectorAll('.row-checkbox');
            checkboxes.forEach(cb => cb.checked = false);
            document.getElementById('selectAll').checked = false;
            updateBulkActionBar();
        }

        function updateBulkActionBar() {
            const checked = document.querySelectorAll('.row-checkbox:checked');
            const count = checked.length;
            const bar = document.getElementById('bulkActionBar');
            
            if (count >= 2) {
                bar.style.display = 'flex';
                document.getElementById('bulkCount').textContent = count;
                const ids = Array.from(checked).map(cb => cb.value).join(',');
                document.getElementById('bulkIds').value = ids;
            } else {
                bar.style.display = 'none';
            }
        }
    </script>
@endsection