@php
$customizerHidden = 'customizer-hide';
$configData = Helper::appClasses();
@endphp

@extends('layouts/blankLayout')

@section('title', 'Login')

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('assets/vendor/css/pages/page-auth.css')) }}">
<style>
        .home_bg{
            background-image:url('{{asset('assets/img/backgrounds/5.jpg')}}');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .h-auto{
          margin-left: auto;
          margin-right: auto;
        }
        .bord{
          border-top-right-radius:50px;
          border-top-left-radius:50px;
        }
        @media (min-width: 600px) and (max-width: 768px){
          .h-auto{
              width:18%;
          }
        }
        @media (max-width: 600px){
          .h-auto{
              width:20%;
          }
        }
        .f-lms{
          color:black;
          font-weight:700;
        } 
  </style>
@endsection

@section('content')
<div class="authentication-wrapper fixed-top " style="background-image:url({{asset('images/background/bg-lms.jpg')}});background-repeat: no-repeat;background-size: cover;background-position: top;">
  <div class="authentication-inner  align-middle">
  <h1 class="text-center text-white font-weight-bold top_tex" style="text-shadow: 1px 1px 4px #080808;position: relative;top: 18%;font-weight: 700;">Align Your Structure <br>To  Drive Your Strategy </h1>
    <!-- /Left Text -->
    <div class="d-none d-lg-flex col-lg-7  p-0">
      <div class="auth-cover-bg auth-cover-bg-color home_bg d-flex justify-content-center align-items-center">

      <!-- <img src="{{asset('assets/img/backgrounds/5.jpg')}}" alt="auth-login-cover" class="img-fluid auth-illustration" > -->
        <!-- <img src="{{ asset('assets/img/illustrations/bg-shape-image-'.$configData['style'].'.png') }}" alt="auth-login-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png"> -->
      </div>
    </div>
    <!-- /Left Text -->
    <!-- Login -->
    <div class="col-lg-12 col-sm-12 col-md-12 align-items-center p-sm-5 p-4 bg-white fixed-bottom bord" style="background-image:url({{asset('images/background/bottom-card.png')}});background-repeat: no-repeat;background-size: cover;background-position: center;">
      <div class="">
        <!-- Logo -->
        <div class="mb-4">
          <a href="{{url('/')}}" class="app-brand-link">
            <img src="{{asset('images/logo/lms-favicon.png')}}" width="8%" class="h-auto" alt="Learning Management System">
          </a>
        </div>
        <!-- /Logo -->
        <div class="text-center">
            <h3 class="mb-1 f-lms">Welcome to FNI Learning Hub!</h3>
            <p class="mb-4">Please sign-in to your account</p>
        </div>

        @if (session('status'))
        <div class="alert alert-success mb-1 rounded-0" role="alert">
          <div class="alert-body">
            {{ session('status') }}
          </div>
        </div>
        @endif

        <form id="formAuthentication" class="mb-3" action="{{ route('login') }}" method="POST">
          @csrf
          <div class="mb-3">
            <label for="login-email" class="form-label">Email</label>
            <input type="text" class="form-control @error('email') is-invalid @enderror input-lg " id="login-email" name="email" placeholder="john@example.com" autofocus value="{{ old('email') }}">
            @error('email')
            <span class="invalid-feedback" role="alert">
              <span class="fw-medium">{{ $message }}</span>
            </span>
            @enderror
          </div>
          <div class="mb-3 form-password-toggle">
            <div class="d-flex justify-content-between">
              <label class="form-label" for="login-password">Password</label>
              @if (Route::has('password.request'))
              <a href="{{ route('password.request') }}">
                <small>Forgot Password?</small>
              </a>
              @endif
            </div>
            <div class="input-group input-group-merge @error('password') is-invalid @enderror">
              <input type="password" id="login-password" class="form-control @error('password') is-invalid @enderror input-lg" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
              <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
            </div>
            @error('password')
            <span class="invalid-feedback" role="alert">
              <span class="fw-medium">{{ $message }}</span>
            </span>
            @enderror
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="remember-me" name="remember" {{ old('remember') ? 'checked' : '' }}>
              <label class="form-check-label" for="remember-me">
                Remember Me
              </label>
            </div>
          </div>
          <button class="btn btn-primary d-grid w-100" type="submit">Sign in</button>
        </form>

        {{-- <p class="text-center">
          <span>New on our platform?</span>
          @if (Route::has('register'))
          <a href="{{ route('register') }}">
            <span>Create an account</span>
          </a>
          @endif
        </p>

        <div class="divider my-4">
          <div class="divider-text">or</div>
        </div>

        <div class="d-flex justify-content-center">
          <a href="javascript:;" class="btn btn-icon btn-label-google-plus me-3">
            <i class="tf-icons fa-brands fa-google fs-5"></i>
          </a>
        </div> --}}
        
      </div>
    </div>
    <!-- /Login -->

    <!-- bottom border -->
    <div class="fixed-bottom " style="display: grid;grid-template-columns: auto auto auto;">
          <div class="col-md-12" style="border:2px solid #f30e00"></div>
          <div class="col-md-12" style="border:2px solid #1f9ad6"></div>
          <div class="col-md-12" style="border:2px solid #fac417"></div>
    </div>
    <!-- bottom border -->

  </div>
</div>
@endsection