<?php /* payroll/employee_form.php */
$isEdit = !empty($employee);
$action = $isEdit
  ? APP_URL.'/payroll/employees/edit/'.$employee['id']
  : APP_URL.'/payroll/employees/add';
$sym = setting('currency_symbol','Rs.');
?>

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <h5 class="fw-bold mb-0 d-flex align-items-center gap-2">
    <i class="bi bi-person-gear text-primary fs-4"></i>
    <?= $isEdit ? 'Edit Employee: '.e($employee['full_name']) : 'Add New Employee' ?>
  </h5>
  <a href="<?= APP_URL ?>/payroll/employees" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>Back
  </a>
</div>

<?= flashMessages() ?>

<form method="POST" action="<?= $action ?>" enctype="multipart/form-data">
  <?= Auth::csrfField() ?>

  <div class="row g-3">

    <!-- LEFT: Employee details -->
    <div class="col-lg-8">

      <!-- Personal Information -->
      <div class="card mb-3">
        <div class="card-header fw-semibold small bg-transparent d-flex align-items-center gap-2">
          <i class="bi bi-person-circle text-primary"></i>Personal Information
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-3">
              <label class="form-label small fw-semibold">
                Employee Code
              </label>
              <input type="text" name="emp_code" class="form-control form-control-sm fw-bold"
                     value="<?= e($employee['emp_code']??'') ?>"
                     placeholder="Auto-generate"
                     <?= $isEdit?'readonly':'' ?>>
              <?php if(!$isEdit):?>
              <div class="form-text">Leave blank to auto-generate</div>
              <?php endif;?>
            </div>
            <div class="col-md-5">
              <label class="form-label small fw-semibold">Full Name <span class="text-danger">*</span></label>
              <input type="text" name="full_name" class="form-control form-control-sm"
                     value="<?= e($employee['full_name']??'') ?>" required>
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">NIC / ID Number</label>
              <input type="text" name="nic" class="form-control form-control-sm"
                     value="<?= e($employee['nic']??'') ?>"
                     placeholder="e.g. 901234567V">
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Gender</label>
              <select name="gender" class="form-select form-select-sm">
                <option value="">— Select —</option>
                <option value="male"   <?=($employee['gender']??'')==='male'?   'selected':''?>>Male</option>
                <option value="female" <?=($employee['gender']??'')==='female'? 'selected':''?>>Female</option>
                <option value="other"  <?=($employee['gender']??'')==='other'?  'selected':''?>>Other</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Date of Birth</label>
              <input type="date" name="date_of_birth" class="form-control form-control-sm"
                     value="<?= e($employee['date_of_birth']??'') ?>">
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Marital Status</label>
              <select name="marital_status" class="form-select form-select-sm">
                <option value="">— Select —</option>
                <option value="single"  <?=($employee['marital_status']??'')==='single'? 'selected':''?>>Single</option>
                <option value="married" <?=($employee['marital_status']??'')==='married'?'selected':''?>>Married</option>
                <option value="other"   <?=($employee['marital_status']??'')==='other'?  'selected':''?>>Other</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Phone</label>
              <div class="input-group input-group-sm">
                <span class="input-group-text"><i class="bi bi-telephone"></i></span>
                <input type="text" name="phone" class="form-control"
                       value="<?= e($employee['phone']??'') ?>"
                       placeholder="+94 77 123 4567">
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Email</label>
              <div class="input-group input-group-sm">
                <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                <input type="email" name="email" class="form-control"
                       value="<?= e($employee['email']??'') ?>"
                       placeholder="employee@email.com">
              </div>
            </div>
            <div class="col-12">
              <label class="form-label small fw-semibold">Address</label>
              <textarea name="address" class="form-control form-control-sm" rows="2"
                        placeholder="Home address…"><?= e($employee['address']??'') ?></textarea>
            </div>
          </div>
        </div>
      </div>

      <!-- Job Details -->
      <div class="card mb-3">
        <div class="card-header fw-semibold small bg-transparent d-flex align-items-center gap-2">
          <i class="bi bi-briefcase text-info"></i>Job Details
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Designation</label>
              <input type="text" name="designation" class="form-control form-control-sm"
                     list="designationList"
                     value="<?= e($employee['designation']??'') ?>"
                     placeholder="e.g. Cashier">
              <datalist id="designationList">
                <option value="Manager"><option value="Cashier"><option value="Supervisor">
                <option value="Accountant"><option value="Store Keeper"><option value="Driver">
                <option value="Security Guard"><option value="Cleaner">
              </datalist>
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Department</label>
              <input type="text" name="department" class="form-control form-control-sm"
                     list="deptList"
                     value="<?= e($employee['department']??'') ?>"
                     placeholder="e.g. Sales">
              <datalist id="deptList">
                <option value="Management"><option value="Sales"><option value="Operations">
                <option value="Finance"><option value="IT"><option value="HR">
                <option value="Warehouse"><option value="Security">
              </datalist>
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Branch</label>
              <select name="branch_id" class="form-select form-select-sm">
                <?php foreach($branches as $b):?>
                <option value="<?=$b['id']?>"
                        <?=($employee['branch_id']??1)==$b['id']?'selected':''?>>
                  <?= e($b['name']) ?>
                </option>
                <?php endforeach;?>
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label small fw-semibold">Join Date <span class="text-danger">*</span></label>
              <input type="date" name="join_date" class="form-control form-control-sm"
                     value="<?= e($employee['join_date']??date('Y-m-d')) ?>" required>
            </div>
            <div class="col-md-3">
              <label class="form-label small fw-semibold">Employment Type</label>
              <select name="employment_type" class="form-select form-select-sm">
                <option value="permanent" <?=($employee['employment_type']??'permanent')==='permanent'?'selected':''?>>Permanent</option>
                <option value="contract"  <?=($employee['employment_type']??'')==='contract'? 'selected':''?>>Contract</option>
                <option value="part_time" <?=($employee['employment_type']??'')==='part_time'?'selected':''?>>Part Time</option>
                <option value="intern"    <?=($employee['employment_type']??'')==='intern'?   'selected':''?>>Intern</option>
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label small fw-semibold">Pay Type</label>
              <select name="pay_type" class="form-select form-select-sm">
                <option value="monthly" <?=($employee['pay_type']??'monthly')==='monthly'?'selected':''?>>Monthly</option>
                <option value="daily"   <?=($employee['pay_type']??'')==='daily'?  'selected':''?>>Daily</option>
                <option value="hourly"  <?=($employee['pay_type']??'')==='hourly'? 'selected':''?>>Hourly</option>
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label small fw-semibold">Status</label>
              <select name="status" class="form-select form-select-sm">
                <option value="active"     <?=($employee['status']??'active')==='active'?     'selected':''?>> Active</option>
                <option value="inactive"   <?=($employee['status']??'')==='inactive'?         'selected':''?>> Inactive</option>
                <option value="terminated" <?=($employee['status']??'')==='terminated'?       'selected':''?>>⊘ Terminated</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Linked User Account</label>
              <select name="user_id" class="form-select form-select-sm">
                <option value="">— None —</option>
                <?php foreach($users as $u):?>
                <option value="<?=$u['id']?>"
                        <?=($employee['user_id']??'')==$u['id']?'selected':''?>>
                  <?= e($u['name']) ?>
                </option>
                <?php endforeach;?>
              </select>
              <div class="form-text">Links employee to system user account</div>
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Working Days/Month</label>
              <input type="number" name="working_days" class="form-control form-control-sm"
                     value="<?= e($employee['working_days']??'26') ?>"
                     min="1" max="31" step="1">
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">OT Rate (per hour)</label>
              <div class="input-group input-group-sm">
                <span class="input-group-text"><?= $sym ?></span>
                <input type="number" name="ot_rate" class="form-control"
                       value="<?= e($employee['ot_rate']??'0') ?>"
                       min="0" step="0.01">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Salary -->
      <div class="card mb-3">
        <div class="card-header fw-semibold small bg-transparent d-flex align-items-center gap-2">
          <i class="bi bi-cash-coin text-success"></i>Salary Information
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Basic Salary <span class="text-danger">*</span></label>
              <div class="input-group">
                <span class="input-group-text fw-bold"><?= $sym ?></span>
                <input type="number" name="basic_salary" class="form-control fw-bold"
                       step="0.01" min="0"
                       value="<?= e($employee['basic_salary']??'0') ?>"
                       required id="basicSalary">
              </div>
            </div>

            <!-- EPF Eligible Toggle -->
            <div class="col-md-4">
              <label class="form-label small fw-semibold d-block mb-2">EPF &amp; ETF Deduction</label>

              <!-- Hidden field — JS controls this value -->
              <?php
              // DEBUG — remove after fix
              $epf_db_val = $employee['epf_eligible'] ?? 'KEY_NOT_FOUND';
              ?>
              <!-- EPF DEBUG: db_val=<?= htmlspecialchars((string)$epf_db_val) ?> array_key_exists=<?= array_key_exists('epf_eligible', $employee) ? 'YES' : 'NO' ?> -->
              <input type="hidden" name="epf_eligible" id="epfHidden"
                     value="<?= array_key_exists('epf_eligible', $employee)
                               ? (int)$employee['epf_eligible']
                               : 1 ?>">

              <?php
              $epfEligible = array_key_exists('epf_eligible', $employee)
                ? (int)$employee['epf_eligible']
                : 1;
              ?>
              <div id="epfBtn"
                onclick="epfToggle()"
                style="
                  display:flex;align-items:center;gap:12px;
                  padding:10px 14px;border-radius:10px;cursor:pointer;
                  border:2px solid <?= $epfEligible ? '#86efac' : '#fca5a5' ?>;
                  background:<?= $epfEligible ? '#f0fdf4' : '#fef2f2' ?>;
                  user-select:none;transition:all .2s;
                ">
                <!-- Pill -->
                <div id="epfPill" style="
                  width:46px;height:26px;border-radius:30px;flex-shrink:0;
                  position:relative;transition:background .25s;
                  background:<?= $epfEligible ? '#16a34a' : '#ef4444' ?>;
                ">
                  <div id="epfDot" style="
                    position:absolute;top:3px;width:20px;height:20px;
                    background:#fff;border-radius:50%;transition:left .25s;
                    box-shadow:0 1px 4px rgba(0,0,0,.25);
                    left:<?= $epfEligible ? '23px' : '3px' ?>;
                  "></div>
                </div>
                <div>
                  <div id="epfLabel" style="font-weight:700;font-size:.83rem;
                    color:<?= $epfEligible ? '#15803d' : '#dc2626' ?>">
                    <?= $epfEligible ? '✅ EPF Applicable' : '❌ EPF Not Applicable' ?>
                  </div>
                  <div id="epfSub" style="font-size:.68rem;color:#6b7280;margin-top:1px">
                    <?= $epfEligible ? 'Emp 8% + Employer 12% deducted' : 'No EPF/ETF deduction' ?>
                  </div>
                </div>
              </div>

            </div>

            <!-- EPF/ETF fields -->
            <div class="col-md-4" id="epfFieldsWrap"
                 style="display:<?= $epfEligible ? 'block' : 'none' ?>">
              <label class="form-label small fw-semibold">EPF Registration No.</label>
              <input type="text" name="epf_no" class="form-control form-control-sm"
                     value="<?= e($employee['epf_no']??'') ?>"
                     placeholder="EPF number">
              <div class="mt-2">
                <label class="form-label small fw-semibold">ETF Registration No.</label>
                <input type="text" name="etf_no" class="form-control form-control-sm"
                       value="<?= e($employee['etf_no']??'') ?>"
                       placeholder="ETF number">
              </div>
            </div>

            <!-- Salary preview -->
            <div class="col-12">
              <div class="p-3 rounded" id="salaryPreviewBox"
                   style="background:#f0fdf4;border:1px solid #bbf7d0">
                <div class="fw-semibold small mb-2 text-success">
                  <i class="bi bi-calculator me-1"></i>Quick Salary Preview
                </div>
                <div class="row g-2 text-center" style="font-size:.78rem">
                  <div class="col-3">
                    <div class="text-muted">Basic</div>
                    <div class="fw-bold" id="preBasic"><?= $sym ?> 0.00</div>
                  </div>
                  <div class="col-3" id="preEpfEmpCol">
                    <div class="text-muted">EPF (Emp 8%)</div>
                    <div class="fw-bold text-danger" id="preEpfEmp"><?= $sym ?> 0.00</div>
                  </div>
                  <div class="col-3" id="preEpfErCol">
                    <div class="text-muted">EPF (Er 12%)</div>
                    <div class="fw-bold text-warning" id="preEpfEr"><?= $sym ?> 0.00</div>
                  </div>
                  <div class="col-3">
                    <div class="text-muted">Est. Net</div>
                    <div class="fw-bold text-success" id="preNet"><?= $sym ?> 0.00</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Bank Details -->
      <div class="card mb-3">
        <div class="card-header fw-semibold small bg-transparent d-flex align-items-center gap-2">
          <i class="bi bi-bank text-primary"></i>Bank Details
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Bank Name</label>
              <input type="text" name="bank_name" class="form-control form-control-sm"
                     list="bankList"
                     value="<?= e($employee['bank_name']??'') ?>">
              <datalist id="bankList">
                <option value="Bank of Ceylon (BOC)">
                <option value="Commercial Bank">
                <option value="Sampath Bank">
                <option value="People's Bank">
                <option value="Hatton National Bank (HNB)">
                <option value="Nations Trust Bank (NTB)">
                <option value="Seylan Bank">
                <option value="DFCC Bank">
              </datalist>
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Account Number</label>
              <input type="text" name="bank_account" class="form-control form-control-sm"
                     value="<?= e($employee['bank_account']??'') ?>"
                     placeholder="Account number">
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Bank Branch</label>
              <input type="text" name="bank_branch" class="form-control form-control-sm"
                     value="<?= e($employee['bank_branch']??'') ?>"
                     placeholder="Branch name">
            </div>
          </div>
        </div>
      </div>

      <!-- Emergency Contact -->
      <div class="card mb-3">
        <div class="card-header fw-semibold small bg-transparent d-flex align-items-center gap-2">
          <i class="bi bi-heart-pulse text-danger"></i>Emergency Contact
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Contact Name</label>
              <input type="text" name="emergency_name" class="form-control form-control-sm"
                     value="<?= e($employee['emergency_name']??'') ?>">
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Relationship</label>
              <input type="text" name="emergency_relation" class="form-control form-control-sm"
                     list="relList"
                     value="<?= e($employee['emergency_relation']??'') ?>">
              <datalist id="relList">
                <option value="Spouse"><option value="Parent"><option value="Sibling">
                <option value="Child"><option value="Friend">
              </datalist>
            </div>
            <div class="col-md-4">
              <label class="form-label small fw-semibold">Emergency Phone</label>
              <div class="input-group input-group-sm">
                <span class="input-group-text"><i class="bi bi-telephone-fill text-danger"></i></span>
                <input type="text" name="emergency_phone" class="form-control"
                       value="<?= e($employee['emergency_phone']??'') ?>">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Notes -->
      <div class="card mb-3">
        <div class="card-header fw-semibold small bg-transparent d-flex align-items-center gap-2">
          <i class="bi bi-sticky text-warning"></i>Notes
        </div>
        <div class="card-body">
          <textarea name="notes" class="form-control" rows="3"
                    placeholder="Any additional notes about this employee…"><?= e($employee['notes']??'') ?></textarea>
        </div>
      </div>

    </div><!-- /col-lg-8 -->

    <!-- RIGHT: Salary Components -->
    <div class="col-lg-4">

      <!-- Profile Photo -->
      <div class="card mb-3">
        <div class="card-header fw-semibold small bg-transparent d-flex align-items-center gap-2">
          <i class="bi bi-camera text-info"></i>Profile Photo
        </div>
        <div class="card-body text-center">
          <?php if(!empty($employee['photo'])):?>
          <img src="<?= APP_URL ?>/uploads/employees/<?= e($employee['photo']) ?>"
               alt="Photo" class="rounded-circle mb-2"
               style="width:80px;height:80px;object-fit:cover">
          <?php else:?>
          <div class="rounded-circle d-inline-flex align-items-center justify-content-center mb-2 fw-bold fs-3"
               style="width:80px;height:80px;background:#eff6ff;color:#1d4ed8">
            <?= e(strtoupper(substr($employee['full_name']??'E',0,1))) ?>
          </div>
          <?php endif;?>
          <div>
            <input type="file" name="photo" class="form-control form-control-sm"
                   accept="image/png,image/jpeg,image/gif">
            <div class="form-text">PNG, JPG · Max 2MB</div>
          </div>
        </div>
      </div>

      <!-- Salary Components -->
      <div class="card mb-3">
        <div class="card-header fw-semibold small bg-transparent d-flex align-items-center gap-2">
          <i class="bi bi-sliders text-warning"></i>Salary Components
        </div>
        <div class="card-body p-0">
          <table class="table table-sm mb-0">
            <thead class="table-secondary">
              <tr>
                <th class="ps-3 small">Component</th>
                <th class="small text-center" style="width:50px">Type</th>
                <th class="small text-end pe-3" style="width:100px">Amount</th>
              </tr>
            </thead>
            <tbody>
              <?php
              $allowances = array_filter($components, fn($c)=>$c['type']==='allowance');
              $deductions = array_filter($components, fn($c)=>$c['type']==='deduction');
              ?>

              <!-- Allowances -->
              <?php if(!empty($allowances)):?>
              <tr><td colspan="3" class="ps-3 fw-bold text-success" style="font-size:.68rem;background:#f0fdf4;padding:3px 12px">ALLOWANCES</td></tr>
              <?php foreach($allowances as $c):
                $amt = $empCompMap[$c['id']] ?? ($isEdit ? null : ($c['is_default'] ? $c['amount'] : null));
              ?>
              <tr>
                <td class="ps-3 small">
                  <?= e($c['name']) ?>
                  <input type="hidden" name="component_id[]" value="<?= $c['id'] ?>">
                  <?php if($c['calc_type']==='percentage'):?>
                  <span class="text-muted" style="font-size:.6rem">(<?=$c['amount']?>%)</span>
                  <?php endif;?>
                </td>
                <td class="text-center">
                  <span class="badge bg-success" style="font-size:.55rem">+</span>
                </td>
                <td class="pe-3">
                  <input type="number" name="component_amount[]"
                         class="form-control form-control-sm text-end"
                         step="0.01" min="0"
                         value="<?= $amt !== null ? e($amt) : '' ?>"
                         placeholder="0.00">
                </td>
              </tr>
              <?php endforeach;?>
              <?php endif;?>

              <!-- Deductions -->
              <?php if(!empty($deductions)):?>
              <tr><td colspan="3" class="ps-3 fw-bold text-danger" style="font-size:.68rem;background:#fef2f2;padding:3px 12px">DEDUCTIONS</td></tr>
              <?php foreach($deductions as $c):
                $amt = $empCompMap[$c['id']] ?? ($isEdit ? null : ($c['is_default'] ? $c['amount'] : null));
              ?>
              <tr>
                <td class="ps-3 small">
                  <?= e($c['name']) ?>
                  <input type="hidden" name="component_id[]" value="<?= $c['id'] ?>">
                  <?php if($c['calc_type']==='percentage'):?>
                  <span class="text-muted" style="font-size:.6rem">(<?=$c['amount']?>%)</span>
                  <?php endif;?>
                </td>
                <td class="text-center">
                  <span class="badge bg-danger" style="font-size:.55rem">−</span>
                </td>
                <td class="pe-3">
                  <input type="number" name="component_amount[]"
                         class="form-control form-control-sm text-end"
                         step="0.01" min="0"
                         value="<?= $amt !== null ? e($amt) : '' ?>"
                         placeholder="0.00">
                </td>
              </tr>
              <?php endforeach;?>
              <?php endif;?>

            </tbody>
          </table>
        </div>
      </div>

      <!-- Submit -->
      <button type="submit" class="btn btn-primary w-100 fw-bold py-2 mb-2">
        <i class="bi bi-check-circle me-2"></i>
        <?= $isEdit ? 'Save Changes' : 'Add Employee' ?>
      </button>
      <a href="<?= APP_URL ?>/payroll/employees"
         class="btn btn-outline-secondary w-100">
        Cancel
      </a>

    </div><!-- /col-lg-4 -->
  </div><!-- /row -->
