{% extends "pos/base.html" %}
{% block title %}{{ action }} Staff{% endblock %}
{% block heading %}{{ action }} Staff Member{% endblock %}

{% block stylesheets %}
<style>
  .section-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
  }
  .section-header {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
  }
  .section-header i {
    margin-right: 0.5rem;
    color: #666;
  }
  .section-body {
    padding: 1.25rem;
  }
  .form-label {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
  }
  .form-text {
    font-size: 0.8rem;
    color: #6c757d;
  }
  .required-star {
    color: #dc3545;
  }

  /* Balance Adjustment Section */
  .section-card.balance-card {
    border-color: #ffc107;
  }
  .section-card.balance-card .section-header {
    background: #fff3cd;
    border-bottom-color: #ffc107;
    color: #856404;
  }
  .balance-readonly {
    font-weight: 700;
    font-size: 1.1rem;
    background: #f8f9fa !important;
  }
  .balance-positive { color: #198754 !important; }
  .balance-negative { color: #dc3545 !important; }
  .balance-zero     { color: #6c757d !important; }
  #bal-diff-preview {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 1.2em;
  }

  /* Login Access Section */
  .section-card.login-card {
    border-color: #0d6efd;
  }
  .section-card.login-card .section-header {
    background: #cfe2ff;
    border-bottom-color: #0d6efd;
    color: #084298;
  }
  #login-fields-wrap {
    margin-top: 0.75rem;
  }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
  <form method="post" class="mt-3">
    {% csrf_token %}
    {{ form.non_field_errors }}

    {# ══════════════════════════════════════════════════════════════════════ #}
    {# SECTION 1: EMPLOYEE INFO                                               #}
    {# ══════════════════════════════════════════════════════════════════════ #}
    <div class="section-card">
      <div class="section-header">
        <i class="bi bi-person-badge"></i> Employee Information
      </div>
      <div class="section-body">
        <div class="row mb-3">
          <div class="col-md-3">
            <label class="form-label">Ledger ID <span class="required-star">*</span></label>
            {{ form.t_id }}
            <div class="form-text">Unique ledger identifier</div>
            {{ form.t_id.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Employee Code</label>
            {{ form.employee_code }}
            <div class="form-text">e.g., EMP-001</div>
            {{ form.employee_code.errors }}
          </div>
          <div class="col-md-6">
            <label class="form-label">Full Name <span class="required-star">*</span></label>
            {{ form.name }}
            {{ form.name.errors }}
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-4">
            <label class="form-label">Mobile Number</label>
            {{ form.mobile_number }}
            <div class="form-text">e.g., 0300-1234567</div>
            {{ form.mobile_number.errors }}
          </div>
          <div class="col-md-4">
            <label class="form-label">CNIC</label>
            {{ form.cnic }}
            <div class="form-text">e.g., 12345-1234567-1</div>
            {{ form.cnic.errors }}
          </div>
          <div class="col-md-4">
            <label class="form-label">Joining Date</label>
            {{ form.joining_date }}
            {{ form.joining_date.errors }}
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3">
            <label class="form-label">Department</label>
            {{ form.department }}
            <div class="form-text">e.g., Sales, Accounts</div>
            {{ form.department.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Designation</label>
            {{ form.designation }}
            <div class="form-text">e.g., Manager, Salesman</div>
            {{ form.designation.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Branch</label>
            {{ form.branch }}
            {{ form.branch.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Employment Type</label>
            {{ form.employment_type }}
            {{ form.employment_type.errors }}
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div class="form-check form-switch">
              {{ form.is_active }}
              <label class="form-check-label" for="id_is_active">
                <strong>Active Status</strong>
              </label>
            </div>
            <div class="form-text">Uncheck to mark as inactive/left</div>
            {{ form.is_active.errors }}
          </div>
        </div>
      </div>
    </div>

    {# ══════════════════════════════════════════════════════════════════════ #}
    {# SECTION 2: PAYROLL INFO                                                #}
    {# ══════════════════════════════════════════════════════════════════════ #}
    <div class="section-card">
      <div class="section-header">
        <i class="bi bi-cash-stack"></i> Payroll Information
      </div>
      <div class="section-body">
        <div class="row mb-3">
          <div class="col-md-3">
            <label class="form-label">Salary Type</label>
            {{ form.pay_type }}
            {{ form.pay_type.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Basic Salary</label>
            <div class="input-group">
              <span class="input-group-text">Rs.</span>
              {{ form.monthly_salary }}
            </div>
            <div class="form-text">Monthly basic salary</div>
            {{ form.monthly_salary.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Allowance</label>
            <div class="input-group">
              <span class="input-group-text">Rs.</span>
              {{ form.allowance }}
            </div>
            <div class="form-text">Monthly allowance</div>
            {{ form.allowance.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Deduction</label>
            <div class="input-group">
              <span class="input-group-text">Rs.</span>
              {{ form.deduction }}
            </div>
            <div class="form-text">Fixed monthly deduction</div>
            {{ form.deduction.errors }}
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3">
            <label class="form-label">Daily Wage</label>
            <div class="input-group">
              <span class="input-group-text">Rs.</span>
              {{ form.daily_wage }}
            </div>
            <div class="form-text">For daily workers</div>
            {{ form.daily_wage.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Overtime Rate</label>
            <div class="input-group">
              <span class="input-group-text">Rs.</span>
              {{ form.overtime_rate }}
              <span class="input-group-text">/hr</span>
            </div>
            {{ form.overtime_rate.errors }}
          </div>
          <div class="col-md-3">
            <label class="form-label">Allowed Leaves</label>
            <div class="input-group">
              {{ form.allowed_leaves }}
              <span class="input-group-text">per month</span>
            </div>
            {{ form.allowed_leaves.errors }}
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <label class="form-label">Payment Method</label>
            {{ form.payment_method }}
            {{ form.payment_method.errors }}
          </div>
          <div class="col-md-4">
            <label class="form-label">Bank Account No</label>
            {{ form.bank_account_no }}
            <div class="form-text">For bank transfer payments</div>
            {{ form.bank_account_no.errors }}
          </div>
        </div>
      </div>
    </div>

    {# ══════════════════════════════════════════════════════════════════════ #}
    {# SECTION 3: COMMISSION DETAILS                                          #}
    {# ══════════════════════════════════════════════════════════════════════ #}
    <div class="section-card">
      <div class="section-header">
        <i class="bi bi-percent"></i> Commission Details
      </div>
      <div class="section-body">
        <div class="row">
          <div class="col-md-4">
            <label class="form-label">Commission Type</label>
            {{ form.commission_type }}
            <div class="form-text">Select type of commission calculation</div>
            {{ form.commission_type.errors }}
          </div>
          <div class="col-md-4">
            <label class="form-label">Commission Percentage</label>
            <div class="input-group">
              {{ form.commission_rate }}
              <span class="input-group-text">%</span>
            </div>
            <div class="form-text">Main commission rate</div>
            {{ form.commission_rate.errors }}
          </div>
          <div class="col-md-4">
            <label class="form-label">Additional Service Commission</label>
            <div class="input-group">
              {{ form.service_commission_rate }}
              <span class="input-group-text">%</span>
            </div>
            <div class="form-text">Extra commission for services</div>
            {{ form.service_commission_rate.errors }}
          </div>
        </div>
      </div>
    </div>

    {# ══════════════════════════════════════════════════════════════════════ #}
    {# SECTION 4: LOGIN ACCESS                                                #}
    {# ══════════════════════════════════════════════════════════════════════ #}
    <div class="section-card login-card">
      <div class="section-header">
        <i class="bi bi-shield-lock"></i> Login Access
      </div>
      <div class="section-body">
        <div class="form-check form-switch mb-2">
          {{ form.can_login }}
          <label class="form-check-label" for="id_can_login">
            <strong>This staff can login</strong>
          </label>
        </div>
        <div class="form-text mb-2">Check this box to give the staff member login access to the system.</div>
        {{ form.can_login.errors }}

        <div id="login-fields-wrap" class="row" style="display:none;">
          <div class="col-md-4">
            <label class="form-label">
              Username <span class="required-star">*</span>
            </label>
            {{ form.login_username }}
            {{ form.login_username.errors }}
          </div>
          <div class="col-md-4">
            <label class="form-label">Email</label>
            {{ form.email }}
            <div class="form-text">Optional, used for login-related notifications</div>
            {{ form.email.errors }}
          </div>
          <div class="col-md-4">
            <label class="form-label">
              Password
              {% if not staff_obj.linked_user_id %}<span class="required-star">*</span>{% endif %}
            </label>
            {{ form.login_password }}
            <div class="form-text">{{ form.login_password.help_text }}</div>
            {{ form.login_password.errors }}
          </div>
        </div>
      </div>
    </div>

    {# ══════════════════════════════════════════════════════════════════════ #}
    {# SECTION 5: BALANCE ADJUSTMENT — EDIT MODE ONLY                        #}
    {# ══════════════════════════════════════════════════════════════════════ #}
    {% if action == 'Edit' %}
    <div class="section-card balance-card">
      <div class="section-header">
        <i class="bi bi-pencil-square"></i> Balance Adjustment

      </div>
      <div class="section-body">
        <div class="row align-items-start g-3">

          {# ── Column 1: Current balance (read-only) ── #}
          <div class="col-md-4">
            <label class="form-label">Current Balance (Ledger)</label>
            <div class="input-group">
              <span class="input-group-text">Rs.</span>
              <input
                type="text"
                class="form-control balance-readonly
                  {% if current_balance > 0 %}balance-positive
                  {% elif current_balance < 0 %}balance-negative
                  {% else %}balance-zero{% endif %}"
                value="{{ current_balance|floatformat:2 }}"
                readonly
                tabindex="-1"
              >
            </div>
          </div>

          {# ── Column 2: New balance input ── #}
          <div class="col-md-4">
            <label class="form-label" for="id_new_balance">
              New Balance
              <span class="badge bg-warning text-dark ms-1" style="font-size:0.7rem;">Optional</span>
            </label>
            <div class="input-group">
              <span class="input-group-text">Rs.</span>
              {{ form.new_balance }}
            </div>
            {# Live diff preview — JS se fill hoga #}
            <small id="bal-diff-preview"></small>
            {{ form.new_balance.errors }}
          </div>

        </div>
      </div>
    </div>
    {% endif %}

    {# ══════════════════════════════════════════════════════════════════════ #}
    {# ACTION BUTTONS                                                         #}
    {# ══════════════════════════════════════════════════════════════════════ #}
    <div class="d-flex gap-2 mb-4">
      <button type="submit" class="btn btn-primary btn-lg">
        <i class="bi bi-check-circle"></i> {{ action }} Staff
      </button>
      <a href="{% url 'payroll:staff_list' %}" class="btn btn-secondary btn-lg">
        <i class="bi bi-x-circle"></i> Cancel
      </a>
    </div>

  </form>
</div>
{% endblock %}

{% block javascripts %}
<script>
$(function() {

  // ── 1. Salary type: show/hide daily wage ─────────────────────────────────
  function toggleSalaryFields() {
    // Currently both fields always visible — extend here if needed
  }

  // ── 2. Commission type: disable rates when 'none' ────────────────────────
  function toggleCommissionFields() {
    var commType = $('#id_commission_type').val();
    if (commType === 'none') {
      $('#id_commission_rate').prop('disabled', true).val('0');
      $('#id_service_commission_rate').prop('disabled', true).val('0');
    } else {
      $('#id_commission_rate').prop('disabled', false);
      $('#id_service_commission_rate').prop('disabled', false);
    }
  }

  toggleSalaryFields();
  toggleCommissionFields();

  $('#id_pay_type').on('change', toggleSalaryFields);
  $('#id_commission_type').on('change', toggleCommissionFields);

  // ── 3. CNIC auto-format: 12345-1234567-1 ─────────────────────────────────
  $('#id_cnic').on('input', function() {
    var val = $(this).val().replace(/\D/g, '');
    if (val.length > 5)  val = val.substring(0, 5)  + '-' + val.substring(5);
    if (val.length > 13) val = val.substring(0, 13) + '-' + val.substring(13);
    if (val.length > 15) val = val.substring(0, 15);
    $(this).val(val);
  });

  // ── 4. Mobile auto-format: 0300-1234567 ──────────────────────────────────
  $('#id_mobile_number').on('input', function() {
    var val = $(this).val().replace(/\D/g, '');
    if (val.length > 4) val = val.substring(0, 4) + '-' + val.substring(4);
    if (val.length > 12) val = val.substring(0, 12);
    $(this).val(val);
  });

  // ── 4.5 Login access: show/hide username/email/password ──────────────────
  function toggleLoginFields() {
    if ($('#id_can_login').is(':checked')) {
      $('#login-fields-wrap').show();
    } else {
      $('#login-fields-wrap').hide();
    }
  }
  toggleLoginFields();
  $('#id_can_login').on('change', toggleLoginFields);

  // ── 5. Balance adjustment: live diff preview ──────────────────────────────
  {% if action == 'Edit' %}
  var currentBal = parseFloat("{{ current_balance|default:0 }}") || 0;

  $('#id_new_balance').on('input', function() {
    var rawVal = $(this).val().trim();
    var preview = $('#bal-diff-preview');

    if (rawVal === '' || rawVal === null) {
      preview.text('').removeClass('balance-positive balance-negative text-muted');
      return;
    }

    var newVal = parseFloat(rawVal);
    if (isNaN(newVal)) {
      preview.text('').removeClass('balance-positive balance-negative text-muted');
      return;
    }

    var diff = newVal - currentBal;
    var absDiff = Math.abs(diff).toFixed(2);

  });

  // Trigger on page load to show initial state
  $('#id_new_balance').trigger('input');
  {% endif %}

});
</script>
{% endblock %}