@extends('auth.layouts.master')

@push('head-stylesheets')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
@endpush

@section('title')
  Login
@endsection

@section('content')


<section class="login-page">
    
    <div class="content">
        <div class="float-logo-top">
            <img src="{{asset('images/reef-logo-vector-transparent.svg')}}" alt="#" width="210" height="252">
        </div>
        <div class="float-logo-bottom">
            <img src="{{asset('images/reef-logo-vector-transparent.svg')}}" alt="#" width="210" height="252">
        </div>
        <div class="inside">
            <!-- <div class="signup-float font-medium color-secondary h2">Don’t Have an account? <a href="#">Sign Up</a></div> -->
            <div class="d-flex align-items-center justify-content-center main-flex">
                <div class="box bigger-z-index">
                    <p class="mb-4 mb-md-5">
                        <img src="{{asset('images/reef-logo-login.svg')}}" alt="#" class="image-auto logo" width="321" height="78">
                    </p>
                    <p class="h1 mb-4">Sign In</p>
                    <form  method="POST" action="{{ route('login') }}" class="mb-0">
                        @csrf
                        <div class="form-floating mb-4">
                            <x-jet-label  for="floatingInput" />Email:   
                            <x-jet-input id="email" class="form-control block mt-1 w-full reset-input-field card_holder  mb-3 ms-0" type="email" id="floatingInput" name="email" :value="old('email')" placeholder="name@example.com" required autofocus />
                           
                            {{-- value="{{ __('Email') }}" --}}
                        </div>
                        <div class="form-floating mb-3 password-container">
                            <x-jet-label  for="floatingPassword"/>Password:

                            <x-jet-input id="password" class="form-control block mt-1 w-full reset-input-field card_holder mb-3 ms-0" type="password"  id="floatingPassword" name="password" required autocomplete="current-password" placeholder="Password" />

                            <a href="#" class="show-hide-password" id="eye"><span class="visually-hidden">Show/Hide Password</span></a>
                        </div>
                        @if (Route::has('password.request'))
                            <div class="mb-4 mb-md-5">
                                <a href="{{ route('password.request') }}" class="f-14">Forgot Password?</a>
                            </div>
                        @endif
                        <div class="mb-0">
                            <x-jet-button class="btn w-100 btn-lg">
                                Sign In
                            </x-jet-button>

                        </div>
                        {{-- <div class="or"><span>or</span></div>
                        <div class="row gy-3 gx-3">
                            <div class="col-sm-6">
                                <a href="#" class="btn w-100 white-bordered google">Google</a>
                            </div>
                            <div class="col-sm-6">
                                <a href="#" class="btn w-100 white-bordered facebook">Facebook</a>
                            </div>
                        </div> --}}
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="sidebar">
        <picture>
            <source srcset="{{asset('images/reef-login-bg.webp')}}" type="image/webp">
            <img src="{{asset('images/reef-login-bg.jpg')}}" alt="#" class="image-auto">
        </picture>
    </div>
</section>

@endsection


@push('scripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

{{--  add bootstrap 5 js file --}}
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

{{-- <script src="{{ mix('js/jquery-3.5.1.min.js') }}"></script>
<script src="{{ mix('js/bootstrap.bundle.min.js') }}"></script> --}}
<script>
    AOS.init();
  </script>

  <script>
const passwordInput = document.querySelector("#floatingPassword")
const eye = document.querySelector("#eye")

eye.addEventListener("click", function(){
  this.classList.toggle("fa-eye-slash")
  const type = passwordInput.getAttribute("type") === "password" ? "text" : "password"
  passwordInput.setAttribute("type", type)
})
    </script>
@endpush