<?php include('header.php'); ?>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header" >
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="card-title">Compose</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Compose</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
          <a href="mailbox.php" class="btn btn-dark btn-block mb-3" style="background-color: black;">Back to Inbox</a>

          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Folders</h3>

              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                  <i class="fas fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="card-body p-0">
              <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                  <a href="mailbox.php" class="nav-link">
                    <i class="fas fa-inbox"></i> Draft Inbox
                    <span class="badge bg-dark float-right">1</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    <i class="fas fa-inbox"></i> Compose
                  </a>
                </li>
                <li class="nav-item">
                  <a href="sent.php" class="nav-link">
                    <i class="far fa-envelope"></i> Sent
                    <span class="badge bg-warning float-right">2</span>

                  </a>
                </li>
                <li class="nav-item">
                  <a href="draft.php" class="nav-link">
                    <i class="far fa-file-alt"></i> Drafts
                    <span class="badge bg-danger float-right">0 </span>

                  </a>
                </li>

              </ul>
            </div>
            <!-- /.card-body -->
          </div>

        </div>
        <!-- /.col -->
        <div class="col-md-9">
          <div class="card card-dark card-outline">
            <div class="card-header">
              <h3 class="card-title">Compose New Message</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <form id="compose-form" action="compose_code.php" method="post" enctype="multipart/form-data">
                <div class="form-group">
                  <input class="form-control" type="text" name="subject" placeholder="Subject">
                </div>
                <div class="form-group">
                  <textarea id="compose-textarea" class="form-control" name="message"></textarea>
                </div>
                <div class="form-group">
                  <div class="btn btn-default btn-file">
                    <i class="fas fa-paperclip"></i> Attachment
                    <input type="file" name="attachment" id="attachment-input">
                  </div>
                  <span id="selected-file-name"></span>
                </div>
                <input type="hidden" id="status" name="status" value="">
                <div class="card-footer">
                  <div class="float-right">
                    <button type="button" id="draft-button" class="btn btn-default"><i class="fas fa-pencil-alt"></i> Draft</button>
                    <button type="button" id="send-button" class="btn btn-primary"><i class="far fa-envelope"></i> Send</button>
                  </div>
                  <button type="reset" class="btn btn-default"><i class="fas fa-times"></i> Discard</button>
                </div>
              </form>


            </div>
            <!-- /.card-body -->

            <!-- /.card-footer -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div><!-- /.container-fluid -->
  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Summernote -->

<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- Summernote -->
<script src="plugins/summernote/summernote-bs4.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- Page specific script -->

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script>
  $(document).ready(function() {
    // Add an event listener to the file input
    $('#attachment-input').change(function() {
      // Get the selected file's name
      var fileName = $(this).val().split('\\').pop();

      // Update the selected file name display element
      $('#selected-file-name').text(fileName);
    });

    // Add text editor
    $('#compose-textarea').summernote({
      height: 150, // set editable area's height
    });

    // Handle form submission for Draft
    $('#draft-button').click(function() {
      $('#status').val('Draft'); // Set the status to Draft
      submitForm();
    });

    // Handle form submission for Send
    $('#send-button').click(function() {
      $('#status').val('Sent'); // Set the status to Sent
      submitForm();
    });

    // Function to submit the form via AJAX
    function submitForm() {
      var formData = new FormData($('#compose-form')[0]);
      var messageContent = $('#compose-textarea').summernote('code');
      formData.append('message', messageContent);
      formData.append('status', $('#status').val()); // Include the status in the form data

      $.ajax({
        url: 'compose_code.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          if (response.status === 'success') {
            if (response.action === 'Sent') {
              Swal.fire({
                icon: 'success',
                title: 'Message sent successfully!',
                showConfirmButton: true,
                confirmButtonText: 'Close',
              }).then(function(result) {
                if (result.isConfirmed) {
                  // Redirect to compose.php if the user clicks "Close"
                  window.location.href = 'compose.php';
                }
              });
            } else if (response.action === 'Draft') {
              Swal.fire({
                icon: 'success',
                title: 'Message saved as Draft!',
                showConfirmButton: true,
                confirmButtonText: 'Close',
              });
            }
          } else if (response.status === 'error') {
            Swal.fire({
              icon: 'error',
              title: 'Error inserting data into the database.',
              showConfirmButton: true,
              confirmButtonText: 'Close',
            });
          } else if (response.status === 'error_upload') {
            Swal.fire({
              icon: 'error',
              title: 'Error uploading file.',
              showConfirmButton: true,
              confirmButtonText: 'Close',
            });
          }
        },
        error: function() {
          alert('Error sending message.');
        }
      });
    }
  });
</script>
<!-- Include SweetAlert library -->


<?php include('footer.php'); ?>