<?php
include('session_validator.php');
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>SRMS Admin Manage Subjects</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" media="screen" >
        <link rel="stylesheet" href="css/font-awesome.min.css" media="screen" >
        <link rel="stylesheet" href="css/animate-css/animate.min.css" media="screen" >
        <link rel="stylesheet" href="css/lobipanel/lobipanel.min.css" media="screen" >
        <link rel="stylesheet" href="css/prism/prism.css" media="screen" >
        <link rel="stylesheet" href="css/select2/select2.min.css" >
        <link rel="stylesheet" href="css/main.css" media="screen" >
        <link rel="stylesheet" href="css/tablestyle.css" type="text/css">
        <script src="js/modernizr/modernizr.min.js"></script>
        <script src="js/jquery/jquery-2.2.4.min.js"></script>
    <!-- DataTables JavaScript -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1050; /* Sit on top */
            padding-top: 50px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 100%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
            animation: animatetop 0.4s; /* Animation */
        }

        /* Add Animation */
        @keyframes animatetop {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }

        /* The Close Button */
        .close {
            color: #3d85c6;
            float: right;
            font-size: 18px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #3d85c6;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 2px 10px;
            background-color: #b6d7a8; /* Green background */
            color: white;
        }

        .modal-body {
            padding: 2px 10;
        }

   .custom-modal-size {
        max-width: 60%; /* Set the maximum width to 60% */
    }
        .modal-footer {
            padding: 2px 10px;
            background-color: #b6d7a8; /* Green background */
            color: white;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script> <!-- Include Bootstrap JS -->
</head>
<body class="top-navbar-fixed">
        <div class="main-wrapper">

            <!-- ========== TOP NAVBAR ========== -->
  <?php  include('includes/topbar.php');?> 
            <!-- ========== WRAPPER FOR BOTH SIDEBARS & MAIN CONTENT ========== -->
            <div class="content-wrapper">
                <div class="content-container">

                    <!-- ========== LEFT SIDEBAR ========== -->
                   <?php include('includes/leftbar.php');?>  
                    <!-- /.left-sidebar -->

                    <div class="main-page">

                     <div class="container-fluid">
                            <div class="row page-title-div">
                                <div class="col-md-6">
                                    <h2 class="title">Select to display data</h2>
                                
                                </div>
                                
                                <!-- /.col-md-6 text-right -->
                            </div>
                            <!-- /.row -->
                            <div class="row breadcrumb-div">
                                <div class="col-md-6">
                                    <ul class="breadcrumb">
                                        <li><a href="dashboard.php"><i class="fa fa-home"></i> Home</a></li>
                                        <li> Report </li>
                                        <li class="">Support</li>
                                    </ul>
                                </div>
                             
                            </div>
                            <!-- /.row -->
                        </div>
                        <div class="container-fluid">
                           
                        <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel">
                                            <div class="panel-heading">
                                                <div class="panel-title">
                                                    <h5>Select field to display</h5>
                                                </div>
                                            </div>
                                            <div class="panel-body">

<?php
// Database connection
include("includes/db.php");

// SQL query to fetch messages
$sql = "SELECT sm.id, sm.subject, sm.message, sm.email, sm.status, sm.created_at, si.image_path 
        FROM support_messages sm
        LEFT JOIN support_images si ON sm.id = si.message_id 
        ORDER BY sm.created_at DESC";

$result = $conn->query($sql);

// Array to hold messages and their images
$messages = [];

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $messageId = $row['id'];
        // Initialize the message array if not already done
        if (!isset($messages[$messageId])) {
            $messages[$messageId] = [
                'subject' => $row['subject'],
                'message' => $row['message'],
                'email' => $row['email'],
                'status' => $row['status'],
                'created_at' => $row['created_at'],
                'image_count' => 0 // Initialize image count
            ];
        }
        // Increment image count if there's an image path
        if (!empty($row['image_path'])) {
            $messages[$messageId]['image_count']++;
        }
    }
    
    echo "<link rel='stylesheet' href='css/bootstrap.min.css'>";
    echo "<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>";
    echo "<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js'></script>";
  
    echo "<table class='table table-bordered'>";
    echo "<tr>
            <th>ID</th>
            <th>Subject</th>
            <th>Message</th>
            <!--th>Email</th-->
            <th>Status</th>
            <th>Created At</th>
            <th>Image Attached</th> <!-- Updated column for Image Count -->
            <th>Actions</th>
          </tr>";
    
    // Iterate through the grouped messages and display them
    foreach ($messages as $id => $msg) {
        echo "<tr>
                <td>" . $id . "</td>
                <td>" . $msg['subject'] . "</td>
                <td>" . $msg['message'] . "</td>
                <!--td>" . $msg['email'] . "</td-->
                <td>" . $msg['status'] . "</td>
                <td>" . $msg['created_at'] . "</td>
                <td>" . $msg['image_count'] . "</td> <!-- Display image count -->
                <td>
                    <a href='mark_resolved.php?id=" . $id . "' class='btn btn-success'>Mark as Resolved</a>
                    <button class='btn btn-info' data-toggle='modal' data-target='#imageModal' data-id='" . $id . "'>View Images</button>
                </td>
              </tr>";
    }
    
    echo "</table>";
} else {
    echo "No messages found.";
}

$conn->close();
?>





<!-- Modal for displaying images -->
<div class="modal" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog custom-modal-size" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">Images</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="imageContainer">
                <!-- Images will be dynamically loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
 
</style>



<script>
$(document).ready(function() {
    $('#imageModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var messageId = button.data('id'); // Extract info from data-* attributes

        // AJAX request to fetch images for the message ID
        $.ajax({
            url: 'fetch_images.php', // URL of the PHP file to fetch images
            type: 'GET',
            data: { id: messageId },
            success: function(data) {
                console.log(data); // Log the response data to the console
                $('#imageContainer').html(data); // Load the response into the modal body
            },
            error: function() {
                $('#imageContainer').html('<div class="alert alert-danger">Unable to load images.</div>');
            }
        });
    });
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="js/jquery/jquery-2.2.4.min.js"></script>
        <script src="js/bootstrap/bootstrap.min.js"></script>
        <script src="js/pace/pace.min.js"></script>
        <script src="js/lobipanel/lobipanel.min.js"></script>
        <script src="js/iscroll/iscroll.js"></script>
        <script src="js/prism/prism.js"></script>
        <script src="js/main.js"></script>
        <script src="js/modernizr/modernizr.min.js"></script>

</body>
</html>