<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form with Image Upload and Voice Input</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f4f7f6;
            font-family: 'Arial', sans-serif;
        }

        .contact-form-container {
            max-width: 600px;
            margin: 50px auto;
            background-color: #fff;
            padding: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .form-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            color: #333;
            font-weight: bold;
        }

        .form-group label {
            font-weight: bold;
            color: #555;
        }

        .form-control {
            border-radius: 6px;
            padding: 10px;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            width: 100%;
            padding: 12px;
            border-radius: 6px;
            font-size: 16px;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #004080;
        }

        .form-group textarea {
            resize: none;
        }

        #teacherNameList {
            position: absolute;
            z-index: 1000;
            width: 100%;
            background: white;
            border: 1px solid #ced4da;
            border-radius: .25rem;
        }

        #teacherNameList .list-group-item {
            cursor: pointer;
        }

        .voice-icon {
            cursor: pointer;
            font-size: 1.5em;
            color: #007bff;
        }

        #file-preview img {
            max-width: 150px;  /* Set max width */
            max-height: 150px; /* Set max height */
            height: auto;      /* Maintain aspect ratio */
            margin-bottom: 10px; /* Space between images */
        }

        /* Loading styles */
        #loading {
            display: none; /* Hide loading by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="contact-form-container">
    
      <a href="index.php"> <button style='width:70%' class="btn btn-info">Go Back Home</button></a>
 

    <h2 class="form-title">Contact Us</h2>
    <form id="contactForm" method="POST" action="submit_message.php" enctype="multipart/form-data">
        <!-- Subject -->
        <div class="form-group">
            <label for="subject">Subject:</label>
            <input type="text" class="form-control" id="subject" name="subject" placeholder="Enter your subject" required>
        </div>
        <!-- Message -->
        <div class="form-group">
            <label for="message">Message:</label>
            <textarea class="form-control" id="message" name="message" rows="5" placeholder="Enter your message" required></textarea>
            <i class="voice-icon fas fa-microphone" id="voiceMessage"></i> <!-- Voice input button -->
        </div>
        <!-- Email -->
        <div class="form-group">
            <label for="email">Email (optional):</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="Your email address (optional)">
        </div>

        <!-- Teacher Name with Autocomplete -->
        <div class="row">
            <div class="form-group col-md-12">
                <label for="teacher_name">Submitted By (Teacher Name):</label>
                <input type="text" class="form-control" id="teacher_name" name="teacher_name" autocomplete="off" placeholder="Search teacher name...">
                <div id="teacherNameList" class="list-group"></div> <!-- Container for autocomplete suggestions -->
            </div>
        </div>

        <!-- Hidden field to store Teacher ID -->
        <input type="hidden" id="teacher_id" name="teacher_id">

        <!-- Image Upload -->
        <div class="form-group">
            <label for="images">Attach Image(s):</label>
            <input type="file" class="form-control" id="images" name="images[]" multiple accept="image/*">
            <div id="file-preview"></div> <!-- To display image preview -->
        </div>

        <!-- Submit Button -->
        <button type="submit" class="btn btn-primary">Send Message</button>
    </form>
</div>

<!-- Loading GIF -->
<div id="loading">
    <img src="includes/loader.gif" alt="Loading..." style="margin-top:20%; width: 100px; height: auto;">
    <h4>Processing your request, please wait...</h4>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script> <!-- Font Awesome for voice icon -->
<script>
// Autocomplete for Teacher Name
$(document).ready(function(){
    $('#teacher_name').keyup(function(){
        var query = $(this).val();
        if (query != '') {
            $.ajax({
                url: "fetch_teacher_names.php",
                method: "POST",
                data: {query: query},
                success: function(data) {
                    $('#teacherNameList').fadeIn();
                    $('#teacherNameList').html(data);
                }
            });
        } else {
            $('#teacherNameList').fadeOut();
        }
    });

    // Fill teacher name input and hidden teacher_id on suggestion click
    $(document).on('click', '.list-group-item', function(){
        $('#teacher_name').val($(this).text());
        $('#teacher_id').val($(this).data('id')); // Store teacher_id in hidden field
        $('#teacherNameList').fadeOut();
    });

    // Close the suggestion list if clicked outside
    $(document).on('click', function (e) {
        if (!$(e.target).closest('#teacher_name').length) {
            $('#teacherNameList').fadeOut();
        }
    });

    // Image Preview
    $('#images').change(function() {
        $('#file-preview').html(''); // Clear previous preview
        var totalFiles = this.files.length;
        for (var i = 0; i < totalFiles; i++) {
            $('#file-preview').append('<img src="'+URL.createObjectURL(this.files[i])+'" />');
        }
    });

    // Voice input functionality
    $('#voiceMessage').click(function() {
        var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
        recognition.onresult = function(event) {
            $('#message').val(event.results[0][0].transcript);
        };
        recognition.start();
    });

    // Handle form submission
    $('#contactForm').on('submit', function(e) {
        e.preventDefault(); // Prevent the default form submission

        // Show loading GIF and fade out the main content
        $('#loading').fadeIn(); // Show loading GIF
        $('.contact-form-container').fadeOut(); // Fade out the contact form container

        // Use AJAX to submit the form
        $.ajax({
            url: $(this).attr('action'), // Use form action
            type: $(this).attr('method'), // Use form method
            data: new FormData(this), // Send form data
            contentType: false,
            processData: false,
            success: function(response) {
                // Optionally handle the response here (e.g., show a success message)
                // After processing, you can redirect or show a success message
               window.location.href = 'thank_you.php';
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // Handle errors here (e.g., show an error message)
                alert('There was an error processing your request. Please try again.');
                $('#loading').fadeOut(); // Hide loading GIF if there is an error
                $('.contact-form-container').fadeIn(); // Fade the form back in
            }
        });
    });
});
</script>
</body>
</html>
