<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meeting Page</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
  </head>

<body>

  <div class="header">
    <button class="header-button" id="notificationButton">
      <i class="bi bi-bell"></i>&nbsp;&nbsp;Notifications
    </button>
    <button class="header-button" id="viewRecordingsButton" onclick="window.location.href='recordings.html'">
        <i class="bi bi-journal-text"></i>&nbsp;&nbsp;History
    </button>
  </div>

  <div class="container">
    <div class="main-content">
        <img src="{{ url_for('static', filename='images/app/mom.png') }}" alt="Meeting" class="background-image">
    </div>
    <div class="footer">
        <button class="meeting-button" id="meetingButton"><i class="bi bi-pen"></i>&nbsp;&nbsp;New Minutes of Meeting</button>
    </div>
  </div>

  <div id="notificationModel" class="notification-modal">
      <div class="notification-modal-content">
        <span class="notification-close-button" id="notificationCloseButton">&times;</span>
          <div class="notification-modal-body" id="notification">
            <!-- <span id="notif-text">No new notifications</span> -->
            <ul id="notif-list"></ul>
          </div>
      </div>
  </div>

  <div id="meetingModal" class="modal">
      <div class="modal-content">
        <form action="/upload" method="post" enctype="multipart/form-data">
          <span class="close-button" id="meetingCloseButton">&times;</span>
          <div class="modal-body">
              <div class="upload-container">
                  <label for="fileUpload" class="upload-label">Upload File (MP4, MP3, WAV)</label>
                  <input type="file" id="fileUpload" name="file" class="upload-input" accept=".mp4,.mp3,.wav">
              </div>
              <button class="save-button-upload" id="start-process" type="submit"><i class="bi bi-stopwatch-fill"></i>&nbsp;&nbsp;Generate</button>
          </div>
        </form>
      </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script>
    $(document).ready(function() {
        $('#meetingButton').click(function() {
            $('#meetingModal').show();
        });
    
        $('#meetingCloseButton').click(function() {
            $('#meetingModal').hide();
        });
    
        $('form').submit(function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(data) {
                    $('#meetingModal').hide();
                    $('#notificationModel').show();
                    $('<li id="task-' + data.task_id + '">Upload successful. Processing...</li>').appendTo('#notif-list');
                    checkTaskStatus(data.task_id);
                },
                error: function() {
                    $('<li>Failed to upload. Try again.</li>').appendTo('#notif-list');
                }
            });
        });
    
        function checkTaskStatus(taskId) {
            var intervalId = setInterval(function() {
                $.getJSON('/check_task/' + taskId, function(data) {
                    if (data.status === 'COMPLETED' || data.status === 'SUCCESS') {
                        $('#task-' + taskId).html(data.filename +': <a href="/results/' + taskId + '" target="_blank">Click to view results.</a>');
                        clearInterval(intervalId);
                    } else {
                        $('#task-' + taskId).text(data.filename + ': ' + data.info);
                    }
                });
            }, 5000);
        }
    
        $('#notificationCloseButton').click(function() {
            $('#notificationModel').hide();
        });
    
        $(window).click(function(event) {
            if (event.target == document.getElementById('meetingModal')) {
                $('#meetingModal').hide();
            }
            if (event.target == document.getElementById('notificationModel')) {
                $('#notificationModel').hide();
            }
        });
    });
    </script>
</body>
</html>
