<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %> - IPTV Panel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>

<%- include('../partials/header') %>

<div class="app-shell">
  <%- include('../partials/sidebar') %>

  <main class="main-content">
    <div class="page-header">
      <h1>Client Details</h1>
      <p><strong><%= client.email %></strong></p>
    </div>

    <div class="panel-card">
      <h2>Client Information</h2>

      <table class="data-table">
        <tr><th>ID</th><td><%= client.id %></td></tr>
        <tr><th>Email</th><td><%= client.email %></td></tr>
        <tr><th>Phone</th><td><%= client.phone || '-' %></td></tr>
        <tr><th>Country</th><td><%= client.country || '-' %></td></tr>
        <tr><th>Website</th><td><%= client.website || '-' %></td></tr>
        <tr><th>Support</th><td><%= client.support_name || '-' %></td></tr>
        <tr><th>Mailer</th><td><%= client.mailer_name || '-' %></td></tr>
        <tr><th>Tracking Token</th><td><%= client.tracking_token || '-' %></td></tr>
        <tr><th>Visitor ID</th><td><%= client.visitor_id || '-' %></td></tr>
        <tr><th>Status</th><td><%= client.is_active ? 'Active' : 'Inactive' %></td></tr>
      </table>

      <br>
      <a href="/admin/clients/<%= client.id %>/edit" class="btn-primary">Edit Client</a>
      <a href="/admin/clients" class="btn-secondary">Back</a>
    </div>

    <div class="panel-card">
      <h2>Services History</h2>

      <table class="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Type</th>
            <th>Source</th>
            <th>Panel</th>
            <th>Period</th>
            <th>Devices</th>
            <th>Status</th>
            <th>Start</th>
            <th>Expiration</th>
          </tr>
        </thead>
        <tbody>
          <% services.forEach(function(service) { %>
            <tr>
              <td><%= service.id %></td>
              <td><%= service.service_type %></td>
              <td><%= service.subscription_source || '-' %></td>
              <td><%= service.panel_name %></td>
              <td><%= service.subscription_period || '-' %></td>
              <td><%= service.device_count %></td>
              <td><%= service.status %></td>
              <td><%= service.start_date %></td>
              <td><%= service.expiration_date %></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>

    <div class="panel-card">
      <h2>Payments</h2>

      <table class="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Service ID</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Payment Date</th>
          </tr>
        </thead>
        <tbody>
          <% payments.forEach(function(payment) { %>
            <tr>
              <td><%= payment.id %></td>
              <td><%= payment.service_id || '-' %></td>
              <td><%= payment.currency %> <%= Number(payment.amount).toFixed(2) %></td>
              <td><%= payment.payment_status %></td>
              <td><%= payment.payment_date || '-' %></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>

    <div class="panel-card">
      <h2>Client Notes</h2>

      <form method="POST" action="/admin/clients/<%= client.id %>/notes">
        <div class="form-group">
          <textarea name="note" rows="3" placeholder="Add note..." required></textarea>
        </div>
        <button type="submit" class="btn-primary">Add Note</button>
      </form>

      <br>

      <% notes.forEach(function(note) { %>
        <div class="note-box">
          <strong><%= note.username || 'User' %></strong>
          <small><%= note.created_at %></small>
          <p><%= note.note %></p>
        </div>
      <% }) %>
    </div>
  </main>
</div>

</body>
</html>
