<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>RDD | Login</title>

    <!-- Custom fonts for this template-->
    <link
      href="{{ asset('/') }}assets/vendor/fontawesome-free/css/all.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
      rel="stylesheet"
    />

    <!-- Custom styles for this template-->
    <link
      href="{{ asset('/') }}assets/css/sb-admin-2.css?version=1"
      rel="stylesheet"
    />
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
      :root {
          --blue: #275bc4;
      }
      body{
        font-family: 'Poppins', sans-serif;
        font-size: 12px !important;
      }
      .text-light{
        color: #67819c !important;
      }
      .img-header img{
        width: 4rem;
      }
      .form-body{
        padding: 5rem 6rem 0rem 6rem;
        /* padding-top: 5rem; */
      }
      .btn-primary{
        background-color: var(--blue);
      }
      .form-wrapper{
        position: relative;
      }
      .form-wrapper svg {
        position:absolute;
        bottom:11px;
        right:3px;
        color: #67819c;
      }
      .eye-pass{
        bottom: 0 !important;
        right: 0 !important;
        width: 100%;
        height: 100%;
      }
      .eye-pass2{
        position:absolute;
        bottom:7.5px;
        right: 20px;
        width: 10%;
        height:  60%;
        color: #67819c;
      }
      .form-wrapper input{
        background-color: #f8fbfc;
        padding: 0.5rem;
        font-size: 12px;
      }
      .form-wrapper:hover svg{
        color: #1ba8ff !important;
      }
      .form-control:focus, .form-control:hover {
        color: #212529;
        background-color: #fff;
        border-color: #1ba8ff;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13, 109, 253, 0) !important;
      }
      .login-container{
        background-image : url(<?php echo asset('/image/bg-login2.jpg') ?>)!important;
        background-size: 100%;
      }
      .eye-off{
        display: none;
      }
      .eye-pass2.show .eye-off{
        display: block;
      }
      .eye{
        display: block;
      }
      .eye-pass2.show .eye{
        display: none;
      }
      /* .login-poster{
        background-image : url(<?php echo asset('image/poster-login.png') ?>)!important;
        background-size: 100%;
        background-repeat: no-repeat;
      } */
      
      .btn{
        font-size: 12px;
      }
      @media only screen and (max-width: 980px) {
        .login-poster{
          display: none;
        }
      }
      @media only screen and (max-width: 576px) {
        .form-body{
          padding: 5rem 1rem 0rem 1rem;
        }
        .login-poster{
          display: none;
        }
      }
      .row.g-0 .col-lg-6{
        padding-right: 0rem;
        padding-left: 0rem;
      }
    </style>
  </head>

  <body class="" style=''>
    <div class="vh-100 d-flex justify-content-center align-items-center login-container">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-12 col-md-10 col-lg-9">
            <div class="row g-0 shadow">
              <div class="col-lg-6 col-12">
                <div class="card bg-primary h-100 rounded-0 rounded-start login-poster">
                  <div class="card-body d-flex align-items-center">
                    <img src="{{asset('image/poster-login.png')}}" class="img-fluid" alt="">
                  </div>
                </div>
              </div>
              <div class="col-lg-6 col-12">
                <div class="card bg-white rounded-0 rounded-end">
                  <div class="card-body form-body w-10">
                    
                      <div class="img-header d-flex justify-content-center">
                        <img src="{{asset('image/logo-no-text.png')}}" alt="" class="img-fluid">
                      </div>
                      <div class="text-header text-center my-5 mt-4 text-dark">
                        <h4>Selamat Datang</h4>
                        {{-- <span class="text-light">Silahkan masukkan username dan password untuk mulai menggunakan chatbot</span> --}}
                      </div>
                      @if(session('error'))
                    <div class="alert alert-danger">
                        <b>Opps!</b> {{session('error')}}
                    </div>
                    @endif
                    <form class="mb-3 mt-md-4 user" action="{{ url('auth') }}" method="POST">
                      @csrf
                      <div class="mb-3 form-wrapper">
                        {{-- <label for="username" class="form-label ">Username</label> --}}
                        <input type="text" class="form-control" name="username" id="username" placeholder="Username">
                        <span class="iconify" data-icon="akar-icons:person"></span>
                      </div>
                      <div class="mb-1 form-wrapper">
                        {{-- <label for="password" class="form-label ">Password</label> --}}
                        <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="padding-right: 3rem;">
                        {{-- <span class="iconify eye-pass d-none" data-icon="mdi:eye-off"></span> --}}
                        <i class="eye-pass2">
                          <span class="iconify eye-pass eye" data-icon="mingcute:eye-2-fill"></span>
                          <span class="iconify eye-pass eye-off" data-icon="mdi:eye-off"></span>
                        </i>
                        <span class="iconify" data-icon="teenyicons:password-outline"></span>
                      </div>
                      <div class="mb-4 form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" >
                        <label class="form-check-label text-light" for="flexCheckChecked">
                          Remember Me
                        </label>
                      </div>
                      <div class="d-grid" style="display: grid;">
                        <button class="btn btn-primary" type="submit">Login</button>
                      </div>
                    </form>
                    <div class="d-flex justify-content-center mb-3" style="margin-top: 5rem">
                      <span class="text-secondary me-1">Belum punya akun? </span> <a href="{{url('register')}}"> Daftar disini</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
    {{-- <div class="opacity-background">
      <div class="container">
        <!-- Outer Row -->
          <div class="row justify-content-center">
              
              <div class="col-xl-6 col-lg-6">

                  <div class="card o-hidden border-0 shadow-lg my-5">
                      <div class="card-body p-0">
                          <!-- Nested Row within Card Body -->
                          <div class="row">

                              <div class="col-lg">
                                  <div class="p-5">
                                      <div class="text-center">
                                          <!-- LOGO -->
                                          @if(session('msg'))
                                              <div class="alert alert-danger">
                                                  {{ session('msg') }}
                                              </div>
                                          @endif
                                      </div>
                                      <form class="user" method="post" action="{{ url('auth') }}">
                                          @csrf
                                          <div class="form-group">
                                              <input type="text" name="username" class="form-control form-control-user"
                                                  id="exampleInputEmail" aria-describedby="emailHelp"
                                                  placeholder="Enter Username...">
                                          </div>
                                          <div class="form-group">
                                              <input type="password" name="password" class="form-control form-control-user"
                                                  id="exampleInputPassword" placeholder="Password">
                                          </div>                                        
                                          <input type="submit" value="Login" class="btn btn-primary btn-user btn-block"/>
                                      </form>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>

          </div>
      </div>
    </div> --}}

    <!-- Bootstrap core JavaScript-->
    <script src="{{ asset('/') }}assets/vendor/jquery/jquery.min.js"></script>
    <script src="{{ asset('/') }}assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="{{ asset('/') }}assets/vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="{{ asset('/') }}assets/js/sb-admin-2.min.js"></script>
  </body>
</html>
