<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="abdul mannan">
    <link rel="icon" href="../install/assets/images/favicon.ico" />
    <title>OVOO - Live TV & Movie Portal CMS with Unlimited TV-Series Installation</title>
    <link rel='stylesheet' type='text/css' href='../install/assets/bootstrap/css/bootstrap.min.css' />
    <link rel='stylesheet' type='text/css' href='../install/assets/js/font-awesome/css/font-awesome.min.css' />

    <link rel='stylesheet' type='text/css' href='install.css' />

    <script type='text/javascript' src='../install/assets/js/jquery-1.11.3.min.js'></script>
    <script type='text/javascript' src='../install/assets/js/jquery-validation/jquery.validate.min.js'></script>
    <script type='text/javascript' src='../install/assets/js/jquery-validation/jquery.form.js'></script>

</head>

<body>
    <div class="install-box">

        <div class="panel panel-install">
            <div class="panel-heading text-center">
                <h2> OVOO-Movie &amp; Video Steaming CMS Installation</h2>
            </div>
            <div class="panel-body no-padding">
                <div class="tab-container clearfix">
                    <div id="pre-installation" class="tab-title col-sm-4 active"><i class="fa fa-circle-o"></i><strong>
                            Pre-Installation</strong></span></div>
                    <div id="configuration" class="tab-title col-sm-4"><i class="fa fa-circle-o"></i><strong>
                            Configuration</strong></div>
                    <div id="finished" class="tab-title col-sm-4"><i class="fa fa-circle-o"></i><strong>
                            Finished</strong></div>
                </div>
                <div id="alert-container">

                </div>


                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="pre-installation-tab">
                        <div class="section">
                            <p>1. Please configure your PHP settings to match following requirements:</p>
                            <hr />
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th width="25%">PHP Settings</th>
                                            <th width="27%">Current Version</th>
                                            <th>Required Version</th>
                                            <th class="text-center">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>PHP Version</td>
                                            <td>8.1.34</td>
                                            <td>5.6+</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="section">
                            <p>2. Please make sure the extensions/settings listed below are installed/enabled:</p>
                            <hr />
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th width="25%">Extension/settings</th>
                                            <th width="27%">Current Settings</th>
                                            <th>Required Settings</th>
                                            <th class="text-center">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>MySQLi</td>
                                            <td>                                                 On
                                                                                            </td>
                                            <td>On</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                        <tr>
                                            <td>GD</td>
                                            <td>                                                 On
                                                                                            </td>
                                            <td>On</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                        <tr>
                                            <td>cURL</td>
                                            <td>                                                 On
                                                                                            </td>
                                            <td>On</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                        <tr>
                                            <td>allow_url_fopen</td>
                                            <td>                                                 On
                                                                                            </td>
                                            <td>On</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                        <tr>
                                            <td>date.timezone</td>
                                            <td> Europe/London                                            </td>
                                            <td>Timezone</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="section">
                            <p>3. Please make sure you have set the <strong>writable</strong> permission on the
                                following folders/files:</p>
                            <hr />
                            <div>
                                <table>
                                    <tbody>
                                                                                <tr>
                                            <td style="width:87%;">/uploads</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                                                                <tr>
                                            <td style="width:87%;">/index.php</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                                                                <tr>
                                            <td style="width:87%;">/application/config/config.php</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                                                                <tr>
                                            <td style="width:87%;">/application/config/database.php</td>
                                            <td class="text-center">
                                                                                                <i class="status fa fa-check-circle-o"></i>
                                                                                            </td>
                                        </tr>
                                                                            </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="panel-footer">
                            <button  class="btn btn-info form-next"><i class='fa fa-chevron-right'></i> Next</button>
                        </div>

                    </div>
                    <div role="tabpanel" class="tab-pane" id="configuration-tab">
                        <form name="config-form" id="config-form" action="do_install.php" method="post">

                            <div class="section clearfix">
                                <p>1. Please enter your database connection details.</p>
                                <hr />
                                <div>
                                    <div class="form-group clearfix">
                                        <label for="host" class=" col-md-3">Database Host</label>
                                        <div class="col-md-9">
                                            <input type="text" value="" id="host" name="host" class="form-control"
                                                placeholder="Database Host (usually localhost)" />
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label for="dbuser" class=" col-md-3">Database User</label>
                                        <div class=" col-md-9">
                                            <input type="text" value="" name="dbuser" class="form-control"
                                                autocomplete="off" placeholder="Database user name" />
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label for="dbpassword" class=" col-md-3">Password</label>
                                        <div class=" col-md-9">
                                            <input type="password" value="" name="dbpassword" class="form-control"
                                                autocomplete="off" placeholder="Database user password" />
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label for="dbname" class=" col-md-3">Database Name</label>
                                        <div class=" col-md-9">
                                            <input type="text" value="" name="dbname" class="form-control"
                                                placeholder="Database Name" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="section clearfix">
                                <p>2. Please enter your account details for administration.</p>
                                <hr />
                                <div>
                                    <div class="form-group clearfix">
                                        <label for="first_name" class=" col-md-3">First Name</label>
                                        <div class="col-md-9">
                                            <input type="text" value="" id="first_name" name="first_name"
                                                class="form-control" placeholder="Your first name" />
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label for="last_name" class=" col-md-3">Last Name</label>
                                        <div class=" col-md-9">
                                            <input type="text" value="" id="last_name" name="last_name"
                                                class="form-control" placeholder="Your last name" />
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label for="email" class=" col-md-3">Email</label>
                                        <div class=" col-md-9">
                                            <input type="text" value="" name="email" class="form-control"
                                                placeholder="Your email" />
                                        </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <label for="password" class=" col-md-3">Password</label>
                                        <div class=" col-md-9">
                                            <input type="password" value="" name="password" class="form-control"
                                                placeholder="Login password" />
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="section clearfix">
                                <p>3. Please enter your item purchase code.</p>
                                <hr />
                                <div>
                                    <div class="form-group clearfix">
                                        <label for="purchase_code" class=" col-md-3">Item purchase code</label>
                                        <div class="col-md-9">
                                            <input type="text" value="" id="purchase_code" name="purchase_code"
                                                class="form-control"
                                                placeholder="Find in codecanyon item download section" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel-footer">
                                <button type="submit" class="btn btn-info form-next">
                                    <span class="loader hide"> Please wait...</span>
                                    <span class="button-text"><i class='fa fa-chevron-right'></i> Finish</span>
                                </button>
                            </div>

                        </form>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="finished-tab">
                        <div class="section">
                            <div class="clearfix">
                                <i class="status fa fa-check-circle-o pull-left" style="font-size: 50px"> </i><span
                                    class="pull-left" style="line-height: 50px;">Congratulation! You have successfully
                                    installed <strong>OVOO-Movie &amp; Video Steaming CMS</strong></span>
                            </div>

                            <div style="margin: 15px 0 15px 60px; color: #d73b3b;">
                                Don't forget to delete your installation directory!
                            </div>
                            <a class="go-to-login-page" href="https://streamkid.net/">
                                <div class="text-center">
                                    <div style="font-size: 100px;"><i class="fa fa-desktop"></i></div>
                                    <div>Visit Your Home Page</div>
                                </div>
                            </a>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

