<?php
session_start();
if (!isset($_SESSION['admin_logged_in']) || $_SESSION['admin_logged_in'] !== true) {
    header("Location: admin_login.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gift Requests Management</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f3f6fc;
            color: #0f172a;
        }
        .header {
            background: #fff;
            padding: 20px 40px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            font-size: 22px;
            font-weight: 800;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .header h1 i {
            color: #4f46e5;
        }
        .container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }
        .card {
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
            overflow: hidden;
            border: 1px solid #e8eef6;
        }
        .table-responsive {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 18px 24px;
            text-align: left;
            border-bottom: 1px solid #f1f5f9;
        }
        th {
            background: #f8fafc;
            font-weight: 700;
            color: #64748b;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        td {
            font-size: 15px;
            font-weight: 600;
            color: #334155;
        }
        tr:last-child td {
            border-bottom: none;
        }
        tr:hover td {
            background-color: #fcfdf8;
        }
        .badge {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 800;
            text-transform: capitalize;
            display: inline-block;
        }
        .badge-pending {
            background: #fef3c7;
            color: #d97706;
        }
        .badge-approved {
            background: #dcfce7;
            color: #16a34a;
        }
        .badge-failed {
            background: #fee2e2;
            color: #dc2626;
        }
        .action-btn {
            border: none;
            padding: 8px 16px;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-approve {
            background: #10b981;
            color: white;
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
        }
        .btn-approve:hover {
            background: #059669;
            transform: translateY(-1px);
        }
        .btn-reject {
            background: #ef4444;
            color: white;
            margin-left: 8px;
            box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
        }
        .btn-reject:hover {
            background: #dc2626;
            transform: translateY(-1px);
        }
        .locked-action {
            color: #94a3b8;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .toast {
            position: fixed;
            bottom: 30px;
            right: 30px;
            padding: 16px 24px;
            background: #1e293b;
            color: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            font-weight: 600;
            font-size: 14px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            pointer-events: none;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 1000;
        }
        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #64748b;
        }
    </style>
</head>
<body>

    <div class="header">
        <h1><i class="fa-solid fa-gift"></i> Gift Requests Management</h1>
    </div>

    <div class="container">
        <div class="card">
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Sender UID</th>
                            <th>Receiver UID</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="table-body">
                        <tr>
                            <td colspan="6" class="empty-state"><i class="fa-solid fa-spinner fa-spin"></i> Loading Data...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="toast" class="toast">
        <i class="fa-solid fa-circle-info"></i>
        <span id="toast-msg"></span>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            loadData();
        });

        async function loadData() {
            try {
                let res = await fetch('process_gifts.php');
                let result = await res.json();
                
                if(result.status === 'error') {
                    showToast(result.message);
                    return;
                }

                let tbody = document.getElementById('table-body');
                tbody.innerHTML = '';

                if(result.data.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="6" class="empty-state">No requests found.</td></tr>';
                    return;
                }

                result.data.forEach(item => {
                    let tr = document.createElement('tr');
                    
                    let statusBadge = '';
                    if(item.status === 'pending') {
                        statusBadge = '<span class="badge badge-pending">Pending</span>';
                    } else if(item.status === 'approved') {
                        statusBadge = '<span class="badge badge-approved">Approved</span>';
                    } else {
                        statusBadge = '<span class="badge badge-failed">Failed</span>';
                    }

                    let actionBtns = '';
                    if(item.status === 'pending') {
                        actionBtns = `
                            <button class="action-btn btn-approve" onclick="handleAction(${item.id}, 'success')"><i class="fa-solid fa-check"></i> Approve</button>
                            <button class="action-btn btn-reject" onclick="handleAction(${item.id}, 'failed')"><i class="fa-solid fa-xmark"></i> Reject</button>
                        `;
                    } else {
                        actionBtns = '<span class="locked-action"><i class="fa-solid fa-lock"></i> Locked</span>';
                    }

                    tr.innerHTML = `
                        <td>#${item.id}</td>
                        <td>${item.sender_uid}</td>
                        <td>${item.receiver_uid}</td>
                        <td>৳${item.amount}</td>
                        <td>${statusBadge}</td>
                        <td>${actionBtns}</td>
                    `;
                    tbody.appendChild(tr);
                });
            } catch (e) {
                showToast("Failed to connect to the server.");
            }
        }

        async function handleAction(id, type) {
            let actionName = type === 'success' ? 'Approve' : 'Reject';
            if(!confirm(`Are you sure you want to ${actionName} request #${id}?`)) return;
            
            let formData = new FormData();
            formData.append('id', id);
            formData.append('type', type);

            try {
                let res = await fetch('process_gifts.php', {
                    method: 'POST',
                    body: formData
                });
                let result = await res.json();
                
                showToast(result.message);
                
                if(result.status === 'success') {
                    loadData();
                }
            } catch (e) {
                showToast("Action failed due to server error.");
            }
        }

        function showToast(msg) {
            let toast = document.getElementById('toast');
            let toastMsg = document.getElementById('toast-msg');
            
            toastMsg.innerText = msg;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
    </script>
</body>
</html>
