<?php 
        if( !defined( 'FEEDSYNC_ENV' ) ) {
                die('Unauthorised');
        }
        require_once "./core/install/functions.php"; 
        if( config_exists() ) {
                redirect_to_fs();
        }      
?>
<!DOCTYPE html>

<html>
        <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <title>Feedsync Installation</title>
                <meta name="description" content="">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="preconnect" href="https://fonts.googleapis.com">
                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
                <link rel="stylesheet" href="./core/install/install.css">
                <script
                src="https://code.jquery.com/jquery-3.6.2.min.js"
                integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA="
                crossorigin="anonymous"></script>
        </head>
        <body>
                <div class="wrap">
                        <div class="container">
                                <div class="logo">
                                        <img src="./core/install/feedsync-icon.svg" alt="" width="128" height="128">
                                </div>
                                <div class="step">
                                        <h2>Welcome to FeedSync! Before installation you need to know the following items.</h2>
                                        <ul class="items">
                                                <li>Database name</li>
                                                <li>Database username</li>
                                                <li>Database password</li>
                                                <li>Database host</li>
                                        </ul>
                                        <div class="help">
                                                <p>This information is being used to create a config.php file.</p>
                                                <p>If for any reason this automatic file creation does not work, do not worry. All this does is fill in the database information to a configuration file.</p>
                                                <p>you may also simply open config-sample.php in a text editor, fill in your information, and save it as config.php.</p>
                                                <p>In all likelihood, these items were supplied to you by your web host. If you do not have this information, then you will need to contact them before you can continue. If you are ready...</p>
                                        </div>
                                        <div class="fire-step">
                                                <a class="button init-install" href="#">Lets Go</a>
                                        </div>
                                </div>
                                <div class="installation-steps" style="display:none">
                                        <div class="step-1">
                                                <div class="details-form-wrap">
                                                        <form action="" method="POST" class="db-details">

                                                                <div class="field-wrap">

                                                                        <label for="dbname">Database name</label>
                                                                        <input id="dbname" name="dbname" type="text" placeholder="feedsync" value="feedsync"/>
                                                                        <span class="help">The name of the database you want to use with FeedSync</span>
                                                                </div>
                                                                <div class="field-wrap">

                                                                        <label for="username">User name</label>
                                                                        <input id="username" name="username" type="text" placeholder="username"/>
                                                                        <span class="help">Your database username</span>
                                                                </div>
                                                                <div class="field-wrap">

                                                                        <label for="password">Password</label>
                                                                        <input id="password" name="password" type="password" value="" placeholder="password"/>
                                                                        <span class="help">Your database password</span>
                                                                </div>
                                                                <div class="field-wrap">

                                                                        <label for="host">Database Host</label>
                                                                        <input id="host" name="host" value="localhost" type="text"/>
                                                                        <span class="help">You should be able to get this value from your web host if <code>localhost</code> doesn't work.</span>
                                                                </div>
                                                                <div class="field-wrap">
                                                                
                                                                        <label for="table_prefix">Table Prefix</label>
                                                                        <input id="table_prefix" name="table_prefix" type="text" placeholder="fs_" value="fs_"/>
                                                                        <span class="help">Keep it unique if you want to run FeedSync alongside WordPress installation</span>
                                                                </div>
                                                                <div class="section-title">
                                                                        Login Details
                                                                </div>
                                                                <div class="field-wrap">

                                                                        <label for="fsusername">User Name</label>
                                                                        <input id="fsusername" name="fsusername" value="admin" type="text"/>
                                                                        <span class="help">Login User Name</span>
                                                                </div>
                                                                <div class="field-wrap">

                                                                        <label for="fspassword">Password</label>
                                                                        <input id="fspassword" name="fspassword" value="<?php echo generate_password(); ?>" type="text"/>
                                                                        <span class="help">Login Password</span>
                                                                </div>
                                                                <input type="submit" name="config_submit" class="button" value="Submit"/>
                                                        </form>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        
                </div>
        </body>
        <script>
                $(document).ready( function() {

                        $('.init-install').on( 'click', function(e) {
                                e.preventDefault();
                                $('.step').fadeOut(100, function() {
                                        $('.installation-steps').fadeIn();
                                });
                        });
                });
        </script>
</html>
