{{--
    Shared void dialog for the Billings list, the billing detail page and the
    POS payments list. One modal per page; the Void buttons call
    openVoidModal(...) to point it at the right record.

    @param bool $hasVoidAuthorizer  false when the company has no owner with a
                                    void code set, in which case no void can
                                    ever succeed and we say so instead of
                                    asking for a code.
--}}
<div class="modal fade" id="voidBillingModal" tabindex="-1" aria-labelledby="voidBillingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" id="voidBillingForm">
            @csrf
            <input type="hidden" name="redirect_to" id="voidRedirectTo" value="">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="voidBillingModalLabel">
                        <i class="fas fa-ban me-2"></i>Void Billing
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        You are voiding <strong id="voidBillingNumber">-</strong>
                        for <strong id="voidClientName">-</strong>.
                        <div class="mt-2 small mb-0">
                            Every payment collected against this billing will be reversed:
                            the amounts drop out of collections and reports, and the client's
                            outstanding balance is restored. This cannot be undone in the app.
                        </div>
                        <div class="mt-2 mb-0" id="voidAmountLine" style="display:none;">
                            Amount to be reversed: <strong id="voidAmountPaid">₱0.00</strong>
                        </div>
                    </div>

                    @if ($hasVoidAuthorizer ?? false)
                        <div class="mb-3">
                            <label for="void_reason" class="form-label">Reason <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="void_reason" name="void_reason" rows="2"
                                      maxlength="500" required
                                      placeholder="e.g. Wrong meter reading encoded, duplicate billing"></textarea>
                        </div>

                        <div class="mb-1">
                            <label for="void_code" class="form-label">
                                Owner Authorization Code <span class="text-danger">*</span>
                            </label>
                            <input type="password" class="form-control form-control-lg text-center"
                                   id="void_code" name="void_code"
                                   inputmode="numeric" pattern="[0-9]{6}" maxlength="6" minlength="6"
                                   autocomplete="off" required placeholder="••••••"
                                   style="letter-spacing: .5rem;">
                            <small class="form-text text-muted">
                                The 6-digit code from the company owner's account. Every void
                                needs owner approval.
                            </small>
                        </div>
                    @else
                        <div class="alert alert-danger mb-0">
                            <i class="fas fa-lock me-2"></i>
                            No company owner has set a void authorization code yet.
                            A user with the <strong>Company Owner</strong> role must set their
                            6-digit code before any billing can be voided.
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-dismiss="modal">Cancel</button>
                    @if ($hasVoidAuthorizer ?? false)
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-ban me-1"></i>Void Billing
                        </button>
                    @endif
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // The Angle template makes .wrapper (.modal-open .wrapper { z-index: 0 })
    // and .section-container (z-index: 111) stacking contexts, and this modal
    // is included from the page content, inside both. Bootstrap appends the
    // backdrop straight to <body>, so from there it paints over the whole
    // wrapper - the dark overlay covers the site and the dialog sits behind it.
    // Re-parenting the modal to <body> puts it back above the backdrop.
    // (Careful with Blade directive names in these comments: Blade compiles
    // them even inside a script block.)
    function moveVoidModalToBody() {
        var modalEl = document.getElementById('voidBillingModal');
        if (modalEl && modalEl.parentNode !== document.body) {
            document.body.appendChild(modalEl);
        }
        return modalEl;
    }
    moveVoidModalToBody();

    // Point the single modal at a specific record before opening it.
    function openVoidModal(action, billingNumber, clientName, amountPaid, redirectTo) {
        moveVoidModalToBody();

        var form = document.getElementById('voidBillingForm');
        form.action = action;
        document.getElementById('voidRedirectTo').value = redirectTo || '';
        document.getElementById('voidBillingNumber').textContent = '#' + billingNumber;
        document.getElementById('voidClientName').textContent = clientName;

        var amountLine = document.getElementById('voidAmountLine');
        var amount = parseFloat(amountPaid || 0);
        if (amount > 0) {
            document.getElementById('voidAmountPaid').textContent =
                '₱' + amount.toLocaleString('en-PH', {minimumFractionDigits: 2, maximumFractionDigits: 2});
            amountLine.style.display = '';
        } else {
            amountLine.style.display = 'none';
        }

        var reason = document.getElementById('void_reason');
        var code = document.getElementById('void_code');
        if (reason) reason.value = '';
        if (code) code.value = '';

        var modalEl = document.getElementById('voidBillingModal');
        if (window.bootstrap && window.bootstrap.Modal) {
            window.bootstrap.Modal.getOrCreateInstance(modalEl).show();
        } else if (window.jQuery && window.jQuery.fn.modal) {
            window.jQuery(modalEl).modal('show');
        }
    }

    // Digits only, so the 6-digit rule is met before the request is sent.
    document.addEventListener('DOMContentLoaded', function () {
        var code = document.getElementById('void_code');
        if (code) {
            code.addEventListener('input', function () {
                this.value = this.value.replace(/\D/g, '').slice(0, 6);
            });
        }
    });
</script>