@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <div class="flex justify-center">
            <a href="{{ url('/') }}" class="flex items-center space-x-2">
                <i class="fas fa-car text-red-600 text-3xl"></i>
                <span class="font-bold text-2xl text-gray-900">E-Jumla</span>
            </a>
        </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">
            Or
            <a href="{{ route('login') }}" class="font-medium text-red-600 hover:text-red-500">
                sign in to your existing account
            </a>
        </p>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <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">
                        <input id="name" name="name" type="text" autocomplete="name" required 
                               value="{{ old('name') }}"
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm @error('name') border-red-500 @enderror">
                        @error('name')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">
                        Email address
                    </label>
                    <div class="mt-1">
                        <input id="email" name="email" type="email" autocomplete="email" required 
                               value="{{ old('email') }}"
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm @error('email') border-red-500 @enderror">
                        @error('email')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700">
                        Phone Number
                    </label>
                    <div class="mt-1">
                        <input id="phone" name="phone" type="tel" autocomplete="tel" required 
                               value="{{ old('phone') }}"
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm @error('phone') border-red-500 @enderror">
                        @error('phone')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label for="address" class="block text-sm font-medium text-gray-700">
                        Address
                    </label>
                    <div class="mt-1">
                        <textarea id="address" name="address" rows="2" required
                                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm @error('address') border-red-500 @enderror">{{ old('address') }}</textarea>
                        @error('address')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Role Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700">
                        I want to join as:
                    </label>
                    <div class="mt-2 grid grid-cols-2 gap-4">
                        <div class="relative">
                            <input class="sr-only" id="role_buyer" type="radio" name="role" value="buyer" {{ old('role', 'buyer') == 'buyer' ? 'checked' : '' }}>
                            <label for="role_buyer" class="cursor-pointer flex flex-col p-4 border border-gray-300 rounded-lg focus:outline-none hover:border-red-500 transition duration-300 {{ old('role', 'buyer') == 'buyer' ? 'border-red-500 bg-red-50' : '' }}">
                                <div class="flex items-center">
                                    <i class="fas fa-shopping-cart text-red-600 text-lg mr-3"></i>
                                    <span class="block text-sm font-medium text-gray-900">Buyer</span>
                                </div>
                                <p class="mt-1 text-xs text-gray-500">Browse and purchase vehicles & parts</p>
                            </label>
                        </div>

                        <div class="relative">
                            <input class="sr-only" id="role_vendor" type="radio" name="role" value="vendor" {{ old('role') == 'vendor' ? 'checked' : '' }}>
                            <label for="role_vendor" class="cursor-pointer flex flex-col p-4 border border-gray-300 rounded-lg focus:outline-none hover:border-red-500 transition duration-300 {{ old('role') == 'vendor' ? 'border-red-500 bg-red-50' : '' }}">
                                <div class="flex items-center">
                                    <i class="fas fa-store text-red-600 text-lg mr-3"></i>
                                    <span class="block text-sm font-medium text-gray-900">Vendor</span>
                                </div>
                                <p class="mt-1 text-xs text-gray-500">Sell vehicles and spare parts</p>
                            </label>
                        </div>
                    </div>
                    @error('role')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Vendor-specific fields (shown when vendor is selected) -->
                <div id="vendorFields" class="space-y-4 hidden">
                    <div>
                        <label for="business_name" class="block text-sm font-medium text-gray-700">
                            Business Name
                        </label>
                        <div class="mt-1">
                            <input id="business_name" name="business_name" type="text" 
                                   value="{{ old('business_name') }}"
                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="kra_pin" class="block text-sm font-medium text-gray-700">
                                KRA PIN
                            </label>
                            <div class="mt-1">
                                <input id="kra_pin" name="kra_pin" type="text" 
                                       value="{{ old('kra_pin') }}"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm">
                            </div>
                        </div>

                        <div>
                            <label for="id_number" class="block text-sm font-medium text-gray-700">
                                ID Number
                            </label>
                            <div class="mt-1">
                                <input id="id_number" name="id_number" type="text" 
                                       value="{{ old('id_number') }}"
                                       class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700">
                            Password
                        </label>
                        <div class="mt-1">
                            <input id="password" name="password" type="password" autocomplete="new-password" required 
                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm @error('password') border-red-500 @enderror">
                        </div>
                    </div>

                    <div>
                        <label for="password-confirm" class="block text-sm font-medium text-gray-700">
                            Confirm Password
                        </label>
                        <div class="mt-1">
                            <input id="password-confirm" name="password_confirmation" type="password" autocomplete="new-password" required 
                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm">
                        </div>
                    </div>
                </div>
                @error('password')
                    <p class="text-sm text-red-600">{{ $message }}</p>
                @enderror

                <div class="flex items-center">
                    <input id="terms" name="terms" type="checkbox" required
                           class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                    <label for="terms" class="ml-2 block text-sm text-gray-900">
                        I agree to the
                        <a href="#" class="text-red-600 hover:text-red-500">Terms and Conditions</a>
                        and
                        <a href="#" class="text-red-600 hover:text-red-500">Privacy Policy</a>
                    </label>
                </div>

                <div>
                    <button type="submit" 
                            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-300">
                        <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                            <i class="fas fa-user-plus text-red-500 group-hover:text-red-400"></i>
                        </span>
                        Create Account
                    </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">
                    <a href="{{ route('login') }}" 
                       class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-300">
                        Sign in
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Show/hide vendor fields based on role selection
    document.addEventListener('DOMContentLoaded', function() {
        const vendorFields = document.getElementById('vendorFields');
        const roleInputs = document.querySelectorAll('input[name="role"]');
        
        function toggleVendorFields() {
            const selectedRole = document.querySelector('input[name="role"]:checked').value;
            if (selectedRole === 'vendor') {
                vendorFields.classList.remove('hidden');
                // Make vendor fields required
                document.getElementById('business_name').required = true;
                document.getElementById('kra_pin').required = true;
                document.getElementById('id_number').required = true;
            } else {
                vendorFields.classList.add('hidden');
                // Remove required from vendor fields
                document.getElementById('business_name').required = false;
                document.getElementById('kra_pin').required = false;
                document.getElementById('id_number').required = false;
            }
        }
        
        // Add event listeners to role inputs
        roleInputs.forEach(input => {
            input.addEventListener('change', toggleVendorFields);
        });
        
        // Initialize on page load
        toggleVendorFields();
    });
</script>
@endsection