<?php include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php"); ?>

<div class="p-3">

    <h2 class="mt-3 text-center" style="font-size:20px;">CREATE INSTITUTION / BUSINESS ACCOUNT</h2>

    <form method='POST' action='' id='form_signin' autocomplete='off' validate>
        <div class="row">
            <div class="col-lg-12">
                <div style='text-align:center;'>
                    <div id="targetOuter">
                        <div id="targetLayer"></div>
                        <div class="icon-choose-image">
                        </div>
                    </div>

                    <label for='userImage' style="margin-top: -200%;" hidden>
                        <i class="fa fa-camera fa-2x" style="margin-left: 105%;"></i>
                    </label>



                    <div class='image-upload'>
                        <input name="fileToUpload" id="userImage" type="file" value='1' class="inputFile" onChange="showPreview(this);" />
                    </div>
                </div><br>

            </div>

            <div class="col-lg-8">
                <div class="form-group">
                    <label class="text-dark" for="username">Institution / Business</label>
                    <input class="form-control" name='SchoolName' id="username" type="text" placeholder="Enter your email" required>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                    <label class="text-dark" for="text">Institution / Business Initials</label>
                    <input class="form-control" name='SchoolInitials' id="text" type="text" placeholder="Enter your text" required>
                </div>
            </div>

            <div class="col-lg-12">
                <div class="form-group">
                    <label class="text-dark" for="username">Address</label>
                    <input class="form-control" name="Address" id="username" type="text" placeholder="Enter your email" required>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="text-dark" for="text">Tin Number<i>(For Payroll Purposes)</i></label>
                    <input class="form-control" name="TinNumber" id="text" type="text" placeholder="Enter your text" required>
                </div>
            </div>


            <div class="col-lg-6">
                <div class="form-group">
                    <label class="text-dark" for="username">ER Number<i>(For Payroll Purposes)</i></label>
                    <input class="form-control" name="ER Number" id="username" type="text" placeholder="Enter your email" required>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="form-group">
                    <label class="text-dark" for="text">Location</label>
                    <input class="form-control" name="Location" id="text" type="text" placeholder="Enter your text" required>
                </div>
            </div>


            <div class="col-lg-12">
                <div class="form-group">
                    <label class="text-dark" for="username">Email eg.school@example.com (Optional)</label>
                    <input class="form-control" name="Email" id="username" type="text" placeholder="Enter your email" required>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                    <label class="text-dark" for="text">Telephone number</label>
                    <input class="form-control" name="Telephone" id="text" type="text" placeholder="Enter your text" required>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="form-group">
                    <label class="text-dark" for="username">Mobile number (Optional)</label>
                    <input class="form-control" name="Mobile" id="username" type="text" placeholder="Enter your email" required>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                    <label class="text-dark" for="text">Mobile number 2 (Optional)</label>
                    <input class="form-control" name="Mobile2" id="text" type="text" placeholder="Enter your text" required>
                </div>
            </div>
            <div class="col-lg-12 text-center" style="margin-bottom:30px;">
                <button type="submit" class="btn btn-block btn-dark" id="signin"><span class='submitLoader'>Sign In</span></button>
            </div>
            <div class="col-lg-12 text-center mt-1">
                <div class="py-2 text-center">
                    <p>already have an account?<br>
                        <a href='#' class='text-danger business-first-pages' data-url="/COMPONENTS/index/business-signin.php" data-url1="/COMPONENTS/index/form.php" data-signin-page="1">Sign in</a> | <a href='#' class='business-first-pages' data-url="/COMPONENTS/business-create/index.php" data-url1="/COMPONENTS/business-create/registered-businesses.php" data-signin-page="3">Business Accounts</a>
                    </p>
                </div>

            </div>
        </div>

    </form>
</div>




<script>
    $(".business-first-pages").on("click", function() {
        $(".preloader").show();
        var path = $(this).attr("data-url");
        var path1 = $(this).attr("data-url1");
        var signinPage = $(this).attr("data-signin-page");
        sessionStorage.setItem("SigninPage", signinPage);
        sessionStorage.setItem('UserType', domain + path);
        sessionStorage.setItem('ActivePage', domain + path1);

        $(".body").load(domain + path, function() {
            if (signinPage == 1) {
                var div = $(".business-signin")
            } else if (signinPage == 3) {

            }
            div.load(domain + path1, function() {
                $(".preloader").fadeOut();

            })
        });
    });
</script>