{% extends "whm/base.html" %}
{% block title %}Composer{% endblock title %}
{% block content %}
<div class="row">
    <div class="col-12 col-md-8 col-lg-6">
        <div class="card shadow rounded-3 border-0">
            <div class="card-header bg-primary text-white text-center">
                <h4 class="mb-0">Composer</h4>
            </div>
            <div class="card-body text-center">
                <img src="/media/icon/composer.png" alt="Composer Logo" class="img-fluid my-4" style="max-width: 180px;">

                {% if install_available %}
                    <div class="alert alert-success rounded-3 py-3 px-4 mx-auto" role="alert" style="max-width: 500px;">
                        <strong>Composer is already installed.</strong><br>
                        You can start using it from your <strong class="text-decoration-underline">user dashboard</strong>.<br>
                       
                    </div>
                {% else %}
                    <div class="alert alert-danger rounded-3 py-3 px-4 mx-auto" role="alert" style="max-width: 500px;">
                        Composer is not installed yet.
                    </div>
                    <div class="form-group mt-3">
                        <button id="save" class="btn btn-primary btn-lg">Install Composer</button>
                    </div>
                {% endif %}

                <div class="form-group d-none">
                    {% csrf_token %}
                </div>

                <div id="responseContainer" class="sk-wave my-4" style="display: none;">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>

                <div id="alertContainer" class="alert alert-success alert-dismissible fade show mt-3" role="alert" style="display: none;">
                    <div id="message"></div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
document.getElementById('save').addEventListener('click', function(event) {
    event.preventDefault();
    install_soft();
});

function install_soft() {
    const responseDisplay = document.getElementById('responseContainer');
    const alertContainer = document.getElementById('alertContainer');
    const messageDisplay = document.getElementById('message');
    const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;

    responseDisplay.style.display = 'inline-block';

    fetch("{% url 'install_composer' %}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': csrfToken
        },
        body: new URLSearchParams({ 'domain': "ok" }) // optional payload
    })
    .then(response => response.json())
    .then(data => {
        responseDisplay.style.display = 'none';

        if (data.status === 'success') {
            alertContainer.className = "alert alert-success alert-dismissible fade show";
            messageDisplay.innerText = typeof data.message === 'object' 
                ? JSON.stringify(data.message, null, 2) 
                : data.message || "Composer installed successfully.";
        } else {
            alertContainer.className = "alert alert-danger alert-dismissible fade show";
            messageDisplay.innerText = typeof data.message === 'object'
                ? JSON.stringify(data.message, null, 2)
                : data.message || "Composer installation failed.";
        }

        alertContainer.style.display = "block";

        // Reload page after 3 seconds
        setTimeout(() => location.reload(), 3000);
    })
    .catch(error => {
        console.error('Installation error:', error);
        responseDisplay.style.display = 'none';
        alertContainer.className = "alert alert-danger alert-dismissible fade show";
        messageDisplay.innerText = "Composer installation failed due to network or server error.";
        alertContainer.style.display = "block";
    });
}


</script>


{% include "whm/footer.html" %}
{% endblock content %}