@extends('admin.layout', ['title' => 'Settings'])

@section('content')
<div class="setting-m-menu pt-2 mb-3" id="menu">
    <button type="button" data-section="general" class="btn rounded-0 active"><span>General</span></button>
    <button type="button" data-section="logo" class="btn rounded-0"><span>Site Logo</span></button>
    <button type="button" data-section="appearance" class="btn rounded-0"><span>Appearance</span></button>
    <button type="button" data-section="social" class="btn rounded-0"><span>Social Media</span></button>
    <button type="button" data-section="gateway" class="btn rounded-0"><span>Gateway Config</span></button>
    <button type="button" data-section="telegram-bot" class="btn rounded-0"><span>Telegram Bot</span></button>
    <button type="button" data-section="headercode" class="btn rounded-0"><span>Header Code</span></button>
    <button type="button" data-section="email" class="btn rounded-0"><span>Email Config</span></button>
    <button type="button" data-section="flash-message" class="btn rounded-0"><span>Flash Message</span></button>
    <button type="button" data-section="security" class="btn rounded-0"><span>Security</span></button>
    <button type="button" data-section="system" class="btn rounded-0"><span>System</span></button>
    <button type="button" data-section="cache" class="btn rounded-0"><span>Cache</span></button>
    <button type="button" data-section="automation" class="btn rounded-0"><span>Automation</span></button>
</div>

<div id="alertBox" class="alert d-none" role="alert"></div>

