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

<div class="container mt-4">
    <h4 class="text-orange">All Mails (Incoming & Outgoing)</h4>

    <table class="table table-bordered table-striped mt-3">
        <thead class="bg-orange text-white">
            <tr>
                <th>Tracking No</th>
                <th>Subject</th>
                <th>Action</th>
                <th>Report</th>
                <th>Status</th>
                <th>Last Moved To</th>
                <th>Date minuted</th>
                <th>Reg Date</th>
                <th>Image</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $query = $conn->query("SELECT * FROM mails ORDER BY id DESC");
            if ($query->num_rows > 0) {
                while ($mail = $query->fetch_assoc()) {
                    $image = $mail['image'] ? "uploads/mails/{$mail['image']}" : 'assets/no-image.png';
                    echo "<tr>
                        <td>{$mail['tracking_no']}</td>
                        <td>{$mail['subject']}</td>
                        <td>{$mail['action']}</td>
                        <td>{$mail['report']}</td>
                        <td><span class='badge bg-warning text-dark'>{$mail['status']}</span></td>
                        <td>{$mail['department']}</td>
                         <td>{$mail['date_minuted']}</td>
                        <td>{$mail['reg_date']}</td>
                        <td>
                            <img src='$image' alt='Mail Image' style='width: 40px; height: 40px; cursor: pointer;'
                             onclick=\"openModal('$image')\">
                        </td>
                        <td>
                            <a href='minute_mail.php?mail_id={$mail['id']}' class='btn btn-sm btn-primary'>Minute</a>
                            <a href='mail_history.php?mail_id={$mail['id']}' class='btn btn-sm btn-info'>History</a>
                        </td>
                    </tr>";
                }
            } else {
                echo "<tr><td colspan='8' class='text-center'>No Mails Found.</td></tr>";
            }
            ?>
        </tbody>
    </table>
</div>

<!-- Image Preview Modal -->
<div class="modal fade" id="imageModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-orange text-white">
        <h5 class="modal-title">Mail Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body text-center">
        <img src="" id="modalImage" class="img-flu" width="100%" height="100%">
      </div>
    </div>
  </div>
</div>

<script>
function openModal(imageSrc) {
    document.getElementById('modalImage').src = imageSrc;
    var imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
    imageModal.show();
}
</script>

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