<!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>Edit Service</h1>
      <p>Service ID: <strong><%= service.id %></strong></p>
    </div>

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

    <div class="panel-card form-card">
      <form method="POST" action="/admin/services/<%= service.id %>/edit">
        <div class="form-group">
          <label>Client</label>
          <select name="client_id" required>
            <% clients.forEach(function(client) { %>
              <option value="<%= client.id %>" <%= Number(service.client_id) === Number(client.id) ? 'selected' : '' %>>
                <%= client.email %>
              </option>
            <% }) %>
          </select>
        </div>

        <div class="form-group">
          <label>Service Type</label>
          <select name="service_type" required>
            <option value="test" <%= service.service_type === 'test' ? 'selected' : '' %>>Free Test</option>
            <option value="subscription" <%= service.service_type === 'subscription' ? 'selected' : '' %>>Subscription</option>
          </select>
        </div>

        <div class="form-group">
          <label>Subscription Source</label>
          <select name="subscription_source">
            <option value="direct" <%= service.subscription_source === 'direct' ? 'selected' : '' %>>Direct</option>
            <option value="from_test" <%= service.subscription_source === 'from_test' ? 'selected' : '' %>>From Test</option>
            <option value="renewal" <%= service.subscription_source === 'renewal' ? 'selected' : '' %>>Renewal</option>
          </select>
        </div>

        <div class="form-group">
          <label>Previous Service ID</label>
          <input type="number" name="previous_service_id" value="<%= service.previous_service_id || '' %>">
        </div>

        <div class="form-group">
          <label>Converted From Service ID</label>
          <input type="number" name="converted_from_service_id" value="<%= service.converted_from_service_id || '' %>">
        </div>

        <div class="form-group">
          <label>Panel</label>
          <select name="panel_name" required>
            <% ['medamirpro','strongpro','strongpro2','strongpro3','mascoder','mourabit','mourabit2','tivione','eagle4k'].forEach(function(panel) { %>
              <option value="<%= panel %>" <%= service.panel_name === panel ? 'selected' : '' %>><%= panel %></option>
            <% }) %>
          </select>
        </div>

        <div class="form-group">
          <label>Website</label>
          <select name="website" required>
            <option value="king" <%= service.website === 'king' ? 'selected' : '' %>>King</option>
            <option value="trex" <%= service.website === 'trex' ? 'selected' : '' %>>Trex</option>
            <option value="xtream" <%= service.website === 'xtream' ? 'selected' : '' %>>Xtream</option>
          </select>
        </div>

        <div class="form-group">
          <label>Status</label>
          <select name="status" required>
            <option value="active" <%= service.status === 'active' ? 'selected' : '' %>>Active</option>
            <option value="expired" <%= service.status === 'expired' ? 'selected' : '' %>>Expired</option>
            <option value="cancelled" <%= service.status === 'cancelled' ? 'selected' : '' %>>Cancelled</option>
          </select>
        </div>

        <div class="form-group">
          <label>Subscription Period</label>
          <select name="subscription_period">
            <% ['1_month','3_months','6_months','1_year','2_years','3_years','5_years'].forEach(function(period) { %>
              <option value="<%= period %>" <%= service.subscription_period === period ? 'selected' : '' %>><%= period %></option>
            <% }) %>
          </select>
        </div>

        <div class="form-group">
          <label>Device Count</label>
          <select name="device_count">
            <option value="1" <%= Number(service.device_count) === 1 ? 'selected' : '' %>>1 Device</option>
            <option value="2" <%= Number(service.device_count) === 2 ? 'selected' : '' %>>2 Devices</option>
            <option value="3" <%= Number(service.device_count) === 3 ? 'selected' : '' %>>3 Devices</option>
          </select>
        </div>

        <div class="form-group">
          <label>Start Date</label>
          <input type="text" name="start_date" value="<%= service.start_date %>" required>
        </div>

        <div class="form-group">
          <label>Expiration Date</label>
          <input type="text" name="expiration_date" value="<%= service.expiration_date %>" required>
        </div>

        <div class="form-group">
          <label>
            <input type="checkbox" name="followup_enabled" value="1" <%= service.followup_enabled ? 'checked' : '' %>>
            Follow-up enabled
          </label>
        </div>

        <div class="form-group">
          <label>After 4 Follow-ups</label>
          <select name="post_4_followup_mode">
            <option value="disabled" <%= service.post_4_followup_mode === 'disabled' ? 'selected' : '' %>>Disabled</option>
            <option value="daily" <%= service.post_4_followup_mode === 'daily' ? 'selected' : '' %>>Daily</option>
            <option value="gap" <%= service.post_4_followup_mode === 'gap' ? 'selected' : '' %>>Gap</option>
          </select>
        </div>

        <button type="submit" class="btn-primary">Update Service</button>
        <a href="/admin/services" class="btn-secondary">Cancel</a>
      </form>
    </div>
  </main>
</div>

</body>
</html>
