@php
    $tax = $tax ?? null;
@endphp

<div class="row g-3 billing-tax-form">
    <div class="col-md-6">
        <label class="form-label" for="tax_name">Tax name</label>
        <input type="text" name="name" id="tax_name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $tax?->name) }}" required>
        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6">
        <label class="form-label" for="tax_rate">Percent</label>
        <input type="number" name="rate" id="tax_rate" class="form-control @error('rate') is-invalid @enderror" value="{{ old('rate', $tax?->rate) }}" step="0.01" min="0" max="100" placeholder="0" required>
        @error('rate')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-12">
        <div class="form-check">
            <input type="hidden" name="has_surcharge" value="0">
            <input class="form-check-input" type="checkbox" name="has_surcharge" value="1" id="has_surcharge" @checked(old('has_surcharge', $tax?->has_surcharge))>
            <label class="form-check-label" for="has_surcharge">Has surcharge</label>
        </div>
    </div>
    <div class="col-md-6 {{ old('has_surcharge', $tax?->has_surcharge) ? '' : 'd-none' }}" id="surcharge-rate-wrap">
        <label class="form-label" for="surcharge_rate">Surcharge percent</label>
        <input type="number" name="surcharge_rate" id="surcharge_rate" class="form-control @error('surcharge_rate') is-invalid @enderror" value="{{ old('surcharge_rate', $tax?->surcharge_rate) }}" step="0.01" min="0" max="100" placeholder="0">
        @error('surcharge_rate')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-12">
        <div class="form-check">
            <input type="hidden" name="is_selectable" value="0">
            <input class="form-check-input billing-pref-switch" type="checkbox" name="is_selectable" value="1" id="is_selectable" @checked(old('is_selectable', $tax?->is_selectable ?? true))>
            <label class="form-check-label" for="is_selectable">Can be selected in Invoices &amp; Items</label>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    const checkbox = document.getElementById('has_surcharge');
    const wrap = document.getElementById('surcharge-rate-wrap');
    checkbox?.addEventListener('change', () => wrap?.classList.toggle('d-none', !checkbox.checked));
})();
</script>
@endpush