@extends('layouts.guest')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 relative overflow-hidden">

    {{-- Animated background blobs --}}
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute top-40 left-40 w-80 h-80 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <div class="relative z-10 w-full max-w-3xl mx-auto px-6 py-10">

        {{-- Header --}}
        <div class="rounded-t-3xl overflow-hidden bg-gradient-to-r from-purple-700 via-purple-600 to-pink-600 px-8 pt-8 pb-6 text-center shadow-2xl">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-white/20 mb-4">
                @php $provider = session('social_auth.provider', 'social'); @endphp
                @if($provider === 'google')
                    <i class="fab fa-google text-2xl text-white"></i>
                @elseif($provider === 'facebook')
                    <i class="fab fa-facebook-f text-2xl text-white"></i>
                @elseif($provider === 'github')
                    <i class="fab fa-github text-2xl text-white"></i>
                @else
                    <i class="fas fa-user-circle text-2xl text-white"></i>
                @endif
            </div>
            <h1 class="text-2xl font-bold text-white leading-tight">Almost there!</h1>
            <p class="mt-1 text-purple-200 text-sm font-medium">
                Welcome, <strong>{{ session('social_auth.name', 'there') }}</strong>. Choose your role to complete registration.
            </p>
        </div>

        {{-- Role Selection Card --}}
        <div class="rounded-b-3xl bg-white/10 backdrop-blur-xl px-8 py-8 shadow-2xl border border-white/20 border-t-0">

            @if ($errors->any())
                <div class="mb-5 p-4 rounded-xl bg-red-500/20 border border-red-500/30 text-red-300 text-sm">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('auth.social.complete-registration') }}" x-data="{ selected: '' }">
                @csrf

                <p class="text-gray-300 text-sm mb-5">Select the role that best describes you:</p>

                <div class="grid grid-cols-2 gap-3 mb-6">
                    @foreach($roles as $role)
                        <label
                            class="relative cursor-pointer"
                            :class="selected === '{{ $role->name }}' ? 'ring-2 ring-purple-500' : ''"
                        >
                            <input
                                type="radio"
                                name="role"
                                value="{{ $role->name }}"
                                class="sr-only"
                                x-model="selected"
                                required
                            >
                            <div
                                class="flex items-center gap-3 p-4 rounded-xl border transition-all"
                                :class="selected === '{{ $role->name }}'
                                    ? 'bg-purple-600/30 border-purple-500 text-white'
                                    : 'bg-white/5 border-white/10 text-gray-300 hover:bg-white/10'"
                            >
                                <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
                                     :class="selected === '{{ $role->name }}' ? 'bg-purple-500' : 'bg-white/10'">
                                    <i class="fas fa-user text-xs"></i>
                                </div>
                                <span class="text-sm font-medium">{{ $role->name }}</span>
                            </div>
                        </label>
                    @endforeach
                </div>

                <button
                    type="submit"
                    class="w-full py-3 px-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold rounded-xl shadow-lg transition-all duration-300 flex items-center justify-center"
                    :disabled="!selected"
                    :class="!selected ? 'opacity-50 cursor-not-allowed' : ''"
                >
                    <i class="fas fa-check mr-2"></i>Complete Registration
                </button>
            </form>
        </div>

        {{-- Back to login --}}
        <div class="text-center mt-6">
            <a href="{{ route('login') }}" class="text-purple-400 hover:text-purple-300 text-sm font-medium transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Back to Login
            </a>
        </div>
    </div>
</div>

<style>
    @keyframes blob {
        0%   { transform: translate(0px, 0px) scale(1); }
        33%  { transform: translate(30px, -50px) scale(1.1); }
        66%  { transform: translate(-20px, 20px) scale(0.9); }
        100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob { animation: blob 7s infinite; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
</style>
@endsection