@extends('admin.layouts.auth')

@section('content')
<style>
        .btngreen{
            background:#8AC440 !important;
            color:white;
            padding:10px 50px 10px 50px;
            border-radius:10px;
            border:none;
        }

        .btngreen:hover{
            background:#28A6DE !important;
        }
    </style>


<div class="wrapper" style="background-image:url('{{ asset('assets/assets/images/auth/background1.png') }}'); background-size:cover;">
    <section class="login-content">
        <div class="row m-0 align-items-center vh-100">
            <div class="col-md-6">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="shadow-none d-flex justify-content-center mb-0">
                            <div class="card-body">
                                <center>
                                    <img src="{{ asset('assets/assets/images/auth/logo1.png') }}" style="width:300px;" class="img-fluid gradient-main animated-scaleX" alt="images">
                                    <br>
                                    <img src="{{ asset('assets/assets/images/auth/logo2.png') }}" style="width:200px;" class="img-fluid gradient-main animated-scaleX" alt="images">
                                </center>
                                <br>

                                @if ($message)
                                <span class="alert alert-danger mt-3 mb-3 p-2 d-flex">{{$message}}</span>
                                @endif
                                <form action="{{ url('/admin/auth/action_login') }}" method="post">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-lg-12">
                                        <div class="form-group" style="position: relative;">
                                            <label for="username" class="form-label">Username</label>
                                            <input type="text" class="form-control" id="username" name="username" aria-describedby="email" placeholder=" " style="padding-left: 45px; border:1px solid #434243; background: transparent; border-radius:10px;">
                                            <!--<i class="fas fa-user" style="position: absolute; left: 10px; top: 70%; transform: translateY(-50%); color: #999; pointer-events: none;"></i>-->
                                            <img src="{{ asset('assets/assets/images/auth/user.png') }}" style="position: absolute; left: 10px; top: 70%; transform: translateY(-50%); color: #999; pointer-events: none;">
                                        </div>
                                        </div>
                                        <div class="col-lg-12">
                                        <div class="form-group" style="position: relative;">
                                            <label for="password" class="form-label">Password</label>
                                            <input type="password" class="form-control" id="password" name="password" aria-describedby="password" placeholder=" " style="padding-left: 45px; border:1px solid #434243; background: transparent; border-radius:10px;">
                                           <!-- <i class="fas fa-lock" style="position: absolute; left: 10px; top: 70%; transform: translateY(-50%); color: #999;  pointer-events: none;"></i>-->
                                            <img src="{{ asset('assets/assets/images/auth/pass.png') }}" style="position: absolute; left: 10px; top: 70%; transform: translateY(-50%); color: #999; pointer-events: none;">
  
                                        </div>
                                        </div>
                                        <div class="col-lg-12 d-flex justify-content-between">
                                            <div class="form-check mb-3">
                                                <input type="checkbox" class="form-check-input" id="customCheck1">
                                                <label class="form-check-label" for="customCheck1">Remember Me</label>
                                            </div>
                                            {{-- <a href="{{ url('/admin/auth/forgot') }}">Forgot Password?</a> --}}
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-center">
                                        <button type="submit" class="btngreen">Sign In</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
            <img src="{{ asset('assets/assets/images/auth/Login Animated@512p-25fps.gif') }}" alt="" class="img-fluid"
            loading="lazy" style="width:90%">
            </div>

        </div>
    </section>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection