<div x-data="{ open: true, businessName: '', email: '', successMsg: '', loading: false }"
     x-show="open"
     class="">

    <!-- Modal Header -->
    <div class="flex flex-col items-center mb-6 relative w-full">
        <h2 class=" text-center text-xl font-semibold text-gray-800">Request Login Access</h2>

        <!-- Close button positioned at top-right outside the text flow -->
        <button style="    margin-top: -16px;
    margin-right: 8px;"
            @click="$dispatch('close-modal', 'request-dialog')"
            class="tex-gray-500 absolute -top-3 -right-8  hover:text-gray-700 text-xl leading-none"
            aria-label="Close"
        >
            ✕
        </button>
    </div>
    <!-- Form -->
    <form id="request-form" @submit.prevent="submitForm(); return false;">
        <input type="hidden" name="form_key" value="<?= $block->getFormKey() ?>">
        <script>
            function submitForm() {
                var form = document.getElementById('request-form');
                var formData = new FormData(form);
                fetch('<?= $block->getUrl('callprice/ajax/request') ?>', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => {
                        // Check if response is OK (status 200-299)
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }

                        // Try to parse JSON first
                        return response.text();  // Get response as text first
                    })
                    .then(responseText => {
                        // Try to parse the response as JSON
                        try {
                            var data = JSON.parse(responseText);  // Attempt to parse JSON
                            if (data.success) {
                                form.style.display = 'none';  // Hide the form
                                document.getElementById("success-message").style.display = 'flex';
                            } else {
                                document.getElementById("success-message").style.display = 'flex';
                                form.style.display = 'none';  // Hide the form

                         /*       console.error('Failed to send request', data.message);
                                alert('Failed to send request. Please try again.');
                         */   }
                        } catch (e) {
                            // If the response isn't JSON, treat as success (HTML response)
                            form.style.display = 'none';  // Hide the form
                            document.getElementById("success-message").style.display = 'flex';
                        }
                    })
                    .catch(error => {
                        console.error('Failed to send request1', error);
                    });
            }
        </script>

        <!-- Business Name -->
        <div class="mb-4">
            <label class="block text-lg font-medium text-gray-700 mb-1">Business Name</label>
            <input type="text" name="company"
                   autocomplete="organization" x-model="businessName" required
                   class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
        </div>

        <!-- Email -->
        <div class="mb-4">
            <label class="block text-lg font-medium text-gray-700 mb-1">Email</label>
            <input type="email" name="email"
                   autocomplete="email" x-model="email" required
                   class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
        </div>

        <!-- Submit Button -->
        <div class="flex justify-center">
            <button type="submit"
                    class="bg-primary-banyo text-white px-6 py-2 rounded text-base font-inter mt-4"
                    :disabled="loading">
                <span x-show="!loading">Send</span>
                <span x-show="loading">Sending...</span>
            </button>
        </div>
    </form>

    <!-- Success Message -->

    <!-- Success Message -->
    <div  style="display:none;"  id="success-message" class="p-6 bg-green-100 text-green-800 rounded-lg flex flex-col items-center">

        <!-- ✅ Circle with whit e check -->
        <div class="flex items-center justify-center w-16 h-16 rounded-full bg-green-500 mb-3">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
            </svg>
        </div>

        <!-- Success text -->
        <p x-text="successMsg" class="font-bold text-center text-lg">
        <p class="font-bold text-center text-lg">
            Request sent successfully!<br/>Once approved, we’ll send your login details to your email.
        <p>

    </div>
</div>
