@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- الرأس -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">{{ __('Settings') }}</h1>
                    <p class="text-black">{{ __('Configure Zakat and Taxes system settings') }}</p>
                </div>
                <a href="{{ route('zakat-taxes.manage') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105">
                    <i class="fas fa-arrow-left ml-2"></i>
                    <span>{{ __('Back') }}</span>
                </a>
            </div>
        </div>

        <!-- رسائل التنبيه -->
        @if(session('success'))
        <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                </div>
                <div class="mr-3">
                    <p class="text-green-700 font-medium">{{ session('success') }}</p>
                </div>
            </div>
        </div>
        @endif

        @if(session('error'))
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                </div>
                <div class="mr-3">
                    <p class="text-red-700 font-medium">{{ session('error') }}</p>
                </div>
            </div>
        </div>
        @endif

        <!-- القوائم التبويبية -->
        <div class="mb-6 border-b border-gray-200">
            <nav class="flex space-x-6 overflow-x-auto" role="tablist">
                <button class="tab-button px-4 py-3 font-medium text-black border-b-2 border-blue-600 whitespace-nowrap" 
                        data-tab="zakat-settings" role="tab" aria-selected="true">
                    <i class="fas fa-crescent-moon ml-2"></i>
                    {{ __('Zakat Settings') }}
                </button>
                <button class="tab-button px-4 py-3 font-medium text-black border-b-2 border-transparent hover:text-black whitespace-nowrap" 
                        data-tab="tax-settings" role="tab">
                    <i class="fas fa-file-invoice-dollar ml-2"></i>
                    {{ __('Tax Settings') }}
                </button>
                <button class="tab-button px-4 py-3 font-medium text-black border-b-2 border-transparent hover:text-black whitespace-nowrap" 
                        data-tab="financial-settings" role="tab">
                    <i class="fas fa-money-bill-wave ml-2"></i>
                    {{ __('Financial Settings') }}
                </button>
                <button class="tab-button px-4 py-3 font-medium text-black border-b-2 border-transparent hover:text-black whitespace-nowrap" 
                        data-tab="report-settings" role="tab">
                    <i class="fas fa-chart-bar ml-2"></i>
                    {{ __('Report Settings') }}
                </button>
                <button class="tab-button px-4 py-3 font-medium text-black border-b-2 border-transparent hover:text-black whitespace-nowrap" 
                        data-tab="integration-settings" role="tab">
                    <i class="fas fa-plug ml-2"></i>
                    {{ __('Integration Settings') }}
                </button>
            </nav>
        </div>

        <!-- محتوى التبويبات -->
        <form method="POST" action="{{ route('zakat-taxes.settings.update') }}" class="space-y-6">
            @csrf

            <!-- إعدادات الزكاة -->
            <div id="zakat-settings" class="tab-content">
                <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
                    <h2 class="text-2xl font-bold text-black mb-6">
                        <i class="fas fa-crescent-moon ml-2 text-amber-600"></i>
                        {{ __('Zakat Settings') }}
                    </h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- نسبة الزكاة الافتراضية -->
                        <div>
                            <label for="zakat_rate" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Default Zakat Rate') }} (%)
                            </label>
                            <input type="number" id="zakat_rate" name="zakat_rate" step="0.01" value="{{ $settings['zakat_rate'] }}" min="0" max="100"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                            <p class="mt-1 text-xs text-black">{{ __('Standard zakat rate is 2.5% of assets') }}</p>
                        </div>

                        <!-- سنة الزكاة -->
                        <div>
                            <label for="zakat_year" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Zakat Year') }}
                            </label>
                            <select id="zakat_year" name="zakat_year" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                <option value="lunar" {{ $settings['zakat_year'] == 'lunar' ? 'selected' : '' }}>{{ __('Lunar Year (Hijri)') }}</option>
                                <option value="gregorian" {{ $settings['zakat_year'] == 'gregorian' ? 'selected' : '' }}>{{ __('Gregorian Year') }}</option>
                                <option value="financial" {{ $settings['zakat_year'] == 'financial' ? 'selected' : '' }}>{{ __('Financial Year') }}</option>
                            </select>
                        </div>

                        <!-- الحد الأدنى للزكاة -->
                        <div>
                            <label for="zakat_threshold" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Zakat Threshold (Nisab)') }}
                            </label>
                            <input type="number" id="zakat_threshold" name="zakat_threshold" step="0.01" value="{{ $settings['zakat_threshold'] }}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                            <p class="mt-1 text-xs text-black">{{ __('Minimum amount subject to zakat') }}</p>
                        </div>

                        <!-- طريقة الحساب -->
                        <div>
                            <label for="zakat_calculation" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Calculation Method') }}
                            </label>
                            <select id="zakat_calculation" name="zakat_calculation" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                <option value="annual" {{ $settings['zakat_calculation'] == 'annual' ? 'selected' : '' }}>{{ __('Annual') }}</option>
                                <option value="lunar" {{ $settings['zakat_calculation'] == 'lunar' ? 'selected' : '' }}>{{ __('Lunar Calendar') }}</option>
                                <option value="custom" {{ $settings['zakat_calculation'] == 'custom' ? 'selected' : '' }}>{{ __('Custom Date') }}</option>
                            </select>
                        </div>

                        <!-- العملة الافتراضية -->
                        <div>
                            <label for="default_currency" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Default Currency') }}
                            </label>
                            <select id="default_currency" name="default_currency" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                <option value="SAR" {{ $settings['default_currency'] == 'SAR' ? 'selected' : '' }}>{{ __('Saudi Riyal (SAR)') }}</option>
                                <option value="USD" {{ $settings['default_currency'] == 'USD' ? 'selected' : '' }}>{{ __('US Dollar (USD)') }}</option>
                                <option value="EUR" {{ $settings['default_currency'] == 'EUR' ? 'selected' : '' }}>{{ __('Euro (EUR)') }}</option>
                                <option value="AED" {{ $settings['default_currency'] == 'AED' ? 'selected' : '' }}>{{ __('UAE Dirham (AED)') }}</option>
                            </select>
                        </div>

                        <!-- تقريب القيم -->
                        <div>
                            <label for="rounding_method" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Rounding Method') }}
                            </label>
                            <select id="rounding_method" name="rounding_method" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                <option value="round" {{ $settings['rounding_method'] == 'round' ? 'selected' : '' }}>{{ __('Standard Rounding') }}</option>
                                <option value="ceil" {{ $settings['rounding_method'] == 'ceil' ? 'selected' : '' }}>{{ __('Round Up') }}</option>
                                <option value="floor" {{ $settings['rounding_method'] == 'floor' ? 'selected' : '' }}>{{ __('Round Down') }}</option>
                            </select>
                        </div>
                    </div>

                    <!-- مربع اختيار لتفعيل الزكاة -->
                    <div class="mt-6 pt-6 border-t border-gray-200">
                        <label class="flex items-center">
                            <input type="checkbox" name="zakat_enabled" value="1" {{ $settings['zakat_enabled'] ? 'checked' : '' }} class="w-4 h-4 text-blue-600 rounded">
                            <span class="mr-3 text-black font-medium">{{ __('Enable Zakat Calculations') }}</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- إعدادات الضرائب -->
            <div id="tax-settings" class="tab-content hidden">
                <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
                    <h2 class="text-2xl font-bold text-black mb-6">
                        <i class="fas fa-file-invoice-dollar ml-2 text-green-600"></i>
                        {{ __('Tax Settings') }}
                    </h2>

                    <div class="space-y-6">
                        <!-- أنواع الضرائب -->
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold text-black mb-4">{{ __('Tax Types') }}</h3>
                            <div class="space-y-4">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-black mb-2">{{ __('Income Tax Rate') }} (%)</label>
                                        <input type="number" name="income_tax_rate" step="0.01" value="{{ $settings['income_tax_rate'] }}" min="0" max="100"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-black mb-2">{{ __('Corporate Tax Rate') }} (%)</label>
                                        <input type="number" name="corporate_tax_rate" step="0.01" value="{{ $settings['corporate_tax_rate'] }}" min="0" max="100"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-black mb-2">{{ __('VAT Rate') }} (%)</label>
                                        <input type="number" name="vat_rate" step="0.01" value="{{ $settings['vat_rate'] }}" min="0" max="100"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-black mb-2">{{ __('Social Security Rate') }} (%)</label>
                                        <input type="number" name="social_security_rate" step="0.01" value="{{ $settings['social_security_rate'] }}" min="0" max="100"
                                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- تفعيل الضرائب -->
                        <div class="pt-6 border-t border-gray-200">
                            <label class="flex items-center">
                                <input type="checkbox" name="tax_enabled" value="1" {{ $settings['tax_enabled'] ? 'checked' : '' }} class="w-4 h-4 text-blue-600 rounded">
                                <span class="mr-3 text-black font-medium">{{ __('Enable Tax Calculations') }}</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- إعدادات مالية -->
            <div id="financial-settings" class="tab-content hidden">
                <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
                    <h2 class="text-2xl font-bold text-black mb-6">
                        <i class="fas fa-money-bill-wave ml-2 text-blue-600"></i>
                        {{ __('Financial Settings') }}
                    </h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- حساب الزكاة -->
                        <div>
                            <label for="zakat_account" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Zakat Account') }}
                            </label>
                            <select id="zakat_account" name="zakat_account" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                <option value="">{{ __('Select Account') }}</option>
                                <option value="2200">2200 - {{ __('Zakat Payable') }}</option>
                                <option value="5300">5300 - {{ __('Zakat Expense') }}</option>
                            </select>
                        </div>

                        <!-- حساب الضرائب -->
                        <div>
                            <label for="tax_account" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Tax Account') }}
                            </label>
                            <select id="tax_account" name="tax_account" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                <option value="">{{ __('Select Account') }}</option>
                                <option value="2210">2210 - {{ __('Tax Payable') }}</option>
                                <option value="5310">5310 - {{ __('Tax Expense') }}</option>
                            </select>
                        </div>

                        <!-- حد الدفع الأدنى -->
                        <div>
                            <label for="payment_threshold" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Minimum Payment Amount') }}
                            </label>
                            <input type="number" id="payment_threshold" name="payment_threshold" step="0.01" value="0"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                        </div>

                        <!-- دقة الحسابات -->
                        <div>
                            <label for="calculation_precision" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Calculation Decimal Places') }}
                            </label>
                            <select id="calculation_precision" name="calculation_precision" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                <option value="2">2 {{ __('Places') }}</option>
                                <option value="3">3 {{ __('Places') }}</option>
                                <option value="4">4 {{ __('Places') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- إعدادات التقارير -->
            <div id="report-settings" class="tab-content hidden">
                <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
                    <h2 class="text-2xl font-bold text-black mb-6">
                        <i class="fas fa-chart-bar ml-2 text-purple-600"></i>
                        {{ __('Report Settings') }}
                    </h2>

                    <div class="space-y-6">
                        <!-- تكرار التقارير -->
                        <div>
                            <label class="block text-sm font-semibold text-black mb-3">{{ __('Report Frequency') }}</label>
                            <div class="space-y-2">
                                <label class="flex items-center">
                                    <input type="radio" name="report_frequency" value="monthly" checked class="w-4 h-4">
                                    <span class="mr-3 text-black">{{ __('Monthly') }}</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="report_frequency" value="quarterly" class="w-4 h-4">
                                    <span class="mr-3 text-black">{{ __('Quarterly') }}</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="report_frequency" value="annually" class="w-4 h-4">
                                    <span class="mr-3 text-black">{{ __('Annually') }}</span>
                                </label>
                            </div>
                        </div>

                        <!-- صيغ التقارير -->
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold text-black mb-4">{{ __('Report Formats') }}</h3>
                            <div class="space-y-2">
                                <label class="flex items-center">
                                    <input type="checkbox" name="report_format_pdf" checked class="w-4 h-4 text-blue-600 rounded">
                                    <span class="mr-3 text-black">{{ __('PDF Format') }}</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" name="report_format_excel" checked class="w-4 h-4 text-blue-600 rounded">
                                    <span class="mr-3 text-black">{{ __('Excel Format') }}</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" name="report_format_email" class="w-4 h-4 text-blue-600 rounded">
                                    <span class="mr-3 text-black">{{ __('Email Report') }}</span>
                                </label>
                            </div>
                        </div>

                        <!-- البريد الإلكتروني للتقارير -->
                        <div>
                            <label for="report_email" class="block text-sm font-semibold text-black mb-2">
                                {{ __('Report Email Recipients') }}
                            </label>
                            <input type="email" id="report_email" name="report_email" placeholder="email@example.com"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                            <p class="mt-1 text-xs text-black">{{ __('Separate multiple emails with comma') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- إعدادات التكامل -->
            <div id="integration-settings" class="tab-content hidden">
                <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
                    <h2 class="text-2xl font-bold text-black mb-6">
                        <i class="fas fa-plug ml-2 text-red-600"></i>
                        {{ __('Integration Settings') }}
                    </h2>

                    <div class="space-y-6">
                        <!-- ZATCA Integration -->
                        <div class="bg-gradient-to-br from-orange-50 to-red-50 p-6 rounded-lg border border-orange-200">
                            <h3 class="text-lg font-semibold text-black mb-4">
                                <i class="fas fa-building text-orange-600 ml-2"></i>
                                {{ __('ZATCA Integration (E-Invoice)') }}
                            </h3>
                            <div class="space-y-4">
                                <label class="flex items-center">
                                    <input type="checkbox" name="zatca_enabled" class="w-4 h-4 text-blue-600 rounded">
                                    <span class="mr-3 text-black font-medium">{{ __('Enable ZATCA Integration') }}</span>
                                </label>
                                <div>
                                    <label for="zatca_api_key" class="block text-sm font-medium text-black mb-2">
                                        {{ __('ZATCA API Key') }}
                                    </label>
                                    <input type="password" id="zatca_api_key" name="zatca_api_key" placeholder="••••••••••••••••"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                </div>
                            </div>
                        </div>

                        <!-- SMS Integration -->
                        <div class="bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-lg border border-blue-200">
                            <h3 class="text-lg font-semibold text-black mb-4">
                                <i class="fas fa-sms text-blue-600 ml-2"></i>
                                {{ __('SMS Notifications') }}
                            </h3>
                            <div class="space-y-4">
                                <label class="flex items-center">
                                    <input type="checkbox" name="sms_enabled" class="w-4 h-4 text-blue-600 rounded">
                                    <span class="mr-3 text-black font-medium">{{ __('Enable SMS Notifications') }}</span>
                                </label>
                                <div>
                                    <label for="sms_provider" class="block text-sm font-medium text-black mb-2">
                                        {{ __('SMS Provider') }}
                                    </label>
                                    <select id="sms_provider" name="sms_provider" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                        <option value="">{{ __('Select Provider') }}</option>
                                        <option value="nexmo">Nexmo</option>
                                        <option value="twilio">Twilio</option>
                                        <option value="local">{{ __('Local Provider') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Email Integration -->
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-lg border border-green-200">
                            <h3 class="text-lg font-semibold text-black mb-4">
                                <i class="fas fa-envelope text-green-600 ml-2"></i>
                                {{ __('Email Notifications') }}
                            </h3>
                            <div class="space-y-4">
                                <label class="flex items-center">
                                    <input type="checkbox" name="email_enabled" checked class="w-4 h-4 text-blue-600 rounded">
                                    <span class="mr-3 text-black font-medium">{{ __('Enable Email Notifications') }}</span>
                                </label>
                                <div>
                                    <label for="notification_email" class="block text-sm font-medium text-black mb-2">
                                        {{ __('Notification Email Address') }}
                                    </label>
                                    <input type="email" id="notification_email" name="notification_email"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- أزرار الإجراءات -->
            <div class="flex justify-between items-center pt-6">
                <a href="{{ route('zakat-taxes.manage') }}" class="inline-flex items-center px-6 py-3 text-black font-semibold rounded-lg border border-gray-300 hover:bg-gray-50 transition-all duration-200">
                    <i class="fas fa-times ml-2"></i>
                    <span>{{ __('Cancel') }}</span>
                </a>
                <button type="submit" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl">
                    <i class="fas fa-save ml-2"></i>
                    <span>{{ __('Save Settings') }}</span>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Script للتبويبات -->
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabButtons = document.querySelectorAll('.tab-button');
        const tabContents = document.querySelectorAll('.tab-content');

        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // إخفاء جميع التبويبات
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });

                // إزالة التنسيق النشط من جميع الأزرار
                tabButtons.forEach(btn => {
                    btn.classList.remove('text-black', 'border-blue-600');
                    btn.classList.add('text-black', 'border-transparent');
                });

                // عرض التبويب المختار
                document.getElementById(tabId).classList.remove('hidden');

                // تنسيق الزر النشط
                this.classList.remove('text-black', 'border-transparent');
                this.classList.add('text-black', 'border-blue-600');
            });
        });
    });
</script>
@endpush
@endsection