@extends('layouts.auth')

@section('title', 'Columbus 17 | Log In')

@section('content')
    <div class="content w-full sm:w-96 m-auto mt-24 p-4 sm:p-0">
        <div class="flex flex-col">
            <div class="flex flex-col items-center space-y-4 mb-12">
                <p class="text-4xl sm:text-6xl">COLUMBUS17</p>
                <p class="text-3xl">Log In to Columbus 17</p>
            </div>
            @if(Session::has('message'))
                <div id="alert-3" class="flex items-center justify-between p-4 mb-4 text-green-800 rounded-lg bg-green-300 dark:bg-gray-800 dark:text-green-400" role="alert">
                    <i class="fa fa-info-circle" aria-hidden="true"></i>
                    <div class="text-sm font-medium">
                        {{ session('message') }}
                    </div>
                    <i class="fa fa-times hover:cursor-pointer" aria-hidden="true" data-dismiss-target="#alert-3"></i>
                </div>
            @endif
            <form action="{{ route('authenticate') }}" method="POST">
                @csrf
                <div class="mb-6">
                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email address</label>
                    <input type="email" name="email" id="email" class="@error('email') border-2 border-red-500 @enderror bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="{{ old('email') }}" placeholder="Email address"/>
                    @if ($errors->has('email'))
                        <span class="text-red-500">{{ $errors->first('email') }}</span>
                    @endif
                </div>
                <div class="flex flex-col">
                    <div class="mb-2">
                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
                        <input type="password" name="password" id="password" class="@error('password') border-2 border-red-500 @enderror bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"/>
                        @if ($errors->has('password'))
                            <span class="text-red-500">{{ $errors->first('password') }}</span>
                        @endif
                    </div>
                    <a class="self-end text-blue-500 font-semibold" href="{{ url('./forget-password') }}">Forgot Password?</a>
                </div>
                <div class="flex items-start mb-6">
                    <div class="flex items-center h-5">
                    <input name="remember_me" id="remember" type="checkbox" value="true" class="form-check-input w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
                    </div>
                    <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember Me</label>
                </div>
                <div class="mb-6 w-full">
                    <input type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" value="LOG IN">
                </div>
            </form>
        </div>
    </div>
@endsection