{% extends "./assets/layout.html.twig" %}

{% block page %}
    {% if alreadyInstalled %}
        <h1 class='red'>Already installed</h1>

        <p>FOSSBilling is already installed. If you are trying to reinstall, take the following steps:</p>

        <ol>
            <li>Delete your database tables or recreate your database.</li>
            <li>Delete <strong>config.php</strong>.</li>
            <li>Refresh this page and you will see the installer.</p>
        </ol>
    {% else %}
        <p>Thank you for choosing FOSSBilling! Our installer will have you up and running in just a few more minutes. <br>Simply follow each step below and soon you'll have FOSSBilling installed.</p>
    
        <progress id="overall-progress" value="0" max="4"></progress>

        <hr />

        <form id='form' action="/install/install.php?a=install" method="post">
        <details {% if not canInstall %} open {% endif %} id="step-1">
            <summary>Step 1) Agree to the FOSSBilling license and review error reporting options</summary>

            <label for="agreement">
                <input type="checkbox" id="agreement" name="agreement" required>
                I agree to the <a href='https://github.com/FOSSBilling/FOSSBilling/blob/master/LICENSE' target='_blank' data-tooltip="Opens in a new tab.">Apache License version 2.0,</a> and acknowledge that this software is provided as-is.
            </label>
            <small>FOSSBilling is licensed under the Apache License version 2.0. You assume responsibility to verify its use and compliance with all local laws that may apply.</small>

            <br><br>

            <label for="error-reporting">
                <input type="checkbox" id="error-reporting" name="error_reporting">
                (Optional) Enable automated error reporting to help improve FOSSBilling.
            </label>
            <small><a href="#" data-target="learn-reporting" onClick="toggleModal(event)">Learn more</a></small>
        </details>

        <details {% if not canInstall %} open {% endif %} id="step-2">
            <summary>Step 2) Check system requirements</summary>
            {% if canInstall %}
                <p class="green">All basic requirements to install FOSSBilling are met.</p>
            {% else %}
                <p class="red">Installation is blocked because you do not meet one or more system requirements.</p>
            {% endif %}

            <table role="grid">
                <thead>
                    <tr>
                        <th scope="col">Requirement</th>
                        <th scope="col">Result</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    {% if is_subfolder %}
                        <tr>
                            <td>Subfolder detection</td>
                            <td class="red">FAIL</td>
                            <td>FOSSBilling does not support installing in a subfolder. Please move the application to your host document root. Refer to the <a href='https://fossbilling.org/docs/troubleshooting#subfolder-installations' data-tooltip="Opens in a new tab." target='_blank'>troubleshooting documentation</a> for more information.</td>
                        </tr>
                    {% endif %}
                    <tr>
                        <td>Operating system</td>
                        <td class="{{ os_ok ? 'green' : 'orange'}}">{{ os }}</td>
                        <td>{% if not os_ok %}FOSSBilling might not work properly on your operating system{% endif %}</td>
                    </tr>
                    <tr>
                        <td>PHP version</td>
                        <td class="{{ compatibility.php_version.isOk ? 'green' : 'red'}}">{{ compatibility.php_version.version }}</td>
                        <td>{% if not compatibility.php_version.isOk %} Required PHP version >={{ compatibility.php_version.min_version }}{% endif %}</td>
                    </tr>
                    {% for ext, loaded in compatibility.required_extensions %}
                        <tr>
                            <td>PHP extension: <strong>{{ ext }}</strong></td>
                            <td class="{{ loaded ? 'green' : 'red'}}">{{ loaded ? 'OK' : 'FAIL'}}</td>
                            <td>{% if not loaded %}Contact your server administrator to enable the <strong>{{ ext }}</strong> PHP extension{% endif %}</td>
                        </tr>
                    {% endfor %}
                    {% for ext, info in compatibility.suggested_extensions %}
                        {% if not loaded %}
                            <tr>
                                <td>PHP extension: <strong>{{ ext }}</strong></td>
                                <td class="{{ info.loaded ? 'green' : 'orange'}}">{{ info.loaded ? 'OK' : 'WARN'}}</td>
                                <td>{% if not info.loaded %}We recommend enabling the <strong>{{ ext }}</strong> PHP extension for: {{ info.message }}.{% endif %}</td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                    {% for file, writable in compatibility.files %}
                        {% if not writable %}
                            <tr>
                                <td>{{ file }}</td>
                                <td class="red">FAIL</td>
                                <td>Permissions are incorrect, preventing FOSSBilling from writing to this file name. <a href="https://fossbilling.org/docs/troubleshooting#permission-issues" target="_blank">(Troubleshootng)</a></td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                    {% for folder, writable in compatibility.folders %}
                        {% if not writable %}
                            <tr>
                                <td>{{ folder }}</td>
                                <td class="red">FAIL</td>
                                <td>Please make sure that directory exists and is writable. <a href="https://fossbilling.org/docs/troubleshooting#permission-issues" target="_blank">(Troubleshootng)</a></td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </details>

        {% if canInstall == false %}

        <p>Meet all system requirements, then refresh the page to see the setup form.</p>

        {% else %}
                <details id="step-3">
                    <summary>Step 3) Enter database details</summary>

                    <p>Enter your MySQL connection information.</p>

                    <fieldset>
                        <label for="database_hostname">Database hostname <span class="red">*</span></label>
                        <input type="text" id="database_hostname" name="database_hostname" value="{{ database_hostname|default('localhost') }}" placeholder="localhost, mysql, db.domain.com, 12.34.56.78 ..." required>
                        <small>Usually <strong>localhost</strong>. For Docker, use <strong>mysql</strong>.</small>
    
                        <label for="database_port">Database port <span class="red">*</span></label>
                        <input type="number" id="database_port" name="database_port" value="{{ database_port|default('3306') }}" placeholder="Usually 3306." required>
    
                        <label for="database_name">Database name <span class="red">*</span></label>
                        <input type="text" id="database_name" name="database_name" value="{{ request.database_name|default(database_name) }}" placeholder="Enter the name of the database." required>
    
                        <label for="database_username">Database username <span class="red">*</span></label>
                        <input type="text" id="database_username" name="database_username" value="{{ request.database_username|default(database_username) }}" placeholder="Enter the MySQL username." required>
    
                        <label for="database_password">Database password <span class="red">*</span></label>
                        <input type="password" id="database_password" name="database_password" value="{{ request.database_password|default(database_password) }}" placeholder="Enter the MySQL password." required>
                    </fieldset>
                </details>

                <details id="step-4">
                    <summary>Step 4) Configure your administrator account</summary>

                    <p>Create your administrator login details below.</p>
    
                    <fieldset>
                        <label for="admin_name">Name <span class="red">*</span></label>
                        <input type="text" id="admin_name" name="admin_name" value="{{ request.admin_name|default(admin_name) }}" placeholder="Display name of your account." required>
    
                        <label for="admin_email">Email <span class="red">*</span></label>
                        <input type="email" id="admin_email" name="admin_email" value="{{ request.admin_email|default(admin_email) }}" placeholder="you@yourdomain.com" required>
    
                        <label for="admin_password">Password <span class="red">*</span></label>
                        <input type="password" id="admin_password" name="admin_password" value="{{ request.admin_password|default(admin_password) }}" placeholder="Use a strong, secure password." required minlength="8">
                    </fieldset>
                </details>

                <details id="step-5">
                    <summary>Step 5 Configure the default currency</summary>

                    <p>Configure your default currency and price format.</p>
    
                    <fieldset>
                        <label for="currency_code">Code <span class="red">*</span></label>
                        <input type="text" id="currency_code" name="currency_code" value="{{ request.currency_code|default(currency_code) }}" required>
    
                        <label for="currency_title">Title <span class="red">*</span></label>
                        <input type="text" id="currency_title" name="currency_title" value="{{ request.currency_title|default(currency_title) }}" required>
    
                        <label for="currency_format">Price format <span class="red">*</span></label>
                        <input type="text" id="currency_format" name="currency_format" value="{{ request.currency_format|default(currency_format) }}" required>
                    </fieldset>
                </details>

                <div>
                    <progress id='progress' style='display:none;'></progress>

                    <button class="button-inline float-left-margin secondary" id="backButton" type="button" disabled>Back</button>
                    <button class="button-inline float-right-margin" id='nextButton' type="button">Next</button>

                    <button class="button-inline float-right-margin" id='button' type="submit" hidden="true">Install</button>
                    <br>
                    <p id="time-note" class="float-right-margin" hidden="true">Installation may take up to 30 seconds depending on the speed of your system.</p>
                </div>
        </form>

            <!-- Below is the "learn more" modal for error and performance reporting -->
            <dialog id="learn-reporting">
                <article>
                    <a href="#close"
                        aria-label="Close"
                        class="close"
                        data-target="learn-reporting"
                        onClick="toggleModal(event)">
                    </a>
                <h3>Error reporting</h3>
                <p>FOSSBilling optionally includes automated error reporting which allows us to improve the software and offer better technical support.</p>
                <p>Reports are collected using <a href="https://sentry.io/welcome/" target='_blank' data-tooltip="Opens in a new tab.">Sentry.io</a> and data is <a href="https://sentry.io/security/" target='_blank' data-tooltip="Opens in a new tab.">retained securely</a> for up to 90 days.</p>
                <p>Automated data scrubbing and filtering is used to prevent sensitive information from being recorded.</p> 
                <p>See <a href="https://fossbilling.org/docs/faq/error-reporting" target='_blank' data-tooltip="Opens in a new tab.">the FOSSBilling documentation</a> for information on what's collected and why you should enable it.</p>
                <footer>
                    <a href="#confirm"
                        role="button"
                        data-target="learn-reporting"
                        onClick="toggleModal(event)">
                        Got it
                    </a>
                </footer>
                </article>
            </dialog>
        {% endif %}
    {% endif %}
{% endblock %}

