@extends('auth-base')

@section('title', 'Register')

@section('content')

    @push('styles')
        <style>
            /* Background image with overlay effect - same as admin login */
            body {
                font-family: 'Figtree', sans-serif;
                background-image: url('{{ asset('dynaweb4/img/background.jpg') }}');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }

            /* Animation for smooth entrance */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes slideUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .animate-fade-in {
                animation: fadeIn 0.5s ease-out;
            }

            .animate-slide-up {
                animation: slideUp 0.6s ease-out;
            }

            /* Glassmorphism card effect - premium look */
            .glass-card {
                background-color: rgba(255, 255, 255, 0.96);
                backdrop-filter: blur(8px);
                transition: all 0.3s ease;
            }

            .glass-card:hover {
                transform: translateY(-3px);
                box-shadow: 0 25px 35px -12px rgba(0, 0, 0, 0.2);
            }

            /* Input focus effect */
            .input-focus-effect:focus {
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
                border-color: #6366f1;
            }

            /* Custom scrollbar */
            ::-webkit-scrollbar {
                width: 8px;
            }

            ::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb {
                background: #818cf8;
                border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: #6366f1;
            }
        </style>
    @endpush


    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 px-4 py-8">

        <!-- Logo / Brand - same as admin login style -->
        <div class="mb-5 animate-fade-in">
            <a href="/">
                <img src="{{ asset('dynaweb4/img/logo-small.png') }}" alt="Logo"
                    class="w-20 h-20 rounded-2xl shadow-xl object-cover p-1.5 bg-white/90 backdrop-blur-sm">
            </a>
        </div>

        <!-- Registration Card with glass effect - wider for 2 columns -->
        <div
            class="w-full max-w-4xl px-7 py-8 glass-card shadow-xl overflow-hidden sm:rounded-2xl border border-gray-100 animate-slide-up">

            <!-- Header Section -->
            <div class="text-center mb-7">
                <h2 class="text-2xl font-bold text-gray-900">
                    Create Account
                </h2>
                <p class="text-sm text-gray-600 mt-2">
                    Join us to access your personalized dashboard
                </p>
            </div>

            <!-- Success/Error Session Messages -->
            @if (session('success'))
                <div class="mb-5 text-sm text-green-700 bg-green-50 border-l-4 border-green-500 rounded-lg p-3 animate-fade-in">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="mb-5 text-sm text-red-700 bg-red-50 border-l-4 border-red-500 rounded-lg p-3 animate-fade-in">
                    {{ session('error') }}
                </div>
            @endif

            <!-- Registration Form with 2 columns -->
            <form method="POST" action="{{ route('user.register.submit') }}" class="space-y-4">
                @csrf

                <!-- 2 Columns Grid Layout -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                    <!-- Left Column -->
                    <div class="space-y-4">
                        <!-- Username Field -->
                        <div>
                            <label for="username" class="block text-sm font-semibold text-gray-700 mb-1.5">
                                Username <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z">
                                        </path>
                                    </svg>
                                </div>
                                <input type="text" id="username" name="username" value="{{ old('username') }}" required
                                    class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect @error('username') border-red-500 @enderror"
                                    placeholder="Choose a unique username">
                            </div>
                            @error('username')
                                <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <!-- First Name Field -->
                        <div>
                            <label for="first_name" class="block text-sm font-semibold text-gray-700 mb-1.5">
                                First Name <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z">
                                        </path>
                                    </svg>
                                </div>
                                <input type="text" id="first_name" name="first_name" value="{{ old('first_name') }}"
                                    required
                                    class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect @error('first_name') border-red-500 @enderror"
                                    placeholder="Enter your first name">
                            </div>
                            @error('first_name')
                                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Last Name Field -->
                        <div>
                            <label for="last_name" class="block text-sm font-semibold text-gray-700 mb-1.5">
                                Last Name <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z">
                                        </path>
                                    </svg>
                                </div>
                                <input type="text" id="last_name" name="last_name" value="{{ old('last_name') }}"
                                    class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect @error('last_name') border-red-500 @enderror"
                                    placeholder="Enter your last name">
                            </div>
                            @error('last_name')
                                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                    </div>

                    <!-- Right Column -->
                    <div class="space-y-4">
                        <!-- Email Field -->
                        <div>
                            <label for="email" class="block text-sm font-semibold text-gray-700 mb-1.5">
                                Email Address <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                        </path>
                                    </svg>
                                </div>
                                <input type="email" id="email" name="email" value="{{ old('email') }}" required
                                    class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect @error('email') border-red-500 @enderror"
                                    placeholder="you@example.com">
                            </div>
                            @error('email')
                                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Password Field with toggle -->
                        <div>
                            <label for="password" class="block text-sm font-semibold text-gray-700 mb-1.5">
                                Password <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                        </path>
                                    </svg>
                                </div>
                                <input type="password" id="password" name="password" required
                                    class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect @error('password') border-red-500 @enderror"
                                    placeholder="Create a strong password">
                                <button type="button" onclick="togglePassword('password', 'togglePassIcon')"
                                    class="absolute inset-y-0 right-0 pr-3 flex items-center focus:outline-none">
                                    <svg id="togglePassIcon"
                                        class="h-5 w-5 text-gray-400 hover:text-gray-600 cursor-pointer transition"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                            @error('password')
                                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-1.5 text-xs text-gray-500">Minimum 8 characters with letters & numbers</p>
                        </div>

                        <!-- Confirm Password Field -->
                        <div>
                            <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-1.5">
                                Confirm Password <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                                        </path>
                                    </svg>
                                </div>
                                <input type="password" id="password_confirmation" name="password_confirmation" required
                                    class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect"
                                    placeholder="Confirm your password">
                                <button type="button" onclick="togglePassword('password_confirmation', 'toggleConfirmIcon')"
                                    class="absolute inset-y-0 right-0 pr-3 flex items-center focus:outline-none">
                                    <svg id="toggleConfirmIcon"
                                        class="h-5 w-5 text-gray-400 hover:text-gray-600 cursor-pointer transition"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        <!-- Phone Field (Additional) -->
                        {{-- <div>
                            <label for="phone" class="block text-sm font-semibold text-gray-700 mb-1.5">
                                Phone Number
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                        </path>
                                    </svg>
                                </div>
                                <input type="tel" id="phone" name="phone" value="{{ old('phone') }}"
                                    class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect"
                                    placeholder="+60 12 345 6789">
                            </div>
                        </div> --}}
                    </div>
                </div>

                <!-- Full Width Fields below the columns -->
                <div class="space-y-4 mt-2">
                    <!-- Terms & Conditions Checkbox -->
                    <div class="flex items-start gap-2">
                        <input type="checkbox" id="terms" name="terms" required
                            class="mt-1 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <label for="terms" class="text-xs text-gray-600">
                            I agree to the <a href="#" class="text-indigo-600 hover:underline">Terms of Service</a>
                            and <a href="#" class="text-indigo-600 hover:underline">Privacy Policy</a>
                        </label>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                        class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-rose-800 to-red-900 hover:from-rose-900 hover:to-red-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 transition duration-150 transform hover:scale-[1.02]">
                        <span class="flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z">
                                </path>
                            </svg>
                            Create Account
                        </span>
                    </button>
                </div>
            </form>

            <!-- Login Link -->
            <div class="mt-6 pt-4 text-center border-t border-gray-200">
                <p class="text-sm text-gray-600">
                    Already have an account?
                    <a href="{{ route('user.login') }}"
                        class="font-semibold text-indigo-600 hover:text-indigo-500 hover:underline transition ml-1">
                        Sign in here
                    </a>
                </p>
            </div>

            <!-- Demo Info (Optional) -->
            <div class="mt-5 p-3 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-100">
                <p class="text-xs text-blue-800 font-medium flex items-center gap-1">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                            clip-rule="evenodd" />
                    </svg>
                    Registration Note:
                </p>
                <p class="text-xs text-blue-700 mt-1">All fields marked with <span class="text-red-500">*</span> are
                    required. Password must be at least 8 characters.</p>
            </div>
        </div>

    </div>

@endsection

@push('scripts')
    <!-- JavaScript for password toggle functionality -->
    <script>
        function togglePassword(fieldId, iconId) {
            const passwordInput = document.getElementById(fieldId);
            const icon = document.getElementById(iconId);

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.innerHTML =
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>';
            } else {
                passwordInput.type = 'password';
                icon.innerHTML =
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>';
            }
        }
    </script>
@endpush