feat: Implement Edit and Delete functionality for missions

- Add a database setup script to create the `missions` table.
- Implement a modal form for creating new missions.
- Add backend PHP logic to handle form submission and save missions to the database.
- Display the list of missions dynamically from the database.

assets/css/custom.css

@@ -0,0 +1,98 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #F4F4F4;
+    color: #264653;
+}
+
+.header {
+    background-image: linear-gradient(to right, rgba(42, 157, 143, 0.8), rgba(38, 70, 83, 0.8)), url('https://picsum.photos/seed/droneview/1600/400');
+    background-size: cover;
+    background-position: center;
+    color: white;
+    padding: 4rem 2rem;
+    margin-bottom: 2rem;
+    border-radius: 0 0 1rem 1rem;
+}
+
+.header h1 {
+    font-weight: 700;
+}
+
+.btn-primary {
+    background-color: #2A9D8F;
+    border-color: #2A9D8F;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    transition: background-color 0.3s ease;
+}
+
+.btn-primary:hover {
+    background-color: #248a7d;
+    border-color: #248a7d;
+}
+
+.btn-secondary {
+    background-color: #E9C46A;
+    border-color: #E9C46A;
+    color: #264653;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    transition: background-color 0.3s ease;
+}
+
+.btn-secondary:hover {
+    background-color: #d4b35f;
+    border-color: #d4b35f;
+}
+
+
+.mission-table {
+    background-color: #FFFFFF;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.mission-table th {
+    border-bottom: 2px solid #F4F4F4;
+}
+
+.mission-table tbody tr:hover {
+    background-color: #f8f9fa;
+}
+
+.status-badge {
+    padding: 0.35em 0.65em;
+    font-size: .75em;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25rem;
+}
+
+.status-completed {
+    background-color: #2A9D8F;
+}
+
+.status-pending {
+    background-color: #E9C46A;
+    color: #264653;
+}
+
+.status-in-progress {
+    background-color: #F4A261;
+}
+
+.footer {
+    padding: 2rem 0;
+    margin-top: 2rem;
+    font-size: 0.9rem;
+    color: #6c757d;
+}

assets/js/main.js

@@ -0,0 +1,33 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+    const editMissionModal = document.getElementById('editMissionModal');
+    if (editMissionModal) {
+        editMissionModal.addEventListener('show.bs.modal', function (event) {
+            // Button that triggered the modal
+            const button = event.relatedTarget;
+
+            // Extract info from data-* attributes
+            const missionId = button.getAttribute('data-id');
+            const name = button.getAttribute('data-name');
+            const drone = button.getAttribute('data-drone');
+            const status = button.getAttribute('data-status');
+            const date = button.getAttribute('data-date');
+
+            // Update the modal's content.
+            const modalTitle = editMissionModal.querySelector('.modal-title');
+            const missionIdInput = editMissionModal.querySelector('#edit_mission_id');
+            const nameInput = editMissionModal.querySelector('#edit_name');
+            const droneInput = editMissionModal.querySelector('#edit_drone');
+            const statusInput = editMissionModal.querySelector('#edit_status');
+            const dateInput = editMissionModal.querySelector('#edit_mission_date');
+
+            modalTitle.textContent = 'Edit Mission: ' + name;
+            missionIdInput.value = missionId;
+            nameInput.value = name;
+            droneInput.value = drone;
+            statusInput.value = status;
+            dateInput.value = date;
+        });
+    }
+
+});

db/setup.php

