@extends('livewire.layouts.app') <!-- Assuming your layout file is app.blade.php -->

@section('content')

    <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
        <div class="flex justify-center items-center mb-20"> <!-- Added Flexbox to center the h5 -->
            <p class="text-3xl font-bold bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-transparent bg-clip-text">
                WELCOME TO IECD TIEUPS PORTAL
        </div>
        <div class="relative sm:max-w-xl sm:mx-auto">
            
            <form wire:submit.prevent="login" class="space-y-4">
                <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-sky-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
                <div class="relative px-6 py-10 bg-white shadow-lg sm:rounded-3xl">
                    <div class="w-80">
                        <div class="flex justify-center items-center">
                            <img class="w-24 " src="{{ asset('storage/images/bdu-logo.png') }}" />
                        </div>
                        
                        <!-- Display error message if session has an 'error' message -->
                        <div class="pt-2">
                        @if (session()->has('error'))
                            <div class="bg-red-100 text-red-700 p-4 rounded-md mb-4">
                                {{ session('error') }}
                            </div>
                        @endif
                        </div>
                        <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
                            <!-- Email Field -->
                            <div class="form-group">
                                <label for="email" class="block text-sm font-medium text-gray-700">Username</label>
                                <input 
                                    type="email" 
                                    id="email" 
                                    wire:model="email" 
                                    required 
                                    class="mt-1 block w-full px-1 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                >
                                @error('email') 
                                    <span class="text-red-500 text-sm">{{ $message }}</span> 
                                @enderror
                            </div>

                            <!-- Password Field -->
                            <div class="form-group">
                                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                                <input 
                                    type="password" 
                                    id="password" 
                                    wire:model="password" 
                                    required 
                                    class="mt-1 block w-full px-1 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                >
                                @error('password') 
                                    <span class="text-red-500 text-sm">{{ $message }}</span> 
                                @enderror
                            </div>

                            <!-- Submit Button -->
                            <div class="relative">
                                <x-button 
                                    type="submit" icon="o-arrow-right-start-on-rectangle"
                                    class="w-full bg-cyan-500 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300" spinner="login">
                                    Login 
                                </x-button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection