@extends('layouts.admin')

@section('pageTitle', 'تنظیمات سیستم')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">تنظیمات سیستم</h1>
    </div>

    @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-2 gap-8">
        <!-- CDN Assets Toggle -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">تنظیمات منابع</h2>
            <form method="POST" action="{{ route('admin.settings.update') }}" class="space-y-4">
                @csrf

                <div class="flex items-center gap-4">
                    <div class="flex-1">
                        <label for="use_cdn_assets" class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
                            <i class="fas fa-cloud ml-2"></i>استفاده از CDN برای منابع
                        </label>
                        <small class="text-gray-600 dark:text-gray-400">فعال: منابع از CDN • غیرفعال: منابع محلی</small>
                    </div>
                    <div class="flex items-center">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="use_cdn_assets" name="use_cdn_assets" {{ (isset($settings['use_cdn_assets']) && $settings['use_cdn_assets'] === 'on') || !isset($settings['use_cdn_assets']) ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                </div>

                <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-3">
                    <p class="text-sm text-blue-700 dark:text-blue-200">
                        <i class="fas fa-info-circle ml-2"></i>
                        <span id="cdn-status">استفاده از CDN (سریع‌تر و مطمئن‌تر)</span>
                    </p>
                </div>

                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg w-full">
                    <i class="fas fa-save ml-2"></i>ذخیره
                </button>
            </form>
        </div>
        <!-- SMS Settings -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">تنظیمات پیامک</h2>
            <form method="POST" action="{{ route('admin.settings.update') }}" class="space-y-4">
                @csrf

                <div>
                    <label for="sms_token" class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
                        <i class="fas fa-key ml-2"></i>توکن سامانه پیامک
                    </label>
                    <input type="password" id="sms_token" name="sms_token" placeholder="توکن خود را وارد کنید" value="{{ isset($settings['sms_token']) ? '***' : '' }}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                    <small class="text-gray-600 dark:text-gray-400">توکن برای ارسال پیامک‌های OTP</small>
                </div>

                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg w-full">
                    <i class="fas fa-save ml-2"></i>ذخیره
                </button>
            </form>
        </div>

        <!-- Payment Gateway Settings -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">درگاه پرداخت</h2>
            <form method="POST" action="{{ route('admin.settings.update') }}" class="space-y-4">
                @csrf

                <div>
                    <label for="zarinpal_merchant_id" class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
                        <i class="fas fa-credit-card ml-2"></i>مرچنت آیدی زرین‌پال
                    </label>
                    <input type="text" id="zarinpal_merchant_id" name="zarinpal_merchant_id" placeholder="مرچنت آیدی خود را وارد کنید" value="{{ $settings['zarinpal_merchant_id'] ?? '' }}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                    <small class="text-gray-600 dark:text-gray-400">مرچنت آیدی (Merchant ID) از زرین‌پال</small>
                </div>

                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg w-full">
                    <i class="fas fa-save ml-2"></i>ذخیره
                </button>
            </form>
        </div>

        <!-- App Settings -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 col-span-2">
            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">تنظیمات اپلیکیشن</h2>
            <form method="POST" action="{{ route('admin.settings.update') }}" class="space-y-4">
                @csrf

                <div>
                    <label for="app_name" class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
                        <i class="fas fa-mobile ml-2"></i>نام اپلیکیشن
                    </label>
                    <input type="text" id="app_name" name="app_name" value="{{ $settings['app_name'] ?? '' }}" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                </div>

                <div>
                    <label for="app_description" class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
                        <i class="fas fa-info-circle ml-2"></i>توضیح اپلیکیشن
                    </label>
                    <textarea id="app_description" name="app_description" rows="3" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">{{ $settings['app_description'] ?? '' }}</textarea>
                </div>

                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg w-full">
                    <i class="fas fa-save ml-2"></i>ذخیره تمام تنظیمات
                </button>
            </form>
        </div>
    </div>
</div>

<script>
    // Update CDN status text dynamically
    const cdnToggle = document.getElementById('use_cdn_assets');
    const cdnStatus = document.getElementById('cdn-status');
    
    if (cdnToggle) {
        function updateStatus() {
            if (cdnToggle.checked) {
                cdnStatus.textContent = 'استفاده از CDN (سریع‌تر و مطمئن‌تر)';
            } else {
                cdnStatus.textContent = 'استفاده از منابع محلی (بدون اتصال اینترنت)';
            }
        }
        
        // Update on change
        cdnToggle.addEventListener('change', updateStatus);
        
        // Initial update
        updateStatus();
    }
</script>

@endsection