@extends('layouts.admin')

@section('title', 'Module Settings')

@section('page-title', 'Module Settings')

@section('breadcrumbs')
    <a href="{{ route('admin.settings.index') }}" class="hover:text-primary">Settings</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">Modules</span>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Tabs Navigation -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
        <div class="border-b border-gray-200">
            <nav class="flex -mb-px overflow-x-auto bg-gray-50/50">
                <a href="{{ route('admin.settings.modules', ['tab' => 'invoice']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ ($tab ?? 'invoice') === 'invoice' ? 'border-primary text-primary bg-white' : 'border-transparent text-gray-700 hover:text-primary hover:border-gray-300 hover:bg-white/50' }} transition-colors">
                    Invoice Settings
                </a>
                <a href="{{ route('admin.settings.modules', ['tab' => 'quotation']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ ($tab ?? 'invoice') === 'quotation' ? 'border-primary text-primary bg-white' : 'border-transparent text-gray-700 hover:text-primary hover:border-gray-300 hover:bg-white/50' }} transition-colors">
                    Quotation Settings
                </a>
                <a href="{{ route('admin.settings.modules', ['tab' => 'purchase']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ ($tab ?? 'invoice') === 'purchase' ? 'border-primary text-primary bg-white' : 'border-transparent text-gray-700 hover:text-primary hover:border-gray-300 hover:bg-white/50' }} transition-colors">
                    Purchase Settings
                </a>
                <a href="{{ route('admin.settings.modules', ['tab' => 'system-info']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ ($tab ?? 'invoice') === 'system-info' ? 'border-primary text-primary bg-white' : 'border-transparent text-gray-700 hover:text-primary hover:border-gray-300 hover:bg-white/50' }} transition-colors">
                    System Information
                </a>
                <a href="{{ route('admin.settings.modules', ['tab' => 'addon']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ ($tab ?? 'invoice') === 'addon' ? 'border-primary text-primary bg-white' : 'border-transparent text-gray-700 hover:text-primary hover:border-gray-300 hover:bg-white/50' }} transition-colors">
                    Addon
                </a>
            </nav>
        </div>

        <div class="p-6">
            @if(($tab ?? 'invoice') === 'invoice')
                <!-- Invoice Settings Tab -->
                @if (session('success'))
                    <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
                        <span class="material-symbols-outlined text-green-600">check_circle</span>
                        <span class="text-sm text-green-800">{{ session('success') }}</span>
                    </div>
                @endif
                <form method="POST" action="{{ route('admin.settings.invoice-settings.update') }}" class="space-y-6">
                    @csrf
                    <!-- Invoice Numbering -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-bold text-gray-900">Invoice Numbering</h3>
                            <p class="text-sm text-gray-600 mt-1">Configure how invoice numbers are generated</p>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Prefix <span class="text-red-500">*</span></label>
                                <input type="text" name="prefix" id="invoice-prefix" value="{{ $invoiceSettings->prefix ?? 'INV' }}" required class="w-full h-11 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary" placeholder="INV" oninput="updateInvoicePreview()"/>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Next Number <span class="text-red-500">*</span></label>
                                <input type="number" name="next_number" id="invoice-next-number" value="{{ $invoiceSettings->next_number ?? 1 }}" required class="w-full h-11 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary" min="1" oninput="updateInvoicePreview()"/>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Number Length <span class="text-red-500">*</span></label>
                                <input type="number" name="number_length" id="invoice-number-length" value="{{ $invoiceSettings->number_length ?? 6 }}" required class="w-full h-11 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary" min="1" max="10" oninput="updateInvoicePreview()"/>
                                <p class="mt-1 text-xs text-gray-600">Zero-padded length (e.g., 6 = 000001)</p>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-900 mb-2">Format <span class="text-red-500">*</span></label>
                                <input type="text" name="format" id="invoice-format" value="{{ $invoiceSettings->format ?? '{prefix}-{number}' }}" required class="w-full h-11 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary" placeholder="{prefix}-{number}" oninput="updateInvoicePreview()"/>
                                <p class="mt-1 text-xs text-gray-600">Available placeholders: <code class="bg-gray-100 px-1 rounded">{prefix}</code>, <code class="bg-gray-100 px-1 rounded">{number}</code>, <code class="bg-gray-100 px-1 rounded">{year}</code></p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Preview</label>
                                <div id="invoice-preview" class="h-11 flex items-center px-3 rounded-lg bg-gray-100 text-gray-700 font-mono">
                                    @php
                                        $settings = \App\Models\InvoiceNumberingSetting::getSettings();
                                        echo $settings->getPreviewNumber();
                                    @endphp
                                </div>
                            </div>
                            <div class="md:col-span-2">
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="checkbox" name="reset_yearly" value="1" {{ ($invoiceSettings->reset_yearly ?? false) ? 'checked' : '' }} class="w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary"/>
                                    <div>
                                        <span class="text-sm font-medium text-gray-900">Reset numbering yearly</span>
                                        <p class="text-xs text-gray-600">Invoice numbers will reset to 1 at the start of each year</p>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Default Terms & Notes -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-bold text-gray-900">Default Terms & Notes</h3>
                            <p class="text-sm text-gray-600 mt-1">Set default content for new invoices</p>
                        </div>
                        <div class="p-6 space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Terms & Conditions</label>
                                <textarea name="terms" rows="4" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary resize-none" placeholder="Enter default terms and conditions...">{{ $invoiceSettings->terms ?? '' }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Notes</label>
                                <textarea name="notes" rows="4" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary resize-none" placeholder="Enter default notes...">{{ $invoiceSettings->notes ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex justify-end gap-3">
                        <button type="submit" class="px-5 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 shadow-sm transition-colors flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">save</span>
                            Save Changes
                        </button>
                    </div>
                </form>
            @elseif(($tab ?? 'invoice') === 'quotation')
                <!-- Quotation Settings Tab -->
                @if (session('success'))
                    <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
                        <span class="material-symbols-outlined text-green-600">check_circle</span>
                        <span class="text-sm text-green-800">{{ session('success') }}</span>
                    </div>
                @endif
                <form method="POST" action="{{ route('admin.settings.quotation-settings.update') }}" class="space-y-6">
                    @csrf
                    <!-- Section 1: Display Preferences -->
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        <div class="px-6 py-5 border-b border-gray-200">
                            <h2 class="text-lg font-bold text-gray-900">Display Preferences</h2>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
                            <!-- Quotation Prefix -->
                            <label class="flex flex-col gap-1.5">
                                <span class="text-sm font-medium text-gray-900">Quotation Prefix <span class="text-red-500">*</span></span>
                                <input name="prefix" id="quotation-prefix" value="{{ $quotationSettings->prefix ?? 'QUO' }}" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" type="text" oninput="updateQuotationPreview()"/>
                            </label>
                            <!-- Next Number -->
                            <label class="flex flex-col gap-1.5">
                                <span class="text-sm font-medium text-gray-900">Next Number <span class="text-red-500">*</span></span>
                                <input name="next_number" id="quotation-next-number" value="{{ $quotationSettings->next_number ?? 1 }}" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" type="number" min="1" oninput="updateQuotationPreview()"/>
                            </label>
                            <!-- Number Length -->
                            <label class="flex flex-col gap-1.5">
                                <span class="text-sm font-medium text-gray-900">Number Length <span class="text-red-500">*</span></span>
                                <input name="number_length" id="quotation-number-length" value="{{ $quotationSettings->number_length ?? 6 }}" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" type="number" min="1" max="10" oninput="updateQuotationPreview()"/>
                            </label>
                            <!-- Validity Days -->
                            <label class="flex flex-col gap-1.5">
                                <span class="text-sm font-medium text-gray-900">Default Validity (Days) <span class="text-red-500">*</span></span>
                                <input name="validity_days" value="{{ $quotationSettings->validity_days ?? 30 }}" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" type="number" min="1"/>
                            </label>
                            <!-- Preview -->
                            <div class="flex flex-col gap-1.5 md:col-span-2">
                                <span class="text-sm font-medium text-gray-900">Preview</span>
                                <div id="quotation-preview" class="h-11 flex items-center px-4 rounded-lg bg-gray-100 border border-gray-200 text-gray-700 font-mono text-sm">
                                    {{ ($quotationSettings->prefix ?? 'QUO') }}-{{ str_pad($quotationSettings->next_number ?? 1, $quotationSettings->number_length ?? 6, '0', STR_PAD_LEFT) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 2: Sales Person Preferences -->
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        <div class="px-6 py-5 border-b border-gray-200">
                            <h2 class="text-lg font-bold text-gray-900">Sales Person Preferences</h2>
                        </div>
                        <div class="p-6">
                            <div class="flex flex-col gap-4">
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input name="require_salesperson" type="checkbox" value="1" {{ ($quotationSettings->require_salesperson ?? false) ? 'checked' : '' }} class="w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary"/>
                                    <div>
                                        <span class="text-sm font-medium text-gray-900">Require Sales Person</span>
                                        <p class="text-xs text-gray-600">Make sales person selection mandatory on quotations</p>
                                    </div>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input name="show_salesperson_on_pdf" type="checkbox" value="1" {{ ($quotationSettings->show_salesperson_on_pdf ?? true) ? 'checked' : '' }} class="w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary"/>
                                    <div>
                                        <span class="text-sm font-medium text-gray-900">Show on PDF</span>
                                        <p class="text-xs text-gray-600">Display sales person name on generated PDF quotations</p>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Section 3: Default Terms & Notes -->
                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        <div class="px-6 py-5 border-b border-gray-200">
                            <h2 class="text-lg font-bold text-gray-900">Default Terms & Notes</h2>
                        </div>
                        <div class="p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-900">Terms & Conditions</label>
                                <textarea name="terms" class="w-full min-h-[200px] p-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-y transition-shadow" placeholder="Enter default terms and conditions for quotations...">{{ $quotationSettings->terms ?? '' }}</textarea>
                                <p class="text-xs text-gray-600">These terms will be automatically added to new quotations.</p>
                            </div>
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-900">Notes</label>
                                <textarea name="notes" class="w-full min-h-[200px] p-4 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-y transition-shadow" placeholder="Enter default notes for quotations...">{{ $quotationSettings->notes ?? '' }}</textarea>
                                <p class="text-xs text-gray-600">These notes will be automatically added to new quotations.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Action Footer -->
                    <div class="flex justify-end gap-3">
                        <button type="submit" class="px-5 h-10 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-bold shadow-md shadow-primary/20 flex items-center gap-2 transition-all">
                            <span class="material-symbols-outlined text-[18px]">save</span>
                            Save Changes
                        </button>
                    </div>
                </form>
            @elseif(($tab ?? 'invoice') === 'purchase')
                <!-- Purchase Settings Tab -->
                @if (session('success'))
                    <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
                        <span class="material-symbols-outlined text-green-600">check_circle</span>
                        <span class="text-sm text-green-800">{{ session('success') }}</span>
                    </div>
                @endif
                <form method="POST" action="{{ route('admin.settings.purchase-settings.update') }}" class="space-y-6">
                    @csrf
                    <!-- Purchase Order Numbering -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-bold text-gray-900">Purchase Order Numbering</h3>
                            <p class="text-sm text-gray-600 mt-1">Configure how purchase order numbers are generated</p>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Prefix <span class="text-red-500">*</span></label>
                                <input type="text" name="prefix" id="purchase-prefix" value="{{ $purchaseSettings->prefix ?? 'PO' }}" required class="w-full h-11 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary" placeholder="PO" oninput="updatePurchasePreview()"/>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Next Number <span class="text-red-500">*</span></label>
                                <input type="number" name="next_number" id="purchase-next-number" value="{{ $purchaseSettings->next_number ?? 1 }}" required class="w-full h-11 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary" min="1" oninput="updatePurchasePreview()"/>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Number Length <span class="text-red-500">*</span></label>
                                <input type="number" name="number_length" id="purchase-number-length" value="{{ $purchaseSettings->number_length ?? 6 }}" required class="w-full h-11 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary" min="1" max="10" oninput="updatePurchasePreview()"/>
                                <p class="mt-1 text-xs text-gray-600">Zero-padded length (e.g., 6 = 000001)</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Preview</label>
                                <div id="purchase-preview" class="h-11 flex items-center px-3 rounded-lg bg-gray-100 text-gray-700 font-mono">
                                    {{ ($purchaseSettings->prefix ?? 'PO') }}-{{ str_pad($purchaseSettings->next_number ?? 1, $purchaseSettings->number_length ?? 6, '0', STR_PAD_LEFT) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Default Terms -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-bold text-gray-900">Default Terms & Notes</h3>
                            <p class="text-sm text-gray-600 mt-1">Set default content for new purchase orders</p>
                        </div>
                        <div class="p-6 space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Terms & Conditions</label>
                                <textarea name="terms" rows="4" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary resize-none" placeholder="Enter default terms and conditions...">{{ $purchaseSettings->terms ?? '' }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-900 mb-2">Notes</label>
                                <textarea name="notes" rows="4" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary resize-none" placeholder="Enter default notes...">{{ $purchaseSettings->notes ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex justify-end gap-3">
                        <button type="submit" class="px-5 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 shadow-sm transition-colors flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">save</span>
                            Save Changes
                        </button>
                    </div>
                </form>
            @elseif(($tab ?? 'invoice') === 'system-info')
                <!-- System Information Tab -->
                <div class="space-y-6">
                    <!-- App Update Section -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">App Update</h3>
                                <p class="text-sm text-gray-600 mt-1">Check for available application updates</p>
                            </div>
                            <button onclick="checkForUpdates()" class="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors flex items-center gap-2">
                                <span class="material-symbols-outlined text-[18px]">refresh</span>
                                Check for Updates
                            </button>
                        </div>
                        <div class="p-6">
                            <div id="update-status" class="space-y-4">
                                @if($updateInfo)
                                    @if($updateInfo['success'] ?? false)
                                        @if($updateInfo['has_update'] ?? false)
                                            <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                                                <div class="flex items-start gap-3">
                                                    <span class="material-symbols-outlined text-yellow-600">update</span>
                                                    <div class="flex-1">
                                                        <h4 class="text-sm font-semibold text-yellow-900">Update Available</h4>
                                                        <p class="text-sm text-yellow-800 mt-1">
                                                            Current Version: <span class="font-mono font-medium">{{ $updateInfo['current_version'] ?? 'Unknown' }}</span>
                                                        </p>
                                                        <p class="text-sm text-yellow-800">
                                                            Latest Version: <span class="font-mono font-medium">{{ $updateInfo['latest_version'] ?? 'Unknown' }}</span>
                                                        </p>
                                                        @if(isset($updateInfo['checked_at']))
                                                            <p class="text-xs text-yellow-700 mt-2">Last checked: {{ $updateInfo['checked_at'] }}</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                                                <div class="flex items-start gap-3">
                                                    <span class="material-symbols-outlined text-green-600">check_circle</span>
                                                    <div class="flex-1">
                                                        <h4 class="text-sm font-semibold text-green-900">You are up to date!</h4>
                                                        <p class="text-sm text-green-800 mt-1">
                                                            Current Version: <span class="font-mono font-medium">{{ $updateInfo['current_version'] ?? 'Unknown' }}</span>
                                                        </p>
                                                        @if(isset($updateInfo['checked_at']))
                                                            <p class="text-xs text-green-700 mt-2">Last checked: {{ $updateInfo['checked_at'] }}</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @else
                                        <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
                                            <div class="flex items-start gap-3">
                                                <span class="material-symbols-outlined text-red-600">error</span>
                                                <div class="flex-1">
                                                    <h4 class="text-sm font-semibold text-red-900">Update Check Failed</h4>
                                                    <p class="text-sm text-red-800 mt-1">{{ $updateInfo['message'] ?? 'Unable to check for updates' }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @else
                                    <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                                        <p class="text-sm text-gray-600">Click "Check for Updates" to check for available updates.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- System Information Section -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-bold text-gray-900">System Information</h3>
                            <p class="text-sm text-gray-600 mt-1">Application and server environment details</p>
                        </div>
                        <div class="p-6">
                            @if($systemInfo)
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Application Name</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['app_name'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Application Version</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['app_version'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Environment</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['app_env'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Debug Mode</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['app_debug'] ? 'Enabled' : 'Disabled' }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">PHP Version</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['php_version'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Laravel Version</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['laravel_version'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Server Software</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['server_software'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Server OS</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['server_os'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Database Driver</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['database_driver'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Database Version</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['database_version'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Memory Limit</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['memory_limit'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Max Execution Time</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['max_execution_time'] }}s</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Upload Max Filesize</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['upload_max_filesize'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Post Max Size</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['post_max_size'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Timezone</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['timezone'] }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Locale</label>
                                        <p class="text-sm text-gray-900 font-mono">{{ $systemInfo['locale'] }}</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @elseif(($tab ?? 'invoice') === 'addon')
                <!-- Addon Tab -->
                <div class="space-y-6">
                    <div class="flex flex-col justify-between gap-6 sm:flex-row sm:items-center">
                        <div class="flex flex-col gap-2">
                            <h1 class="text-3xl font-bold tracking-tight text-gray-900">Addon Management</h1>
                            <p class="text-gray-700">Upload and manage plugins/addons for your system</p>
                        </div>
                        <button onclick="openUploadModal()" class="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">upload</span>
                            Upload Addon
                        </button>
                    </div>

                    <!-- Available Addons -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-bold text-gray-900">Installed Addons</h3>
                            <p class="text-sm text-gray-600 mt-1">Manage your installed plugins and addons</p>
                        </div>
                        <div class="p-6">
                            @if(isset($addons) && count($addons) > 0)
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                    @foreach($addons as $slug => $addon)
                                        @php
                                            $status = $addon['status'] ?? [];
                                            $isEnabled = isset($status['enabled']) && $status['enabled'] === true;
                                            $statusText = $isEnabled ? 'Enabled' : 'Disabled';
                                        @endphp
                                        <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
                                            <div class="flex items-start justify-between mb-4">
                                                <div class="flex-1">
                                                    <h4 class="text-lg font-bold text-gray-900">{{ $addon['name'] ?? $slug }}</h4>
                                                    <p class="text-sm text-gray-600 mt-1">{{ $addon['description'] ?? 'No description' }}</p>
                                                </div>
                                                <span class="px-2 py-1 text-xs font-medium rounded {{ $isEnabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700' }}">
                                                    {{ $statusText }}
                                                </span>
                                            </div>
                                            <div class="space-y-2 mb-4">
                                                @if(isset($addon['version']))
                                                    <div class="flex items-center gap-2 text-sm text-gray-600">
                                                        <span class="material-symbols-outlined text-[16px]">tag</span>
                                                        <span>Version: {{ $addon['version'] }}</span>
                                                    </div>
                                                @endif
                                                @if(isset($addon['author']))
                                                    <div class="flex items-center gap-2 text-sm text-gray-600">
                                                        <span class="material-symbols-outlined text-[16px]">person</span>
                                                        <span>{{ $addon['author'] }}</span>
                                                    </div>
                                                @endif
                                                @if(isset($status['requires_license']) && $status['requires_license'])
                                                    <div class="flex items-center gap-2 text-sm text-yellow-600">
                                                        <span class="material-symbols-outlined text-[16px]">lock</span>
                                                        <span>Requires License</span>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="flex gap-2">
                                                @if($isEnabled)
                                                    <button onclick="toggleAddon('{{ $slug }}', false)" class="flex-1 px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                                                        Disable
                                                    </button>
                                                @else
                                                    <button onclick="toggleAddon('{{ $slug }}', true)" class="flex-1 px-3 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors" {{ isset($status['can_enable']) && !$status['can_enable'] ? 'disabled' : '' }}>
                                                        Enable
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-12">
                                    <span class="material-symbols-outlined text-6xl text-gray-300 mb-4">extension</span>
                                    <p class="text-gray-600">No addons installed yet.</p>
                                    <p class="text-sm text-gray-500 mt-2">Upload an addon to get started.</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Popular Addons Info -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
                        <div class="flex items-start gap-3">
                            <span class="material-symbols-outlined text-blue-600">info</span>
                            <div class="flex-1">
                                <h4 class="text-sm font-semibold text-blue-900 mb-2">Available Addons</h4>
                                <ul class="text-sm text-blue-800 space-y-1">
                                    <li>• <strong>SAAS Plugin</strong> - Multi-tenant SaaS functionality</li>
                                    <li>• <strong>Mobile Application</strong> - Mobile app integration</li>
                                    <li>• <strong>Landing Page</strong> - Custom landing page builder</li>
                                </ul>
                                <p class="text-xs text-blue-700 mt-3">Upload addon ZIP files to install them. Addons must follow the ProInvoice addon structure.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Upload Addon Modal -->
                <div id="upload-addon-modal" data-admin-modal class="hidden fixed inset-0 z-50 overflow-y-auto">
                    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeUploadModal()"></div>
                        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                            <form id="upload-addon-form" method="POST" action="#" enctype="multipart/form-data" class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                                @csrf
                                <div class="sm:flex sm:items-start">
                                    <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                                        <h3 class="text-lg font-bold text-gray-900 mb-4">Upload Addon</h3>
                                        <div class="space-y-4">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-900 mb-2">Addon ZIP File <span class="text-red-500">*</span></label>
                                                <input type="file" name="addon_file" accept=".zip" required class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-white focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                                                <p class="mt-1 text-xs text-gray-600">Upload a ZIP file containing the addon files</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-5 sm:mt-6 sm:flex sm:flex-row-reverse gap-3">
                                    <button type="submit" class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition-colors">
                                        Upload & Install
                                    </button>
                                    <button type="button" onclick="closeUploadModal()" class="mt-3 sm:mt-0 w-full sm:w-auto px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-lg transition-colors">
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
// Update Invoice Preview
function updateInvoicePreview() {
    const prefix = document.getElementById('invoice-prefix')?.value || 'INV';
    const nextNumber = parseInt(document.getElementById('invoice-next-number')?.value || 1);
    const numberLength = parseInt(document.getElementById('invoice-number-length')?.value || 6);
    const format = document.getElementById('invoice-format')?.value || '{prefix}-{number}';
    const year = new Date().getFullYear();
    const paddedNumber = String(nextNumber).padStart(numberLength, '0');
    
    // Replace placeholders
    let previewText = format
        .replace(/{prefix}/g, prefix)
        .replace(/{number}/g, paddedNumber)
        .replace(/{year}/g, year);
    
    const preview = document.getElementById('invoice-preview');
    if (preview) {
        preview.textContent = previewText;
    }
}

// Update Quotation Preview
function updateQuotationPreview() {
    const prefix = document.getElementById('quotation-prefix')?.value || 'QUO';
    const nextNumber = parseInt(document.getElementById('quotation-next-number')?.value || 1);
    const numberLength = parseInt(document.getElementById('quotation-number-length')?.value || 6);
    const paddedNumber = String(nextNumber).padStart(numberLength, '0');
    const preview = document.getElementById('quotation-preview');
    if (preview) {
        preview.textContent = `${prefix}-${paddedNumber}`;
    }
}

// Update Purchase Preview
function updatePurchasePreview() {
    const prefix = document.getElementById('purchase-prefix')?.value || 'PO';
    const nextNumber = parseInt(document.getElementById('purchase-next-number')?.value || 1);
    const numberLength = parseInt(document.getElementById('purchase-number-length')?.value || 6);
    const paddedNumber = String(nextNumber).padStart(numberLength, '0');
    const preview = document.getElementById('purchase-preview');
    if (preview) {
        preview.textContent = `${prefix}-${paddedNumber}`;
    }
}

// Check for Updates
function checkForUpdates() {
    const statusDiv = document.getElementById('update-status');
    if (statusDiv) {
        statusDiv.innerHTML = '<div class="p-4 bg-gray-50 border border-gray-200 rounded-lg"><p class="text-sm text-gray-600">Checking for updates...</p></div>';
    }
    
    fetch('{{ route("admin.settings.check-updates") }}', {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (statusDiv) {
            if (data.success) {
                if (data.has_update) {
                    statusDiv.innerHTML = `
                        <div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                            <div class="flex items-start gap-3">
                                <span class="material-symbols-outlined text-yellow-600">update</span>
                                <div class="flex-1">
                                    <h4 class="text-sm font-semibold text-yellow-900">Update Available</h4>
                                    <p class="text-sm text-yellow-800 mt-1">Current Version: <span class="font-mono font-medium">${data.current_version}</span></p>
                                    <p class="text-sm text-yellow-800">Latest Version: <span class="font-mono font-medium">${data.latest_version}</span></p>
                                </div>
                            </div>
                        </div>
                    `;
                } else {
                    statusDiv.innerHTML = `
                        <div class="p-4 bg-green-50 border border-green-200 rounded-lg">
                            <div class="flex items-start gap-3">
                                <span class="material-symbols-outlined text-green-600">check_circle</span>
                                <div class="flex-1">
                                    <h4 class="text-sm font-semibold text-green-900">You are up to date!</h4>
                                    <p class="text-sm text-green-800 mt-1">Current Version: <span class="font-mono font-medium">${data.current_version}</span></p>
                                </div>
                            </div>
                        </div>
                    `;
                }
            } else {
                statusDiv.innerHTML = `
                    <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
                        <div class="flex items-start gap-3">
                            <span class="material-symbols-outlined text-red-600">error</span>
                            <div class="flex-1">
                                <h4 class="text-sm font-semibold text-red-900">Update Check Failed</h4>
                                <p class="text-sm text-red-800 mt-1">${data.message || 'Unable to check for updates'}</p>
                            </div>
                        </div>
                    </div>
                `;
            }
        }
    })
    .catch(error => {
        if (statusDiv) {
            statusDiv.innerHTML = `
                <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-red-600">error</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-red-900">Error</h4>
                            <p class="text-sm text-red-800 mt-1">Failed to check for updates. Please try again.</p>
                        </div>
                    </div>
                </div>
            `;
        }
    });
}

// Addon Management
function openUploadModal() {
    document.getElementById('upload-addon-modal').classList.remove('hidden');
}

function closeUploadModal() {
    document.getElementById('upload-addon-modal').classList.add('hidden');
}

function toggleAddon(slug, enable) {
    const action = enable ? 'enable' : 'disable';
    const url = `/admin/addons/${slug}/${action}`;
    
    fetch(url, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert(data.message || 'Failed to ' + action + ' addon');
        }
    })
    .catch(error => {
        alert('Error: ' + error.message);
    });
}
</script>
@endsection