<?php 
ini_set('display_errors', 1); error_reporting(E_ALL);
require_once '../db_connect.php';
include 'includes/header.php'; 
include 'includes/sidebar.php'; 

// Fetch Data
try {
    $query = "SELECT t.*, c.title as course_name 
              FROM free_trials t 
              LEFT JOIN courses c ON t.course_id = c.id 
              ORDER BY t.created_at DESC"; 
    $trials = $pdo->query($query)->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $db_error = $e->getMessage();
}
?>

<style>
    /* Premium Theme Colors */
    :root { --theme-green: #064e3b; --theme-dark: #022c22; --theme-gold: #d4af37; --bg-soft: #f8fafc; }
    
    .dashboard-header { background: #fff; padding: 20px 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); margin-bottom: 25px; border-left: 6px solid var(--theme-green); }
    .custom-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); overflow: hidden; border-top: 5px solid var(--theme-green); }
    
    /* Table Styling */
    .table thead th { border: none; padding: 18px 20px; color: #64748b; font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; background-color: var(--bg-soft); border-bottom: 1px solid #e2e8f0; }
    .table tbody tr { transition: 0.3s; border-bottom: 1px solid #f1f5f9; }
    .table tbody tr:hover { background-color: rgba(6, 78, 59, 0.02); }
    .table td { padding: 15px 20px; vertical-align: middle; color: #334155; }
    
    /* Student Info Cell */
    .student-info .name { font-weight: 800; color: var(--theme-dark); font-size: 15px; display: block; margin-bottom: 3px;}
    .student-info .sub { font-size: 12px; color: #64748b; display: block; }

    /* Badges */
    .status-badge { padding: 6px 12px; border-radius: 50px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
    .status-pending { background: #fffbeb; color: #d97706; border: 1px solid #fef3c7; }
    .status-approved { background: #ecfdf5; color: var(--theme-green); border: 1px solid #d1fae5; }
    .status-rejected { background: #fff1f2; color: #e11d48; border: 1px solid #ffe4e6; }

    /* Action Buttons */
    .btn-group-actions { display: flex; gap: 5px; justify-content: center; }
    .action-icon { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: 0.3s; border: 1px solid #e2e8f0; background: #fff; color: #64748b; text-decoration: none; cursor: pointer; }
    .action-icon:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.08); }
    .icon-view { background: rgba(212, 175, 55, 0.1); color: var(--theme-gold); border-color: rgba(212, 175, 55, 0.3); }
    .icon-view:hover { background: var(--theme-gold); color: #fff; border-color: var(--theme-gold); }
    .icon-approve { background: rgba(6, 78, 59, 0.08); color: var(--theme-green); border-color: rgba(6, 78, 59, 0.15); }
    .icon-approve:hover { background: var(--theme-green); color: #fff; border-color: var(--theme-green); }
    .icon-reject { background: #fff7ed; color: #f59e0b; border-color: #fef08a; }
    .icon-reject:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }
    .icon-delete { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
    .icon-delete:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

    .btn-theme { background: var(--theme-green); color: #fff; border: none; transition: 0.3s; 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 5px 15px rgba(6, 78, 59, 0.3); }

    /* Modal Styling */
    .modal-content { border-radius: 20px; border: none; box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-top: 6px solid var(--theme-green); }
    .modal-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 20px 30px; border-radius: 20px 20px 0 0;}
    .detail-item { background: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 10px; font-size: 14px; color: #334155; }

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

    /* --- 📱 Mobile Responsive Fixes --- */
    @media (max-width: 768px) {
        .main-content { padding: 15px !important; }
        .dashboard-header { flex-direction: column; align-items: flex-start !important; gap: 15px; padding: 15px 20px; }
        .dashboard-header .d-flex { width: 100%; align-items: center; }
        .dashboard-header > a.btn-theme { width: 100%; } 
        
        #sidebarToggle { width: 42px !important; height: 42px !important; padding: 0; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px;}
        .table-responsive { border: 0; }
    }
</style>

<div class="main-content p-4" style="background: var(--bg-soft); min-height: 100vh;">
    
    <div class="dashboard-header d-flex justify-content-between align-items-center fade-up">
        <div class="d-flex align-items-center">
            <button class="btn btn-light border d-md-none me-3 shadow-sm" id="sidebarToggle">
                <i class="fas fa-bars text-dark"></i>
            </button>
            <div>
                <h4 class="mb-0 fw-bold" style="color: var(--theme-green);">
                    <i class="fas fa-laptop-code me-2" style="color: var(--theme-gold);"></i> Free Trial Requests
                </h4>
                <p class="text-muted fw-semibold mb-0 d-none d-md-block" style="font-size: 14px;">Review and approve new trial applications.</p>
            </div>
        </div>
        <a href="index.php" class="btn-theme mt-3 mt-md-0 px-4 py-2 rounded-pill fw-bold shadow-sm">
            <i class="fas fa-th-large me-2"></i> Dashboard
        </a>
    </div>

    <?php if(isset($_GET['msg'])): ?>
        <div class="alert alert-<?= ($_GET['msg'] == 'deleted' || $_GET['msg'] == 'rejected' ? 'danger' : 'success') ?> border-0 border-start border-4 border-<?= ($_GET['msg'] == 'deleted' || $_GET['msg'] == 'rejected' ? 'danger' : 'success') ?> shadow-sm mb-4 fade-up fw-bold bg-white">
            <i class="fas <?= ($_GET['msg'] == 'deleted' || $_GET['msg'] == 'rejected' ? 'fa-exclamation-circle text-danger' : 'fa-check-circle text-success') ?> me-2"></i>
            <?php 
                if($_GET['msg'] == 'approved') echo "<span class='text-success'>Application approved successfully!</span>";
                elseif($_GET['msg'] == 'rejected') echo "<span class='text-danger'>Application has been rejected!</span>";
                elseif($_GET['msg'] == 'deleted') echo "<span class='text-danger'>Application deleted permanently!</span>";
            ?>
        </div>
    <?php endif; ?>

    <div class="custom-card fade-up" style="animation-delay: 0.1s;">
        <div class="table-responsive">
            <table class="table align-middle border-0 mb-0">
                <thead>
                    <tr>
                        <th class="ps-4">Student Info</th>
                        <th class="d-none d-lg-table-cell">Course & Age</th>
                        <th class="d-none d-md-table-cell">Preferred Date</th>
                        <th>Status</th>
                        <th class="text-center pe-4">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(!empty($trials)): foreach($trials as $row): ?>
                    <tr>
                        <td class="ps-4">
                            <div class="student-info">
                                <span class="name"><?= htmlspecialchars($row['name']); ?></span>
                                <span class="sub fw-bold" style="color: var(--theme-green);"><i class="fab fa-whatsapp me-1"></i><?= htmlspecialchars($row['phone']); ?></span>
                                <span class="sub d-none d-sm-block mt-1"><i class="far fa-envelope me-1"></i><?= htmlspecialchars($row['email']); ?></span>
                            </div>
                        </td>
                        <td class="d-none d-lg-table-cell">
                            <span class="badge bg-light text-muted border px-3 py-2 rounded-pill fw-bold mb-2">
                                <i class="fas fa-book me-1" style="color: var(--theme-gold);"></i> <?= htmlspecialchars($row['course_name'] ?? 'N/A'); ?>
                            </span>
                            <div class="small fw-bold text-dark mt-1"><?= htmlspecialchars($row['age']); ?> Yrs (<?= ucfirst($row['gender']) ?>)</div>
                        </td>
                        <td class="d-none d-md-table-cell">
                            <div class="fw-bold small text-dark"><i class="far fa-calendar-check me-1" style="color: var(--theme-green);"></i> <?= date('d M, Y', strtotime($row['preferred_date'])); ?></div>
                            <small class="text-muted ms-3"><?= date('l', strtotime($row['preferred_date'])); ?></small>
                        </td>
                        <td>
                            <span class="status-badge status-<?= strtolower($row['status']); ?>">
                                <?= strtoupper($row['status']); ?>
                            </span>
                        </td>
                        <td class="pe-4">
                            <div class="btn-group-actions">
                                <button class="action-icon icon-view" onclick='viewTrialDetails(<?= json_encode($row, JSON_UNESCAPED_UNICODE); ?>)' title="View Details">
                                    <i class="fas fa-eye"></i>
                                </button>
                                
                                <?php if($row['status'] == 'pending'): ?>
                                    <a href="process_trial.php?id=<?= $row['id'] ?>&action=approve" class="action-icon icon-approve" onclick="return confirm('Are you sure you want to approve this application?')" title="Approve">
                                        <i class="fas fa-check"></i>
                                    </a>
                                    <a href="process_trial.php?id=<?= $row['id'] ?>&action=reject" class="action-icon icon-reject" onclick="return confirm('Are you sure you want to reject this application?')" title="Reject">
                                        <i class="fas fa-times"></i>
                                    </a>
                                <?php endif; ?>

                                <a href="process_trial.php?id=<?= $row['id'] ?>&action=delete" class="action-icon icon-delete" onclick="return confirm('Are you sure you want to permanently delete this application?')" title="Delete">
                                    <i class="fas fa-trash-alt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; else: ?>
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="py-4">
                                    <i class="fas fa-inbox fa-3x mb-3" style="color: #cbd5e1;"></i>
                                    <h5 class="text-muted fw-bold">No trial applications found.</h5>
                                </div>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="trialDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold text-dark"><i class="fas fa-id-card me-2" style="color: var(--theme-green);"></i> Application Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4" id="trialModalBody"></div>
            <div class="modal-footer border-0 pb-4 justify-content-center bg-light" style="border-radius: 0 0 20px 20px;">
                <button type="button" class="btn btn-secondary px-5 rounded-pill fw-bold border-0 shadow-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    function viewTrialDetails(data) {
        let statusBadgeClass = data.status === 'approved' ? 'success' : (data.status === 'rejected' ? 'danger' : 'warning');
        
        let html = `
            <div class="text-center mb-4">
                <div class="avatar-lg rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:80px; height:80px; font-size:35px; color: var(--theme-green); background: rgba(6, 78, 59, 0.05); border:3px solid var(--theme-gold);">
                    <i class="fas fa-user-graduate"></i>
                </div>
                <h4 class="fw-bold mb-1" style="color: var(--theme-dark);">${data.name}</h4>
                <span class="badge bg-${statusBadgeClass} text-uppercase px-3 py-1 rounded-pill mt-1 border"><i class="fas fa-circle me-1 small"></i> ${data.status}</span>
            </div>
            
            <div class="row g-3">
                <div class="col-12">
                    <div class="detail-item"><strong><i class="fab fa-whatsapp me-2" style="color: var(--theme-green);"></i> WhatsApp:</strong> <span class="fw-bold" style="color: var(--theme-dark); float: right;">${data.phone}</span></div>
                </div>
                <div class="col-12">
                    <div class="detail-item"><strong><i class="fas fa-envelope me-2" style="color: var(--theme-gold);"></i> Email:</strong> <span class="text-muted" style="float: right;">${data.email}</span></div>
                </div>
                <div class="col-6">
                    <div class="detail-item text-center">
                        <div class="text-muted small text-uppercase fw-bold mb-1">Age</div>
                        <div class="fw-bold" style="color: var(--theme-green); font-size: 16px;">${data.age} Yrs</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="detail-item text-center">
                        <div class="text-muted small text-uppercase fw-bold mb-1">Gender</div>
                        <div class="fw-bold" style="color: var(--theme-dark); font-size: 16px;">${data.gender}</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="detail-item" style="border-left: 4px solid var(--theme-green);">
                        <strong class="d-block mb-1 text-muted small text-uppercase">Interested Course:</strong> 
                        <div class="fw-bold text-dark"><i class="fas fa-book-reader me-2" style="color: var(--theme-gold);"></i> ${data.course_name || 'N/A'}</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="detail-item" style="background: rgba(212, 175, 55, 0.05); border-color: rgba(212, 175, 55, 0.3);">
                        <strong class="d-block mb-1 text-muted small text-uppercase">Preferred Date:</strong> 
                        <div class="fw-bold" style="color: var(--theme-green);"><i class="far fa-calendar-check me-2"></i> ${data.preferred_date}</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="detail-item small text-muted text-center border-0 bg-transparent p-0 mt-2">
                        <i class="far fa-clock me-1"></i> Applied At: ${data.created_at}
                    </div>
                </div>
            </div>`;
            
        document.getElementById('trialModalBody').innerHTML = html;
        new bootstrap.Modal(document.getElementById('trialDetailsModal')).show();
    }

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

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