@if ($whatsappConfirmationId)
    <div class="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center p-3" style="z-index: 1055; background: rgba(0,0,0,.5)" role="dialog" aria-modal="true" aria-labelledby="whatsapp-confirm-title" x-data x-trap.inert.noscroll="true">
        <div class="card shadow" style="width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto">
            <div class="card-body">
                <h5 id="whatsapp-confirm-title">{{ __('Send WhatsApp confirmation?') }}</h5>
                <p class="text-muted">{{ __('Sale saved. Send this message to the customer?') }}</p>
                <p><strong>{{ __('Customer mobile') }}:</strong> <span dir="ltr">{{ $whatsappRecipient }}</span></p>
                <div class="bg-light border rounded p-3 mb-3" style="white-space: pre-wrap; overflow-wrap: anywhere">{{ $whatsappPreviewMessage }}</div>
                <div class="d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-outline-secondary" wire:click="skipSaleWhatsApp" wire:loading.attr="disabled">{{ __('Skip') }}</button>
                    <button type="button" class="btn btn-success" wire:click="sendSaleWhatsApp" wire:loading.attr="disabled">{{ __('Send WhatsApp') }}</button>
                </div>
            </div>
        </div>
    </div>
@endif