{% block javascript %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var currentStep = 1;
            const button = document.getElementById('button');
            const timeNote = document.getElementById('time-note');
            const progress = document.getElementById('progress');
            const form = document.getElementById('form');
            const backButton = document.getElementById('backButton');
            const nextButton = document.getElementById('nextButton');
            const step1 = document.getElementById("step-1");
            const step2 = document.getElementById("step-2");
            const step3 = document.getElementById("step-3");
            const step4 = document.getElementById("step-4");
            const step5 = document.getElementById("step-5");

            function isStepAllowed(step) {
                for (let i = (step - 1); i >= 1; i--) {
                    if(!checkRequiredInputs(i)){
                        return false;
                    }
                }
                return step <= 6;
            }

            function updateStepVisibility(step) {
                [step1, step2, step3, step4, step5].forEach((stepElement, index) => {
                    stepElement.open = index + 1 === step ? true : false;
                });
            }

            function checkRequiredInputs(step) {
                const stepForm = document.getElementById(`step-${step}`);
                var requiredInputs = stepForm.querySelectorAll('input[required]');
                var allowed = true;

                requiredInputs.forEach(function (input) {
                    if (!input.reportValidity()) {
                        allowed = false;
                    }
                });

                return allowed;
            }

            function updateButtons() {
                backButton.disabled = currentStep === 1;
                nextButton.disabled = currentStep === 6 || {{ canInstall ? 'false' : 'true' }};

                if(currentStep === 5){
                    nextButton.hidden = true;
                    timeNote.hidden   = false;
                    button.hidden     = false;
                } else {
                    nextButton.hidden = false;
                    timeNote.hidden   = true;
                    button.hidden     = true
                }
            }

            function updateProgress() {
                const overallProgress = document.getElementById('overall-progress');
                overallProgress.value = (currentStep-1);
            }

            updateButtons();
            updateStepVisibility(currentStep);
            updateProgress();

            form.addEventListener('submit', e => {
                button.disabled = true;
                button.style.display = 'none';
                progress.style.display = 'block';
            });

            backButton.addEventListener('click', () => {
                if (currentStep > 1) {
                    currentStep--;
                    updateStepVisibility(currentStep);
                    updateButtons();
                    updateProgress();
                }
            });

            nextButton.addEventListener('click', () => {
                if({{ canInstall ? 'true' : 'false' }} && isStepAllowed(currentStep + 1)){
                    currentStep++;
                    updateStepVisibility(currentStep);
                    updateButtons();
                    updateProgress();
                }
            });

            // Event delegation to handle step clicks.
            function handleStepToggle(stepElement, step) {
                stepElement.addEventListener("toggle", function(event) {
                    if (!isStepAllowed(step)) {
                        event.preventDefault();
                    }
                });
                stepElement.addEventListener("click", function(event) {
                    if (!isStepAllowed(step)) {
                        event.preventDefault();
                    }
                });
            }
    
            // Use event delegation for every step
            [step2, step3, step4, step5].forEach((stepElement, index) => {
                handleStepToggle(stepElement, index + 2);
            });
        });
    </script>
{% endblock %}
