<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Multi-Step Wizard</title>
        <style>
            .preloader {
                width: 100%;
                height: 20px;
                background-color: #f3f3f3;
                border: 1px solid #ccc;
            }
            .status {
                margin-top: 10px;
                font-family: Arial, sans-serif;
                direction: ltr;
            }
            .progressBar {
                width: 0;
                height: 100%;
                background-color: #4caf50;
                text-align: left;
                direction: ltr;
            }

        </style>
    </head>
    <body onload="createDatabase();">
        <input type="hidden" id="operationType" value="1"/>
        <div id="step1">
            <h2>Step 1: Create Database</h2>
            <form onsubmit="event.preventDefault();
                    createDatabase();">
                <label for="dbName">Database Name:</label>
                <input type="text" id="dbName" value="{$dbName}" required><br>

                <label for="dbUser">Database User:</label>
                <input type="text" id="dbUser" value="{$dbUser}" required><br>

                <label for="dbPassword">Database Password:</label>
                <input type="password" id="dbPassword" value="{$dbPassword}" required><br>

                <input type="submit" value="Create Database">
                <input type="button" value="next" onclick="showStep(2)"/>
            </form>
        </div>

        <div id="step2" style="display: none">
            <h2>Step 2: Extract ZIP File</h2>
            <form onsubmit="event.preventDefault();
                    extractZip();">
                <label>version</label><br/>
                {if $files|@count == 0}
                You already have latest version
                {else}
                <select id="versionName" style="width: 25%">
                    {foreach $files as $data}
                    <option value="{$data}">{$data}</option>
                    {/foreach}
                </select>
                {/if}
                <br>
                <div class="preloader">
                    <div id="progressBarUnZip" class="progressBar"></div>
                </div>
                <div id="statusUnZip" class="pull-left status">Ready to unzip...</div>
                <input type="submit" value="Extract ZIP">
                <input type="button" value="next" onclick="showStep(3)" style="{if $files|@count == 0}{else}display:none{/if}" id="unZipNext"/>
            </form>
        </div>

        <div id="step3" style="display: none">
            <h2>Step 3: handle database</h2>

            <!-- Preloader -->
            <div class="preloader">
                <div id="progressBarDB" class="progressBar"></div>
            </div>
            <div id="statusDB" class="pull-left status">Ready to start...</div>

            <button onclick="handledb()">handle database</button>
            <input type="button" value="Finish" onclick="window.location = 'index.php'" style="display:none" id="finishBtn"/>
        </div>

    </body>
</html>
