<?php 
require_once '../db_connect.php';
include 'includes/header.php'; 
include 'includes/sidebar.php'; 

try {
    $query = "SELECT a.*, c.title as course_name 
              FROM admissions a 
              JOIN courses c ON a.course_id = c.id 
              ORDER BY a.applied_date DESC"; 
    $admissions = $pdo->query($query)->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Error: " . $e->getMessage());
}
?>

<style>
    /* Premium Theme Colors */
    :root { --theme-green: #064e3b; --theme-dark: #022c22; --theme-gold: #d4af37; --bg-soft: #f8fafc; }
    
    .main-content { background-color: var(--bg-soft); min-height: 100vh; padding-bottom: 50px; font-family: 'Outfit', sans-serif; }
    
    /* Header & Mobile Menu */
    .dashboard-header { background: #fff; padding: 20px 30px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); margin-bottom: 30px; border-left: 6px solid var(--theme-green); }
    #sidebarToggle { display: none; width: 45px; height: 45px; border-radius: 12px; background: #f1f5f9; border: 1px solid #e2e8f0; color: var(--theme-green); cursor: pointer; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center; }
    #sidebarToggle:hover { background: var(--theme-green); color: #fff; }
    
    .btn-theme { background: var(--theme-green); color: #fff; border-radius: 12px; font-weight: 700; padding: 12px 24px; transition: 0.3s; border: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
    .btn-theme:hover { background: var(--theme-dark); color: var(--theme-gold); transform: translateY(-2px); box-shadow: 0 8px 15px rgba(6, 78, 59, 0.2); }

    /* Desktop Table */
    .desktop-table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.02); overflow: hidden; border-top: 5px solid var(--theme-green); }
    .table thead th { border: none; padding: 18px 20px; color: #64748b; font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; background-color: #f1f5f9; }
    .table-hover tbody tr:hover { background-color: #f8fafc; }
    
    .student-thumb { width: 45px; height: 45px; border-radius: 12px; object-fit: cover; border: 2px solid #f1f5f9; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    
    /* Badges & Status */
    .status-badge { padding: 6px 14px; border-radius: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 4px; }
    .status-approved { background: #ecfdf5; color: #059669; border: 1px solid #d1fae5; }
    .status-rejected { background: #fff1f2; color: #e11d48; border: 1px solid #ffe4e6; }
    .status-pending { background: #fffbeb; color: #d97706; border: 1px solid #fef3c7; }
    
    /* Action Buttons */
    .btn-action { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; transition: 0.3s; margin: 0 3px; border: 1px solid #f1f5f9; background: #fff; text-decoration: none; cursor: pointer; }
    .btn-action:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.08); background: #f8fafc; }
    
    .detail-item { background: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 10px; font-size: 14px; color: #334155; }

    /* Animations */
    .fade-up { animation: fadeInUp 0.5s ease-out forwards; }
    @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }

    /* 📱 Mobile Specific Styles (Card View) */
    .admission-mobile-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow: hidden; transition: 0.3s; }
    
    @media (max-width: 991.98px) {
        .main-content { padding: 15px !important; }
        .dashboard-header { padding: 20px; flex-direction: column; align-items: flex-start !important; gap: 15px; }
        .dashboard-header .header-top { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 15px; }
        .dashboard-header .btn-theme { width: 100%; }
        .header-title { font-size: 1.2rem; }
    }
    @media (min-width: 992px) {
        #sidebarToggle { display: none !important; }
    }
</style>

<div class="main-content p-3 p-md-4">
    
    <div class="dashboard-header d-flex justify-content-between align-items-center fade-up">
        <div class="header-top">
            <button id="sidebarToggle" class="shadow-sm"><i class="fas fa-bars fs-5"></i></button>
            <div>
                <h4 class="mb-0 fw-bold text-dark header-title"><i class="fas fa-user-graduate me-2" style="color: var(--theme-green);"></i> Applications</h4>
                <p class="text-muted small fw-bold mb-0 d-none d-md-block">Manage student admission requests</p>
            </div>
        </div>
        <a href="add_admission.php" class="btn-theme shadow-sm">
            <i class="fas fa-plus-circle me-2"></i> Add Admission
        </a>
    </div>

    <?php if(isset($_GET['msg']) && $_GET['msg'] == 'deleted'): ?>
        <div class="alert alert-danger d-flex align-items-center border-0 rounded-4 shadow-sm mb-4 fw-bold bg-white text-danger fade-up" style="border-left: 5px solid #dc3545 !important;">
            <i class="fas fa-check-circle me-3 fa-2x"></i> 
            <div><strong class="d-block">Deleted!</strong><span class="text-muted small">Application deleted successfully.</span></div>
        </div>
    <?php endif; ?>

    <div class="desktop-table-card d-none d-lg-block fade-up" style="animation-delay: 0.1s;">
        <div class="table-responsive">
            <table class="table table-hover align-middle border-0 mb-0">
                <thead>
                    <tr>
                        <th class="ps-4">Student</th>
                        <th>Course & Type</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th class="text-end pe-4">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(!empty($admissions)): foreach($admissions as $row): 
                        $img = !empty($row['student_photo']) ? '../' . $row['student_photo'] : 'https://ui-avatars.com/api/?name='.urlencode($row['student_name']).'&background=064e3b&color=fff';
                    ?>
                    <tr>
                        <td class="ps-4 py-3">
                            <div class="d-flex align-items-center">
                                <img src="<?= $img ?>" class="student-thumb me-3 shadow-sm" onerror="this.src='https://ui-avatars.com/api/?name=User&background=064e3b&color=fff'">
                                <div>
                                    <div class="fw-bold text-dark" style="font-size: 15px;"><?= htmlspecialchars($row['student_name']); ?></div>
                                    <small class="text-muted fw-bold"><i class="fas fa-phone-alt me-1" style="font-size: 10px;"></i> <?= htmlspecialchars($row['phone']); ?></small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border px-3 py-2 rounded-pill fw-bold mb-1" style="font-size: 11px;">
                                <i class="fas fa-book me-1" style="color: var(--theme-gold);"></i> <?= htmlspecialchars($row['course_name']); ?>
                            </span><br>
                            <small class="fw-bold text-muted" style="margin-left: 10px; font-size: 11px;">
                                <i class="fas fa-globe small me-1 text-primary"></i> <?= ucfirst($row['admission_type'] ?? 'Online'); ?>
                            </small>
                        </td>
                        <td>
                            <?php if(strtolower($row['payment_status']) == 'verified'): ?>
                                <span class="status-badge status-approved"><i class="fas fa-check-circle"></i> Verified</span>
                            <?php else: ?>
                                <span class="badge bg-light text-muted border text-uppercase" style="font-size: 9px; padding: 6px 12px; border-radius: 6px;"><?= ucfirst($row['payment_status']); ?></span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <span class="status-badge status-<?= strtolower($row['status']); ?>">
                                <?= ucfirst($row['status']); ?>
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            <div class="d-flex justify-content-end">
                                <button class="btn-action text-primary shadow-sm" onclick='viewDetails(<?= json_encode($row, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE); ?>)' title="View"><i class="fas fa-eye"></i></button>
                                <a href="edit_admission.php?id=<?= $row['id']; ?>" class="btn-action text-warning shadow-sm" title="Edit"><i class="fas fa-pen"></i></a>
                                <a href="process_admission.php?id=<?= $row['id'] ?>&action=delete" class="btn-action text-danger shadow-sm" onclick="return confirm('Permanently delete this application?')" title="Delete"><i class="fas fa-trash-alt"></i></a>
                                <?php if($row['status'] == 'pending'): ?>
                                    <a href="process_admission.php?id=<?= $row['id'] ?>&action=approved" class="btn-action text-success shadow-sm ms-2" style="background: #ecfdf5; border-color: #d1fae5;" onclick="return confirm('Approve this student?')" title="Approve"><i class="fas fa-check"></i></a>
                                <?php endif; ?>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; else: ?>
                        <tr><td colspan="5" class="text-center py-5 fw-bold text-muted"><i class="fas fa-folder-open fa-2x mb-3 opacity-25 d-block"></i> No applications found.</td></tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div class="d-block d-lg-none fade-up" style="animation-delay: 0.1s;">
        <div class="row g-3">
            <?php if(!empty($admissions)): foreach($admissions as $row): 
                $img = !empty($row['student_photo']) ? '../' . $row['student_photo'] : 'https://ui-avatars.com/api/?name='.urlencode($row['student_name']).'&background=064e3b&color=fff';
            ?>
            <div class="col-12">
                <div class="admission-mobile-card p-3">
                    <div class="d-flex justify-content-between align-items-start mb-3 pb-3 border-bottom">
                        <div class="d-flex align-items-center gap-3">
                            <img src="<?= $img ?>" class="student-thumb shadow-sm" style="width: 50px; height: 50px;">
                            <div>
                                <h6 class="fw-bold text-dark mb-0" style="font-size: 15px;"><?= htmlspecialchars($row['student_name']) ?></h6>
                                <small class="text-muted fw-bold" style="font-size: 11px;"><i class="fas fa-phone-alt me-1"></i> <?= htmlspecialchars($row['phone']) ?></small>
                            </div>
                        </div>
                        <div>
                            <span class="status-badge status-<?= strtolower($row['status']); ?>" style="padding: 4px 8px; font-size: 9px;">
                                <?= ucfirst($row['status']); ?>
                            </span>
                        </div>
                    </div>
                    
                    <div class="mb-3 px-2 bg-light p-2 rounded-3 border">
                        <div class="mb-2 d-flex align-items-center">
                            <i class="fas fa-book text-muted me-2" style="width: 15px;"></i>
                            <span class="text-dark fw-bold" style="font-size: 12px;"><?= htmlspecialchars($row['course_name']); ?></span>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-globe text-muted me-2" style="width: 15px;"></i>
                                <span class="text-muted fw-bold" style="font-size: 11px;"><?= ucfirst($row['admission_type'] ?? 'Online'); ?></span>
                            </div>
                            <div>
                                <?php if(strtolower($row['payment_status']) == 'verified'): ?>
                                    <span class="status-badge status-approved py-1 px-2" style="font-size: 9px;"><i class="fas fa-check"></i> Paid</span>
                                <?php else: ?>
                                    <span class="badge bg-white text-muted border text-uppercase" style="font-size: 9px; padding: 4px 8px;">Unpaid</span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button class="btn btn-light border flex-grow-1 fw-bold text-primary" style="font-size: 12px; padding: 8px;" onclick='viewDetails(<?= json_encode($row, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE); ?>)'><i class="fas fa-eye"></i></button>
                        <a href="edit_admission.php?id=<?= $row['id']; ?>" class="btn btn-light border flex-grow-1 fw-bold text-warning" style="font-size: 12px; padding: 8px;"><i class="fas fa-pen"></i></a>
                        <a href="process_admission.php?id=<?= $row['id'] ?>&action=delete" class="btn btn-light border flex-grow-1 fw-bold text-danger" style="font-size: 12px; padding: 8px;" onclick="return confirm('Delete this application?');"><i class="fas fa-trash-alt"></i></a>
                    </div>
                    <?php if($row['status'] == 'pending'): ?>
                        <div class="mt-2">
                            <a href="process_admission.php?id=<?= $row['id'] ?>&action=approved" class="btn btn-success w-100 fw-bold shadow-sm" style="font-size: 13px; padding: 8px; border-radius: 8px;" onclick="return confirm('Approve this student?')"><i class="fas fa-check-circle me-2"></i> Approve Admission</a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; else: ?>
                <div class="col-12 text-center py-5 bg-white rounded-4 border shadow-sm">
                    <i class="fas fa-folder-open fa-3x text-muted opacity-25 mb-3"></i>
                    <h6 class="fw-bold text-muted">No applications found!</h6>
                </div>
            <?php endif; ?>
        </div>
    </div>

</div>

<div class="modal fade" id="detailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 24px; overflow: hidden;">
            <div class="modal-header bg-light border-bottom p-4">
                <h5 class="modal-title fw-bold text-dark"><i class="fas fa-id-card me-2" style="color: var(--theme-gold);"></i> Application Details</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4" id="modalBody" style="background: #fff;"></div>
            <div class="modal-footer border-0 pb-4 pt-0 justify-content-center bg-white">
                <button type="button" class="btn btn-light border px-5 py-2 rounded-pill fw-bold" data-bs-dismiss="modal">Close Window</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Sidebar Mobile Menu Toggle
    document.addEventListener("DOMContentLoaded", function() {
        const toggleBtn = document.getElementById('sidebarToggle');
        const sidebar = document.getElementById('sidebarMenu'); 
        
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function(e) {
                e.preventDefault();
                if(sidebar) {
                    sidebar.classList.toggle('active');
                } else {
                    const fallbackSidebar = document.querySelector('.sidebar');
                    if(fallbackSidebar) fallbackSidebar.classList.toggle('active');
                }
            });
        }
    });

    // View Details Logic
    function viewDetails(data) {
        let photo = data.student_photo ? `<div class="text-center mb-4"><img src="../${data.student_photo}" style="width:110px; height:110px; object-fit:cover; border-radius:50%; border:4px solid #f1f5f9; box-shadow: 0 5px 15px rgba(0,0,0,0.08);"></div>` : '';
        let screenshot = data.payment_screenshot ? `<a href="../${data.payment_screenshot}" target="_blank" class="btn btn-sm btn-outline-primary mt-2 fw-bold w-100 rounded-3"><i class="fas fa-image me-1"></i> View Attached Receipt</a>` : '<span class="text-muted small d-block mt-1">No receipt attached</span>';
        
        let html = `
            ${photo}
            <div class="row g-3 text-dark">
                <div class="col-md-6"><div class="detail-item"><strong>Student Name:</strong> <span class="fw-bold" style="color:var(--theme-green); float:right;">${data.student_name}</span></div></div>
                <div class="col-md-6"><div class="detail-item"><strong>Guardian Phone:</strong> <span style="float:right;">${data.guardian_phone || 'N/A'}</span></div></div>
                <div class="col-md-6"><div class="detail-item"><strong>Father's Name:</strong> <span style="float:right;">${data.father_husband_name || 'N/A'}</span></div></div>
                <div class="col-md-6"><div class="detail-item"><strong>Mother's Name:</strong> <span style="float:right;">${data.mother_name || 'N/A'}</span></div></div>
                <div class="col-md-6"><div class="detail-item"><strong>SSC Info:</strong> <span style="float:right;">${data.edu_ssc || 'N/A'}</span></div></div>
                <div class="col-md-6"><div class="detail-item"><strong>HSC Info:</strong> <span style="float:right;">${data.edu_hsc || 'N/A'}</span></div></div>
                <div class="col-12">
                    <div class="detail-item" style="background:#f8fafc; border-left: 4px solid var(--theme-gold);">
                        <div class="d-flex justify-content-between align-items-center">
                            <span><strong>Payment Status:</strong> <span class="badge bg-white text-dark border ms-1">${data.payment_status.toUpperCase()}</span></span>
                            <span><strong>TrxID:</strong> <span class="fw-bold text-primary">${data.transaction_id || 'N/A'}</span></span>
                        </div>
                        <div class="mt-2">${screenshot}</div>
                    </div>
                </div>
                <div class="col-12"><div class="detail-item"><strong>Permanent Address:</strong> <br><span class="text-muted mt-1 d-block">${data.permanent_address}</span></div></div>
                <div class="col-12"><div class="detail-item"><strong>Present Address:</strong> <br><span class="text-muted mt-1 d-block">${data.present_address || 'N/A'}</span></div></div>
            </div>`;
        document.getElementById('modalBody').innerHTML = html;
        new bootstrap.Modal(document.getElementById('detailsModal')).show();
    }
</script>

<?php include 'includes/footer.php'; ?>