@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())
@section('meta_description', 'تنظیمات ورود با گوگل و OAuth در منیجینو ابزار برای مدیریت خرید و فروش مواد شیمیایی')

@section('content')
<div class="space-y-6">
    @if (session('success'))
    <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-slate-800 rounded-lg p-6 max-w-md w-full mx-4">
            <div class="flex items-center justify-center mb-4">
                <div class="w-12 h-12 bg-emerald-500 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white text-center mb-2">موفقیت!</h3>
            <p class="text-slate-300 text-center mb-6" style="font-size: 12px;">{{ session('success') }}</p>
            <div class="flex justify-center">
                <button onclick="closeSuccessModal()" class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition duration-200">
                    باشه
                </button>
            </div>
        </div>
    </div>
    @endif
    
    @if ($errors->any())
    <div class="rounded-lg border border-red-700 bg-red-900/40 text-red-200 px-4 py-3">
        <ul class="list-disc pr-5">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-100">تنظیمات گوگل OAuth</h1>
            <p class="text-slate-400 text-sm mt-2">تنظیمات لازم برای ورود با گوگل را در اینجا وارد کنید</p>
        </div>
    </div>

    <!-- Google OAuth Settings Form -->
    <div class="glass rounded-2xl p-6">
        <div class="flex items-center gap-2 mb-6">
            <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
            </svg>
            <h3 class="text-xl font-bold text-blue-400">تنظیمات OAuth گوگل</h3>
        </div>

        <form method="POST" action="{{ route('admin.google-settings.store') }}" class="space-y-6">
            @csrf

            <!-- Enable/Disable Google OAuth -->
            <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                <div class="flex items-center justify-between">
                    <div>
                        <label class="text-slate-200 font-medium">فعال‌سازی ورود با گوگل</label>
                        <p class="text-slate-400 text-sm mt-1">با فعال کردن این گزینه، کاربران می‌توانند با حساب گوگل خود وارد شوند</p>
                    </div>
                    <div class="flex items-center gap-3">
                        <input type="hidden" name="google_oauth_enabled" id="google_oauth_enabled_input" value="{{ $isEnabled ? '1' : '0' }}">
                        <button 
                            type="button"
                            id="toggle-google-oauth-btn"
                            class="px-6 py-2.5 rounded-lg font-medium transition-all duration-200 {{ $isEnabled ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-blue-600 hover:bg-blue-700 text-white' }}"
                            onclick="toggleGoogleOAuth()"
                        >
                            <span class="flex items-center gap-2">
                                @if($isEnabled)
                                    <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="M5 13l4 4L19 7"></path>
                                    </svg>
                                    <span>فعال‌سازی</span>
                                @else
                                    <span>غیرفعال‌سازی</span>
                                @endif
                            </span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Google Client ID -->
            <div>
                <label for="google_client_id" class="block text-slate-300 mb-2 font-medium">
                    Google Client ID <span class="text-red-400">*</span>
                </label>
                <input 
                    type="text" 
                    id="google_client_id" 
                    name="google_client_id" 
                    value="{{ old('google_client_id', $clientId) }}"
                    placeholder="مثال: 123456789-abcdefghijklmnop.apps.googleusercontent.com"
                    class="w-full rounded-lg bg-slate-900 border border-slate-700 p-3 text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    required
                >
                <p class="text-slate-400 text-sm mt-2">
                    Client ID را از Google Cloud Console دریافت کنید
                </p>
            </div>

            <!-- Google Client Secret -->
            <div>
                <label for="google_client_secret" class="block text-slate-300 mb-2 font-medium">
                    Google Client Secret <span class="text-red-400">*</span>
                </label>
                <div class="relative">
                    <input 
                        type="password" 
                        id="google_client_secret" 
                        name="google_client_secret" 
                        value="{{ old('google_client_secret', $clientSecret) }}"
                        placeholder="مثال: GOCSPX-xxxxxxxxxxxxxxxxxxxx"
                        class="w-full rounded-lg bg-slate-900 border border-slate-700 p-3 pr-12 text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        required
                    >
                    <button 
                        type="button" 
                        onclick="togglePasswordVisibility('google_client_secret')"
                        class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-200"
                        title="نمایش/مخفی کردن"
                    >
                        <svg id="eye-icon-google_client_secret" 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="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>
                <p class="text-slate-400 text-sm mt-2">
                    Client Secret را از Google Cloud Console دریافت کنید
                </p>
            </div>

            <!-- Redirect URI -->
            <div>
                <label for="google_redirect_uri" class="block text-slate-300 mb-2 font-medium">
                    Redirect URI
                </label>
                <input 
                    type="url" 
                    id="google_redirect_uri" 
                    name="google_redirect_uri" 
                    value="{{ old('google_redirect_uri', $redirectUri) }}"
                    placeholder="https://yourdomain.com/auth/google/callback"
                    class="w-full rounded-lg bg-slate-900 border border-slate-700 p-3 text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                <p class="text-slate-400 text-sm mt-2">
                    این آدرس باید در Google Cloud Console به عنوان Authorized redirect URI اضافه شود
                </p>
            </div>

            <!-- Instructions -->
            <div class="bg-blue-900/20 border border-blue-700/50 rounded-lg p-4">
                <h4 class="text-blue-400 font-semibold mb-3 flex items-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    راهنمای تنظیمات
                </h4>
                <ol class="list-decimal list-inside space-y-2 text-slate-300 text-sm">
                    <li>به <a href="https://console.cloud.google.com/" target="_blank" class="text-blue-400 hover:underline">Google Cloud Console</a> بروید</li>
                    <li>یک پروژه جدید ایجاد کنید یا پروژه موجود را انتخاب کنید</li>
                    <li>به بخش "APIs & Services" > "Credentials" بروید</li>
                    <li>روی "Create Credentials" > "OAuth client ID" کلیک کنید</li>
                    <li>Application type را "Web application" انتخاب کنید</li>
                    <li>Authorized redirect URIs را اضافه کنید: <code class="bg-slate-800 px-2 py-1 rounded text-blue-300">{{ $redirectUri }}</code></li>
                    <li>Client ID و Client Secret را کپی کرده و در فرم بالا وارد کنید</li>
                    <li>روی "ذخیره تنظیمات" کلیک کنید</li>
                </ol>
            </div>

            <!-- Submit Button -->
            <div class="flex items-center justify-end gap-4 pt-4 border-t border-slate-700">
                <button 
                    type="submit" 
                    class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
                >
                    ذخیره تنظیمات
                </button>
            </div>
        </form>
    </div>

    <!-- Current Status -->
    <div class="glass rounded-2xl p-6">
        <h3 class="text-xl font-bold text-slate-100 mb-4">وضعیت فعلی</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-slate-400 text-sm">وضعیت</span>
                    <span class="px-3 py-1 rounded-full text-xs font-medium {{ $isEnabled ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                        {{ $isEnabled ? 'فعال' : 'غیرفعال' }}
                    </span>
                </div>
            </div>
            <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-slate-400 text-sm">Client ID</span>
                    <span class="text-slate-300 text-sm font-mono">
                        {{ $clientId ? (strlen($clientId) > 30 ? substr($clientId, 0, 30) . '...' : $clientId) : 'تنظیم نشده' }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let googleOAuthEnabled = {{ $isEnabled ? 'true' : 'false' }};

function toggleGoogleOAuth() {
    googleOAuthEnabled = !googleOAuthEnabled;
    const input = document.getElementById('google_oauth_enabled_input');
    const btn = document.getElementById('toggle-google-oauth-btn');
    
    if (input) {
        input.value = googleOAuthEnabled ? '1' : '0';
    }
    
    if (btn) {
        if (googleOAuthEnabled) {
            btn.className = 'px-6 py-2.5 rounded-lg font-medium transition-all duration-200 bg-green-600 hover:bg-green-700 text-white';
            btn.innerHTML = `
                <span class="flex items-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="M5 13l4 4L19 7"></path>
                    </svg>
                    <span>فعال‌سازی</span>
                </span>
            `;
        } else {
            btn.className = 'px-6 py-2.5 rounded-lg font-medium transition-all duration-200 bg-blue-600 hover:bg-blue-700 text-white';
            btn.innerHTML = `
                <span class="flex items-center gap-2">
                    <span>غیرفعال‌سازی</span>
                </span>
            `;
        }
    }
}

function togglePasswordVisibility(inputId) {
    const input = document.getElementById(inputId);
    const eyeIcon = document.getElementById('eye-icon-' + inputId);
    
    if (input.type === 'password') {
        input.type = 'text';
        eyeIcon.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 {
        input.type = 'password';
        eyeIcon.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>
        `;
    }
}

function closeSuccessModal() {
    const modal = document.getElementById('success-modal');
    if (modal) {
        modal.style.display = 'none';
    }
}

// Close modal when clicking outside
document.addEventListener('click', (e) => {
    const modal = document.getElementById('success-modal');
    if (modal && e.target === modal) {
        closeSuccessModal();
    }
});
</script>
@endpush
@endsection