@extends('include.app')
@section('content')
<style>
.loginBg{
    background: #0575E6;
    background: -webkit-linear-gradient(to bottom, #021B79, #0575E6);
    background: linear-gradient(to bottom, #021B79, #0575E6);
}
</style>
<div id="page-container">
    <main id="main-container">
        <div class="hero-static d-flex align-items-center">
            <div class="w-100 align-items-center">
                <!-- Sign In Section -->
                <div class="loginBg">
                    <div class="content content-full">
                        <div class="row justify-content-center">
                            <div class="col-md-8 col-lg-6 col-xl-4 py-4">
                                <!-- Header -->
                                <div class="text-center">
                                    <p>
                                    <img src="{{asset('assets/img/logo.png')}}" width="100px" height="70px" class="bg-white rounded p-2">
                                    </p>
                                    <h1 class="h3 mb-1 text-white">
                                        Sign In
                                    </h1>
                                    <p class="h6 font-w400 text-light mb-3">
                                        Welcome, please login.
                                    </p>
                                </div>
                                <form action="{{ route('admin.login')}}" method="POST" id="loginFrm">
                                    @csrf
                                    <div class="py-3">
                                        <div class="form-group">
                                            <input type="text" class="form-control form-control-lg form-control-alt" id="login-username" name="user_name" placeholder="User Name" required>
                                        </div>
                                        <div id="name_error"></div>
                                        @if($errors->has('user_name'))
                                            <h6 class="text-danger">{{$errors->first('user_name')}}</h6>
                                        @endif
                                        <div class="form-group"
                                         style="position: relative;">
                                            <span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password float-right" style="position: absolute;right: 14px; display: flex; align-items: center; height: 100%;"></span>
                                            <input type="password" class="form-control form-control-lg form-control-alt" id="pass_log_id" name="password" placeholder="Password" onpaste="return false;" ondrop="return false;" autocomplete="off">
                                        </div>
                                        @if($errors->has('password'))
                                            <h6 class="text-danger">{{$errors->first('password')}}</h6>
                                        @endif
                                        @if($errors->has('pw'))
                                        <h5 class="text-danger">{{$errors->first('pw')}}</h5>
                                        @endif
                                        <div class="form-group">
                                            <div class="d-md-flex align-items-md-center justify-content-md-between">
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" class="custom-control-input" id="login-remember" name="remember_me">
                                                    <label class="custom-control-label font-w400 text-light" for="login-remember">Remember Me</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row justify-content-center mb-0">
                                        <div class="col-lg-10 col-xl-8">
                                            <button type="submit" class="btn btn-block btn-outline-light rounded-pill py-2">
                                                <i class="fa fa-fw fa-sign-in-alt mr-1"></i> Sign In
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
@endsection

@section('script')
<script>
    $(document).on('click', '.toggle-password', function()
    {
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $("#pass_log_id");
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password')
        nput.attr('type') === 'password' ? Reinput.attr('type','text') : Reinput.attr('type','password')
    });

</script>
@endsection