@extends('layouts.app')

@php($hideLayout = true)

@section('content')

    <div class="min-h-screen bg-gray-50">
        <div class="container mx-auto flex min-h-screen">
            <!-- Left Side - Image -->
            <div class="hidden lg:flex w-1/2 items-center justify-center px-6 md:p-8">
                <div class="max-w-md">
                    <img alt="Register illustration" class="w-full h-auto object-contain" src="{{asset('assets/images/login.svg')}}">
                    <div class="mt-8 text-center text-gray-700">
                        <h2 class="text-2xl font-bold">{{__('auth.welcome',['name'=>'Shikkha Point'])}}</h2>
                        <p class="mt-2">{{__('auth.register_promo')}}</p>
                    </div>
                </div>
            </div>
            
            <!-- Right Side - Form -->
            <div class="w-full lg:w-1/2 flex items-center justify-center p-4 lg:p-8">
                <div class="w-full max-w-md bg-white rounded-2xl px-5 md:px-6  py-8 shadow-xl border border-slate-200 border-dashed">
                    <!-- Logo -->
                    <div class="mb-6 text-center">
                        <a href="/">
                            <img alt="Edge Course Logo" class="w-[160px] inline-block" src="{{asset('assets/images/logo.svg')}}">
                        </a>
                    </div>
                    
                    <!-- Title -->
                   <div class="block lg:hidden">
                     <h1 class="text-2xl font-bold text-center text-gray-800 mb-2">{{__('auth.create_account')}}</h1>
                    <p class="text-center text-gray-600 mb-6">{{__('auth.register_to_continue')}}</p>
                   </div>
                      @include('include.social-login')
                    <!-- Registration Form -->
                    <form method="POST" action="{{ route('register') }}" class="space-y-4">
                        @csrf
                        <div>
                            <label for="name" class="mb-1 block text-md font-medium text-gray-700">
                                {{__('auth.full_name')}} <span class="text-red-500">*</span>
                            </label>
                            <input id="name" 
                                   type="text" 
                                   name="name" 
                                   value="{{ old('name') }}"
                                   required
                                   autofocus
                                   autocomplete="name"
                                   placeholder="{{__('auth.full_name_placeholder')}}"
                                    class="@error('name') !border-red-500 !bg-red-50 @enderror">
                            @error('name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <!-- Email Field -->
                        <div>
                            <label for="email" class="mb-1 block text-md font-medium text-gray-700">
                                {{__('auth.email')}} <span class="text-red-500">*</span>
                            </label>
                            <input id="email" 
                                   type="email" 
                                   name="email" 
                                   value="{{ old('email') }}"
                                   required
                                   autocomplete="email"
                                   placeholder="{{__('auth.email_placeholder')}}"
                                   class="@error('email') !border-red-500 !bg-red-50 @enderror">
                            @error('email')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <!-- Phone Field -->
                        <div>
                            <label for="phone" class="mb-1 block text-md font-medium text-gray-700">
                                {{__('auth.phone')}} <span class="text-red-500">*</span>
                            </label>
                            <input id="phone" 
                                   type="tel" 
                                   name="phone" 
                                   value="{{ old('phone') }}"
                                   required
                                   autocomplete="tel"
                                   placeholder="{{__('auth.phone_placeholder')}}"
                                   class="@error('phone') !border-red-500 !bg-red-50 @enderror">
                            @error('phone')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <!-- Password Field -->
                        <div>
                            <label for="password" class="mb-1 block text-md font-medium text-gray-700">
                               {{__('auth.password')}} <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input id="password" 
                                       type="password"
                                       name="password"
                                       required
                                       autocomplete="new-password"
                                       placeholder="{{__('auth.password_placeholder')}}"
                                       class="@error('password') !border-red-500 !bg-red-50 @enderror">
                                <button type="button" 
                                        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 hover:text-primary-dark"
                                        onclick="togglePasswordVisibility('password')">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="cursor-pointer">
                                        <path d="M21.1303 9.8531C22.2899 11.0732 22.2899 12.9268 21.1303 14.1469C19.1745 16.2047 15.8155 19 12 19C8.18448 19 4.82549 16.2047 2.86971 14.1469C1.7101 12.9268 1.7101 11.0732 2.86971 9.8531C4.82549 7.79533 8.18448 5 12 5C15.8155 5 19.1745 7.79533 21.1303 9.8531Z" 
                                              stroke="currentColor" stroke-width="1.5"></path>
                                        <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" 
                                              stroke="currentColor" stroke-width="1.5"></path>
                                    </svg>
                                </button>
                            </div>
                            @error('password')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <!-- Confirm Password Field -->
                        <div>
                            <label for="password_confirmation" class="mb-1 block text-md font-medium text-gray-700">
                               {{__('auth.confirm_password')}} <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input id="password_confirmation" 
                                       type="password"
                                       name="password_confirmation"
                                       required
                                       autocomplete="new-password"
                                       placeholder="{{__('auth.confirm_password_placeholder')}}"
                                       class="@error('password_confirmation') !border-red-500 !bg-red-50 @enderror">
                                <button type="button" 
                                        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 hover:text-primary-dark"
                                        onclick="togglePasswordVisibility('password_confirmation')">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="cursor-pointer">
                                        <path d="M21.1303 9.8531C22.2899 11.0732 22.2899 12.9268 21.1303 14.1469C19.1745 16.2047 15.8155 19 12 19C8.18448 19 4.82549 16.2047 2.86971 14.1469C1.7101 12.9268 1.7101 11.0732 2.86971 9.8531C4.82549 7.79533 8.18448 5 12 5C15.8155 5 19.1745 7.79533 21.1303 9.8531Z" 
                                              stroke="currentColor" stroke-width="1.5"></path>
                                        <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" 
                                              stroke="currentColor" stroke-width="1.5"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                      
                        <!-- Submit Button -->
                        <button type="submit" 
                                class="btn-primary w-full !py-[12px] mt-1">
                           {{__('auth.register')}}
                        </button>
                        
                        <!-- Login Link -->
                        <p class="text-center text-sm text-gray-500 mt-2">
                         {{__('auth.already_have_account')}}
                            <a href="{{ route('login') }}" class="font-medium text-primary hover:text-primary-dark hover:underline">
                                {{__('auth.sign_in')}}
                            </a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function togglePasswordVisibility(fieldId) {
            const passwordField = document.getElementById(fieldId);
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
        }
    </script>
@endsection