{% extends "base.html" %}
{% block title %}Admin Page{% endblock %}
{% block content %}

<div class="container content-section" style="background-color: #f8f9fa;">
  <div class="row">
    <div class="col-md-10">
      <h4 style="color: #343a40;">Admin Page</h4>
    </div>
  </div>

  <div class="col-md-8">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title bg-light p-2">Database Actions</h5>
        <div class="row">

          <div class="col-md-4" role="group">
            <button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#PopCallModal">
              Load Calls
            </button>
            <form action="{{ url_for('load_users') }}" method="post" class="mb-2">
              <button type="submit" class="btn btn-primary">Load Users</button>
            </form>
            <form action="{{ url_for('save_users') }}" method="post" class="mb-2">
              <button type="submit" class="btn btn-primary">Save Users</button>
            </form>
          </div>

          <div class="col-md-4" role="group">
            <button type="button" class="btn btn-danger mb-2" data-bs-toggle="modal" data-bs-target="#AllModal">
              Delete All Tables
            </button>
            <button type="button" class="btn btn-danger mb-2" data-bs-toggle="modal" data-bs-target="#CallModal">
              Delete Call Table
            </button>
            <button type="button" class="btn btn-danger mb-2" data-bs-toggle="modal" data-bs-target="#UserModal">
              Delete User Table
            </button>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title bg-light p-2">Database Stats</h5>
        <ul class="list-group list-group-flush">

          <li class="list-group-item">
            <div class="row">
              <div class="col-auto">Number of Calls: {{ num_calls }}</div>
              <div class="col-auto">
                <form action="{{ url_for('create_call') }}" method="post">
                  <button type="submit" class="btn btn-outline-primary btn-sm">Create Call</button>
                </form>
              </div>

              <div class="col-auto">
                <form action="{{ url_for('show_calls') }}" method="post">
                  <button type="submit" class="btn btn-outline-primary btn-sm">Edit Call</button>
                </form>
              </div>
            </div>
          </li>


          <li class="list-group-item">
            <div class="row">
              <div class="col-auto">Number of Users: {{ num_users }}</div>
              <div class="col-auto">
                <form action="{{ url_for('create_user') }}" method="post">
                  <button type="submit" class="btn btn-outline-primary btn-sm">Create User</button>
                </form>
              </div>

              <div class="col-auto">
                <form action="{{ url_for('show_users') }}" method="post">
                  <button type="submit" class="btn btn-outline-primary btn-sm">Edit User</button>
                </form>
              </div>
          </li>


        </ul>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="PopCallModal" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="statusModalLabel">Process Transcripts</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3 row">
          <label for="transcriptsInput" class="col-sm-5 col-form-label">Enter Number to process:</label>
          <div class="col-sm-5">
            <input type="number" class="form-control" id="transcriptsInput" name="num_transcripts" min="1" required>
          </div>
        </div>

        <div class="mb-3 row">
          <label for="transcriptsInput" class="col-sm-5 col-form-label">Enter Offset:</label>
          <div class="col-sm-5">
            <input type="number" class="form-control" id="offsetInput" name="offset" min="1" required>
          </div>
        </div>


      </div>
      <div class="modal-footer d-flex justify-content-start">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form id="transcriptsForm" action="" method="post" class="mb-2">
          <button type="submit" class="btn btn-primary">Load Transcripts</button>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal" tabindex="-1" id="CallModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete All Calls</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Attention: {{num_calls}} Calls will be deleted</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form action="{{ url_for('recreate_call') }}" method="post">
          <button type="submit" class="btn btn-primary">Proceed</button>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal" tabindex="-1" id="UserModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete User Table</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Attention: {{num_users}} Users will be deleted</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form action="{{ url_for('recreate_user') }}" method="post">
          <button type="submit" class="btn btn-primary">Proceed</button>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal" tabindex="-1" id="AllModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete All Tables</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Attention: {{num_users}} Users will be deleted</p>
        <p>Attention: {{num_calls}} Calls will be deleted</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form action="{{ url_for('recreate_tables') }}" method="post">
          <button type="submit" class="btn btn-primary">Proceed</button>
        </form>
      </div>
    </div>
  </div>
</div>


<!-- Include Bootstrap 5.3.0 JS for modal functionality -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<!-- Include jQuery (if needed) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<!-- Custom JavaScript -->
<script>
  document.getElementById('transcriptsForm').addEventListener('submit', function (event) {
    event.preventDefault();

    // Get the number of transcripts from the input field
    const numTranscripts = document.getElementById('transcriptsInput').value;
    const offset = document.getElementById('offsetInput').value;

    // Check if numTranscripts is not empty
    if (numTranscripts && offset) {
      // Build the URL directly using template literals
      this.action = `/process_transcripts/${numTranscripts}/${offset}`;

      // Submit the form
      this.submit();
    } else {
      alert('Please enter a valid number to process.');
    }
  });

</script>
{% endblock %}