<div id="general" class="section active">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-general">
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Site Name</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="site_name" id="general_site_name">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Site URL</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="site_url" id="general_site_url">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Timezone</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="timezone" id="general_timezone" placeholder="UTC">
                    </div>
                </div>
                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">Default Currency</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="default_currency" id="general_default_currency" placeholder="USD">
                    </div>
                </div>
                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="logo" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-logo">
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Logo URL</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="logo_url" id="logo_logo_url">
                    </div>
                </div>
                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">Favicon URL</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="favicon_url" id="logo_favicon_url">
                    </div>
                </div>
                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="appearance" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-appearance">
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Theme</label>
                    <div class="col-sm-6">
                        <select class="form-select" name="theme" id="appearance_theme">
                            <option value="light">Light</option>
                            <option value="dark">Dark</option>
                        </select>
                    </div>
                </div>
                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">Primary Color</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="primary_color" id="appearance_primary_color" placeholder="#0d6efd">
                    </div>
                </div>
                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="social" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-social">
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Facebook</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="facebook" id="social_facebook">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Instagram</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="instagram" id="social_instagram">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Telegram</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="telegram" id="social_telegram">
                    </div>
                </div>
                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">WhatsApp</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="whatsapp" id="social_whatsapp">
                    </div>
                </div>
                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="gateway" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-gateway">
                <div class="fw-semibold mb-3">Mercado Pago (PIX)</div>

                <div class="row mb-2 pb-2 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Enabled</label>
                    <div class="form-check form-switch custom-switch-v1 col-sm-6">
                        <input class="form-check-input input-primary float-end" type="checkbox" id="mp_enabled">
                    </div>
                </div>

                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Access Token</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="mp_access_token" placeholder="APP_USR-...">
                    </div>
                </div>

                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">Notification URL</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="mp_notification_url" placeholder="https://seu-dominio.com/api/webhooks/mercadopago">
                    </div>
                </div>

                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="telegram-bot" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-header pb-0 pt-0">
            <ul class="nav nav-tabs analytics-tab" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="admin-bot-tab" data-bs-toggle="tab" data-bs-target="#admin-bot-tab-pane" type="button" role="tab" aria-controls="admin-bot-tab-pane" aria-selected="true">
                        Admin
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="customer-bot-tab" data-bs-toggle="tab" data-bs-target="#customer-bot-tab-pane" type="button" role="tab" aria-controls="customer-bot-tab-pane" aria-selected="false">
                        Customer
                    </button>
                </li>
            </ul>
        </div>
        <div class="card-body p-0">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="admin-bot-tab-pane" role="tabpanel" aria-labelledby="admin-bot-tab" tabindex="0">
                    <form id="form-telegram-admin">
                        <div class="full-tab-body p-4">
                            <div class="row mb-3 pb-3 border-bottom align-items-center">
                                <label class="col-sm-6 col-form-label">Telegram Bot Token</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="ab_bot_token" name="bot_token" placeholder="123456:xxxx">
                                </div>
                            </div>
                            <div class="row mb-3 pb-3 border-bottom align-items-center">
                                <label class="col-sm-6 col-form-label">Chat ID</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="ab_chat_id" name="chat_id" placeholder="Chat ID">
                                </div>
                            </div>
                            <div class="row mb-2 pb-2 border-bottom align-items-center">
                                <label class="col-sm-6 col-form-label">Active</label>
                                <div class="form-check form-switch custom-switch-v1 col-sm-6">
                                    <input class="form-check-input input-primary float-end" type="checkbox" id="ab_is_active" name="is_active">
                                </div>
                            </div>

                            @php
                                $adminFlags = [
                                    ['id' => 'ab_place_order', 'name' => 'place_order', 'label' => 'Place Order Notification'],
                                    ['id' => 'ab_order_success', 'name' => 'order_success', 'label' => 'Order Success Notification'],
                                    ['id' => 'ab_order_rejected', 'name' => 'order_rejected', 'label' => 'Order Rejected Notification'],
                                    ['id' => 'ab_order_sending_error', 'name' => 'order_sending_error', 'label' => 'Order Sending Error Notification'],
                                    ['id' => 'ab_inventory_stockout', 'name' => 'inventory_stockout', 'label' => 'Inventory Stock Out Notification'],
                                    ['id' => 'ab_funds_added_by_admin', 'name' => 'funds_added_by_admin', 'label' => 'Funds Added By Admin Notification'],
                                    ['id' => 'ab_funds_removed_by_admin', 'name' => 'funds_removed_by_admin', 'label' => 'Funds Removed By Admin Notification'],
                                    ['id' => 'ab_add_funds_by_customer', 'name' => 'add_funds_by_customer', 'label' => 'Add Funds By Customer Notification'],
                                    ['id' => 'ab_admin_login', 'name' => 'admin_login', 'label' => 'Admin Login Notification'],
                                    ['id' => 'ab_customer_registration', 'name' => 'customer_registration', 'label' => 'Customer Registration Notification'],
                                    ['id' => 'ab_system_notification', 'name' => 'system_notification', 'label' => 'System Notification Notification'],
                                ];
                            @endphp

                            @foreach($adminFlags as $flag)
                                <div class="row mb-2 pb-2 border-bottom align-items-center">
                                    <label class="col-sm-6 col-form-label">{{ $flag['label'] }}</label>
                                    <div class="form-check form-switch custom-switch-v1 col-sm-6">
                                        <input class="form-check-input input-primary float-end" type="checkbox" id="{{ $flag['id'] }}" name="{{ $flag['name'] }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="full-tab-footer p-3 border-top d-flex gap-2">
                            <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                            <button class="btn btn-danger rounded" id="adminBotDeactiveBtn" type="button">Deactive</button>
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="customer-bot-tab-pane" role="tabpanel" aria-labelledby="customer-bot-tab" tabindex="0">
                    <form id="form-telegram-customer">
                        <div class="full-tab-body p-4">
                            <div class="row mb-3 pb-3 border-bottom align-items-center">
                                <label class="col-sm-6 col-form-label" for="cb_bot_token">Telegram Bot Token</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="cb_bot_token" name="bot_token" placeholder="123456:xxxx">
                                </div>
                            </div>
                            <div class="row mb-3 pb-3 border-bottom align-items-center">
                                <label class="col-sm-6 col-form-label">Active</label>
                                <div class="form-check form-switch custom-switch-v1 col-sm-6">
                                    <input class="form-check-input input-primary float-end" type="checkbox" id="cb_is_active" name="is_active">
                                </div>
                            </div>
                            <div class="row mb-3 pb-3 border-bottom align-items-center">
                                <label class="col-sm-6 col-form-label" for="cb_bot_username">Bot Username</label>
                                <div class="col-sm-6">
                                    <input class="form-control" id="cb_bot_username" name="bot_username">
                                </div>
                            </div>
                            <div class="row mb-3 pb-3 border-bottom align-items-center">
                                <label class="col-sm-6 col-form-label" for="cb_bot_url">Bot URL</label>
                                <div class="col-sm-6">
                                    <input class="form-control" id="cb_bot_url" name="bot_url">
                                </div>
                            </div>
                        </div>
                        <div class="full-tab-footer p-3 border-top d-flex gap-2">
                            <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                            <button class="btn btn-danger rounded" id="customerBotDeactiveBtn" type="button">Deactive</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="headercode" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-headercode">
                <div class="mb-3">
                    <label class="form-label">Header HTML</label>
                    <textarea class="form-control" rows="6" id="headercode_html" name="html"></textarea>
                </div>
                <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
            </form>
        </div>
    </div>
