{% extends "base.html" %}
{% block title %}{{ client.name }}{% endblock %}
{% block content %}
<div class="container">
  <!-- Client Header -->
  <div class="text-center my-4">
    <h1 class="display-4">{{ client.name }}</h1>
  </div>
  
  <!-- Details Section -->
  <div class="mt-4">
    <h2 class="text-center">Details</h2>
    <div id="detailsDisplay" class="text-center">
      <ul class="list-unstyled">
        {% if client.phone %}<li><strong>Phone:</strong> {{ client.phone }}</li>{% endif %}
        {% if client.address %}<li><strong>Address:</strong> {{ client.address }}</li>{% endif %}
        {% if client.ip_address %}<li><strong>IP Address:</strong> {{ client.ip_address }}</li>{% endif %}
        {% if client.subnet_mask %}<li><strong>Subnet Mask:</strong> {{ client.subnet_mask }}</li>{% endif %}
        {% if client.gateway %}<li><strong>Gateway:</strong> {{ client.gateway }}</li>{% endif %}
      </ul>
      {% if not (client.phone or client.address or client.ip_address or client.subnet_mask or client.gateway) %}
        <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>
          <div class="form-group">
            <label for="ip_address">IP Address:</label>
            <input type="text" class="form-control" name="ip_address" value="{{ client.ip_address or '' }}">
          </div>
          <div class="form-group">
            <label for="subnet_mask">Subnet Mask:</label>
            <input type="text" class="form-control" name="subnet_mask" value="{{ client.subnet_mask or '' }}">
          </div>
          <div class="form-group">
            <label for="gateway">Gateway:</label>
            <input type="text" class="form-control" name="gateway" value="{{ client.gateway or '' }}">
          </div>
          <button type="submit" class="btn btn-success">Update Details</button>
          <button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#detailsForm">Cancel</button>
        </form>
      </div>
    </div>
  </div>
  
  <hr>
  
  <!-- Remote Section -->
  <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>
                    {% if remote.name %}
                      <a href="{{ url_for('clients.edit_remote', client_id=client.id, remote_id=remote.id) }}">{{ remote.name }}</a>
                    {% else %}
                      <a href="{{ url_for('clients.edit_remote', client_id=client.id, remote_id=remote.id) }}">Edit</a>
                    {% endif %}
                  </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>
                    {% if remote.name %}
                      <a href="{{ url_for('clients.edit_remote', client_id=client.id, remote_id=remote.id) }}">{{ remote.name }}</a>
                    {% else %}
                      <a href="{{ url_for('clients.edit_remote', client_id=client.id, remote_id=remote.id) }}">Edit</a>
                    {% endif %}
                  </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>
        <button type="button" class="btn btn-secondary" onclick="document.getElementById('remoteForm').style.display='none';">Cancel</button>
      </form>
    </div>
  </div>
  
  <hr>
  
  <!-- Passwords Section -->
  <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>IP Address</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {% for p in passwords %}
              <tr>
                <td>
                  <a href="{{ url_for('clients.edit_password', client_id=client.id, password_id=p.id) }}">{{ p.item }}</a>
                </td>
                <td>{{ p.username }}</td>
                <td>{{ p.password }}</td>
                <td>{{ p.ip_address }}</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="ip_address">IP Address:</label>
            <input type="text" class="form-control" name="ip_address" placeholder="IP Address">
          </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>
          <button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#passwordForm">Cancel</button>
        </form>
      </div>
    </div>
  </div>
  
  <hr>
  
  <!-- Domains Section -->
  <div class="mt-4">
    <h2>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>
  
  <!-- SSL Section -->
  <div class="mt-4">
    <h2>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 and Print Buttons -->
  <div class="mt-4 d-flex justify-content-between">
    <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>
    <a href="{{ url_for('clients.print_client', client_id=client.id) }}" class="btn btn-secondary btn-block ml-2" target="_blank">Print</a>
  </div>
</div>

<script>
  // Toggle the remote form display when the "Add Remote" 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>
{% endblock %}