{% 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>
  <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 client.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">Delete</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <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>
        <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">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">
        {% 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">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">
        {% 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>
{% endblock %}