{# Comeback Cash Quick Redeem Modal - For use from anywhere in workspace #}
{# Compact modal for quick coupon validation and redemption #}

<div class="modal fade" id="comebackCashRedeemModal" tabindex="-1" role="dialog" aria-labelledby="comebackCashRedeemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title" id="comebackCashRedeemModalLabel">
                    <i class="fa fa-ticket"></i> Redeem Comeback Cash
                </h4>
            </div>
            <div class="modal-body">
                {# Input Section #}
                <div class="quick-redeem-input" id="quickRedeemInput">
                    <div class="mb-3">
                        <label for="quickCouponCode">Coupon Code</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="fa fa-barcode"></i></span>
                            <input type="text" class="form-control" id="quickCouponCode"
                                   placeholder="Scan or enter code..." autofocus autocomplete="off" maxlength="20">
                        </div>
                        <p class="form-text">Position cursor and scan barcode, or type code manually</p>
                    </div>
                </div>

                {# Result Section - Initially Hidden #}
                <div class="quick-redeem-result" id="quickRedeemResult" style="display: none;">
                    {# Valid Coupon #}
                    <div class="quick-result-valid" id="quickResultValid" style="display: none;">
                        <div class="text-center">
                            <div class="result-icon-sm text-success">
                                <i class="fa fa-check-circle fa-3x"></i>
                            </div>
                            <h4 class="coupon-value-display">$<span id="quickCouponValue">0.00</span></h4>
                            <p class="text-muted" id="quickCouponCustomer">Customer Name</p>
                        </div>

                        <div class="coupon-details-compact">
                            <div class="detail-row">
                                <span class="detail-label">Event:</span>
                                <span class="detail-value" id="quickCouponEvent">--</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">Expires:</span>
                                <span class="detail-value" id="quickCouponExpiry">--</span>
                            </div>
                        </div>

                        {# Min Purchase Check #}
                        <div class="min-purchase-section" id="quickMinPurchase" style="display: none;">
                            <div class="alert alert-info alert-sm">
                                <i class="fa fa-info-circle"></i>
                                Minimum purchase: $<span id="quickMinAmount">0.00</span>
                            </div>
                            <div class="mb-3">
                                <label for="quickTransactionAmount">Transaction Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="quickTransactionAmount"
                                           placeholder="0.00" min="0" step="0.01">
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Invalid/Error States #}
                    <div class="quick-result-error" id="quickResultError" style="display: none;">
                        <div class="text-center">
                            <div class="result-icon-sm text-danger">
                                <i class="fa fa-times-circle fa-3x"></i>
                            </div>
                            <h4 class="error-title" id="quickErrorTitle">Invalid Code</h4>
                            <p class="text-muted" id="quickErrorMessage">This coupon code is not valid.</p>
                        </div>
                    </div>

                    {# Success Confirmation #}
                    <div class="quick-result-success" id="quickResultSuccess" style="display: none;">
                        <div class="text-center">
                            <div class="result-icon-sm text-success">
                                <i class="fa fa-check-circle fa-4x"></i>
                            </div>
                            <h4>Redeemed!</h4>
                            <p class="redeem-amount">$<span id="quickRedeemedAmount">0.00</span> applied</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="quickRedeemFooter">
                {# Initial State #}
                <div class="footer-state footer-initial" id="footerInitial">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="quickValidateBtn">
                        <i class="fa fa-search"></i> Validate
                    </button>
                </div>

                {# Valid Coupon State #}
                <div class="footer-state footer-valid" id="footerValid" style="display: none;">
                    <button type="button" class="btn btn-secondary" id="quickCancelBtn">
                        <i class="fa fa-arrow-left"></i> Back
                    </button>
                    <button type="button" class="btn btn-success" id="quickRedeemBtn">
                        <i class="fa fa-check"></i> Redeem
                    </button>
                </div>

                {# Error State #}
                <div class="footer-state footer-error" id="footerError" style="display: none;">
                    <button type="button" class="btn btn-secondary" id="quickTryAgainBtn">
                        <i class="fa fa-refresh"></i> Try Again
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>

                {# Success State #}
                <div class="footer-state footer-success" id="footerSuccess" style="display: none;">
                    <button type="button" class="btn btn-primary" id="quickRedeemAnotherBtn">
                        <i class="fa fa-plus"></i> Redeem Another
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
                </div>
            </div>
        </div>
    </div>
</div>