</form>

<script>
const basicInput = document.getElementById('basicSalary');
const sym = '<?= e($sym) ?>';

// ── EPF Toggle ───────────────────────────────────────────
function epfToggle() {
  const hidden  = document.getElementById('epfHidden');
  const current = hidden.value === '1';
  const next    = !current;

  // Save value
  hidden.value = next ? '1' : '0';

  // Pill animation
  document.getElementById('epfPill').style.background = next ? '#16a34a' : '#ef4444';
  document.getElementById('epfDot').style.left         = next ? '23px'    : '3px';

  // Button box
  const btn = document.getElementById('epfBtn');
  btn.style.borderColor = next ? '#86efac' : '#fca5a5';
  btn.style.background  = next ? '#f0fdf4' : '#fef2f2';

  // Labels
  document.getElementById('epfLabel').style.color = next ? '#15803d' : '#dc2626';
  document.getElementById('epfLabel').textContent  = next ? '✅ EPF Applicable' : '❌ EPF Not Applicable';
  document.getElementById('epfSub').textContent    = next ? 'Emp 8% + Employer 12% deducted' : 'No EPF/ETF deduction';

  // Show/hide fields
  document.getElementById('epfFieldsWrap').style.display = next ? 'block' : 'none';

  updatePreview();
}

// ── Salary Preview ───────────────────────────────────────
function updatePreview() {
  const basic = parseFloat(basicInput?.value) || 0;
  const epfOn = document.getElementById('epfHidden')?.value === '1';
  const epfEmp = epfOn ? basic * 0.08 : 0;
  const epfEr  = epfOn ? basic * 0.12 : 0;
  const net    = basic - epfEmp;

  const set = (id, val) => {
    const el = document.getElementById(id);
    if (el) el.textContent = sym + ' ' + val.toFixed(2);
  };
  set('preBasic',  basic);
  set('preEpfEmp', epfEmp);
  set('preEpfEr',  epfEr);
  set('preNet',    net);

  const ec = document.getElementById('preEpfEmpCol');
  const er = document.getElementById('preEpfErCol');
  if (ec) ec.style.opacity = epfOn ? '1' : '.3';
  if (er) er.style.opacity  = epfOn ? '1' : '.3';

  const box = document.getElementById('salaryPreviewBox');
  if (box) {
    box.style.background  = epfOn ? '#f0fdf4' : '#fffbeb';
    box.style.borderColor = epfOn ? '#bbf7d0' : '#fde68a';
  }
}

if (basicInput) {
  basicInput.addEventListener('input', updatePreview);
  updatePreview();
}
</script>