<div class="modal fade" id="{{ $modalId }}" tabindex="-1">
@php($canCreateCoaAccount = $canCreateCoaAccount ?? false)
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">{{ $title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ $formAction }}" id="{{ $formId }}" class="sc-component-form">
                @csrf
                @if(!empty($isEdit)) @method('PUT') @endif
                <div class="modal-body pt-2">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control sc-name" required maxlength="120"
                                   value="{{ old('name') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Type <span class="text-danger">*</span></label>
                            <select name="type" class="form-select sc-type" required>
                                <option value="">— Select —</option>
                                @foreach(\App\Support\SalaryComponentOptions::types() as $value => $label)
                                <option value="{{ $value }}" {{ old('type') === $value ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Sub Type</label>
                            <select name="sub_type" class="form-select sc-sub-type" required>
                                <option value="">Select sub type</option>
                            </select>
                        </div>

                        <div class="col-12 sc-expense-wrap d-none">
                            <label class="form-label fw-semibold">Expense Ledger <span class="text-danger">*</span></label>
                            @include('payroll.salary-components._account-picker', [
                                'name' => 'expense_account_id',
                                'value' => old('expense_account_id'),
                                'listKey' => 'expense',
                                'placeholder' => 'Select account...',
                                'pickerClass' => 'sc-expense-picker',
                                'inputClass' => 'sc-expense-account',
                                'required' => true,
                                'allowAddNew' => !empty($canCreateCoaAccount),
                            ])
                            <div class="form-text">Used as the Debit line in the payroll journal entry for this component.</div>
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-semibold sc-liability-label">Liability Ledger <span class="text-danger">*</span></label>
                            @include('payroll.salary-components._account-picker', [
                                'name' => 'liability_account_id',
                                'value' => old('liability_account_id'),
                                'listKey' => 'liability',
                                'placeholder' => 'Select liability account...',
                                'pickerClass' => 'sc-liability-picker',
                                'inputClass' => 'sc-liability-account',
                                'required' => true,
                                'allowAddNew' => !empty($canCreateCoaAccount),
                            ])
                            <div class="form-text sc-liability-help">Used as the Credit line in the payroll journal entry for this component.</div>
                        </div>

                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input sc-inactive" type="checkbox" name="is_inactive" value="1" id="{{ $modalId }}Inactive"
                                       {{ old('is_inactive') ? 'checked' : '' }}>
                                <label class="form-check-label" for="{{ $modalId }}Inactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