<script type="text/javascript">
var onFormSubmit = function($form) {
    $form.find('[type="submit"]').attr('disabled', 'disabled').find(".loader").removeClass("hide");
    $form.find('[type="submit"]').find(".button-text").addClass("hide");
    $("#alert-container").html("");
};
var onSubmitSussess = function($form) {
    $form.find('[type="submit"]').removeAttr('disabled').find(".loader").addClass("hide");
    $form.find('[type="submit"]').find(".button-text").removeClass("hide");
};

$(document).ready(function() {
    var $preInstallationTab = $("#pre-installation-tab"),
        $configurationTab = $("#configuration-tab");

    $(".form-next").click(function() {
        if ($preInstallationTab.hasClass("active")) {
            $preInstallationTab.removeClass("active");
            $configurationTab.addClass("active");
            $("#pre-installation").find("i").removeClass("fa-circle-o").addClass("fa-check-circle");
            $("#configuration").addClass("active");
            $("#host").focus();
        }
    });

    $("#config-form").submit(function() {
        var $form = $(this);
        onFormSubmit($form);
        $form.ajaxSubmit({
            dataType: "json",
            success: function(result) {
                onSubmitSussess($form, result);
                if (result.success) {
                    $configurationTab.removeClass("active");
                    $("#configuration").find("i").removeClass("fa-circle-o").addClass(
                        "fa-check-circle");
                    $("#finished").find("i").removeClass("fa-circle-o").addClass(
                        "fa-check-circle");
                    $("#finished").addClass("active");
                    $("#finished-tab").addClass("active");
                } else {
                    $("#alert-container").html(
                        '<div class="alert alert-danger" role="alert">' + result
                        .message + '</div>');
                }
            }
        });
        return false;
    });

});
</script>