<!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>Services</h1>
      <p>Create free tests, subscriptions, and renewals.</p>
    </div>

    <% if (error) { %>
      <div class="alert alert-error"><%= error %></div>
    <% } %>

    <div class="panel-card">
      <h2>Add Service</h2>

      <form method="POST" action="/admin/services" class="inline-form services-form">
        <select name="client_id" required>
          <option value="">Client</option>
          <% clients.forEach(function(client) { %>
            <option value="<%= client.id %>"><%= client.email %></option>
          <% }) %>
        </select>

        <select name="service_type" required>
          <option value="test">Free Test</option>
          <option value="subscription">Subscription</option>
        </select>

        <select name="subscription_source">
          <option value="direct">Direct</option>
          <option value="from_test">From Test</option>
          <option value="renewal">Renewal</option>
        </select>

        <input type="number" name="previous_service_id" placeholder="Previous service ID optional">
        <input type="number" name="converted_from_service_id" placeholder="Converted from service ID optional">

        <select name="panel_name" required>
          <option value="">Panel</option>
          
          <option value="medamirpro">medamirpro</option>
          <option value="strongpro">strongpro</option>
          <option value="strongpro2">strongpro2</option>
          <option value="strongpro3">strongpro3</option>
          <option value="mascoder">mascoder</option>
          <option value="mourabit">mourabit</option>
          <option value="mourabit2">mourabit2</option>
          <option value="tivione">tivione</option>
          <option value="eagle4k">eagle4k</option>
</select>

        <select name="website" required>
          <option value="">Website</option>
          <option value="king">King</option>
          <option value="trex">Trex</option>
          <option value="xtream">Xtream</option>
        </select>

        <select name="subscription_period">
          <option value="1_month">1 Month</option>
          <option value="3_months">3 Months</option>
          <option value="6_months">6 Months</option>
          <option value="1_year">1 Year</option>
          <option value="2_years">2 Years</option>
          <option value="3_years">3 Years</option>
          <option value="5_years">5 Years</option>
        </select>

        <select name="device_count">
          <option value="1">1 Device</option>
          <option value="2">2 Devices</option>
          <option value="3">3 Devices</option>
        </select>

        <input type="datetime-local" name="start_date">

        <button type="submit" class="btn-primary small-btn">Add</button>
      </form>

      <p class="hint">
        For Free Test, expiration is automatically 24 hours after start date.
        For Subscription, expiration is calculated from selected plan.
      </p>
    </div>

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

      <table class="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Client</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>
            <th class="actions-col">Actions</th>
          </tr>
        </thead>

        <tbody>
          <% services.forEach(function(service) { %>
            <tr>
              <td><%= service.id %></td>
              <td><%= service.client_email %></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>
              <td>
                <a class="btn-link" href="/admin/services/<%= service.id %>/edit">Edit</a>

                <% if (service.status === 'active') { %>
                  <form method="POST" action="/admin/services/<%= service.id %>/cancel" class="inline-action">
                    <button type="submit" class="btn-danger">Cancel</button>
                  </form>
                <% } else { %>
                  <form method="POST" action="/admin/services/<%= service.id %>/activate" class="inline-action">
                    <button type="submit" class="btn-success">Activate</button>
                  </form>
                <% } %>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
  </main>
</div>

</body>
</html>
