{% extends "base.html" %}
{% block title %}{{ client.name }}{% endblock %}
{% block content %}
<div class="text-center">
  <h1 class="display-4">{{ client.name }}</h1>
</div>

<!-- Section 1: Details -->
<div class="mt-4">
  <div id="detailsDisplay" class="text-center">
    {% if client.phone or client.address %}
      <h2>Phone: {{ client.phone or "N/A" }} | Address: {{ client.address or "N/A" }}</h2>
    {% else %}
      <p>No details available.</p>
    {% endif %}
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#detailsForm" aria-expanded="false" aria-controls="detailsForm">
      Add/Update Details
    </button>
  </div>
  <div class="collapse mt-3" id="detailsForm">
    <div class="card card-body">
      <form action="{{ url_for('clients.update_client_details', client_id=client.id) }}" method="post">
        <div class="form-group">
          <label for="phone">Phone Number:</label>
          <input type="text" class="form-control" name="phone" value="{{ client.phone or '' }}">
        </div>
        <div class="form-group">
          <label for="address">Address:</label>
          <input type="text" class="form-control" name="address" value="{{ client.address or '' }}">
        </div>
        <button type="submit" class="btn btn-success">Update Details</button>
      </form>
    </div>
  </div>
</div>

<hr>

<!-- Section: Remote -->
<div class="mt-4">
  <h2 class="section-title">Remote</h2>
  {% for category, remotes in remotes_by_category.items() %}
    {% if remotes|length > 0 %}
      <h3 class="mt-3">{{ category }}</h3>
      <table class="table table-bordered table-hover">
        <thead class="thead-light">
          {% if category == 'RDP' %}
            <tr>
              <th>Name</th>
              <th>IP Address</th>
              <th>Port</th>
              <th>Action</th>
            </tr>
          {% elif category == 'SSL-VPN' %}
            <tr>
              <th>IP Address</th>
              <th>Port</th>
              <th>Action</th>
            </tr>
          {% elif category == 'VPN' %}
            <tr>
              <th>IP Address</th>
              <th>PSK</th>
              <th>Action</th>
            </tr>
          {% elif category == 'MGMT' %}
            <tr>
              <th>Name</th>
              <th>Address</th>
              <th>Action</th>
            </tr>
          {% else %}
            <tr>
              <th>Details</th>
              <th>Action</th>
            </tr>
          {% endif %}
        </thead>
        <tbody>
          {% for remote in remotes %}
          <tr>
            {% if category == 'RDP' %}
              <td>{{ remote.name }}</td>
              <td>{{ remote.ip_address }}</td>
              <td>{{ remote.port }}</td>
            {% elif category == 'SSL-VPN' %}
              <td>{{ remote.ip_address }}</td>
              <td>{{ remote.port }}</td>
            {% elif category == 'VPN' %}
              <td>{{ remote.ip_address }}</td>
              <td>{{ remote.psk }}</td>
            {% elif category == 'MGMT' %}
              <td>{{ remote.name }}</td>
              <td><a href="{{ remote.address }}" target="_blank">{{ remote.address }}</a></td>
            {% else %}
              <td>{{ remote.details }}</td>
            {% endif %}
            <td>
              <form action="{{ url_for('clients.remove_remote', client_id=client.id, remote_id=remote.id) }}" method="post" class="d-inline">
                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this remote?');">Delete</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  {% endfor %}

  <!-- Button to toggle remote form -->
  <button id="toggleRemoteFormBtn" class="btn btn-primary">Add Remote</button>

  <!-- Remote Form: hidden by default -->
  <div id="remoteForm" style="display: none;" class="mt-4">
    <h3>Add Remote</h3>
    <form action="{{ url_for('clients.add_remote', client_id=client.id) }}" method="post" id="remoteFormFields">
      <div class="form-group">
        <label for="remote_category">Remote Category</label>
        <select class="form-control" id="remote_category" name="remote_category_id" onchange="changeRemoteFormFields()">
          {% for rc in available_remote_categories %}
            <option value="{{ rc.id }}">{{ rc.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div id="remoteFields">
        <!-- Fields will be dynamically inserted by JavaScript -->
      </div>
      <button type="submit" class="btn btn-success">Add Remote</button>
    </form>
  </div>
</div>

<script>
  // Toggle the remote form display when the button is clicked
  document.getElementById("toggleRemoteFormBtn").addEventListener("click", function(){
    var formDiv = document.getElementById("remoteForm");
    if(formDiv.style.display === "none"){
      formDiv.style.display = "block";
    } else {
      formDiv.style.display = "none";
    }
  });

  function changeRemoteFormFields() {
    var select = document.getElementById("remote_category");
    var categoryName = select.options[select.selectedIndex].text;
    var container = document.getElementById("remoteFields");
    container.innerHTML = "";
    if (categoryName === "RDP") {
      container.innerHTML += '<div class="form-group"><label for="remote_name">Name</label><input type="text" class="form-control" name="remote_name" placeholder="Name"></div>';
      container.innerHTML += '<div class="form-group"><label for="ip_address">IP Address</label><input type="text" class="form-control" name="ip_address" placeholder="IP Address"></div>';
      container.innerHTML += '<div class="form-group"><label for="port">Port</label><input type="text" class="form-control" name="port" placeholder="Port"></div>';
    } else if (categoryName === "SSL-VPN") {
      container.innerHTML += '<div class="form-group"><label for="ip_address">IP Address</label><input type="text" class="form-control" name="ip_address" placeholder="IP Address"></div>';
      container.innerHTML += '<div class="form-group"><label for="port">Port</label><input type="text" class="form-control" name="port" placeholder="Port"></div>';
    } else if (categoryName === "VPN") {
      container.innerHTML += '<div class="form-group"><label for="ip_address">IP Address</label><input type="text" class="form-control" name="ip_address" placeholder="IP Address"></div>';
      container.innerHTML += '<div class="form-group"><label for="psk">PSK</label><input type="text" class="form-control" name="psk" placeholder="Pre-Shared Key"></div>';
    } else if (categoryName === "MGMT") {
      container.innerHTML += '<div class="form-group"><label for="remote_name">Name</label><input type="text" class="form-control" name="remote_name" placeholder="Name"></div>';
      container.innerHTML += '<div class="form-group"><label for="address">Address (URL)</label><input type="text" class="form-control" name="address" placeholder="http://example.com"></div>';
    } else {
      container.innerHTML += '<div class="form-group"><label for="details">Details</label><input type="text" class="form-control" name="details" placeholder="Details"></div>';
    }
  }

  document.addEventListener("DOMContentLoaded", function(){
    changeRemoteFormFields();
  });
</script>


<hr>

<!-- Section 2: Passwords -->
<div class="mt-4">
  <h2 class="section-title">Passwords</h2>
  {% for category, passwords in passwords_by_category.items() %}
    {% if passwords|length > 0 %}
      <h3 class="mt-3">{{ category }}</h3>
      <table class="table table-bordered table-hover">
        <thead class="thead-light">
          <tr>
            <th>Item</th>
            <th>Username</th>
            <th>Password</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {% for p in passwords %}
          <tr>
            <td>{{ p.item }}</td>
            <td>{{ p.username }}</td>
            <td>{{ p.password }}</td>
            <td>
              <form action="{{ url_for('clients.remove_password', client_id=client.id, password_id=p.id) }}" method="post" class="d-inline">
                <button type="submit" class="btn btn-danger btn-sm"
                        onclick="return confirm('WARNING: Deleting this password is irreversible. Are you sure you want to delete this password?');">
                  Delete
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  {% endfor %}
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#passwordForm" aria-expanded="false" aria-controls="passwordForm">
    Add Password
  </button>
  <div class="collapse mt-3" id="passwordForm">
    <div class="card card-body">
      <form action="{{ url_for('clients.add_client_password', client_id=client.id) }}" method="post">
        <div class="form-group">
          <label for="item">Item:</label>
          <input type="text" class="form-control" name="item" placeholder="Item">
        </div>
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" class="form-control" name="username" placeholder="Username">
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="text" class="form-control" name="password" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="category">Category:</label>
            <select name="category_id" class="form-control">
              {% for cat in available_categories %}
                {% if cat.name == "General" %}
                  <option value="{{ cat.id }}" selected>{{ cat.name }}</option>
                {% else %}
                  <option value="{{ cat.id }}">{{ cat.name }}</option>
                {% endif %}
              {% endfor %}
            </select>
          </div>
          
        <button type="submit" class="btn btn-success">Add Password</button>
      </form>
    </div>
  </div>
</div>

<hr>

<!-- Section 3: Domains -->
<div class="mt-4">
    <h2 class="section-title">Domains</h2>
    {% if client.domains|length > 0 %}
      <table class="table table-bordered table-hover">
        <thead class="thead-light">
          <tr>
            <th>Domain</th>
            <th>WHOIS Expiration</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {% for d in client.domains %}
          <tr>
            <td>{{ d.domain }}</td>
            <td>{{ d.expiration_date }}</td>
            <td>
              <form action="{{ url_for('clients.remove_domain', client_id=client.id, domain_id=d.id) }}" method="post" class="d-inline">
                <button type="submit" class="btn btn-danger btn-sm"
                        onclick="return confirm('Are you sure you want to delete this domain association?');">
                  Delete
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p>No domain associations.</p>
    {% endif %}
    <form action="{{ url_for('clients.attach_domain', client_id=client.id) }}" method="post" class="form-inline">
      <div class="form-group mb-2">
        <label for="domain_id" class="sr-only">Select Domain</label>
        <select name="domain_id" class="form-control">
          <option value="">General</option>
          {% for d in available_domains %}
          <option value="{{ d.id }}">{{ d.domain }}</option>
          {% endfor %}
        </select>
      </div>
      <button type="submit" class="btn btn-primary mb-2 ml-2">Attach Domain</button>
    </form>
  </div>
  

<hr>

<!-- Section 4: SSL -->
<div class="mt-4">
    <h2 class="section-title">SSL</h2>
    {% if client.ssl_domains|length > 0 %}
      <table class="table table-bordered table-hover">
        <thead class="thead-light">
          <tr>
            <th>Domain</th>
            <th>SSL Expiration</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {% for d in client.ssl_domains %}
          <tr>
            <td>{{ d.domain }}</td>
            <td>{{ d.ssl_expiration_date }}</td>
            <td>
              <form action="{{ url_for('clients.remove_ssl', client_id=client.id, domain_id=d.id) }}" method="post" class="d-inline">
                <button type="submit" class="btn btn-danger btn-sm"
                        onclick="return confirm('Are you sure you want to delete this SSL domain association?');">
                  Delete
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p>No SSL associations.</p>
    {% endif %}
    <form action="{{ url_for('clients.attach_ssl', client_id=client.id) }}" method="post" class="form-inline">
      <div class="form-group mb-2">
        <label for="ssl_domain_id" class="sr-only">Select SSL Domain</label>
        <select name="ssl_domain_id" class="form-control">
          <option value="">General</option>
          {% for d in available_ssl %}
          <option value="{{ d.id }}">{{ d.domain }}</option>
          {% endfor %}
        </select>
      </div>
      <button type="submit" class="btn btn-primary mb-2 ml-2">Attach SSL Domain</button>
    </form>
  </div>
  

<hr>

<!-- Delete Client Section -->
<div class="mt-4">
  <form action="{{ url_for('clients.delete_client', client_id=client.id) }}" method="post" onsubmit="return confirm('WARNING: Deleting this client will remove all associated data. Are you sure you want to proceed?');">
    <button type="submit" class="btn btn-danger btn-block">Delete Client</button>
  </form>
</div>
{% endblock %}