@extends('layouts.auth')

@section('title', 'Sign Up - DigitalStore')

@push('styles')
<style>
    @keyframes laptop-float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }
    .laptop-float {
        animation: laptop-float 6s ease-in-out infinite;
    }
    .dot-pattern {
        background-image: radial-gradient(circle, #6c63ff 1px, transparent 1px);
        background-size: 30px 30px;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen flex flex-col lg:flex-row bg-white">
    {{-- Left Side: Branding & Features (Hidden on Mobile) --}}
    <div class="hidden lg:flex lg:w-5/12 bg-[#0b101b] relative overflow-hidden flex flex-col p-8 lg:p-16">
        {{-- Decorative Glow --}}
        <div class="absolute top-0 right-0 w-full h-full bg-brand-500/5 blur-[120px] pointer-events-none"></div>
        <div class="absolute inset-0 dot-pattern opacity-10 pointer-events-none"></div>

        <div class="relative z-10 flex flex-col h-full">
            <div class="mb-12">
                <span class="text-brand-500 font-bold text-sm">Join DigitalStore 👋</span>
                <h1 class="text-white text-4xl lg:text-5xl font-900 mt-4 leading-tight">Create your<br>account</h1>
                <p class="text-gray-400 mt-6 text-lg">It's free and easy. Join thousands of creators and get access to premium digital products and exclusive offers.</p>
            </div>

            <div class="space-y-10 mb-20">
                <div class="flex items-start gap-5">
                    <div class="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center flex-shrink-0 text-brand-500 border border-white/10">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-bold text-lg">Exclusive Deals</h3>
                        <p class="text-gray-500 text-sm mt-1">Get access to member-only discounts and special offers.</p>
                    </div>
                </div>
                <div class="flex items-start gap-5">
                    <div class="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center flex-shrink-0 text-brand-500 border border-white/10">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-bold text-lg">Instant Downloads</h3>
                        <p class="text-gray-500 text-sm mt-1">Download your purchased products instantly and securely.</p>
                    </div>
                </div>
            </div>

            <div class="mt-auto relative">
                <img src="{{ asset('themes/digital_agence/assets/images/signup_visual.png') }}" class="w-full max-w-md mx-auto drop-shadow-2xl laptop-float" alt="Signup Visual">
            </div>
        </div>
    </div>

    {{-- Right Side: Form --}}
    <div class="w-full lg:w-7/12 flex items-center justify-center p-8 lg:p-24 bg-white">
        <div class="w-full max-w-xl">
            {{-- Mobile Logo --}}
            <div class="flex justify-center mb-10 lg:hidden">
                 @if(setting('site_logo'))
                    <img src="{{ setting('site_logo') }}" alt="{{ config('app.name') }}" class="h-12 w-auto">
                 @else
                    <span class="text-2xl font-black text-gray-900 tracking-tighter uppercase">⚡ DigitalStore</span>
                 @endif
            </div>

            <div class="mb-10 text-center lg:text-left">
                <h2 class="text-3xl font-900 text-gray-900">Sign Up</h2>
                <p class="text-gray-500 mt-2">Create your account. It's free and easy.</p>
            </div>

            <form action="{{ route('register') }}" method="POST" class="space-y-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="text-sm font-700 text-gray-700">Full Name</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400 group-focus-within:text-brand-500 transition-colors">
                                <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            </div>
                            <input type="text" name="name" placeholder="Your full name" class="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all font-medium text-gray-900" required>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <label class="text-sm font-700 text-gray-700">Email Address</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400 group-focus-within:text-brand-500 transition-colors">
                                <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="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"/></svg>
                            </div>
                            <input type="email" name="email" placeholder="you@example.com" class="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all font-medium text-gray-900" required>
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-700 text-gray-700">Password</label>
                    <div class="relative group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400 group-focus-within:text-brand-500 transition-colors">
                            <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="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"/></svg>
                        </div>
                        <input type="password" id="password" name="password" placeholder="Create a password" class="w-full pl-12 pr-12 py-4 bg-gray-50 border border-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all font-medium text-gray-900" required>
                        <button type="button" onclick="togglePassword('password', this)" class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 transition-colors">
                            <svg class="w-5 h-5 eye-icon" 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 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"/></svg>
                        </button>
                    </div>
                    <div class="flex items-center justify-between mt-2">
                        <span class="text-xs text-gray-400">At least 8 characters</span>
                        <div class="flex items-center gap-1">
                            <span id="strength-text" class="text-xs font-bold text-gray-400">Weak</span>
                            <div class="flex gap-1" id="strength-bars">
                                <div class="w-6 h-1.5 bg-gray-200 rounded-full transition-all duration-300"></div>
                                <div class="w-6 h-1.5 bg-gray-200 rounded-full transition-all duration-300"></div>
                                <div class="w-6 h-1.5 bg-gray-200 rounded-full transition-all duration-300"></div>
                                <div class="w-6 h-1.5 bg-gray-200 rounded-full transition-all duration-300"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-700 text-gray-700">Confirm Password</label>
                    <div class="relative group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400 group-focus-within:text-brand-500 transition-colors">
                            <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="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"/></svg>
                        </div>
                        <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Confirm your password" class="w-full pl-12 pr-12 py-4 bg-gray-50 border border-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all font-medium text-gray-900" required>
                        <button type="button" onclick="togglePassword('password_confirmation', this)" class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 transition-colors">
                            <svg class="w-5 h-5 eye-icon" 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 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"/></svg>
                        </button>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-700 text-gray-700">Country</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                            <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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.065M15 20.288E2.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"/></svg>
                        </div>
                        <select name="country" class="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all font-medium text-gray-900 appearance-none">
                            <option value="">Select your country</option>
                            @foreach(get_countries() as $code => $name)
                                <option value="{{ $code }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-400">
                            <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="M19 9l-7 7-7-7"/></svg>
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-3">
                    <input type="checkbox" id="terms" class="w-5 h-5 text-brand-500 border-gray-200 rounded focus:ring-brand-500 cursor-pointer" required>
                    <label for="terms" class="text-sm text-gray-500 cursor-pointer">I agree to the <a href="#" class="text-brand-500 font-bold hover:underline">Terms of Service</a> and <a href="#" class="text-brand-500 font-bold hover:underline">Privacy Policy</a></label>
                </div>

                <button type="submit" class="w-full py-5 bg-brand-500 hover:bg-brand-600 text-white font-800 rounded-xl transition-all transform hover:-translate-y-1 shadow-xl shadow-brand-500/30">
                    Sign Up
                </button>

                @if($hasSocialLogins)
                <div class="relative flex items-center py-5">
                    <div class="flex-grow border-t border-gray-100"></div>
                    <span class="flex-shrink mx-4 text-gray-400 text-sm font-medium">Or continue with</span>
                    <div class="flex-grow border-t border-gray-100"></div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @if($socialLogins['google'])
                    <a href="{{ route('social.redirect', 'google') }}" class="flex items-center justify-center gap-3 py-4 bg-white border border-gray-100 rounded-xl hover:bg-gray-50 transition-all font-bold text-gray-700 shadow-sm">
                        <svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#EA4335" d="M12 5.04c1.94 0 3.46.83 4.21 1.54l3.14-3.08C17.43 1.63 15 1 12 1 7.21 1 3.19 3.84 1.14 7.95l3.65 2.85c.87-2.6 3.28-4.76 7.21-4.76z"/><path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58l3.7 2.88c2.16-1.99 3.42-4.93 3.42-8.7z"/><path fill="#FBBC05" d="M4.79 14.8c-.23-.68-.37-1.41-.37-2.17s.14-1.49.37-2.17L1.14 7.95C.41 9.42 0 11.05 0 12.78s.41 3.36 1.14 4.83l3.65-2.81z"/><path fill="#34A853" d="M12 23c3.15 0 5.79-1.03 7.72-2.8l-3.7-2.88c-1.03.69-2.35 1.1-4.02 1.1-3.93 0-6.34-2.16-7.21-4.76l-3.65 2.81C3.19 20.16 7.21 23 12 23z"/></svg>
                        Google
                    </a>
                    @endif
                    
                    @if($socialLogins['apple'])
                    <a href="{{ route('social.redirect', 'apple') }}" class="flex items-center justify-center gap-3 py-4 bg-white border border-gray-100 rounded-xl hover:bg-gray-50 transition-all font-bold text-gray-700 shadow-sm">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.073 2.132c-.754 0-1.714.453-2.261 1.053-.547.6-.967 1.467-.967 2.333 0 .1.013.2.026.3-.967-.04-1.927.467-2.527 1.127-.6.66-.96 1.547-.96 2.427 0 .093.013.187.027.28-1.507-.067-2.86.68-3.667 1.767-.787 1.087-1.08 2.487-1.08 3.88 0 2.227 1.52 5.047 3.333 6.94 1.44 1.507 3.013 2.493 4.467 2.493 1.187 0 2.053-.627 3.347-.627 1.28 0 2.133.627 3.347.627 1.454 0 3.027-.987 4.467-2.493 1.227-1.28 2.373-3.08 2.893-4.64-.32.093-.653.147-.987.147-1.893 0-3.413-1.4-3.413-3.267 0-1.52.987-2.827 2.36-3.267-.28-.707-.733-1.347-1.307-1.867-.84-.76-1.92-1.2-3.093-1.2"/></svg>
                        Apple
                    </a>
                    @endif

                    @if($socialLogins['facebook'])
                    <a href="{{ route('social.redirect', 'facebook') }}" class="flex items-center justify-center gap-3 py-4 bg-white border border-gray-100 rounded-xl hover:bg-gray-50 transition-all font-bold text-gray-700 shadow-sm">
                        <svg class="w-5 h-5 text-[#1877F2]" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        Facebook
                    </a>
                    @endif

                    @if($socialLogins['github'])
                    <a href="{{ route('social.redirect', 'github') }}" class="flex items-center justify-center gap-3 py-4 bg-white border border-gray-100 rounded-xl hover:bg-gray-50 transition-all font-bold text-gray-700 shadow-sm">
                        <svg class="w-5 h-5 text-[#181717]" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
                        GitHub
                    </a>
                    @endif
                </div>
                @endif

                <p class="text-center text-gray-500 mt-10">
                    Already have an account? <a href="{{ route('login') }}" class="text-brand-500 font-bold hover:underline">Login</a>
                </p>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function togglePassword(inputId, button) {
    const input = document.getElementById(inputId);
    const icon = button.querySelector('.eye-icon');
    if (input.type === 'password') {
        input.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 3l18 18" />';
    } else {
        input.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 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" />';
    }
}

const passwordInput = document.getElementById('password');
const strengthText = document.getElementById('strength-text');
const strengthBars = document.getElementById('strength-bars').children;

passwordInput.addEventListener('input', function() {
    const val = passwordInput.value;
    let strength = 0;
    
    if (val.length >= 8) strength++;
    if (val.match(/[A-Z]/)) strength++;
    if (val.match(/[0-9]/)) strength++;
    if (val.match(/[^A-Za-z0-9]/)) strength++;
    
    // Reset bars
    for (let i = 0; i < 4; i++) {
        strengthBars[i].classList.remove('bg-red-500', 'bg-yellow-500', 'bg-green-500');
        strengthBars[i].classList.add('bg-gray-200');
    }
    
    if (val.length === 0) {
        strengthText.innerText = 'Weak';
        strengthText.className = 'text-xs font-bold text-gray-400';
        return;
    }
    
    if (strength <= 1) {
        strengthText.innerText = 'Weak';
        strengthText.className = 'text-xs font-bold text-red-500';
        strengthBars[0].classList.replace('bg-gray-200', 'bg-red-500');
    } else if (strength === 2) {
        strengthText.innerText = 'Fair';
        strengthText.className = 'text-xs font-bold text-yellow-500';
        strengthBars[0].classList.replace('bg-gray-200', 'bg-yellow-500');
        strengthBars[1].classList.replace('bg-gray-200', 'bg-yellow-500');
    } else if (strength === 3) {
        strengthText.innerText = 'Good';
        strengthText.className = 'text-xs font-bold text-blue-500';
        strengthBars[0].classList.replace('bg-gray-200', 'bg-blue-500');
        strengthBars[1].classList.replace('bg-gray-200', 'bg-blue-500');
        strengthBars[2].classList.replace('bg-gray-200', 'bg-blue-500');
    } else {
        strengthText.innerText = 'Strong';
        strengthText.className = 'text-xs font-bold text-green-500';
        strengthBars[0].classList.replace('bg-gray-200', 'bg-green-500');
        strengthBars[1].classList.replace('bg-gray-200', 'bg-green-500');
        strengthBars[2].classList.replace('bg-gray-200', 'bg-green-500');
        strengthBars[3].classList.replace('bg-gray-200', 'bg-green-500');
    }
});
</script>
@endpush