@extends('layouts.app')

@section('title', 'EPF / ETF / Tax')
@section('page', 'company-details')
@section('companyNav', 'payroll-rates')

@section('content')
  @include('partials.settings-company-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <div class="payroll-rates-page">
    <div class="payroll-rates-page__head">
      <div>
        <h1 class="payroll-rates-page__title">EPF / ETF / Tax</h1>
        <p class="payroll-rates-page__subtitle">Enable statutory items and set %. EPF / ETF apply on <strong>basic salary only</strong> (not allowances). Tax uses basic + allowances.</p>
      </div>
      <div class="payroll-rates-page__tip" role="note">
        <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
        <span>Enabled items appear under Payroll with deduction tables.</span>
      </div>
    </div>

    <form method="post" action="{{ route('settings.payroll-rates.update') }}" class="payroll-rates-form">
      @csrf
      @method('PUT')

      <article class="rate-card rate-card--violet">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-shield-check"></i></span>
            <div>
              <h2 class="rate-card__title">EPF</h2>
              <p class="rate-card__desc">Staff deduction and company contribution rates.</p>
            </div>
          </div>
          <div class="rate-card__toggle-wrap">
            <span class="rate-card__toggle-label">Enable for payroll?</span>
            <div class="rate-toggle" role="group" aria-label="Enable EPF">
              <input type="hidden" name="epf_enabled" id="epf_enabled" value="{{ old('epf_enabled', $epf_enabled ? '1' : '0') }}">
              <button type="button" class="rate-toggle__btn {{ old('epf_enabled', $epf_enabled ? '1' : '0') === '1' ? 'is-active' : '' }}" data-rate-toggle="epf_enabled" data-value="1">Yes</button>
              <button type="button" class="rate-toggle__btn {{ old('epf_enabled', $epf_enabled ? '1' : '0') === '0' ? 'is-active' : '' }}" data-rate-toggle="epf_enabled" data-value="0">No</button>
            </div>
          </div>
        </div>
        <div class="rate-card__body">
          <div class="rate-field">
            <label class="rate-field__label" for="epf_staff_percent">
              <i class="bi bi-person" aria-hidden="true"></i>
              Staff % (deducted)
            </label>
            <div class="rate-field__control">
              <input type="number" id="epf_staff_percent" name="epf_staff_percent" min="0" max="100" step="0.01" required value="{{ old('epf_staff_percent', $epf_staff_percent) }}">
              <span class="rate-field__suffix">%</span>
            </div>
            <p class="rate-field__help">Deducted from staff salary (on basic only).</p>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="epf_company_percent">
              <i class="bi bi-briefcase" aria-hidden="true"></i>
              Company % (to pay)
            </label>
            <div class="rate-field__control">
              <input type="number" id="epf_company_percent" name="epf_company_percent" min="0" max="100" step="0.01" required value="{{ old('epf_company_percent', $epf_company_percent) }}">
              <span class="rate-field__suffix">%</span>
            </div>
            <p class="rate-field__help">Employer contribution on basic — not deducted from staff.</p>
          </div>
        </div>
      </article>

      <article class="rate-card rate-card--green">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-bank"></i></span>
            <div>
              <h2 class="rate-card__title">ETF</h2>
              <p class="rate-card__desc">Staff deduction and company contribution rates.</p>
            </div>
          </div>
          <div class="rate-card__toggle-wrap">
            <span class="rate-card__toggle-label">Enable for payroll?</span>
            <div class="rate-toggle" role="group" aria-label="Enable ETF">
              <input type="hidden" name="etf_enabled" id="etf_enabled" value="{{ old('etf_enabled', $etf_enabled ? '1' : '0') }}">
              <button type="button" class="rate-toggle__btn {{ old('etf_enabled', $etf_enabled ? '1' : '0') === '1' ? 'is-active' : '' }}" data-rate-toggle="etf_enabled" data-value="1">Yes</button>
              <button type="button" class="rate-toggle__btn {{ old('etf_enabled', $etf_enabled ? '1' : '0') === '0' ? 'is-active' : '' }}" data-rate-toggle="etf_enabled" data-value="0">No</button>
            </div>
          </div>
        </div>
        <div class="rate-card__body">
          <div class="rate-field">
            <label class="rate-field__label" for="etf_staff_percent">
              <i class="bi bi-person" aria-hidden="true"></i>
              Staff % (deducted)
            </label>
            <div class="rate-field__control">
              <input type="number" id="etf_staff_percent" name="etf_staff_percent" min="0" max="100" step="0.01" required value="{{ old('etf_staff_percent', $etf_staff_percent) }}">
              <span class="rate-field__suffix">%</span>
            </div>
            <p class="rate-field__help">Deducted from staff salary on basic only (usually 0%).</p>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="etf_company_percent">
              <i class="bi bi-briefcase" aria-hidden="true"></i>
              Company % (to pay)
            </label>
            <div class="rate-field__control">
              <input type="number" id="etf_company_percent" name="etf_company_percent" min="0" max="100" step="0.01" required value="{{ old('etf_company_percent', $etf_company_percent) }}">
              <span class="rate-field__suffix">%</span>
            </div>
            <p class="rate-field__help">Employer contribution on basic — not deducted from staff.</p>
          </div>
        </div>
      </article>

      <article class="rate-card rate-card--orange">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-file-earmark-text"></i></span>
            <div>
              <h2 class="rate-card__title">Tax</h2>
              <p class="rate-card__desc">Income tax / PAYE deducted from staff salary.</p>
            </div>
          </div>
          <div class="rate-card__toggle-wrap">
            <span class="rate-card__toggle-label">Enable for payroll?</span>
            <div class="rate-toggle" role="group" aria-label="Enable Tax">
              <input type="hidden" name="tax_enabled" id="tax_enabled" value="{{ old('tax_enabled', $tax_enabled ? '1' : '0') }}">
              <button type="button" class="rate-toggle__btn {{ old('tax_enabled', $tax_enabled ? '1' : '0') === '1' ? 'is-active' : '' }}" data-rate-toggle="tax_enabled" data-value="1">Yes</button>
              <button type="button" class="rate-toggle__btn {{ old('tax_enabled', $tax_enabled ? '1' : '0') === '0' ? 'is-active' : '' }}" data-rate-toggle="tax_enabled" data-value="0">No</button>
            </div>
          </div>
        </div>
        <div class="rate-card__body rate-card__body--single">
          <div class="rate-field">
            <label class="rate-field__label" for="tax_percent">
              <i class="bi bi-person" aria-hidden="true"></i>
              Staff % (deducted)
            </label>
            <div class="rate-field__control">
              <input type="number" id="tax_percent" name="tax_percent" min="0" max="100" step="0.01" required value="{{ old('tax_percent', $tax_percent) }}">
              <span class="rate-field__suffix">%</span>
            </div>
            <p class="rate-field__help">Deducted from staff. Company contribution is 0 for PAYE.</p>
          </div>
        </div>
      </article>

      <div class="payroll-rates-form__actions">
        <button type="submit" class="btn btn-primary payroll-rates-form__save">
          <i class="bi bi-floppy" aria-hidden="true"></i> Save rates
        </button>
      </div>
    </form>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/payroll-rates.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script>
    (function () {
      document.querySelectorAll('[data-rate-toggle]').forEach((btn) => {
        btn.addEventListener('click', () => {
          const name = btn.dataset.rateToggle;
          const value = btn.dataset.value;
          const hidden = document.getElementById(name);
          if (!hidden) return;
          hidden.value = value;
          btn.closest('.rate-toggle')?.querySelectorAll('[data-rate-toggle]').forEach((peer) => {
            const on = peer.dataset.value === value;
            peer.classList.toggle('is-active', on);
            peer.setAttribute('aria-pressed', on ? 'true' : 'false');
          });
        });
      });
    })();
  </script>
@endpush