{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width:1100px;">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-gear-wide-connected me-2"></i>
      Brand / System Configuration
    </h4>
  </div>

  <!-- Email Settings -->
  <div class="card shadow-sm border-0 mb-3">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
      <div>
        <strong>Email Settings</strong>
        <small class="text-muted ms-2">(used for system emails)</small>
      </div>
    </div>
    <div class="card-body">
      <form method="post">
        <input type="hidden" name="form_type" value="email">

        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label">SMTP Server</label>
            <input type="text" name="smtp_server" class="form-control"
                   value="{{ email_settings.smtp_server }}">
          </div>
          <div class="col-md-2">
            <label class="form-label">Port</label>
            <input type="number" name="smtp_port" class="form-control"
                   value="{{ email_settings.smtp_port }}">
          </div>
          <div class="col-md-3">
            <label class="form-label d-block">Security</label>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" name="use_tls" id="use_tls"
                     {% if email_settings.use_tls %}checked{% endif %}>
              <label class="form-check-label" for="use_tls">TLS</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" name="use_ssl" id="use_ssl"
                     {% if email_settings.use_ssl %}checked{% endif %}>
              <label class="form-check-label" for="use_ssl">SSL</label>
            </div>
          </div>
        </div>

        <div class="row g-3 mt-2">
          <div class="col-md-4">
            <label class="form-label">Username</label>
            <input type="text" name="smtp_username" class="form-control"
                   value="{{ email_settings.username }}">
          </div>
          <div class="col-md-4">
            <label class="form-label">Password</label>
            <input type="password" name="smtp_password" class="form-control"
                   value="{{ email_settings.password }}">
          </div>
        </div>

        <div class="row g-3 mt-2">
          <div class="col-md-4">
            <label class="form-label">From Name</label>
            <input type="text" name="from_name" class="form-control"
                   value="{{ email_settings.from_name }}">
          </div>
          <div class="col-md-4">
            <label class="form-label">From Email</label>
            <input type="email" name="from_email" class="form-control"
                   value="{{ email_settings.from_email }}">
          </div>
        </div>

        <div class="mt-3 text-end">
          <button class="btn btn-primary">
            <i class="bi bi-save me-1"></i> Save Email Settings
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- DeskTime Settings -->
  <div class="card shadow-sm border-0 mb-3">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
      <div>
        <strong>DeskTime Settings</strong>
        <small class="text-muted ms-2">(integration &amp; API key)</small>
      </div>
    </div>
    <div class="card-body">
      <form method="post">
        <input type="hidden" name="form_type" value="desktime">

        <div class="row g-3">
          <div class="col-md-4 d-flex align-items-center">
            <div class="form-check">
              <input class="form-check-input" type="checkbox"
                     id="desktime_enabled" name="desktime_enabled"
                     {% if desktime_settings.enabled %}checked{% endif %}>
              <label class="form-check-label fw-semibold" for="desktime_enabled">
                Enable DeskTime Integration
              </label>
            </div>
          </div>
          <div class="col-md-6">
            <label class="form-label">DeskTime API Key</label>
            <input type="text" name="desktime_api_key" class="form-control"
                   value="{{ desktime_settings.api_key }}">
          </div>
        </div>

        <div class="mt-3 text-end">
          <button class="btn btn-primary">
            <i class="bi bi-save me-1"></i> Save DeskTime Settings
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Biometric Integration Settings -->
  <div class="card shadow-sm border-0 mb-3">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
      <div>
        <strong><i class="bi bi-fingerprint me-2"></i>Biometric Integration</strong>
        <small class="text-muted ms-2">(machine punch via API / DB)</small>
      </div>
    </div>
    <div class="card-body">
      <form method="post">
        <input type="hidden" name="form_type" value="biometric">

        <div class="row g-3 mb-3">
          <div class="col-md-3">
            <div class="form-check form-switch">
              <input class="form-check-input"
                     type="checkbox"
                     id="biometric_enabled"
                     name="biometric_enabled"
                     {% if biometric_settings.enabled %}checked{% endif %}>
              <label class="form-check-label" for="biometric_enabled">
                Enable biometric integration
              </label>
            </div>
          </div>

          <div class="col-md-3">
            <label class="form-label">Source Type</label>
            <select class="form-select" name="source_type" id="source_type">
              <option value="api" {% if biometric_settings.source_type == 'api' %}selected{% endif %}>API</option>
              <option value="db"  {% if biometric_settings.source_type == 'db' %}selected{% endif %}>Database</option>
            </select>
          </div>
        </div>

        <!-- API config -->
        <div id="biometric-api-block" class="{% if biometric_settings.source_type != 'api' %}d-none{% endif %}">
          <h6 class="border-bottom pb-1 mb-2">API Configuration</h6>
          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label">Base URL</label>
              <input type="text" name="api_base_url" class="form-control"
                     value="{{ biometric_settings.api.base_url }}">
              <small class="text-muted">Example: https://example.com/api/punches</small>
            </div>
            <div class="col-md-2">
              <label class="form-label">HTTP Method</label>
              <select name="api_http_method" class="form-select">
                <option value="GET"  {% if biometric_settings.api.http_method == 'GET' %}selected{% endif %}>GET</option>
                <option value="POST" {% if biometric_settings.api.http_method == 'POST' %}selected{% endif %}>POST</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Request Template</label>
              <input type="text" name="api_request_template" class="form-control"
                     value="{{ biometric_settings.api.request_template }}">
              <small class="text-muted">
                Example: <code>?date={date}</code> or full query string/body with placeholders.
              </small>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">Headers (JSON)</label>
            <textarea name="api_headers_json" class="form-control" rows="2"
                      placeholder='{"Authorization": "Bearer TOKEN"}'>{{ biometric_settings.api.headers_json }}</textarea>
          </div>

          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">Response list key</label>
              <input type="text" name="api_response_list_key" class="form-control"
                     value="{{ biometric_settings.api.response_list_key }}">
              <small class="text-muted">
                Path to list of punches, e.g. <code>data.records</code> or leave blank if top level is list.
              </small>
            </div>
            <div class="col-md-4">
              <label class="form-label">Employee code field</label>
              <input type="text" name="api_map_employee_code" class="form-control"
                     value="{{ biometric_settings.api.map_employee_code }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Punch time field</label>
              <input type="text" name="api_map_punch_time" class="form-control"
                     value="{{ biometric_settings.api.map_punch_time }}">
            </div>
          </div>

          <div class="row g-3 mt-1">
            <div class="col-md-4">
              <label class="form-label">Direction field (optional)</label>
              <input type="text" name="api_map_direction" class="form-control"
                     value="{{ biometric_settings.api.map_direction }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Time format</label>
              <input type="text" name="api_time_format" class="form-control"
                     value="{{ biometric_settings.api.time_format }}">
              <small class="text-muted"><code>%Y-%m-%d %H:%M:%S</code>, etc.</small>
            </div>
          </div>

          <form method="post" action="{{ url_for('admin.biometric_test_sync') }}" class="mt-3 d-flex gap-2 align-items-center">
            <input type="date" name="sync_date" class="form-control" style="max-width: 180px;"
                  value="{{ (now() | default('', true))[:10] if false else '' }}">
            <button class="btn btn-sm btn-outline-primary">
              <i class="bi bi-arrow-repeat me-1"></i> Test Sync for Date
            </button>
          </form>
        </div>

        <!-- DB config -->
        <div id="biometric-db-block" class="{% if biometric_settings.source_type != 'db' %}d-none{% endif %}">
          <h6 class="border-bottom pb-1 mb-2 mt-3">Database Configuration</h6>
          <div class="row g-3 mb-3">
            <div class="col-md-3">
              <label class="form-label">DB Type</label>
              <select name="db_type" class="form-select">
                <option value="mysql"   {% if biometric_settings.db.db_type == 'mysql' %}selected{% endif %}>MySQL</option>
                <option value="mssql"   {% if biometric_settings.db.db_type == 'mssql' %}selected{% endif %}>MS SQL</option>
                <option value="postgres"{% if biometric_settings.db.db_type == 'postgres' %}selected{% endif %}>Postgres</option>
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">Host</label>
              <input type="text" name="db_host" class="form-control"
                     value="{{ biometric_settings.db.host }}">
            </div>
            <div class="col-md-2">
              <label class="form-label">Port</label>
              <input type="text" name="db_port" class="form-control"
                     value="{{ biometric_settings.db.port }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Database</label>
              <input type="text" name="db_name" class="form-control"
                     value="{{ biometric_settings.db.database }}">
            </div>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-md-4">
              <label class="form-label">Username</label>
              <input type="text" name="db_username" class="form-control"
                     value="{{ biometric_settings.db.username }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Password</label>
              <input type="password" name="db_password" class="form-control"
                     value="{{ biometric_settings.db.password }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Table name</label>
              <input type="text" name="db_table_name" class="form-control"
                     value="{{ biometric_settings.db.table_name }}">
            </div>
          </div>

          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">Employee code column</label>
              <input type="text" name="db_col_employee_code" class="form-control"
                     value="{{ biometric_settings.db.col_employee_code }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Punch time column</label>
              <input type="text" name="db_col_punch_time" class="form-control"
                     value="{{ biometric_settings.db.col_punch_time }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Direction column (optional)</label>
              <input type="text" name="db_col_direction" class="form-control"
                     value="{{ biometric_settings.db.col_direction }}">
            </div>
          </div>

          <div class="mt-2">
            <label class="form-label">WHERE template (optional)</label>
            <input type="text" name="db_where_template" class="form-control"
                   value="{{ biometric_settings.db.where_template }}"
                   placeholder="punch_date = {date}">
            <small class="text-muted">
              You can use placeholders like <code>{date}</code> that we’ll fill in when running the sync.
            </small>
          </div>

          <div class="mt-2">
            <label class="form-label">Time format</label>
            <input type="text" name="db_time_format" class="form-control"
                   value="{{ biometric_settings.db.time_format }}">
          </div>
        </div>

        <div class="mt-3 text-end">
          <button class="btn btn-primary">
            <i class="bi bi-save me-1"></i> Save Biometric Settings
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Productive Hours Rules -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
      <div>
        <strong>Productive Hours Rules</strong>
        <small class="text-muted ms-2">
          (used by attendance to mark Present / Half Day / LWP)
        </small>
      </div>
    </div>
    <div class="card-body">

      <!-- Add rule form -->
      <form method="post" class="border rounded p-3 mb-3 bg-light">
        <input type="hidden" name="form_type" value="prod_rule_add">

        <div class="row g-3 align-items-end">
          <div class="col-md-3">
            <label class="form-label">Scope Type</label>
            <select name="scope_type" class="form-select" id="scope_type">
              <option value="company">Company (default)</option>
              <option value="department">Department-wise</option>
              <option value="designation">Designation-wise</option>
              <option value="employee">Employee-wise</option>
            </select>
          </div>

          <div class="col-md-3 scope-field scope-department d-none">
            <label class="form-label">Department</label>
            <select name="department_id" class="form-select">
              <option value="">-- Select Department --</option>
              {% for d in departments %}
                <option value="{{ d.id }}">{{ d.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="col-md-3 scope-field scope-designation d-none">
            <label class="form-label">Designation</label>
            <select name="designation_id" class="form-select">
              <option value="">-- Select Designation --</option>
              {% for d in designations %}
                <option value="{{ d.id }}">{{ d.title }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="col-md-3 scope-field scope-employee d-none">
            <label class="form-label">Employee</label>
            <select name="employee_id" class="form-select">
              <option value="">-- Select Employee --</option>
              {% for e in employees %}
                <option value="{{ e.id }}">{{ e.employee_code }} - {{ e.full_name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label">Required hours / day</label>
            <input type="number" step="0.25" min="0" name="required_hours"
                   class="form-control" value="7.0">
          </div>

          <div class="col-md-2 text-end">
            <button class="btn btn-success mt-2">
              <i class="bi bi-plus-circle me-1"></i> Add Rule
            </button>
          </div>
        </div>
      </form>

      <!-- Rules table -->
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width:40px;">#</th>
              <th>Scope</th>
              <th>Target</th>
              <th class="text-end">Required hours</th>
              <th style="width:80px;"></th>
            </tr>
          </thead>
          <tbody>
            {% if rules %}
              {% for r in rules %}
                <tr>
                  <td>{{ loop.index }}</td>
                  <td class="text-capitalize">{{ r.scope_type }}</td>
                  <td>
                    {% if r.scope_type == 'company' %}
                      <span class="text-muted">All employees</span>
                    {% elif r.scope_type == 'department' and r.department %}
                      Department: {{ r.department.name }}
                    {% elif r.scope_type == 'designation' and r.designation %}
                      Designation: {{ r.designation.title }}
                    {% elif r.scope_type == 'employee' and r.employee %}
                      {{ r.employee.employee_code }} - {{ r.employee.full_name }}
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>
                  <td class="text-end">
                    {{ '%.2f'|format(r.required_hours) }}
                  </td>
                  <td class="text-end">
                    <form method="post" onsubmit="return confirm('Delete this rule?');">
                      <input type="hidden" name="form_type" value="prod_rule_delete">
                      <input type="hidden" name="rule_id" value="{{ r.id }}">
                      <button class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                  </td>
                </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="5" class="text-center text-muted py-3">
                  No rules defined yet. Add a company default or specific rules above.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>

    </div>
  </div>

</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Toggle API / DB blocks
    const sourceSelect = document.getElementById("source_type");
    const apiBlock = document.getElementById("biometric-api-block");
    const dbBlock  = document.getElementById("biometric-db-block");

    function updateSourceBlocks() {
      if (!sourceSelect) return;
      if (sourceSelect.value === "api") {
        apiBlock.classList.remove("d-none");
        dbBlock.classList.add("d-none");
      } else {
        dbBlock.classList.remove("d-none");
        apiBlock.classList.add("d-none");
      }
    }

    if (sourceSelect) {
      sourceSelect.addEventListener("change", updateSourceBlocks);
      updateSourceBlocks();
    }

    // Productive hours scope toggle
    function updateScopeFields() {
      const scopeSelect = document.getElementById('scope_type');
      if (!scopeSelect) return;
      const val = scopeSelect.value;
      document.querySelectorAll('.scope-field').forEach(el => el.classList.add('d-none'));

      if (val === 'department') {
        document.querySelectorAll('.scope-department').forEach(el => el.classList.remove('d-none'));
      } else if (val === 'designation') {
        document.querySelectorAll('.scope-designation').forEach(el => el.classList.remove('d-none'));
      } else if (val === 'employee') {
        document.querySelectorAll('.scope-employee').forEach(el => el.classList.remove('d-none'));
      }
    }

    const scopeSelect = document.getElementById('scope_type');
    if (scopeSelect) {
      scopeSelect.addEventListener('change', updateScopeFields);
      updateScopeFields();
    }
  });
</script>
{% endblock %}