@extends('layouts.app')

@push('meta')
    <title>{{env('APP_NAME')}} : {{$content->title}}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

    <style>
        .field-icon {
            float: right;
            margin-left: -40px;
            margin-right:10px;
            margin-top: -30px;
            position: relative;
            z-index: 2;
        }
    </style>
@endpush

@section('content')
    <section class="bg-[#F8F8F8] h-full">
        <div class="container mx-auto lg:px-4 px-2 py-10">
            <div class="flex items-center justify-center gap-2 max-w-sm mx-auto">
                <div class="w-5 h-5 bg-brand-blue rounded-md"></div>
                <h3 class="text-xl text-center uppercase font-bold tracking-wide">Login</h3>
            </div>
            <div class="sm:mt-12 mt-9 space-y-6">


                <div class="bg-white shadow-card sm:px-9 sm:py-9 px-6 py-6 max-w-md mx-auto">

                    {!! $content->content !!}

                    @include('layouts.partials.feedback')



                    <form method="POST" action="{{ route('front-login') }}">
                        @honeypot
                        @csrf

                        <!--<input type="hidden" name="redirectUrl" value="{{request()->get('redirectUrl')}}">-->

                        <input type="hidden" name="redirectUrl" value="{{$redirectUrl}}">

                        <div class="grid grid-cols-1 gap-5">
                            <div>
                                <label class="form-label" for="password" for="email">{{ __('Email Address') }}</label>
                                <div class="mt-2">
                                    <input id="email" type="email" name="email"
                                           class="form-input @error('email') is-invalid @enderror">
                                    @error('email')
                                    <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                    @enderror
                                </div>
                            </div>
                            <div>
                                <label class="form-label" for="password">{{ __('Password') }}</label>
                                <div class="mt-2 position-relative">
                                    <input id="password" type="password" class="form-input @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                                    <span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    @error('password')
                                    <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
                                    @enderror
                                </div>
                            </div>

                        </div>
                        <div class="flex flex-col gap-4 items-center py-5">
                            <button type="submit" class="btn btn-brand-blue w-full justify-center text-center">
                                {{ __('Sign in') }}
                            </button>

                            <br>
                            <div class=" sm:px-9  max-w-md mx-auto">
                                <a href="{{route("contact-us")}}">We value and welcome your feedback and comments, click
                                    here to tell us anything.</a>
                            </div>


                        </div>
                    </form>
                </div>
                @if (Route::has('password.request'))
                    <div class="text-center">
                        <a class="text-brand-blue hover:underline text-sm" href="{{ route('forgotten-password') }}">
                            {{ __('Forgot Your Password?') }}
                        </a>
                        @endif
                    </div>
            </div>
        </div>
    </section>
@endsection



@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelector(".toggle-password").addEventListener('click', function () {
                var passwordField = document.querySelector(this.getAttribute("toggle"));
                if (passwordField.type === "password") {
                    passwordField.type = "text";
                    this.classList.add("fa-eye-slash");
                    this.classList.remove("fa-eye");
                } else {
                    passwordField.type = "password";
                    this.classList.remove("fa-eye-slash");
                    this.classList.add("fa-eye");
                }
            });
        });

    </script>
@endpush