<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>পেন্ডিং ডোনেশন রিভিউ — সদকা ব্লাড সোসাইটি</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body { font-family: 'Hind Siliguri', sans-serif; background-color: #f4f6f9; }
        .dashboard-card { border: none; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); background: #ffffff; }
        .table-header { background-color: #C62828; color: #ffffff; }
        .proof-img { width: 80px; height: 50px; object-fit: centerCrop; border-radius: 8px; cursor: pointer; transition: transform 0.2s; }
        .proof-img:hover { transform: scale(1.1); }
        .badge-blood { background-color: #FFEBEE; color: #C62828; font-weight: bold; padding: 5px 10px; border-radius: 6px; }
    </style>
</head>
<body>

<div class="container my-5">
    <div class="card dashboard-card mb-4">
        <div class="card-body d-flex justify-content-between align-items-center p-4">
            <div>
                <h2 class="fw-bold text-dark m-0"><i class="fa-solid fa-code-pull-request text-danger me-2"></i> রক্তদান অনুমোদন প্যানেল</h2>
                <p class="text-muted m-0 mt-1">ইউজারদের পাঠানো নতুন রেকর্ডগুলো যাচাই করে অ্যাকশন নিন।</p>
            </div>
            <span class="badge bg-danger rounded-pill px-3 py-2 fs-6">পেন্ডিং: 2টি</span>
        </div>
    </div>

    <div class="card dashboard-card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle m-0 text-center">
                    <thead class="table-header">
                        <tr>
                            <th>আইডি</th>
                            <th>রক্তদাতার নাম</th>
                            <th>গ্রুপ</th>
                            <th>রোগীর সমস্যা</th>
                            <th>হাসপাতাল</th>
                            <th>তারিখ ও সময়</th>
                            <th>প্রুফ ইমেজ</th>
                            <th>অ্যাকশন</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id='row_5'><td>#5</td><td class='fw-bold text-start ps-3'>মোঃ মোস্তাকিম বিল্লাহ</td><td><span class='badge-blood'>A+</span></td><td>ব্রেন টিউমার এর রুগি</td><td class='text-start'>প্রান্ত স্পেশালাইজড হাসপাতাল ময়মনসিংহ।</td><td><small class='d-block fw-semibold'>2026-07-02</small><small class='text-muted'>03:25:00</small></td><td><img src='https://sadakabloodsociety.trustcoders.com/sadaka_blood_app2026/Admin/uploads/donation_proofs/proof_14_1787966040_be59.jpg' class='proof-img img-thumbnail' onclick='viewImage("https://sadakabloodsociety.trustcoders.com/sadaka_blood_app2026/Admin/uploads/donation_proofs/proof_14_1787966040_be59.jpg")' alt='Proof'></td><td>
                                        <button class='btn btn-success btn-sm me-1 rounded-3 px-3' onclick='approveDonation(5)'><i class='fa-solid fa-check me-1'></i> অ্যাপ্রুভ</button>
                                        <button class='btn btn-outline-danger btn-sm rounded-3 px-3' onclick='deleteDonation(5)'><i class='fa-solid fa-trash-can-list me-1'></i> রিজেক্ট</button>
                                      </td></tr><tr id='row_4'><td>#4</td><td class='fw-bold text-start ps-3'>Mn Nihan Ahmed</td><td><span class='badge-blood'>B+</span></td><td>রক্তশূন্যতা</td><td class='text-start'>মাহিম ডায়াগনস্টিক সেন্টার</td><td><small class='d-block fw-semibold'>2026-08-10</small><small class='text-muted'>10:30:00</small></td><td><img src='https://sadakabloodsociety.trustcoders.com/sadaka_blood_app2026/Admin/uploads/donation_proofs/proof_12_1787420222_62a2.jpg' class='proof-img img-thumbnail' onclick='viewImage("https://sadakabloodsociety.trustcoders.com/sadaka_blood_app2026/Admin/uploads/donation_proofs/proof_12_1787420222_62a2.jpg")' alt='Proof'></td><td>
                                        <button class='btn btn-success btn-sm me-1 rounded-3 px-3' onclick='approveDonation(4)'><i class='fa-solid fa-check me-1'></i> অ্যাপ্রুভ</button>
                                        <button class='btn btn-outline-danger btn-sm rounded-3 px-3' onclick='deleteDonation(4)'><i class='fa-solid fa-trash-can-list me-1'></i> রিজেক্ট</button>
                                      </td></tr>                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-transparent border-0 text-center">
            <img src="" id="modalPreviewImg" class="img-fluid rounded-3 shadow-lg" style="max-height: 85vh;">
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // ইমেজ মডাল পপআপ
    function viewImage(url) {
        $('#modalPreviewImg').attr('src', url);
        new bootstrap.Modal(document.getElementById('imageModal')).show();
    }

    // 🎯 রিয়েল-টাইম অ্যাপ্রুভ হ্যান্ডলার
    function approveDonation(id) {
        if(confirm('আপনি কি এই রক্তদানের রেকর্ডটি অনুমোদন করতে চান?')) {
            $.ajax({
                url: 'approve_donation.php',
                type: 'POST',
                data: { history_id: id },
                dataType: 'json',
                success: function(response) {
                    if(response.status === 'success') {
                        $('#row_' + id).fadeOut(600, function() { $(this).remove(); });
                    } else {
                        alert('ত্রুটি: ' + response.message);
                    }
                },
                error: function() { alert('সার্ভার কানেকশন ত্রুটি!'); }
            });
        }
    }

    // 🎯 রিয়েল-টাইম ডিলিট/রিজেক্ট হ্যান্ডলার
    function deleteDonation(id) {
        if(confirm('সতর্কতা! এটি ডিলিট করলে ডাটাবেজ এবং সার্ভার থেকে ইমেজ চিরতরে মুছে যাবে। আপনি কি নিশ্চিত?')) {
            $.ajax({
                url: 'delete_donation.php',
                type: 'POST',
                data: { history_id: id },
                dataType: 'json',
                success: function(response) {
                    if(response.status === 'success') {
                        $('#row_' + id).fadeOut(600, function() { $(this).remove(); });
                    } else {
                        alert('ত্রুটি: ' + response.message);
                    }
                },
                error: function() { alert('সার্ভার কানেকশন ত্রুটি!'); }
            });
        }
    }
</script>
</body>
</html>