@extends('layouts.app')

@section('title', 'Platform Settings & Configuration')

@section('content')
<div class="max-w-4xl mx-auto space-y-6" x-data="{ tab: 'general' }">
    <div>
        <h1 class="text-xl font-bold text-slate-900 dark:text-white">SaaS Platform Settings</h1>
        <p class="text-xs text-slate-500">Configure global platform branding, UAE tax VAT rates, SMTP email, AI credentials, WhatsApp API, and maintenance mode.</p>
    </div>

    <!-- Settings Tabs Bar (Requirements 62-72) -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl p-3 border border-slate-200 dark:border-slate-700 shadow-sm flex items-center space-x-2 rtl:space-x-reverse overflow-x-auto text-xs font-bold">
        <button @click="tab = 'general'" :class="tab === 'general' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl transition-all">General</button>
        <button @click="tab = 'branding'" :class="tab === 'branding' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl transition-all">Branding</button>
        <button @click="tab = 'tax'" :class="tab === 'tax' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl transition-all">UAE Tax / VAT</button>
        <button @click="tab = 'ai'" :class="tab === 'ai' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl transition-all">AI Assistant</button>
        <button @click="tab = 'whatsapp'" :class="tab === 'whatsapp' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl transition-all">WhatsApp API</button>
        <button @click="tab = 'maintenance'" :class="tab === 'maintenance' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl transition-all">Maintenance Mode</button>
    </div>

    <form action="{{ route('platform.settings.update') }}" method="POST" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm space-y-6 text-xs">
        @csrf

        <!-- General Settings (Requirement 63) -->
        <div x-show="tab === 'general'" class="space-y-4">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">General Platform Configuration</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block font-semibold mb-1">Platform Name</label>
                    <input type="text" name="platform_name" value="{{ $settings->get('platform_name')?->value ?? 'UAE Typing SaaS ERP' }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Support Email</label>
                    <input type="email" name="support_email" value="{{ $settings->get('support_email')?->value ?? 'support@typingcenter.ae' }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Default Currency</label>
                    <input type="text" name="default_currency" value="{{ $settings->get('default_currency')?->value ?? 'AED' }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-bold">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Timezone</label>
                    <input type="text" name="timezone" value="{{ $settings->get('timezone')?->value ?? 'Asia/Dubai' }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
            </div>
        </div>

        <!-- Tax Settings (Requirement 66) -->
        <div x-show="tab === 'tax'" class="space-y-4" x-cloak>
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">UAE VAT Tax Rules</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block font-semibold mb-1">Tax / VAT Name</label>
                    <input type="text" name="tax_name" value="{{ $settings->get('tax_name')?->value ?? 'UAE VAT' }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Tax Percentage (%)</label>
                    <input type="number" name="tax_percentage" step="0.01" value="{{ $settings->get('tax_percentage')?->value ?? '5.00' }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-bold">
                </div>
            </div>
        </div>

        <!-- AI Assistant Settings (Requirement 69) -->
        <div x-show="tab === 'ai'" class="space-y-4" x-cloak>
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">AI Assistant & Document Reader Integration</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block font-semibold mb-1">AI Model Provider</label>
                    <input type="text" name="ai_provider" value="{{ $settings->get('ai_provider')?->value ?? 'Google Gemini' }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">AI Kill Switch</label>
                    <select name="ai_kill_switch" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-bold">
                        <option value="0" {{ ($settings->get('ai_kill_switch')?->value ?? '0') === '0' ? 'selected' : '' }}>Enabled (Active)</option>
                        <option value="1" {{ ($settings->get('ai_kill_switch')?->value ?? '0') === '1' ? 'selected' : '' }}>Disabled (Kill Switch Active)</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Maintenance Mode (Requirement 72) -->
        <div x-show="tab === 'maintenance'" class="space-y-4" x-cloak>
            <h3 class="font-bold text-rose-600 uppercase tracking-wider text-xs">Platform Maintenance Mode</h3>
            <div class="space-y-3">
                <label class="flex items-center space-x-2 rtl:space-x-reverse cursor-pointer">
                    <input type="checkbox" name="maintenance_mode" value="1" {{ ($settings->get('maintenance_mode')?->value ?? '0') === '1' ? 'checked' : '' }} class="w-4 h-4 text-rose-600 rounded">
                    <span class="font-bold text-slate-800 dark:text-slate-200">Enable Platform Maintenance Mode</span>
                </label>
                <textarea name="maintenance_message" rows="2" placeholder="Platform under scheduled maintenance. Tenant logins temporarily disabled..." class="w-full p-3 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">{{ $settings->get('maintenance_message')?->value ?? '' }}</textarea>
            </div>
        </div>

        <div class="flex justify-end pt-4 border-t border-slate-100 dark:border-slate-700">
            <button type="submit" class="px-6 py-2.5 bg-sky-600 hover:bg-sky-700 text-white font-bold rounded-xl shadow-sm">Save Platform Settings</button>
        </div>
    </form>
</div>
@endsection