@php
  $typeLabel = strtoupper($statutoryType ?? 'EPF');
  $payRouteName = ($statutoryType ?? 'epf') === 'etf' ? 'account.etf.pay' : 'account.epf.pay';
@endphp

@if ($canManage ?? false)
  <div class="modal fade" id="statutoryPayModal" tabindex="-1" aria-labelledby="statutoryPayModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form method="post" id="statutory-pay-form" action="#">
          @csrf
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="statutoryPayModalLabel">Pay {{ $typeLabel }}</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-3 text-muted" id="statutory-pay-summary">—</p>
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label" for="statutory_pay_date">Pay date</label>
                <input type="date" class="form-control" id="statutory_pay_date" name="pay_date" required>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="statutory_pay_from">Pay from</label>
                <select class="form-select" id="statutory_pay_from" name="pay_from" required>
                  <option value="cash_book">Cash book</option>
                  <option value="bank_account">Bank account</option>
                </select>
              </div>
              <div class="col-12" data-pay-source="cash_book">
                <label class="form-label" for="statutory_cash_book_id">Cash book</label>
                <select class="form-select" id="statutory_cash_book_id" name="cash_book_id">
                  <option value="">Select cash book</option>
                  @foreach ($cashBooks as $book)
                    <option value="{{ $book->id }}">{{ $book->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-12 d-none" data-pay-source="bank_account">
                <label class="form-label" for="statutory_bank_account_id">Bank account</label>
                <select class="form-select" id="statutory_bank_account_id" name="bank_account_id">
                  <option value="">Select bank account</option>
                  @foreach ($bankAccounts as $account)
                    <option value="{{ $account->id }}">
                      {{ $account->bank?->name ? $account->bank->name.' · ' : '' }}{{ $account->name }}
                    </option>
                  @endforeach
                </select>
              </div>
            </div>
            <p class="form-text mb-0 mt-3">
              Pays <strong>staff deducted + company contribution</strong> as one Out entry (category {{ $typeLabel }}).
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary"><i class="bi bi-cash-coin"></i> Pay {{ $typeLabel }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endif

@push('scripts')
  <script>
    (function () {
      const form = document.getElementById('statutory-pay-form');
      if (!form) return;

      function syncPayFrom() {
        const payFrom = form.querySelector('[name="pay_from"]')?.value || 'cash_book';
        form.querySelectorAll('[data-pay-source]').forEach((wrap) => {
          const show = wrap.dataset.paySource === payFrom;
          wrap.classList.toggle('d-none', !show);
          const select = wrap.querySelector('select');
          if (select) select.required = show;
        });
      }

      form.querySelector('[name="pay_from"]')?.addEventListener('change', syncPayFrom);

      document.addEventListener('click', (e) => {
        const btn = e.target.closest('[data-statutory-pay]');
        if (!btn) return;
        e.preventDefault();
        form.action = btn.dataset.payUrl || '#';
        const dateInput = form.querySelector('[name="pay_date"]');
        if (dateInput) dateInput.value = new Date().toISOString().slice(0, 10);
        const fromSelect = form.querySelector('[name="pay_from"]');
        if (fromSelect) fromSelect.value = 'cash_book';
        syncPayFrom();
        const summary = document.getElementById('statutory-pay-summary');
        if (summary) {
          summary.textContent =
            (btn.dataset.staffName || 'Staff') +
            ' · ' +
            (btn.dataset.month || '') +
            ' · Total ' +
            (btn.dataset.total || '0.00');
        }
        bootstrap.Modal.getOrCreateInstance(document.getElementById('statutoryPayModal')).show();
      });
    })();
  </script>
@endpush