@extends('layouts.main-app')
@section('title', 'Homepage')

@section('content')



@include('layouts.navbar', [
    'headerTitle' => 'Patients Login',
     'headerDescription' => 'Home > Patients'])

            <section class="flex items-center justify-center  px-4 sm:px-6 lg:px-8 py-20">
                <div class="max-w-xl w-full bg-white rounded-3xl  p-8  drop-shadow-2xl shadow-inner">
                    <!-- Hospital Logo -->
                        <div class="text-center mb-8">
                            <div class="flex justify-center items-center py-8">
                                <img src="{{asset('assets/logo.png')}}" alt="Prime Hospital" class="size-20  mr-3 ">
                                <h4 class="text-blue-600 text-xl font-semibold">Prime Hospital</h4>
                            </div>
                            <p class="text-gray-500 text-sm">Medical Center - Pasic INC.</p>
                        </div>

                        <!-- Portal Title -->
                        <h2 class="text-center text-3xl font-bold mb-8 border-b-2 border-blue-600 pb-4">Patient Portal</h2>


                        @if ($errors->any())

                        @foreach ($errors->all() as $error)
                        <div class="mt-4">
                            <x-input-error :messages="$error" class="mt-2" />
                        </div>
                        @endforeach
                        @endif

                        <!-- Login Form -->
                        <form method="POST" action="{{ route('login.patient') }}" class="space-y-6 ">
                            @csrf
                            <div class="flex justify-between items-center">
                                <label for="email" class="block text-sm pr-2 font-medium text-gray-700 whitespace-nowrap">
                                    Email Address<span class="text-red-500">*</span>
                                </label>
                                <input type="email" 
                                       id="email" 
                                       name="email" 
                                       required 
                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            </div>

                            <div class="flex justify-between items-center">
                                <label for="password" class="block text-sm pr-10 font-medium text-gray-700 whitespace-nowrap">
                                    Password<span class="text-red-500">*</span>
                                </label>
                                <input type="password" 
                                       id="password" 
                                       name="password" 
                                       required 
                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            </div>

                            <div class="flex">
                                <button type="submit" 
                                        class="w-full flex justify-center py-3 px-4 border border-transparent rounded-full shadow-sm text-lg font-medium text-white bg-blue-600 hover:scale-105 transition-all duration-300 hover:bg-blue-700/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                    Login
                                </button>
                            </div>

                            <div class="flex justify-center items-center">
                                <span class="text-gray-500 text-sm">New to Prime Hospital Portal?
                                    <a href="{{ route('patientsPortalRegister') }}" class="text-blue-600 underline">Register Now</a>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </section>

@endsection