{% 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">
  <h2 class="section-title text-center">Details</h2>
  <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 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>
  <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>
  <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=""> ---- </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>
  <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>
  <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=""> ---- </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 %}