{% load i18n %}

<!-- Inquiry Form -->
<div class="inquiry-form" id="inquiryFormContainer">
    <div class="form-section">
        <h3><i class="fas fa-question-circle"></i> {% trans "Inquiry Details" %}</h3>
        <p class="text-muted">{% trans "Ask a question or request information. We'll get back to you within 24-48 hours." %}</p>

        <!-- Contact Information -->
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="inquiry_name">
                        {% trans "Name" %} <span class="required-mark">*</span>
                    </label>
                    <input type="text"
                           class="form-control"
                           id="inquiry_name"
                           name="name"
                           maxlength="200"
                           placeholder="{% trans 'Your full name' %}"
                           required>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="inquiry_email">
                        {% trans "Email Address" %} <span class="required-mark">*</span>
                    </label>
                    <input type="email"
                           class="form-control"
                           id="inquiry_email"
                           name="email"
                           placeholder="your@email.com"
                           required>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="inquiry_phone">
                        {% trans "Phone Number" %} <span class="required-mark">*</span>
                    </label>
                    <input type="tel"
                           class="form-control"
                           id="inquiry_phone"
                           name="phone"
                           maxlength="20"
                           placeholder="{% trans 'Your phone number' %}"
                           required>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="inquiry_hospital">
                        {% trans "Hospital" %} <span class="required-mark">*</span>
                    </label>
                    <select class="form-control"
                            id="inquiry_hospital"
                            name="hospital"
                            required>
                        <option value="">{% trans "Select Hospital" %}</option>
                        {% for hospital in hospitals %}
                            <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <!-- Inquiry Details -->
        <div class="form-group mt-4">
            <label for="inquiry_category">
                {% trans "Category" %} <span class="required-mark">*</span>
            </label>
            <select class="form-control"
                    id="inquiry_category"
                    name="category"
                    required>
                <option value="">{% trans "Select Category" %}</option>
                <option value="general">{% trans "General Inquiry" %}</option>
                <option value="services">{% trans "Services Information" %}</option>
                <option value="appointments">{% trans "Appointments" %}</option>
                <option value="billing">{% trans "Billing & Insurance" %}</option>
                <option value="medical">{% trans "Medical Records" %}</option>
                <option value="other">{% trans "Other" %}</option>
            </select>
        </div>

        <div class="form-group mt-3">
            <label for="inquiry_subject">
                {% trans "Subject" %} <span class="required-mark">*</span>
            </label>
            <input type="text"
                   class="form-control"
                   id="inquiry_subject"
                   name="subject"
                   maxlength="200"
                   placeholder="{% trans 'Brief summary of your inquiry' %}"
                   required>
        </div>

        <div class="form-group mt-3">
            <label for="inquiry_message">
                {% trans "Message" %} <span class="required-mark">*</span>
            </label>
            <textarea class="form-control"
                      id="inquiry_message"
                      name="message"
                      rows="6"
                      placeholder="{% trans 'Please provide details about your inquiry' %}"
                      required></textarea>
        </div>

        <!-- Submit -->
        <div class="text-center mt-4">
            <button type="submit" class="btn btn-primary btn-lg" id="inquirySubmitBtn">
                <i class="fas fa-paper-plane"></i> {% trans "Submit Inquiry" %}
            </button>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // Get CSRF token
    function getCSRFToken() {
        const cookieValue = document.cookie
            .split('; ')
            .find(row => row.startsWith('csrftoken='))
            ?.split('=')[1];
        return cookieValue || $('[name="csrfmiddlewaretoken"]').val();
    }

    // Inquiry form submission
    $('#publicFormContainer').on('submit', '#inquiryFormContainer form', function(e) {
        e.preventDefault();

        const submitBtn = $('#inquirySubmitBtn');
        const originalText = submitBtn.html();

        submitBtn.prop('disabled', true).html(
            '<span class="spinner"></span> {% trans "Submitting..." %}'
        );

        const formData = new FormData(this);

        $.ajax({
            url: '{% url "core:public_inquiry_submit" %}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRFToken': getCSRFToken()
            },
            success: function(response) {
                if (response.success) {
                    $('#referenceNumber').text(response.reference_number);
                    $('#successModal').modal('show');

                    // Reset form
                    this.reset();

                    // Go back to landing page
                    $('#successModal').on('hidden.bs.modal', function() {
                        resetToSelection();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '{% trans "Error" %}',
                        text: response.message || '{% trans "Failed to submit inquiry. Please try again." %}'
                    });
                }
            },
            error: function(xhr) {
                let errorMessage = '{% trans "Failed to submit inquiry. Please try again." %}';

                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMessage = xhr.responseJSON.errors.join('\n');
                }

                Swal.fire({
                    icon: 'error',
                    title: '{% trans "Error" %}',
                    text: errorMessage
                });
            },
            complete: function() {
                submitBtn.prop('disabled', false).html(originalText);
            }
        });
    });
});
</script>