{{--
    Subscription pricing block, shared by "add member" and "add subscription".

    The amount / discount / paid / due arithmetic is identical to the original
    inline scripts: picking a package fills the amount from the price list, a
    discount pre-fills paid with the remainder, and due is always
    amount - discount - paid. The server recomputes due regardless.
--}}
<div class="form-grid">
    <x-field label="Membership package" name="package_id" :required="true" span="4">
        <select id="package_id" name="package_id" class="select @error('package_id') is-invalid @enderror" required
                @error('package_id') aria-invalid="true" aria-describedby="package_id-error" @enderror>
            <option value="">Select a package…</option>
            @foreach ($packages as $key => $label)
                <option value="{{ $key }}" @selected(old('package_id') == $key)>{{ ucwords($label) }}</option>
            @endforeach
        </select>
    </x-field>

    <x-field label="Starting date" name="starting_date" :required="true" span="4">
        <div class="input-group">
            <input type="text" id="starting_date" name="starting_date"
                   class="input date-picker @error('starting_date') is-invalid @enderror"
                   value="{{ old('starting_date') }}" data-date-format="dd-mm-yyyy"
                   placeholder="dd-mm-yyyy" readonly required>
            <span class="input-group__addon" aria-hidden="true"><i class="fa-solid fa-calendar-days"></i></span>
        </div>
    </x-field>

    <x-field label="Payment date" name="payment_date" span="4" hint="Defaults to today">
        <div class="input-group">
            <input type="text" id="payment_date" name="payment_date"
                   class="input date-picker @error('payment_date') is-invalid @enderror"
                   value="{{ old('payment_date') }}" data-date-format="dd-mm-yyyy"
                   placeholder="dd-mm-yyyy" readonly>
            <span class="input-group__addon" aria-hidden="true"><i class="fa-solid fa-calendar-days"></i></span>
        </div>
    </x-field>

    <x-field label="Amount" name="amount" :required="true" span="3" hint="Set by the package">
        <input type="text" id="amount" name="amount" class="input @error('amount') is-invalid @enderror"
               value="{{ old('amount') }}" inputmode="decimal" readonly required>
    </x-field>

    <x-field label="Discount" name="discount" span="3">
        <input type="text" id="discount" name="discount" class="input @error('discount') is-invalid @enderror"
               value="{{ old('discount') }}" inputmode="decimal" placeholder="0">
    </x-field>

    <x-field label="Paid" name="paid" :required="true" span="3">
        <input type="text" id="paid" name="paid" class="input @error('paid') is-invalid @enderror"
               value="{{ old('paid') }}" inputmode="decimal" required
               @error('paid') aria-invalid="true" aria-describedby="paid-error" @enderror>
    </x-field>

    <x-field label="Due" name="due" span="3" hint="Calculated">
        <input type="text" id="due" name="due" class="input" value="{{ old('due') }}" inputmode="decimal" readonly>
    </x-field>
</div>

@push('scripts')
<script>
    (function () {
        const prices = @json($packages_price);
        const el = (id) => document.getElementById(id);
        const packageSelect = el('package_id');
        const amount = el('amount');
        const discount = el('discount');
        const paid = el('paid');
        const due = el('due');

        if (!packageSelect || !amount) return;

        packageSelect.addEventListener('change', function () {
            amount.value = prices[this.value] ?? '';
            discount.value = 0;
            paid.value = 0;
            due.value = 0;
        });

        discount.addEventListener('keyup', function () {
            const total = parseInt(amount.value, 10);
            const off = parseInt(this.value, 10);

            if (off < total) {
                paid.value = total - off;
                due.value = 0;
            } else {
                discount.value = '';
                paid.value = '';
            }
        });

        paid.addEventListener('keyup', function () {
            const total = parseInt(amount.value, 10);
            const off = parseInt(discount.value, 10);
            due.value = total - off - this.value;
        });
    })();
</script>
@endpush