{{-- register.blade.php --}}

<x-guest-layout title="Register">

    {{-- The content placed here is injected into the $header slot --}}
    <x-slot name="header">
        <div class="flex justify-center">
            <div class="">
                <img src="{{ asset('images/rydi.png') }}" alt="Logo" style=" width: 40%; margin: 0 auto;">
            </div>
        </div>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Create your account
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
            Join our platform today
        </p>
    </x-slot>

    {{-- The rest of the content is injected into the default $slot (the card body) --}}

    @if ($errors->any())
        <div class="mb-4">
            <div class="font-medium text-red-600">
                {{ __('Whoops! Something went wrong.') }}
            </div>
            <ul class="mt-3 list-disc list-inside text-sm text-red-600">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form class="space-y-6" method="POST" action="{{ route('register') }}">
        @csrf

        <div>
            <label for="name" class="block text-sm font-medium text-gray-700">
                Full Name
            </label>
            <div class="mt-1 relative rounded-md shadow-sm">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-user text-gray-400"></i>
                </div>
                <input id="name" name="name" type="text" autocomplete="name" required 
                        class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500" 
                        placeholder="John Doe" value="{{ old('name') }}">
            </div>
        </div>

        <div>
            <label for="email" class="block text-sm font-medium text-gray-700">
                Email address
            </label>
            <div class="mt-1 relative rounded-md shadow-sm">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-envelope text-gray-400"></i>
                </div>
                <input id="email" name="email" type="email" autocomplete="email" required 
                        class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500" 
                        placeholder="you@example.com" value="{{ old('email') }}">
            </div>
        </div>

        <div>
            <label for="password" class="block text-sm font-medium text-gray-700">
                Password
            </label>
            <div class="mt-1 relative rounded-md shadow-sm">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-lock text-gray-400"></i>
                </div>
                <input id="password" name="password" type="password" autocomplete="new-password" required 
                        class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500" 
                        placeholder="••••••••">
            </div>
        </div>

        <div>
            <label for="password_confirmation" class="block text-sm font-medium text-gray-700">
                Confirm Password
            </label>
            <div class="mt-1 relative rounded-md shadow-sm">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-check-circle text-gray-400"></i>
                </div>
                <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required 
                        class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500" 
                        placeholder="••••••••">
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                I am a:
            </label>
            <div class="flex space-x-6">
                <div class="flex items-center">
                    <input id="rolePassenger" name="role" type="radio" value="passenger" checked
                            class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
                    <label for="rolePassenger" class="ml-2 block text-sm text-gray-900">
                        Passenger
                    </label>
                </div>
                <div class="flex items-center">
                    <input id="roleCaptain" name="role" type="radio" value="captain"
                            class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
                    <label for="roleCaptain" class="ml-2 block text-sm text-gray-900">
                        Captain
                    </label>
                </div>
                <div class="flex items-center">
                    <input id="roleSeller" name="role" type="radio" value="seller"
                            class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
                    <label for="roleSeller" class="ml-2 block text-sm text-gray-900">
                        Seller (Shop Owner)
                    </label>
                </div>
            </div>
        </div>

        <div>
            <button type="submit" 
                    class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200">
                Register
            </button>
        </div>
    </form>

    <div class="mt-6">
        <div class="relative">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white text-gray-500">
                    Already have an account?
                </span>
            </div>
        </div>

        <div class="mt-6 text-center">
            <a href="{{ route('login') }}" 
                class="font-medium text-green-600 hover:text-green-500">
                Sign in to your account
            </a>
        </div>
    </div>
</x-guest-layout>