@extends('layouts.app')

@section('title', 'Register')

@section('content')
<div class="py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
    <div class="max-w-3xl w-full">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-gray-900">
                Create your account
            </h2>

        </div>

        <div class="bg-white py-8 px-6 shadow-lg rounded-lg">
            @if ($errors->any())
                <div class="mb-4 bg-red-50 text-red-700 p-4 rounded-lg">
                    <ul class="list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

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

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

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

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

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

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="password" class="block text-xs font-medium text-gray-700">Password</label>
                        <div class="mt-1">
                            <input id="password"
                                   name="password"
                                   type="password"
                                   required
                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                        </div>
                    </div>

                    <div>
                        <label for="password_confirmation" class="block text-xs font-medium text-gray-700">Confirm Password</label>
                        <div class="mt-1">
                            <input id="password_confirmation"
                                   name="password_confirmation"
                                   type="password"
                                   required
                                   class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                        </div>
                    </div>
                </div>

                <div>
                    <button type="submit" class="w-full bg-red-700 text-white flex justify-center py-2 px-4 rounded-lg hover:bg-red-800 transition-colors duration-300">
                        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="{{ request()->has('redirect') ? route('login'). '?redirect='. urlencode(request()->redirect) : route('login') }}" class="w-full flex justify-center py-2 px-4 border-2 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-yellow-500 transition-all duration-300">
                        Sign in to your account
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <!-- In your head section -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8/jquery.inputmask.min.js"></script>

    <script>
        $(document).ready(function() {
            // Phone number masking (10 digits with +91 prefix)
            $('#phone').inputmask({
                mask: '+91 9999999999',
                placeholder: '_',
                clearIncomplete: true,
                showMaskOnHover: false
            });

            $('#pan_number').inputmask({
                mask: 'AAAAA9999A',
                placeholder: '_',
                definitions: {
                    'A': {
                        validator: '[A-Za-z]',
                        casing: 'upper' // automatically convert to uppercase
                    },
                    '9': {
                        validator: '[0-9]'
                    }
                },
                clearIncomplete: true,
                showMaskOnHover: false
            });

            // Aadhaar number masking (12 digits in groups of 4)
            $('#aadhar_number').inputmask({
                mask: '9999 9999 9999',
                placeholder: '_',
                clearIncomplete: true,
                showMaskOnHover: false
            });
        });
    </script>
@endpush
@endsection