<?php
include '../includes/db.php';
include 'includes/header.php';
include 'header.php'; 
// Handle deletion
if (isset($_GET['delete'])) {
    $id = (int)$_GET['delete'];
    $conn->query("DELETE FROM research WHERE id=$id");
    header("Location: ".$_SERVER['PHP_SELF']); // reload page after delete
    exit;
}

// Fetch research items
$result = $conn->query("SELECT * FROM research ORDER BY created_at DESC");
?>

<h2>Research List</h2>

<table class="research-table">
<thead>
<tr>
    <th>#</th>
    <th>Title</th>
    <th>Category</th>
    <th>Status</th>
    <th>Date</th>
    <th>Action</th>
</tr>
</thead>
<tbody>
<?php $i = 1; while($row = $result->fetch_assoc()): ?>
<tr>
    <td><?= $i++ ?></td>
    <td><?= htmlspecialchars($row['title']) ?></td>
    <td><?= htmlspecialchars($row['category']) ?></td>
    <td><?= htmlspecialchars($row['status']) ?></td>
    <td><?= date('d M Y', strtotime($row['created_at'])) ?></td>
    <td>
        <a href="../research-details.php?id=<?= $row['id'] ?>" target="_blank" class="btn-view">View</a>
        <a href="?delete=<?= $row['id'] ?>" onclick="return confirm('Are you sure you want to delete this research?')" class="btn-delete">Delete</a>
    </td>
</tr>
<?php endwhile; ?>
</tbody>
</table>

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

<style>
/* ===== Body & Headings ===== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7fa;
    color: #333;
    margin: 0;
    padding: 0;
}

h2 {
    text-align: center;
    color: #1a237e;
    font-size: 2rem;
    margin: 40px 0 20px;
    border-bottom: 3px solid #1a237e;
    display: inline-block;
    padding-bottom: 6px;
}

/* ===== Table Styling ===== */
.research-table {
    width: 95%;
    max-width: 1000px;
    margin: 20px auto 60px;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
}

.research-table th, .research-table td {
    padding: 15px 12px;
    text-align: left;
    font-size: 14px;
}

.research-table th {
    background-color: #1a237e;
    color: #fff;
    font-weight: 600;
}

.research-table tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.3s ease;
}

.research-table tr:hover {
    background-color: #f0f4ff;
}

/* ===== Buttons ===== */
.research-table a.btn-view,
.research-table a.btn-delete {
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    margin-right: 5px;
    transition: 0.3s;
}

.research-table a.btn-view {
    background: #28a745;
}
.research-table a.btn-view:hover {
    background: #1e7e34;
}

.research-table a.btn-delete {
    background: #dc3545;
}
.research-table a.btn-delete:hover {
    background: #a71d2a;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .research-table, .research-table thead, .research-table tbody, .research-table th, .research-table td, .research-table tr {
        display: block;
    }

    .research-table tr {
        margin-bottom: 20px;
        border-bottom: 2px solid #ddd;
        padding-bottom: 10px;
    }

    .research-table th {
        display: none;
    }

    .research-table td {
        position: relative;
        padding-left: 50%;
        text-align: left;
    }

    .research-table td:before {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        font-weight: bold;
        white-space: nowrap;
        color: #1a237e;
    }

    .research-table td:nth-of-type(1):before { content: "#"; }
    .research-table td:nth-of-type(2):before { content: "Title"; }
    .research-table td:nth-of-type(3):before { content: "Category"; }
    .research-table td:nth-of-type(4):before { content: "Status"; }
    .research-table td:nth-of-type(5):before { content: "Date"; }
    .research-table td:nth-of-type(6):before { content: "Action"; }
}
</style>
