<?php
  session_start();
  if(isset($_SESSION['student'])){
      header('location: index');
  }

include('../admin/includes/database.php');
include('../admin/includes/functions.php');

$conn = new Functions();
//fetch school details from database
$sql = "SELECT * FROM general_settings";
$conn->query($sql);
$result = $conn->fetchSingle();
$school_name = $result->school_name;
$student_bg_login = $result->student_login_bg;
$base_url = $conn->base_url();
$main_url = $conn->main_url();


?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Student Login <?php echo $school_name; ?></title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?php echo $base_url; ?>dist/css/adminlte.min.css">
    <link rel="stylesheet" href="<?php echo $base_url; ?>plugins/toastr/toastr.min.css">
    <link rel="icon" href="<?php echo $conn->base_url()?>upload/<?php echo $result->logo; ?>"  type="image/png">

    <style type="text/css">
        body{
            background-image: url('<?php echo $base_url . "upload/". $student_bg_login; ?>');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-clip: border-box;
        }
        .btn-primary {
            color: #fff;
            background-color: #334722;
            border-color: #334722;
            box-shadow: none;
        }

        .btn-primary:hover {
            color: #fff;
            background-color: #517978;
            border-color: #517978;
        }
        .btn-primary.focus, .btn-primary:focus {
            color: #fff;
            background-color: #38582b;
            border-color: #38582b;
            box-shadow: 0 0 0 0 rgba(38,143,255,.5);
        }

        .card-primary.card-outline {
            border-top: 3px solid #b1793e;
        }
        .btn-primary:not(:disabled):not(.disabled):active{
            background-color: #38582b;
            border-color: #38582b;
        }

    </style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <!-- /.login-logo -->
    <div class="card card-outline card-primary" style="box-shadow: 0 14px 16px #646161;">
        <div class="card-header text-center">
            <p>
                <i class="fas fa-lock fa-5x" style=" background: #1b2626; padding: 30px; border-radius: 40%; color: white;"></i>
            </p>
            <a href="index" class="h1" style="color: #1b2626;"><b>WELCOME</b></a>
        </div>
        <div class="card-body">
            <p class="login-box-msg">Please sign in to start your session</p>

            <form action="" method="post" id="login_form">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Enter your Reg. No" name="regno">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-envelope"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-8">
                        <div class="icheck-primary">
                            <input type="checkbox" id="remember">
                            <label for="remember">
                                Remember Me
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-4">
                        <button type="submit" class="btn btn-primary btn-block" style="background-color: #382521; border-color: #382521;" id="button">Sign In</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>


            <p class="mb-1">
                <a href="javascript:void(0)" style="color: #374923;" data-toggle='modal' data-target='#forgot-password'>I forgot my Registration No.</a>
            </p>

            <p class="mb-1 text-warning text-center" style="margin: 10px; font-size: 17px;">
                Are you a returning (old student)? Please click the link below to check result.
                <a href="check-old-student-result" style="color: #374923; font-size: 18px; text-transform: uppercase; width: 100%;" class='btn btn-info'>Check my result</a>
            </p>

            <div id="msg">
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
</div>
<!-- /.login-box -->

 <div id="forgot-password" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-warning">Registration No Reset Instructions</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p> We are sorry you misplaced or either forgot your registration number </p>
                <p> You will need to contact school admin to issue you back your registration number </p>
                <a href="javascript:void" class='btn btn-success'> Contact Admin on: +2347015776873 </a>
            </div>
        </div>
    </div>
</div>

    <script src="<?php echo $base_url; ?>plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="<?php echo $base_url; ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="<?php echo $base_url; ?>dist/js/adminlte.min.js"></script>
    <script src="<?php echo $base_url; ?>plugins/toastr/toastr.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#login_form').on('submit', function (e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    type: 'POST',
                    url: 'process-login.php',
                    data: formData,
                    beforeSend:function(){
                       $('#button').html('Signing you in pls wait...');
                    },
                    success: function (response) {
                        $("#msg").html(response);
                        $('#button').html('Sign In');
                    }
                });
            });
        })
    </script>
</body>
</html>
