@props(['accountSelectId', 'submitButtonId', 'amount'])

<!-- Modal d'avertissement solde insuffisant -->
<div id="insufficient-balance-modal" class="hidden fixed inset-0 z-[60] overflow-y-auto" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen px-4 py-4 text-center">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="document.getElementById('insufficient-balance-modal').classList.add('hidden')"></div>

        <div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-10">
            <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-yellow-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">Solde insuffisant</h3>
                        <div class="mt-2">
                            <p id="insufficient-balance-message" class="text-sm text-gray-500 whitespace-pre-line"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-4 py-3 bg-gray-50 sm:px-6">
                <div class="flex gap-3">
                    <button type="button" id="insufficient-balance-cancel" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                        Annuler
                    </button>
                    <button type="button" id="insufficient-balance-continue" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-yellow-600 border border-transparent rounded-lg hover:bg-yellow-700">
                        Continuer quand même
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        const accountSelectId = '{{ $accountSelectId }}';
        const submitButtonId = '{{ $submitButtonId }}';
        const amount = {{ $amount }};
        
        document.addEventListener('DOMContentLoaded', function() {
            const accountSelect = document.getElementById(accountSelectId);
            if (accountSelect) {
                accountSelect.addEventListener('change', function() {
                    const selectedOption = this.options[this.selectedIndex];
                    const balance = parseFloat(selectedOption.dataset.balance || 0);
                    
                    if (balance < amount && selectedOption.value) {
                        document.getElementById('insufficient-balance-message').textContent = `Le solde du compte sélectionné (${balance.toFixed(3)} TND) est insuffisant pour le montant (${amount.toFixed(3)} TND).\n\nVoulez-vous continuer quand même ?`;
                        document.getElementById('insufficient-balance-modal').classList.remove('hidden');
                        document.getElementById(submitButtonId).disabled = true;
                    } else {
                        document.getElementById(submitButtonId).disabled = false;
                    }
                });
            }
            
            document.getElementById('insufficient-balance-cancel')?.addEventListener('click', function() {
                document.getElementById('insufficient-balance-modal').classList.add('hidden');
                document.getElementById(accountSelectId).value = '';
                document.getElementById(submitButtonId).disabled = true;
            });
            
            document.getElementById('insufficient-balance-continue')?.addEventListener('click', function() {
                document.getElementById('insufficient-balance-modal').classList.add('hidden');
                document.getElementById(submitButtonId).disabled = false;
            });
        });
    })();
</script>