{% extends "payroll/base.html" %}
{% block content %}
<style>
.company-config{padding:1rem;max-width:1200px;margin:0 auto}
.company-config .subtitle{color:#6c757d;font-size:.9rem}
.company-config .config-panel{background:#e0e4e7;padding:1rem;margin-top:1rem}
.company-config .section-title{color:#34495e;font-size:.88rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid #c3cbd1;padding-bottom:.5rem;margin:1rem 0}
.company-config .section-title:first-child{margin-top:0}
.company-config label{font-size:.88rem;font-weight:600;margin-bottom:.35rem}
.company-config .form-control{border-radius:0;background:#fff}
.company-config .form-control:disabled{background:#f4f5f6;color:#344054;opacity:1}
.company-config .actions{display:flex;justify-content:flex-end;gap:.5rem;padding-top:1rem;margin-top:1rem;border-top:1px solid #c3cbd1}
</style>
<div class="company-config">
  <div class="mb-3">
    <h3 class="mb-1">SIMENGGARIS</h3>
    <div class="subtitle">Company Configuration</div>
    <div class="subtitle">Payroll / Configuration / Company</div>
  </div>

  {% if messages %}{% for message in messages %}
    <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
      {{ message }}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endfor %}{% endif %}

  {% if company %}
  <form method="post" action="{% url 'payroll:payroll_company' %}" id="companyConfigForm">
    {% csrf_token %}
    <div class="config-panel">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div><strong>Company Profile</strong><div class="subtitle">Edit the existing company configuration.</div></div>
        <span class="subtitle">Company ID: {{ company.id }}</span>
      </div>
      <fieldset id="companyFields" disabled>
        <div class="section-title">Company Information</div>
        <div class="row g-3">
          <div class="col-md-6"><label for="kota">City</label><input class="form-control" id="kota" name="kota" maxlength="20" value="{{ company.kota|default_if_none:''|cut:' ' }}"></div>
          <div class="col-12"><label for="alamat">Address *</label><input class="form-control" id="alamat" name="alamat" maxlength="120" value="{{ company.alamat|default_if_none:''|cut:' ' }}" required></div>
          <div class="col-md-6"><label for="jnsusaha">Business Type *</label><input class="form-control" id="jnsusaha" name="jnsusaha" maxlength="20" value="{{ company.jnsusaha|default_if_none:''|cut:' ' }}" required></div>
          <div class="col-md-6"><label for="klu">KLU *</label><input class="form-control" id="klu" name="klu" maxlength="20" value="{{ company.klu|default_if_none:''|cut:' ' }}" required></div>
        </div>
        <div class="section-title">Tax Information</div>
        <div class="row g-3">
          <div class="col-md-6"><label for="npwp">Company NPWP *</label><input class="form-control" id="npwp" name="npwp" maxlength="15" value="{{ company.npwp|default_if_none:''|cut:' ' }}" required></div>
          <div class="col-md-6"><label for="kpp">KPP *</label><input class="form-control" id="kpp" name="kpp" maxlength="20" value="{{ company.kpp|default_if_none:''|cut:' ' }}" required></div>
          <div class="col-md-6"><label for="npwp_pemotong">Tax Withholder NPWP *</label><input class="form-control" id="npwp_pemotong" name="npwp_pemotong" maxlength="15" value="{{ company.npwp_pemotong|default_if_none:''|cut:' ' }}" required></div>
          <div class="col-md-6"><label for="nama_pemotong">Tax Withholder Name *</label><input class="form-control" id="nama_pemotong" name="nama_pemotong" maxlength="50" value="{{ company.nama_pemotong|default_if_none:''|cut:' ' }}" required></div>
        </div>
        <div class="section-title">Payroll Period & Reports</div>
        <div class="row g-3">
          <div class="col-md-3"><label for="periode_mulai">Start Period</label><input class="form-control" id="periode_mulai" name="periode_mulai" maxlength="6" placeholder="YYYYMM" value="{{ company.periode_mulai|default_if_none:''|cut:' ' }}"></div>
          <div class="col-md-3"><label for="periode">Current Period *</label><input class="form-control" id="periode" name="periode" maxlength="6" placeholder="YYYYMM" value="{{ company.periode|default_if_none:''|cut:' ' }}" required></div>
          <div class="col-md-3"><label for="tgl_thr">THR Date</label><input type="date" class="form-control" id="tgl_thr" name="tgl_thr" value="{{ company.tgl_thr|date:'Y-m-d' }}"></div>
          <div class="col-md-3"><label for="reports_updated">Reports Updated *</label><input type="number" class="form-control" id="reports_updated" name="reports_updated" step="1" value="{{ company.reports_updated|default_if_none:'0' }}" required></div>
          <div class="col-12"><label for="logo_file">Logo File</label><input class="form-control" id="logo_file" name="logo_file" maxlength="100" value="{{ company.logo_file|default_if_none:''|cut:' ' }}" placeholder="Path or filename"></div>
        </div>
      </fieldset>
      <div class="actions">
        <button type="button" class="btn btn-secondary" id="editButton" onclick="enableCompanyEdit()">Edit</button>
        <button type="button" class="btn btn-outline-secondary d-none" id="cancelButton" onclick="cancelCompanyEdit()">Cancel</button>
        <button type="submit" class="btn btn-primary d-none" id="saveButton">Save Changes</button>
      </div>
    </div>
  </form>
  <script>
  const companyForm = document.getElementById('companyConfigForm');
  const companyFields = document.getElementById('companyFields');
  const originalValues = {};
  Array.from(companyFields.querySelectorAll('input')).forEach(el => originalValues[el.name] = el.value);
  function enableCompanyEdit() {
    companyFields.disabled = false;
    document.getElementById('editButton').classList.add('d-none');
    document.getElementById('cancelButton').classList.remove('d-none');
    document.getElementById('saveButton').classList.remove('d-none');
    document.getElementById('npwp').focus();
  }
  function cancelCompanyEdit() {
    Array.from(companyFields.querySelectorAll('input')).forEach(el => el.value = originalValues[el.name] ?? '');
    companyFields.disabled = true;
    document.getElementById('editButton').classList.remove('d-none');
    document.getElementById('cancelButton').classList.add('d-none');
    document.getElementById('saveButton').classList.add('d-none');
  }
  companyForm.addEventListener('submit', function(e) {
    if (companyFields.disabled) e.preventDefault();
  });
  </script>
  {% endif %}
</div>
{% endblock %}