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

@section('content')



@include('layouts.navbar', [
    'headerTitle' => 'Doctors and Specialists',
     'headerDescription' => 'Home > Doctors and Specialists'])


<section class="flex items-center justify-center min-h-screen bg-gray-50 px-4 sm:px-6 lg:px-8 py-20">
    <div class="max-w-screen-md w-full bg-white rounded-3xl p-8 drop-shadow-2xl">
        <!-- Hospital Logo -->
        <div class="text-center mb-10">
            <div class="flex justify-center items-center gap-3 py-6">
                <img src="{{ asset('images/logo.png') }}" alt="Prime Hospital" class="w-14 h-14 border-2 border-gray-200 rounded-full p-1">
                <h4 class="text-blue-700 text-2xl font-bold">Prime Hospital</h4>
            </div>
            <p class="text-gray-500 text-sm font-medium">Medical Center - Pasic INC.</p>
        </div>

        <!-- Portal Title -->
        <h2 class="text-center text-3xl font-bold mb-10 text-gray-800 border-b-2 border-blue-600 pb-4">
            Patient Portal Registration
        </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 action="{{ route('register') }}" method="POST" class="space-y-6">
            @csrf
            <div class="grid grid-cols-12 gap-6">
                <!-- Name Fields -->
                <div class="col-span-5 flex justify-center items-center">
                    <label for="name" class="block text-sm font-semibold text-gray-700 mb-1">Name<span class="text-red-500">*</span></label>
                    <input type="text" name="first_name" id="first_name" required value="{{ old('first_name') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                    @error('name')
                        <span class="text-red-500 text-sm">{{ $message }}</span>
                    @enderror
                </div> 

                <div class="col-span-2 flex justify-center items-center">
                    <label for="mi" class="block text-sm font-semibold text-gray-700 mb-1">M.I.<span class="text-red-500">*</span></label>
                    <input type="text" name="middle_initial" id="middle_initial" required maxlength="1"
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>

                <div class="col-span-5 flex justify-center items-center">
                    <label for="last_name" class="block text-sm font-semibold text-gray-700 mb-1">Last Name<span class="text-red-500">*</span></label>
                    <input type="text" name="last_name" id="last_name" required value="{{ old('last_name') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>

                <!-- Age, Date, and No. Fields -->
                <div class="col-span-2 flex justify-center items-center">
                    <label for="age" class="block text-sm font-semibold text-gray-700 mb-1">Age<span class="text-red-500">*</span></label>
                    <input type="number" name="age" id="age" required min="0" max="150" value="{{ old('age') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>

                <div class="col-span-5 flex justify-center items-center">
                    <label for="date" class="block text-sm font-semibold text-gray-700 mb-1"> Birth Date<span class="text-red-500">*</span></label>
                    <input type="date" name="date_of_birth" id="date_of_birth" required value="{{ old('date_of_birth') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>
                <div class="col-span-5 flex justify-center items-center">
                    <label for="number" class="block text-sm font-semibold text-gray-700 mb-1">Contact No.<span class="text-red-500 ml-1">*</span></label>
                    <input type="text" name="contact_number" id="contact_number" required value="{{ old('contact_number') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>

                <!-- Address Field -->
                <div class="col-span-12 flex justify-center items-center">
                    <label for="address" class="block text-sm font-semibold text-gray-700 mb-1">Address<span class="text-red-500">*</span></label>
                    <input type="text" name="address" id="address" required value="{{ old('address') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>

                <!-- Email Field -->
                <div class="col-span-12 flex justify-center items-center">
                    <label for="email" class="block text-sm font-semibold text-gray-700 mb-1">Email<span class="text-red-500">*</span></label>
                    <input type="email" name="email" id="email" required value="{{ old('email') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>

                <!-- Password Fields -->
                <div class="col-span-6 flex justify-center items-center">
                    <label for="password" class="block text-sm font-semibold text-gray-700 mb-1">Password<span class="text-red-500">*</span></label>
                            <input type="password" name="password" id="password" required 
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>
                <div class="col-span-6 flex justify-center items-center ">
                    <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-1">Confirm Password<span class="text-red-500">*</span></label>
                    <input type="password" name="password_confirmation" id="password_confirmation" required 
                        class="mt-1 block w-full rounded-md border-gray-300 border-[1px] shadow-sm px-4 py-2 ml-2 
                        focus:border-blue-500 focus:ring-blue-500 focus:bg-white transition duration-200">
                </div>

                
                <input type="text" name="role"  value="patient" hidden>
                
            </div>

            <!-- Submit Button -->
            <div class="mt-8">
                <button type="submit" 
                    class="w-full bg-blue-800/95 text-white py-3 px-4 rounded-full font-semibold
                    hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 
                    focus:ring-offset-2 transform transition duration-200 hover:scale-[1.02]">
                    Register
                </button>
            </div>

            <!-- Login Link -->
            <div class="text-center mt-6 text-sm">
                <span class="text-gray-600">Already have an account?</span>
                <a href="{{ route('patientsPortalLogin') }}" 
                    class="text-blue-600 hover:text-blue-700 underline ml-1 
                    hover:underline transition duration-200">
                    Login Now
                </a>
            </div>
        </form>
    </div>
</section>


@endsection