@extends('login.layout')
@section('content')

<h2 class="mt-6 text-center text-[26px] font-bold tracking-tight text-gray-900">Sign in to your account</h2>
<div class="mt-6 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white py-8 px-4 border border-gray-100 shadow sm:rounded-lg sm:px-10">
        @if ($message = Session::get('error'))
            <div class="bg-red-100 rounded-lg py-3 px-3 text-sm text-red-700 inline-flex items-center w-full mb-3" role="alert">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle"
                    class="w-4 h-4 mr-2 fill-current" role="img" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 512 512">
                    <path fill="currentColor"
                        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z">
                    </path>
                </svg>
                {{ $message }}
            </div>
        @endif
        <form action="{{Route('UserManagementController.employeeLogin')}}" method="POST">
            @csrf
            <div class="block">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">User ID</label>
                    <div class="mt-1">
                    <input name="user_id" id="user_id" required placeholder="User ID" type="text" class="block w-full appearance-none rounded-md border px-3 py-2 placeholder-gray-400 shadow-sm focus:border-green-500 focus:outline-none focus:ring-green-500 sm:text-sm border-gray-300">
                    </div>
                </div>
                <div class="mb-4">
                    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                    <div class="relative mt-1 rounded-md shadow-sm">
                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5 text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"></path></svg>
                        </div>
                        <input type="password" name="password" id="password" required class="pl-10 px-3 py-2 block w-full border rounded-md pl-10 focus:outline-none focus:border-green-500 focus:ring-green-500 sm:text-sm border-gray-300" placeholder="Password">
                        <i class="absolute top-[13px] right-3 text-gray-600 fa fa-eye toggle-password"></i>
                    </div>
                </div>
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center"></div>
                    <div class="text-sm">
                        <a href="{{Route('user.forgetPasswordView')}}" class="font-medium text-green-600 hover:text-green-500">{{__('Password_recovery')}}</a>
                    </div>
                </div>
                <div class="pt-0"><button type="submit" class="flex w-full justify-center rounded-md border border-transparent bg-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">Sign In</button></div>
            </div>
        </form>
    </div>
</div>


@endsection