@php
    // dd($errors);
@endphp
@extends('layouts.app')
@section('content')
<style>
    body{
        overflow: hidden;
    }
</style>
<div class="container-fluid w-100 p-0 m-0 img-first">
          <div class="row g-0 ">
              <div class="col-sm-5 m-0 p-0 img_side position-relative">
                <div class="">
                    <div class="position-absolute top-50  chaging text-white">
                        <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                            <div class="carousel-indicators mt-5 d-flex  clearfix p-5">
                              <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                              <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
                              <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
                            </div>
                            <div class="carousel-inner">
                              <div class="carousel-item active" data-bs-interval="10000">
                              <ul class="list-inline">
                                    <li class="list-inline-item"><svg class="pe-3" xmlns="http://www.w3.org/2000/svg" width="54" height="40" viewBox="0 0 54 40">
                                    <rect id="Rectangle_17864" data-name="Rectangle 17864" width="54" height="40" fill="#1dbf74"/>
                                  </svg></li>
                                    <li class="list-inline-item"><span class='fivePIX'>Security First</span></li>
                                </ul>

                                  <p class="ps-5">Best flow, Easy to use and highly Accessable.</p>
                              </div>
                              <div class="carousel-item" data-bs-interval="2000">
                              <ul class="list-inline">
                                    <li class="list-inline-item"><svg class="pe-3" xmlns="http://www.w3.org/2000/svg" width="54" height="40" viewBox="0 0 54 40">
                                    <rect id="Rectangle_17864" data-name="Rectangle 17864" width="54" height="40" fill="#1dbf74"/>
                                  </svg></li>
                                    <li class="list-inline-item"><span class='fivePIX'>Safe Records</span></li>
                                </ul>
                                  <p class="text-center px-5">All of your records are safe And sound in one place….</p>
                              </div>
                              <div class="carousel-item">
                              <ul class="list-inline">
                                    <li class="list-inline-item"><svg class="pe-3" xmlns="http://www.w3.org/2000/svg" width="54" height="40" viewBox="0 0 54 40">
                                    <rect id="Rectangle_17864" data-name="Rectangle 17864" width="54" height="40" fill="#1dbf74"/>
                                  </svg></li>
                                    <li class="list-inline-item"><span class='fivePIX'>Highly User-Friendly</span></li>
                                </ul>
                                  <p class=" text-center ps-5">It you are thinking about secure platform, We’re the one for you….</p>
                              </div>
                            </div>

                          </div>
                      </div>
                </div>
              </div>
              <div class="col-sm-1 whit_bg"></div>
              <div class="col-sm-5  img_side_m whit_bg">
                  <div class="mt-5">
                      <p class="fw-bolder fs-42 text-dark text-center mb-5 pt-5 "> <img src="{{asset('project/logo/'.getSiteInfo('photo'))}}" class="img-fluid" width="80px" alt="LOGO"></p>
                      <form method="POST" id="loginform" action="{{ route('login') }}">
                    @csrf
                    <div class="form-row">

                        <div class="form-holder w-100">
                              <span class="invalid-feedback error-div" role="alert"></span>
                            <!-- <label for="email" class="col-md-4 col-form-label text-md-right"></label> -->
                            <input id="email" type="email" class="form-control email @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="{{ __('E-Mail Address') }}" autofocus>
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror

                            <input type="hidden" class="form-control" id="type" name="type" value="admin">
                            @error('type')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-holder w-100">
                            <!-- <label for="password" class="col-md-4 col-form-label text-md-right"></label> -->
                            <input id="password" type="password" class="form-control password @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="{{ __('Password') }}">

                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                        <label class="form-check-label" for="remember">
                            {{ __('Remember Me') }}
                        </label>
                    </div>
                    @if (Route::has('password.request'))
                    <p class="text-center"><a href="{{ route('password.request') }}" class="cb text-decoration-none fw-bolder"> {{ __('Forgot Your Password?') }}</a></p>
                    @endif
                    <div class="d-grid mt-5">
                            <button type="submit" class="btn btn-warning lgo_btn" >  {{ __('Login') }}</button>
                    </div>

                </form>
                  </div>
              </div>
              <div class="col-sm-1 whit_bg"></div>
          </div>
      </div>
@endsection
@section('js')
<script>
    $('body').on('submit','#loginform',function(e){
            e.preventDefault();
            var formData = new FormData(this);
            try {
                $.ajax({
                    type : 'POST',
                    dataType : 'json',
                    url : '{{route("login")}}',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data : formData,
                    success : function (res) {
                            window.location.href="/home";

                    },
                    error: function(res) {
                        var response = $.parseJSON(res.responseText);
                            var erros = response.errors;
                            console.log(erros.email[0]);
                            $('.error-div').text(erros.email[0]);
                            $('.invalid-feedback').css('display','block');
                            $('.email').addClass('is-invalid');
                            $('.password').addClass('is-invalid');
                    }
                });
            } catch (error) {
                alert(error)
            }
        })
</script>
@endsection
