{% load i18n %}

<!-- Inquiry Form - PX360 Styled -->
<div class="inquiry-form" id="inquiryFormContainer">
    <form id="inquiryForm" data-loading data-loading-text="{% trans 'Submitting...' %}">
        {% csrf_token %}

        <!-- Header -->
        <div class="mb-8 p-6 bg-gradient-to-br from-blue-50 to-light rounded-2xl border-2 border-blue/10">
            <h3 class="text-2xl font-bold text-navy mb-2 flex items-center gap-3">
                <i data-lucide="help-circle" class="w-7 h-7 text-blue-600"></i>
                {% trans "Inquiry Details" %}
            </h3>
            <p class="text-slate text-sm leading-relaxed">{% trans "Ask a question or request information. We'll get back to you within 24-48 hours." %}</p>
        </div>

        <!-- Contact Information -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
            <div>
                <label for="inquiry_name" class="block text-sm font-semibold text-navy mb-2">
                    {% trans "Name" %} <span class="text-red-500">*</span>
                </label>
                <input type="text" id="inquiry_name" name="name" required
                       class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition form-input"
                       placeholder="{% trans 'Your full name' %}">
            </div>
            <div>
                <label for="inquiry_email" class="block text-sm font-semibold text-navy mb-2">
                    {% trans "Email Address" %} <span class="text-red-500">*</span>
                </label>
                <input type="email" id="inquiry_email" name="email" required
                       class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition form-input"
                       placeholder="your@email.com">
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
            <div>
                <label for="inquiry_phone" class="block text-sm font-semibold text-navy mb-2">
                    {% trans "Phone Number" %} <span class="text-red-500">*</span>
                </label>
                <input type="tel" id="inquiry_phone" name="phone" maxlength="20" required
                       class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition form-input"
                       placeholder="{% trans 'Your phone number' %}">
            </div>
            <div>
                <label for="inquiry_hospital" class="block text-sm font-semibold text-navy mb-2">
                    {% trans "Hospital" %} <span class="text-red-500">*</span>
                </label>
                <select id="inquiry_hospital" name="hospital" required
                        class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition bg-white form-input">
                    <option value="">{% trans "Select Hospital" %}</option>
                    {% for hospital in hospitals %}
                        <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <!-- Category -->
        <div class="mb-5">
            <label for="inquiry_category" class="block text-sm font-semibold text-navy mb-2">
                {% trans "Category" %} <span class="text-red-500">*</span>
            </label>
            <select id="inquiry_category" name="category" required
                    class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition bg-white form-input">
                <option value="">{% trans "Select Category" %}</option>
                <option value="general">{% trans "General Inquiry" %}</option>
                <option value="appointment">{% trans "Appointments" %}</option>
                <option value="billing">{% trans "Billing & Insurance" %}</option>
                <option value="medical_records">{% trans "Medical Records" %}</option>
                <option value="pharmacy">{% trans "Pharmacy" %}</option>
                <option value="insurance">{% trans "Insurance" %}</option>
                <option value="feedback">{% trans "Feedback" %}</option>
                <option value="other">{% trans "Other" %}</option>
            </select>
        </div>

        <!-- Subject -->
        <div class="mb-5">
            <label for="inquiry_subject" class="block text-sm font-semibold text-navy mb-2">
                {% trans "Subject" %} <span class="text-red-500">*</span>
            </label>
            <input type="text" id="inquiry_subject" name="subject" maxlength="200" required
                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition form-input"
                   placeholder="{% trans 'Brief subject of your inquiry' %}">
        </div>

        <!-- Message -->
        <div class="mb-6">
            <label for="inquiry_message" class="block text-sm font-semibold text-navy mb-2">
                {% trans "Message" %} <span class="text-red-500">*</span>
            </label>
            <textarea id="inquiry_message" name="message" rows="6" required
                      class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue/20 focus:border-blue transition resize-none form-input"
                      placeholder="{% trans 'Please describe your inquiry in detail...' %}"></textarea>
        </div>

        <!-- Submit Button -->
        <div class="text-center pt-6 border-t border-slate-100">
            <button type="submit" id="inquirySubmitBtn"
                    class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-10 py-4 rounded-xl font-bold hover:shadow-xl transition inline-flex items-center gap-2 shadow-lg shadow-blue/30 btn-hover">
                <i data-lucide="send" class="w-5 h-5"></i>
                {% trans "Submit Inquiry" %}
            </button>
        </div>
    </form>
</div>

<script>
// Inquiry form submission handler
document.getElementById('inquiryForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const submitBtn = document.getElementById('inquirySubmitBtn');
    const originalHTML = submitBtn.innerHTML;

    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="inline-block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>{% trans "Submitting..." %}';

    const formData = new FormData(this);

    fetch('/core/public/inquiry/submit/', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': document.querySelector('[name="csrfmiddlewaretoken"]').value
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: '{% trans "Submitted Successfully!" %}',
                    html: '{% trans "Your reference number is: " %}<br><strong class="text-2xl text-navy mt-2">' + data.reference_number + '</strong>',
                    confirmButtonColor: '#005696'
                });
            }
            this.reset();
        } else {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: '{% trans "Error" %}',
                    text: data.message || '{% trans "Failed to submit. Please try again." %}'
                });
            }
        }
    })
    .catch(error => {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'error',
                title: '{% trans "Error" %}',
                text: '{% trans "Failed to submit. Please try again." %}'
            });
        }
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalHTML;
    });
});
</script>
