@extends('layouts.app')
@section('title','Login')
@section('styles')
    <style>

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'Mulish', sans-serif;
        }

        .main-contain {
            height: 100vh;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(2px);
        }
        .card-bg {
            background-color: #F4F4F4;
            padding: 60px 55px;
            width: 550px;
            height: 620px;
            border: 0;
        }

        .sign-title {
            color: #1C274D;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
        }

        .subtitle {
            color: #A0A0A0;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .password {
            position: relative;
        }

        #pass_view {
            position: absolute;
            right: 15px;
            top: 43px;
        }

        .login-btn {
            display: flex;
            height: 48px;
            padding: 14px 16px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            align-self: stretch;
            border-radius: 4px;
            border: none;
            background: #009A75;
            color: #F4F4F4;
        }

        .label-font-size {
            color: #1C274D;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
        }

        input::placeholder {
            font-size: 0.875rem;
        }

        input[type="email"], input[type="password"], input[type="text"] {
            background: transparent;
            padding: 10px 20px;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            transition: background-color 5000s ease-in-out 0s;
            -webkit-text-fill-color: #1c274d !important;
        }

        .login-logo {
            height: 6.89rem;
        }
    </style>
@endsection
@section('content')
    <div class="row main-contain">
        <div class="card card-bg">
            <img class="login-logo" src="{{ asset('assets/icons/logo-uss.png') }}" alt="" srcset="">
            <hr>
            <div class="card-body">
                <h1 class="sign-title">Sign in</h1>
                <h6 class="subtitle">Welcome back! Enter your details to continue</h6>
                <form method="POST" action="{{ route('login') }}" role="form" id="form_login"
                      class="form-horizontal">
                    @csrf
                    @if(session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif
                    <div class="mb-3 mt-4">
                        <label for="exampleFormControlInput1" class="form-label label-font-size">Email
                            address</label>
                        <input type="email" id="exampleFormControlInput1" placeholder="Enter Your Email address"
                               class="form-control @error('email') is-invalid @enderror" name="email"
                               value="{{ old('email') }}" required autocomplete="email">
                        @error('email')
                        <div class="text-danger">
                            <p>{{ $message }}</p>
                        </div>
                        @enderror
                    </div>
                    <div class="mb-3 password">
                        <label for="password" class="form-label label-font-size">Password</label>
                        <input type="password" class="form-control @error('password') is-invalid @enderror"
                               name="password" autocomplete="current-password" id="password"
                               placeholder="Enter Password" required>
                        <button type="button" class=" border-0 eye-show" id="pass_view"><i
                                class="password-show-icon eye-ico-vac"></i>
                        </button>
                        @error('password')
                        <div class="text-danger">
                            <p>{{ $message }}</p>
                        </div>
                        @enderror
                    </div>
                    <div class="form-check">
                        <input class="form-check-input " value="1" type="checkbox" id="flexCheckDefault"
                               name="remember" {{ old('remember') ? 'checked' : '' }}>
                        <label class="form-check-label" for="flexCheckDefault">
                            Remember me
                        </label>
                    </div>
                    <button class="login-btn w-100 mt-3">Login</button>
                    <div class="text-center w-100 mt-3">
                        <a href="{{route('password.request')}}" class="text-dark"><u>Forgot Password?</u></a>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        $('#pass_view').click(function (e) {
            e.preventDefault();
            if ($(this).hasClass('eye-show')) {
                $(this).removeClass('eye-show');
                $(this).addClass('eye-hide');
                $('#password').attr('type', 'text');
                $('.password-show-icon').removeClass('eye-ico-vac').addClass('eye-off-ico-vac')
            } else {
                $(this).removeClass('eye-hide');
                $(this).addClass('eye-show');
                $('#password').attr('type', 'password');
                $('.password-show-icon').removeClass('eye-off-ico-vac').addClass('eye-ico-vac')
            }
        });
    </script>
@endpush
