@extends('layouts.app')

@section('content')
<div class="min-h-[80vh] flex items-center justify-center px-4 py-12 bg-gradient-to-br from-gray-50 to-gray-100">
    <div class="w-full max-w-md bg-white rounded-3xl shadow-xl overflow-hidden border border-red-100 animate-slide-up">
        
        {{-- Top Bar/Header --}}
        <div class="bg-red-550 bg-gradient-to-r from-red-650 to-red-500 text-white p-6 text-center bg-red-600">
            <div class="w-12 h-12 bg-white/10 rounded-full mx-auto flex items-center justify-center mb-3">
                <i class="fas fa-flask text-xl"></i>
            </div>
            <h3 class="font-bold text-lg">Social Login Sandbox</h3>
            <p class="text-xs text-red-100 mt-1">ডেভেলপমেন্ট মোড সিমুলেটর</p>
        </div>

        <div class="p-8">
            <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6 text-xs text-amber-800 space-y-1.5 leading-relaxed">
                <div class="font-bold flex items-center gap-1.5 text-sm mb-1 text-amber-900">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>এপিআই কী (API Keys) অনুপস্থিত</span>
                </div>
                <p>আপনার <code>.env</code> ফাইলে <strong>{{ strtoupper($provider) }}_CLIENT_ID</strong> এবং <strong>{{ strtoupper($provider) }}_CLIENT_SECRET</strong> কনফিগার করা নেই।</p>
                <p>সোশ্যাল লগইন ফিচারটি পরীক্ষা করার জন্য নিচে টেস্ট তথ্য দিয়ে সিমুলেট করতে পারেন।</p>
            </div>

            <form action="{{ route('social.callback.sandbox', $provider) }}" method="POST" class="space-y-5">
                @csrf
                
                {{-- Provider Indicator --}}
                <div class="flex items-center gap-3 p-3.5 bg-gray-50 rounded-xl border border-gray-100">
                    @if($provider === 'google')
                        <svg class="w-6 h-6" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21.35,11.1H12v2.7h5.38C16.88,16.03,14.77,17.2,12,17.2c-3.17,0-5.85-2.14-6.81-5.02L2.55,14.28C4.5,18.17,8.54,20,12,20c4.4,0,8.08-3.08,8.08-8.9C20.08,10.6,21.35,11.1,21.35,11.1z" fill="#4285F4"/>
                            <path d="M12,6.8c1.62,0,3.08,0.56,4.22,1.64l3.15-3.15C17.45,3.48,14.9,2,12,2C7.75,2,4.1,4.9,2.5,9l3.3,2.56C6.7,8.7,9.15,6.8,12,6.8z" fill="#EA4335"/>
                            <path d="M5.8,11.5c-0.25-0.75-0.4-1.55-0.4-2.4s0.15-1.65,0.4-2.4L2.5,4.14C1.53,6.08,1,8.23,1,10.5c0,2.15,0.51,4.22,1.44,6.07L5.8,11.5z" fill="#FBBC05"/>
                            <path d="M12,3.8c3.55,0,6.45,2.9,6.45,6.45c0,0.35-0.03,0.7-0.08,1.05h3.03C21.92,10.85,22,10.38,22,9.9C22,4.43,17.52,0,12,0C7.62,0,3.87,2.83,2.5,6.8l3.3,2.56C6.7,6.3,9.15,3.8,12,3.8z" fill="#34A853"/>
                        </svg>
                        <span class="font-bold text-gray-800 text-sm">Google লগইন সিমুলেশন</span>
                    @else
                        <svg class="w-6 h-6 fill-current text-blue-600" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z"/>
                        </svg>
                        <span class="font-bold text-gray-800 text-sm">Facebook লগইন সিমুলেশন</span>
                    @endif
                </div>

                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2 ml-1">টেস্ট নাম (Name)</label>
                    <input type="text" name="name" value="টেস্ট ইউজার" required
                        class="w-full px-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:bg-white outline-none font-bold text-sm transition-all">
                </div>

                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2 ml-1">টেস্ট ইমেইল (Email)</label>
                    <input type="email" name="email" value="test.{{ $provider }}@example.com" required
                        class="w-full px-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-xl focus:border-red-500 focus:bg-white outline-none font-bold text-sm transition-all">
                </div>

                <div class="flex gap-3 pt-2">
                    <a href="{{ route('login') }}" class="w-1/3 border-2 border-gray-200 text-center hover:bg-gray-50 py-3.5 px-4 rounded-xl font-bold text-sm text-gray-500 hover:text-gray-700 transition-all">
                        ফিরে যান
                    </a>
                    <button type="submit" class="w-2/3 bg-red-650 bg-gradient-to-r from-red-600 to-red-500 hover:opacity-95 text-white py-3.5 px-6 rounded-xl font-bold text-sm shadow-md transition-all flex items-center justify-center gap-2">
                        <span>সিমুলেট করুন</span>
                        <i class="fas fa-play text-xs"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection