@extends('layouts.guest')

@section('content')
{{-- {{ route('authenticate') }} --}}
<form method="POST" action="{{ route('login') }}">
    @csrf
        @if (session('error'))
            <div class="alert alert-success" role="alert">
                {{ __('A fresh verification link has been sent to your email address.') }}
            </div>
        @endif
        {{ Session::get('success') }}
    @if ($errors->has('password'))
    <span class="text-danger">{{ $errors->first('password') }}</span>
    @endif
    <div class="form-floating mb-15px">
        <input id="email" type="email" class="form-control h-45px fs-13px @error('email') is-invalid @enderror" name="email" placeholder="Email" value="{{ old('email') }}" required autocomplete="email" autofocus>

        <label for="email" class="d-flex align-items-center fs-13px text-gray-600">{{ __('Email') }}</label>
        @error('email')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="form-floating mb-15px">
        <input type="password" class="form-control h-45px fs-13px @error('password') is-invalid @enderror" name="password" placeholder="Password" id="password" />
        <label for="password" class="d-flex align-items-center fs-13px text-gray-600">Password</label>
        @error('password')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="d-flex justify-content-between">
        <div class="form-check mb-30px">
            <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>
        <div class="mb-30px text-dark">
            @if (Route::has('password.request'))
                <a class="text-primary" href="{{ route('password.request') }}">Forget your password?</a>
            @endif
        </div>
    </div>


    <div class="mb-5">
        <button type="submit" class="btn btn-blue d-block h-45px w-100 btn-lg fs-14px">
            {{ __('Login') }}
        </button>
    </div>
    <hr class="bg-gray-600 opacity-2" />
    <div class="my-5">
        @if (Route::has('password.request'))
            <a class="btn btn-danger d-block btn-lg" href="{{ route('register') }}">
                Sign Up New User
            </a>
        @endif
    </div>
    <hr class="bg-gray-600 opacity-2" />
    <div class="text-gray-600 text-center  mb-0">
        &copy; {{ date('Y') }} Copyright JLG Metro Sdn. Bhd.
    </div>
</form>

<!-- Modal -->
<div class="modal fade in" id="announcement" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="announcementLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="announcementLabel">Announcement</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="fs-4 lh-lg">Welcome to MCS. If you are our existing season parker, please kindly proceed to clicking "<b>Forget Password</b>" and fill up the required. We will provide you a link to reset your password via email. Upon resetting your password, please kindly login using your email address and your new password. You will also be required to verify your email address to fully access MCS. </p>
                <p class="fs-4 lh-lg">Please do not hesitate to contact us at our hotline <b>03 - 2081 2615, 03 - 2081 2616, 07 - 2449090 (JB)</b> or email at <b>zamani@metro-parking.com , hafliza@metro-parking.com (Johor)</b> if you require any assistance. We will be very happy to serve you.</p>
                <p class="fs-4 lh-lg">We are very sorry for the inconvenience and thank your for your patience - The Team</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Understood</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
    <script>
        const backdrop = document.getElementById('announcement');
        const myModal = new bootstrap.Modal(backdrop)

        window.onload = () => {
            myModal.show();
        }

        backdrop.addEventListener('hidden.bs.modal', event => {
            console.log('this event will close the backdrop')
        })
    </script>
@endpush