@php
    /** $action, $event, $heading, $note, $who (optional), $party (optional: ask for the retailer's details), $bulk (optional: output and who to include), $v = discount, security, ba, target, cap, place */
    $fieldClass = 'mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $plain = fn ($n) => rtrim(rtrim(number_format((float) $n, 2, '.', ''), '0'), '.') ?: '0';
@endphp
<div x-data="{ open: false }" x-on:{{ $event }}.window="open = true" x-on:keydown.escape.window="open = false" x-show="open" x-cloak style="display:none" class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0">
    <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/75" x-on:click="open = false"></div>
    <div class="relative mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl sm:w-full sm:max-w-2xl sm:mx-auto">
        <form method="GET" action="{{ $action }}" target="_blank" x-on:submit="open = false" class="p-6 space-y-4">
            <h3 class="text-base font-bold text-gray-900 dark:text-white">{{ $heading }}</h3>
            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $note }}</p>
            @if (! empty($who))
                <p class="text-xs text-gray-600 dark:text-gray-300 rounded-md bg-gray-50 dark:bg-gray-900/40 px-3 py-2">{{ $who }}</p>
            @endif

            @if (! empty($bulk))
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 rounded-md border border-gray-100 dark:border-gray-700 p-3">
                    <div>
                        <x-input-label for="ag_format" value="Output" />
                        <select id="ag_format" name="format" class="{{ $fieldClass }}">
                            <option value="zip">Separate PDF for each customer (ZIP)</option>
                            <option value="pdf">One PDF, one page per customer</option>
                        </select>
                    </div>
                    <label class="flex items-end gap-2 text-sm text-gray-700 dark:text-gray-300 pb-2">
                        <input type="checkbox" name="include_distributors" value="1" class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500">
                        Also make them for distributors
                    </label>
                </div>
            @endif

            @if (! empty($party))
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 rounded-md border border-gray-100 dark:border-gray-700 p-3">
                    <div class="sm:col-span-2 text-xs text-gray-500 dark:text-gray-400">Retailer's details. Anything left blank prints as a line to write on by hand.</div>
                    <div><x-input-label for="ag_party_name" value="Retailer / shop name" /><input id="ag_party_name" name="party_name" type="text" maxlength="150" class="{{ $fieldClass }}"></div>
                    <div><x-input-label for="ag_party_contact" value="Contact person" /><input id="ag_party_contact" name="party_contact" type="text" maxlength="150" class="{{ $fieldClass }}"></div>
                    <div class="sm:col-span-2"><x-input-label for="ag_party_address" value="Address" /><input id="ag_party_address" name="party_address" type="text" maxlength="500" class="{{ $fieldClass }}"></div>
                    <div><x-input-label for="ag_party_gstin" value="GSTIN (optional)" /><input id="ag_party_gstin" name="party_gstin" type="text" maxlength="20" class="{{ $fieldClass }}"></div>
                    <div><x-input-label for="ag_party_phone" value="Phone" /><input id="ag_party_phone" name="party_phone" type="text" maxlength="30" class="{{ $fieldClass }}"></div>
                </div>
            @endif

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div><x-input-label for="ag_discount" value="Flat discount on MRP (%)" /><input id="ag_discount" name="discount" type="number" step="0.01" min="0" max="100" value="{{ $plain($v['discount']) }}" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_security" value="Security cheque amount" /><input id="ag_security" name="security_amount" type="number" step="0.01" min="0" value="{{ $plain($v['security']) }}" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_ba" value="BA (Beauty Advisor) salary per month" /><input id="ag_ba" name="ba_amount" type="number" step="0.01" min="0" value="{{ $plain($v['ba']) }}" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_target" value="Monthly billing for the BA salary" /><input id="ag_target" name="ba_target" type="number" step="0.01" min="0" value="{{ $plain($v['target']) }}" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_credit" value="Bills on credit before the previous is cleared" /><input id="ag_credit" name="credit_bills" type="number" min="1" max="12" value="1" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_replace" value="Replacement request, months before expiry" /><input id="ag_replace" name="replace_months" type="number" min="1" max="12" value="1" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_cheque" value="Cheque number (optional)" /><input id="ag_cheque" name="cheque_number" type="text" maxlength="50" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_bank" value="Cheque bank (optional)" /><input id="ag_bank" name="cheque_bank" type="text" maxlength="100" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_date" value="Agreement date" /><input id="ag_date" name="agreement_date" type="date" value="{{ now()->toDateString() }}" class="{{ $fieldClass }}"></div>
                <div><x-input-label for="ag_place" value="Place (optional)" /><input id="ag_place" name="place" type="text" maxlength="100" value="{{ $v['place'] ?? '' }}" class="{{ $fieldClass }}"></div>
            </div>

            <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                <input type="hidden" name="ba_cap" value="0">
                <input type="checkbox" name="ba_cap" value="1" @checked($v['cap']) class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500">
                BA salary stays fixed once the monthly billing is reached (does not keep growing)
            </label>

            <div class="flex justify-end gap-3 pt-2">
                <button type="button" x-on:click="open = false" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition">Generate</button>
            </div>
        </form>
    </div>
</div>