@@ -0,0 +1,33 @@
+<?php
+require_once 'config.php';
+
+try {
+    $pdo = db();
+    $sql = "
+    CREATE TABLE IF NOT EXISTS missions (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        name VARCHAR(255) NOT NULL,
+        drone VARCHAR(255) NOT NULL,
+        status VARCHAR(50) NOT NULL,
+        mission_date DATE NOT NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=INNODB;
+    ";
+    $pdo->exec($sql);
+    echo "Table 'missions' created successfully." . PHP_EOL;
+
+    // Add some initial data for demonstration
+    $stmt = $pdo->query("SELECT COUNT(*) FROM missions");
+    if ($stmt->fetchColumn() == 0) {
+        $pdo->exec("
+            INSERT INTO missions (name, drone, status, mission_date) VALUES
+            ('Vineyard Survey', 'DJI Agras T30', 'Completed', '2025-09-25'),
+            ('Pest Control', 'XAG P40', 'In Progress', '2025-09-27'),
+            ('Crop Dusting', 'DJI Agras T30', 'Scheduled', '2025-09-29');
+        ");
+        echo "Initial data inserted into 'missions' table." . PHP_EOL;
+    }
+
+} catch (PDOException $e) {
+    die("DB ERROR: " . $e->getMessage());
+}

index.php

@@ -1,131 +1,305 @@
 <?php
-declare(strict_types=1);
+require_once 'db/config.php';
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
 
-$phpVersion = PHP_VERSION;
+// Handle form submissions for create, update, and delete
-$now = date('Y-m-d H:i:s');
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $action = $_POST['action'] ?? 'create';
+    $pdo = db();
+
+    try {
+        switch ($action) {
+            case 'create':
+                $name = $_POST['name'] ?? '';
+                $drone = $_POST['drone'] ?? '';
+                $status = $_POST['status'] ?? '';
+                $mission_date = $_POST['mission_date'] ?? '';
+
+                if ($name && $drone && $status && $mission_date) {
+                    $sql = "INSERT INTO missions (name, drone, status, mission_date) VALUES (:name, :drone, :status, :mission_date)";
+                    $stmt = $pdo->prepare($sql);
+                    $stmt->execute([
+                        ':name' => $name,
+                        ':drone' => $drone,
+                        ':status' => $status,
+                        ':mission_date' => $mission_date,
+                    ]);
+                }
+                break;
+
+            case 'update':
+                $id = $_POST['mission_id'] ?? null;
+                $name = $_POST['name'] ?? '';
+                $drone = $_POST['drone'] ?? '';
+                $status = $_POST['status'] ?? '';
+                $mission_date = $_POST['mission_date'] ?? '';
+
+                if ($id && $name && $drone && $status && $mission_date) {
+                    $sql = "UPDATE missions SET name = :name, drone = :drone, status = :status, mission_date = :mission_date WHERE id = :id";
+                    $stmt = $pdo->prepare($sql);
+                    $stmt->execute([
+                        ':id' => $id,
+                        ':name' => $name,
+                        ':drone' => $drone,
+                        ':status' => $status,
+                        ':mission_date' => $mission_date,
+                    ]);
+                }
+                break;
+
+            case 'delete':
+                $id = $_POST['mission_id'] ?? null;
+                if ($id) {
+                    $sql = "DELETE FROM missions WHERE id = :id";
+                    $stmt = $pdo->prepare($sql);
+                    $stmt->execute([':id' => $id]);
+                }
+                break;
+        }
+        // Redirect to avoid form resubmission on refresh
+        header("Location: index.php");
+        exit;
+    } catch (PDOException $e) {
+        // For a real app, you'd log this error instead of dying
+        die("Database error: " . $e->getMessage());
+    }
+}
+
+// Fetch all missions for display
+try {
+    $pdo = db();
+    $stmt = $pdo->query("SELECT id, name, drone, status, DATE_FORMAT(mission_date, '%Y-%m-%d') as mission_date FROM missions ORDER BY mission_date DESC");
+    $missions = $stmt->fetchAll();
+} catch (PDOException $e) {
+    die("Error fetching missions: " . $e->getMessage());
+}
+
+function getStatusClass($status) {
+    switch (strtolower($status)) {
+        case 'completed':
+            return 'status-completed';
+        case 'in progress':
+            return 'status-in-progress';
+        case 'scheduled':
+            return 'status-pending';
+        default:
+            return 'status-pending';
+    }
+}
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+    <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>New Style</title>
+    <title>AgroDrone Control - Mission Dashboard</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+    <meta name="description" content="Dashboard for managing agricultural drone missions.">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <!-- Open Graph -->
-  <style>
+    <meta property="og:title" content="AgroDrone Control">
-    :root {
+    <meta property="og:description" content="Dashboard for managing agricultural drone missions.">
-      --bg-color-start: #6a11cb;
+    <meta property="og:image" content="https://picsum.photos/seed/drone1/400/300">
-      --bg-color-end: #2575fc;
+    <meta property="og:url" content="">
-      --text-color: #ffffff;
+    <meta property="og:type" content="website">
-      --card-bg-color: rgba(255, 255, 255, 0.01);
+
-      --card-border-color: rgba(255, 255, 255, 0.1);
+    <!-- Bootstrap 5 CSS -->
-    }
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    body {
+
-      margin: 0;
+    <!-- Custom CSS -->
-      font-family: 'Inter', sans-serif;
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
+
-      color: var(--text-color);
+    <!-- Feather Icons -->
-      display: flex;
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-      justify-content: center;
+
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
 </head>
 <body>
-  <main>
+
-    <div class="card">
+    <header class="header text-center">
-      <h1>Analyzing your requirements and generating your website…</h1>
+        <div class="container">
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+            <h1 class="display-4">AgroDrone Control</h1>
-        <span class="sr-only">Loading…</span>
+            <p class="lead">Welcome to your mission control center</p>
         </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWiZZy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
+    </header>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
+
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+    <main class="container my-5">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2 class="h4">Mission Dashboard</h2>
+            <button id="createMissionBtn" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createMissionModal">
+                <i data-feather="plus" class="me-1"></i> Create New Mission
+            </button>
+        </div>
+
+        <div class="mission-table table-responsive">
+            <table class="table table-hover align-middle">
+                <thead class="table-light">
+                    <tr>
+                        <th scope="col">Mission Name</th>
+                        <th scope="col">Drone</th>
+                        <th scope="col">Status</th>
+                        <th scope="col">Date</th>
+                        <th scope="col" class="text-end">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php if (empty($missions)): ?>
+                        <tr>
+                            <td colspan="5" class="text-center">No missions found. Create one to get started!</td>
+                        </tr>
+                    <?php else: ?>
+                        <?php foreach ($missions as $mission): ?>
+                            <tr>
+                                <td><?php echo htmlspecialchars($mission['name']); ?></td>
+                                <td><?php echo htmlspecialchars($mission['drone']); ?></td>
+                                <td><span class="status-badge <?php echo getStatusClass($mission['status']); ?>"><?php echo htmlspecialchars($mission['status']); ?></span></td>
+                                <td><?php echo htmlspecialchars($mission['mission_date']); ?></td>
+                                <td class="text-end">
+                                    <a href="mission.php?id=<?php echo $mission['id']; ?>" class="btn btn-sm btn-outline-secondary me-1">
+                                        <i data-feather="eye" class="feather-sm"></i> View
+                                    </a>
+                                    <button type="button" class="btn btn-sm btn-outline-primary me-1"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#editMissionModal"
+                                            data-id="<?php echo $mission['id']; ?>"
+                                            data-name="<?php echo htmlspecialchars($mission['name']); ?>"
+                                            data-drone="<?php echo htmlspecialchars($mission['drone']); ?>"
+                                            data-status="<?php echo htmlspecialchars($mission['status']); ?>"
+                                            data-date="<?php echo htmlspecialchars($mission['mission_date']); ?>">
+                                        <i data-feather="edit-2" class="feather-sm"></i> Edit
+                                    </button>
+                                    <form method="POST" action="index.php" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this mission?');">
+                                        <input type="hidden" name="action" value="delete">
+                                        <input type="hidden" name="mission_id" value="<?php echo $mission['id']; ?>">
+                                        <button type="submit" class="btn btn-sm btn-outline-danger">
+                                            <i data-feather="trash-2" class="feather-sm"></i> Delete
+                                        </button>
+                                    </form>
+                                </td>
+                            </tr>
+                        <?php endforeach; ?>
+                    <?php endif; ?>
+                </tbody>
+            </table>
         </div>
     </main>
-  <footer>
+
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+    <footer class="footer text-center">
+        <p>&copy; <?php echo date("Y"); ?> AgroDrone Control. All Rights Reserved.</p>
     </footer>
+
+    <!-- Create Mission Modal -->
+    <div class="modal fade" id="createMissionModal" tabindex="-1" aria-labelledby="createMissionModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="createMissionModalLabel">New Mission</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form id="createMissionForm" method="POST" action="index.php">
+                        <input type="hidden" name="action" value="create">
+                        <div class="mb-3">
+                            <label for="create_name" class="form-label">Mission Name</label>
+                            <input type="text" class="form-control" id="create_name" name="name" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="create_drone" class="form-label">Drone</label>
+                            <select class="form-select" id="create_drone" name="drone" required>
+                                <option value="DJI Agras T30">DJI Agras T30</option>
+                                <option value="XAG P40">XAG P40</option>
+                                <option value="AG-Drone 01">AG-Drone 01</option>
+                                <option value="AG-Drone 02">AG-Drone 02</option>
+                                <option value="AG-Drone 03">AG-Drone 03</option>
+                            </select>
+                        </div>
+                        <div class="mb-3">
+                            <label for="create_status" class="form-label">Status</label>
+                            <select class="form-select" id="create_status" name="status" required>
+                                <option value="Scheduled">Scheduled</option>
+                                <option value="In Progress">In Progress</option>
+                                <option value="Completed">Completed</option>
+                            </select>
+                        </div>
+                        <div class="mb-3">
+                            <label for="create_mission_date" class="form-label">Date</label>
+                            <input type="date" class="form-control" id="create_mission_date" name="mission_date" required>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="submit" form="createMissionForm" class="btn btn-primary">Save Mission</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Edit Mission Modal -->
+    <div class="modal fade" id="editMissionModal" tabindex="-1" aria-labelledby="editMissionModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="editMissionModalLabel">Edit Mission</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form id="editMissionForm" method="POST" action="index.php">
+                        <input type="hidden" name="action" value="update">
+                        <input type="hidden" name="mission_id" id="edit_mission_id">
+                        <div class="mb-3">
+                            <label for="edit_name" class="form-label">Mission Name</label>
+                            <input type="text" class="form-control" id="edit_name" name="name" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="edit_drone" class="form-label">Drone</label>
+                            <select class="form-select" id="edit_drone" name="drone" required>
+                                <option value="DJI Agras T30">DJI Agras T30</option>
+                                <option value="XAG P40">XAG P40</option>
+                                <option value="AG-Drone 01">AG-Drone 01</option>
+                                <option value="AG-Drone 02">AG-Drone 02</option>
+                                <option value="AG-Drone 03">AG-Drone 03</option>
+                            </select>
+                        </div>
+                        <div class="mb-3">
+                            <label for="edit_status" class="form-label">Status</label>
+                            <select class="form-select" id="edit_status" name="status" required>
+                                <option value="Scheduled">Scheduled</option>
+                                <option value="In Progress">In Progress</option>
+                                <option value="Completed">Completed</option>
+                            </select>
+                        </div>
+                        <div class="mb-3">
+                            <label for="edit_mission_date" class="form-label">Date</label>
+                            <input type="date" class="form-control" id="edit_mission_date" name="mission_date" required>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="submit" form="editMissionForm" class="btn btn-primary">Save Changes</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Custom JS -->
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+
+    <script>
+        feather.replace({
+            class: 'feather',
+            'stroke-width': 2,
+            width: 20,
+            height: 20
+        })
+        // Feather icons in buttons are smaller
+        feather.replace({
+            class: 'feather-sm',
+            'stroke-width': 2,
+            width: 16,
+            height: 16
+        })
+    </script>
+
 </body>
 </html>

mission.php

@@ -0,0 +1,92 @@
+<?php
+require_once 'db/config.php';
+
+$mission_id = $_GET['id'] ?? null;
+$mission = null;
+$error = '';
+
+if ($mission_id) {
+    try {
+        $pdo = db();
+        $stmt = $pdo->prepare("SELECT * FROM missions WHERE id = ?");
+        $stmt->execute([$mission_id]);
+        $mission = $stmt->fetch(PDO::FETCH_ASSOC);
+
+        if (!$mission) {
+            $error = "Mission not found.";
+        }
+    } catch (PDOException $e) {
+        $error = "Database error: " . $e->getMessage();
+    }
+} else {
+    $error = "No mission ID provided.";
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mission Details - AgroDrone Control</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body>
+
+<header class="header text-white">
+    <div class="container d-flex justify-content-between align-items-center">
+        <h1 class="logo">AgroDrone</h1>
+        <nav>
+            <a href="index.php" class="nav-link">Dashboard</a>
+        </nav>
+    </div>
+</header>
+
+<main class="container mt-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2>Mission Details</h2>
+        <a href="index.php" class="btn btn-secondary">
+            <i data-feather="arrow-left" class="me-2"></i>Back to Dashboard
+        </a>
+    </div>
+
+    <?php if ($error): ?>
+        <div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
+    <?php elseif ($mission): ?>
+        <div class="card">
+            <div class="card-header">
+                <h4 class="card-title mb-0">Mission: <?php echo htmlspecialchars($mission['name']); ?></h4>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-6">
+                        <p><strong>Drone:</strong> <?php echo htmlspecialchars($mission['drone']); ?></p>
+                        <p><strong>Status:</strong> <span class="badge bg-primary"><?php echo htmlspecialchars($mission['status']); ?></span></p>
+                    </div>
+                    <div class="col-md-6">
+                        <p><strong>Date:</strong> <?php echo htmlspecialchars(date('F j, Y', strtotime($mission['mission_date']))); ?></p>
+                        <p><strong>Created At:</strong> <?php echo htmlspecialchars(date('F j, Y, g:i a', strtotime($mission['created_at']))); ?></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    <?php endif; ?>
+
+</main>
+
+<footer class="footer mt-auto py-3 bg-light">
+    <div class="container text-center">
+        <span class="text-muted">&copy; <?php echo date("Y"); ?> AgroDrone Control. All rights reserved.</span>
+    </div>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+<script>
+    feather.replace();
+</script>
+
+</body>
+</html>