</div>

<div id="email" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-email">
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">SMTP Host</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email_smtp_host" name="smtp_host">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">SMTP Port</label>
                    <div class="col-sm-6">
                        <input type="number" class="form-control" id="email_smtp_port" name="smtp_port" value="587">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">SMTP Username</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email_smtp_username" name="smtp_username">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">SMTP Password</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email_smtp_password" name="smtp_password">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Encryption</label>
                    <div class="col-sm-6">
                        <select class="form-select" id="email_smtp_encryption" name="smtp_encryption">
                            <option value="tls">tls</option>
                            <option value="ssl">ssl</option>
                            <option value="">none</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">From Address</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email_from_address" name="from_address">
                    </div>
                </div>
                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">From Name</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email_from_name" name="from_name">
                    </div>
                </div>
                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="flash-message" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-flash">
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Active</label>
                    <div class="form-check form-switch custom-switch-v1 col-sm-6">
                        <input class="form-check-input input-primary float-end" type="checkbox" id="flash_is_active" name="is_active">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Type</label>
                    <div class="col-sm-6">
                        <select class="form-select" id="flash_type" name="type">
                            <option value="info">Info</option>
                            <option value="success">Success</option>
                            <option value="warning">Warning</option>
                            <option value="danger">Danger</option>
                        </select>
                    </div>
                </div>
                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">Message</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="flash_message" name="message">
                    </div>
                </div>
                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="security" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-security">
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Public API Rate Limit (seconds)</label>
                    <div class="col-sm-6">
                        <input type="number" class="form-control" id="sec_rate_limit" name="public_api_rate_limit_seconds">
                    </div>
                </div>
                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">Public API Bulk Max</label>
                    <div class="col-sm-6">
                        <input type="number" class="form-control" id="sec_bulk_max" name="public_api_bulk_max">
                    </div>
                </div>
                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="system" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-system">
                <div class="row align-items-center">
                    <label class="col-sm-6 col-form-label">Maintenance Mode</label>
                    <div class="form-check form-switch custom-switch-v1 col-sm-6">
                        <input class="form-check-input input-primary float-end" type="checkbox" id="system_maintenance" name="maintenance">
                    </div>
                </div>
                <div class="pt-3">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="cache" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-cache">
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Cache Enabled</label>
                    <div class="form-check form-switch custom-switch-v1 col-sm-6">
                        <input class="form-check-input input-primary float-end" type="checkbox" id="cache_enabled" name="enabled">
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                    <button class="btn btn-outline-danger rounded" id="btnClearCache" type="button">Clear Cache</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="automation" class="section">
    <div class="card rounded-0 border-0 p-0 m-0">
        <div class="card-body p-4">
            <form id="form-automation">
                <div class="row mb-2 pb-2 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Sync Services Enabled</label>
                    <div class="form-check form-switch custom-switch-v1 col-sm-6">
                        <input class="form-check-input input-primary float-end" type="checkbox" id="auto_sync_services_enabled" name="sync_services_enabled">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Sync Services Schedule</label>
                    <div class="col-sm-6">
                        <select class="form-select" id="auto_sync_services_schedule" name="sync_services_schedule">
                            <option value="hourly">Hourly</option>
                            <option value="everyFiveMinutes">Every 5 Minutes</option>
                            <option value="everyMinute">Every Minute</option>
                            <option value="daily">Daily</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-2 pb-2 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Sync Orders Enabled</label>
                    <div class="form-check form-switch custom-switch-v1 col-sm-6">
                        <input class="form-check-input input-primary float-end" type="checkbox" id="auto_sync_orders_enabled" name="sync_orders_enabled">
                    </div>
                </div>
                <div class="row mb-3 pb-3 border-bottom align-items-center">
                    <label class="col-sm-6 col-form-label">Sync Orders Schedule</label>
                    <div class="col-sm-6">
                        <select class="form-select" id="auto_sync_orders_schedule" name="sync_orders_schedule">
                            <option value="everyFiveMinutes">Every 5 Minutes</option>
                            <option value="everyMinute">Every Minute</option>
                            <option value="hourly">Hourly</option>
                            <option value="daily">Daily</option>
                        </select>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Update</button>
                    <button class="btn btn-outline-primary rounded" id="btnRunSyncServices" type="button">Run Sync Services</button>
                    <button class="btn btn-outline-primary rounded" id="btnRunSyncOrders" type="button">Run Sync Orders</button>
                </div>
            </form>

            <div class="mt-4">
                <div class="fw-semibold mb-2">Status</div>
                <div class="small text-muted" id="automationStatus">-</div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    window.__ADMIN_TOKEN__ = @json($adminToken);
    const apiBase = '/api/admin';

    function showAlert(type, message) {
        const box = document.getElementById('alertBox');
        box.classList.remove('d-none', 'alert-success', 'alert-danger', 'alert-warning', 'alert-info');
        box.classList.add('alert-' + type);
        box.textContent = message;
        setTimeout(() => box.classList.add('d-none'), 3500);
    }

    async function apiFetch(path, options = {}) {
        const headers = options.headers || {};
        headers['Accept'] = 'application/json';
        headers['Authorization'] = 'Bearer ' + window.__ADMIN_TOKEN__;
        if (options.body && !(options.body instanceof FormData)) {
            headers['Content-Type'] = 'application/json';
        }
        const res = await fetch(path, { ...options, headers });
        const json = await res.json().catch(() => ({}));
        if (!res.ok || json.success === false) {
            const msg = (json && (json.msg || json.message)) ? (json.msg || json.message) : 'Erro';
            throw new Error(msg);
        }
        return json;
    }

    function setMenuSection(section) {
        document.querySelectorAll('#menu button').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.section === section);
        });
        document.querySelectorAll('.section').forEach(sec => {
            sec.classList.toggle('active', sec.id === section);
        });
    }

    document.querySelectorAll('#menu button').forEach(btn => {
        btn.addEventListener('click', () => setMenuSection(btn.dataset.section));
    });

    async function loadSettings() {
        const res = await apiFetch(apiBase + '/settings');
        const data = res.data || {};

        document.getElementById('general_site_name').value = data.general?.site_name ?? '';
        document.getElementById('general_site_url').value = data.general?.site_url ?? '';
        document.getElementById('general_timezone').value = data.general?.timezone ?? 'UTC';
        document.getElementById('general_default_currency').value = data.general?.default_currency ?? 'USD';

        document.getElementById('logo_logo_url').value = data.logo?.logo_url ?? '';
        document.getElementById('logo_favicon_url').value = data.logo?.favicon_url ?? '';

        document.getElementById('appearance_theme').value = data.appearance?.theme ?? 'light';
        document.getElementById('appearance_primary_color').value = data.appearance?.primary_color ?? '#0d6efd';

        document.getElementById('social_facebook').value = data.social?.facebook ?? '';
        document.getElementById('social_instagram').value = data.social?.instagram ?? '';
        document.getElementById('social_telegram').value = data.social?.telegram ?? '';
        document.getElementById('social_whatsapp').value = data.social?.whatsapp ?? '';

        const mp = data.gateway?.mercadopago || {};
        document.getElementById('mp_enabled').checked = !!mp.enabled;
        document.getElementById('mp_access_token').value = mp.access_token ?? '';
        document.getElementById('mp_notification_url').value = mp.notification_url ?? '';

        const adminBot = data.telegram_bot?.admin || {};
        document.getElementById('ab_is_active').checked = !!adminBot.is_active;
        document.getElementById('ab_bot_token').value = adminBot.bot_token ?? '';
        document.getElementById('ab_chat_id').value = adminBot.chat_id ?? '';

        [
            'place_order','order_success','order_rejected','order_sending_error','inventory_stockout',
            'funds_added_by_admin','funds_removed_by_admin','add_funds_by_customer','admin_login',
            'customer_registration','system_notification'
        ].forEach(name => {
            const el = document.querySelector('#form-telegram-admin input[name="' + name + '"]');
            if (el) el.checked = !!adminBot[name];
        });

        const customerBot = data.telegram_bot?.customer || {};
        document.getElementById('cb_is_active').checked = !!customerBot.is_active;
        document.getElementById('cb_bot_token').value = customerBot.bot_token ?? '';
        document.getElementById('cb_bot_username').value = customerBot.bot_username ?? '';
        document.getElementById('cb_bot_url').value = customerBot.bot_url ?? '';

        document.getElementById('headercode_html').value = data.headercode?.html ?? '';

        document.getElementById('email_smtp_host').value = data.email?.smtp_host ?? '';
        document.getElementById('email_smtp_port').value = data.email?.smtp_port ?? 587;
        document.getElementById('email_smtp_username').value = data.email?.smtp_username ?? '';
        document.getElementById('email_smtp_password').value = data.email?.smtp_password ?? '';
        document.getElementById('email_smtp_encryption').value = data.email?.smtp_encryption ?? 'tls';
        document.getElementById('email_from_address').value = data.email?.from_address ?? '';
        document.getElementById('email_from_name').value = data.email?.from_name ?? '';

        document.getElementById('flash_is_active').checked = !!data.flash_message?.is_active;
        document.getElementById('flash_type').value = data.flash_message?.type ?? 'info';
        document.getElementById('flash_message').value = data.flash_message?.message ?? '';

        document.getElementById('sec_rate_limit').value = data.security?.public_api_rate_limit_seconds ?? 300;
        document.getElementById('sec_bulk_max').value = data.security?.public_api_bulk_max ?? 50;

        document.getElementById('system_maintenance').checked = !!data.system?.maintenance;

        document.getElementById('cache_enabled').checked = !!data.cache?.enabled;

        document.getElementById('auto_sync_services_enabled').checked = !!data.automation?.sync_services_enabled;
        document.getElementById('auto_sync_orders_enabled').checked = !!data.automation?.sync_orders_enabled;
        document.getElementById('auto_sync_services_schedule').value = data.automation?.sync_services_schedule ?? 'hourly';
        document.getElementById('auto_sync_orders_schedule').value = data.automation?.sync_orders_schedule ?? 'everyFiveMinutes';
    }

    function formToObject(form) {
        const fd = new FormData(form);
        const obj = {};
        fd.forEach((value, key) => obj[key] = value);
        form.querySelectorAll('input[type="checkbox"]').forEach(cb => obj[cb.name] = cb.checked);
        return obj;
    }

    async function saveSection(section, payload) {
        const res = await apiFetch(apiBase + '/settings/' + section, {
            method: 'PUT',
            body: JSON.stringify(payload),
        });
        return res.data;
    }

    document.getElementById('form-general').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('general', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-logo').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('logo', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-appearance').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('appearance', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-social').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('social', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-gateway').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            const payload = {
                mercadopago: {
                    enabled: document.getElementById('mp_enabled').checked,
                    access_token: document.getElementById('mp_access_token').value,
                    notification_url: document.getElementById('mp_notification_url').value,
                }
            };
            await saveSection('gateway', payload);
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-telegram-admin').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            const payload = { admin: formToObject(e.target) };
            await saveSection('telegram-bot', payload);
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('adminBotDeactiveBtn').addEventListener('click', async () => {
        try {
            await saveSection('telegram-bot', { admin: { is_active: false } });
            await loadSettings();
            showAlert('success', 'Desativado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-telegram-customer').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            const payload = { customer: formToObject(e.target) };
            await saveSection('telegram-bot', payload);
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('customerBotDeactiveBtn').addEventListener('click', async () => {
        try {
            await saveSection('telegram-bot', { customer: { is_active: false } });
            await loadSettings();
            showAlert('success', 'Desativado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-headercode').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('headercode', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-email').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('email', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-flash').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('flash-message', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-security').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('security', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-system').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('system', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-cache').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('cache', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('btnClearCache').addEventListener('click', async () => {
        try {
            await apiFetch(apiBase + '/settings/cache/clear', { method: 'POST' });
            showAlert('success', 'Cache limpo');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('form-automation').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            await saveSection('automation', formToObject(e.target));
            showAlert('success', 'Atualizado');
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('btnRunSyncServices').addEventListener('click', async () => {
        try {
            await apiFetch(apiBase + '/settings/automation/sync-services', { method: 'POST' });
            showAlert('success', 'Sync Services executado');
            await refreshAutomationStatus();
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    document.getElementById('btnRunSyncOrders').addEventListener('click', async () => {
        try {
            await apiFetch(apiBase + '/settings/automation/sync-orders', { method: 'POST' });
            showAlert('success', 'Sync Orders executado');
            await refreshAutomationStatus();
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    async function refreshAutomationStatus() {
        const res = await apiFetch(apiBase + '/settings/automation/status');
        document.getElementById('automationStatus').textContent = 'services_count: ' + (res.data?.services_count ?? '-');
    }

    (async () => {
        try {
            await loadSettings();
            await refreshAutomationStatus();
        } catch (err) {
            showAlert('danger', err.message);
        }
    })();
</script>
@endpush