@extends('layouts.app')

@section('title', 'Site Settings - Admin')

@section('content')
@php $recentActivities = $recentActivities ?? []; @endphp

<div class="row g-4 settings-hub">
    <!-- Left Sidebar: Menu / Navigation -->
    <div class="col-lg-2">
        <h5 class="fw-bold mb-3 text-secondary ps-2">Configuration</h5>
        <div class="list-group list-group-flush border rounded shadow-sm mb-4 settings-nav sticky-top" style="top: 20px;">
            <a href="#general" class="list-group-item list-group-item-action active fw-bold">
                <i class="bi bi-sliders me-2"></i> General
            </a>
            <a href="#vendor" class="list-group-item list-group-item-action">
                <i class="bi bi-shop me-2 text-warning"></i> Vendor Setup
            </a>
            <a href="#display" class="list-group-item list-group-item-action">
                <i class="bi bi-laptop me-2 text-info"></i> Display
            </a>
            <a href="#payment" class="list-group-item list-group-item-action">
                <i class="bi bi-credit-card me-2 text-success"></i> Payments
            </a>
            <a href="#email" class="list-group-item list-group-item-action">
                <i class="bi bi-envelope me-2 text-danger"></i> Email
            </a>
            <a href="#communication" class="list-group-item list-group-item-action">
                <i class="bi bi-chat-dots me-2 text-primary"></i> Communication
            </a>
        </div>

        <div class="card border-0 shadow-sm bg-light mb-3">
             <div class="card-body">
                <small class="text-uppercase fw-bold text-muted">Actions</small>
                <div class="d-grid gap-2 mt-2">
                    <button class="btn btn-outline-danger btn-sm text-start"><i class="bi bi-trash me-2"></i> Clear Cache</button>
                    <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left me-1"></i> Back to Dashboard</a>
                </div>
             </div>
        </div>
    </div>

    <!-- Center: Main Content (Settings Form) -->
    <div class="col-lg-7">
        <div class="d-flex justify-content-between align-items-start mb-4">
            <div>
                <h2 class="fw-bold mb-1">System Settings</h2>
                <p class="text-muted mb-2">Manage core platform configuration, vendor rules, and communication modules from one place.</p>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 small">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">System Settings</li>
                    </ol>
                </nav>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
                <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body p-4">
                <form action="{{ route('admin.settings.update') }}" method="POST">
                    @csrf

                    <div id="general" class="settings-section scroll-section">
                        <div class="settings-section-header">
                            <h5 class="fw-bold text-primary mb-1"><i class="bi bi-sliders me-2"></i>General Settings</h5>
                            <p class="text-muted small mb-0">Basic site identity, contact details, and default pricing rules.</p>
                        </div>
                        <div class="row g-3 mt-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">Site Name</label>
                                <input type="text" name="site_name" class="form-control" value="{{ \App\Models\Setting::get('site_name', 'Gletra') }}" placeholder="Gletra">
                                <div class="form-text">Displayed in the browser tab, emails, and storefront header.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">Support Email</label>
                                <input type="email" name="contact_email" class="form-control" value="{{ \App\Models\Setting::get('contact_email', 'support@gletra.com') }}" placeholder="support@gletra.com">
                                <div class="form-text">Public contact address shown to customers and vendors.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">Currency Symbol</label>
                                <input type="text" name="currency_symbol" class="form-control" value="{{ \App\Models\Setting::get('currency_symbol', '$') }}" placeholder="$">
                                <div class="form-text">Symbol used across product prices, orders, and payouts.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">Default Tax Rate (%)</label>
                                <input type="number" name="tax_rate" class="form-control" value="{{ \App\Models\Setting::get('tax_rate', '10') }}" min="0" max="100" step="0.01">
                                <div class="form-text">Applied to eligible orders unless overridden per product.</div>
                            </div>
                        </div>
                    </div>

                    <div id="vendor" class="settings-section scroll-section">
                        <div class="settings-section-header">
                            <h5 class="fw-bold text-primary mb-1"><i class="bi bi-shop me-2"></i>Vendor Setup</h5>
                            <p class="text-muted small mb-0">Commission and payout thresholds for marketplace sellers.</p>
                        </div>
                        <div class="row g-3 mt-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">Global Commission (%)</label>
                                <input type="number" name="commission_rate" class="form-control" value="{{ \App\Models\Setting::get('commission_rate', '10') }}" min="0" max="100" step="0.01">
                                <div class="form-text">Platform fee deducted per order item before vendor payout.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">Min Withdrawal ($)</label>
                                <input type="number" name="min_payout" class="form-control" value="{{ \App\Models\Setting::get('min_payout', '50') }}" min="0" step="1">
                                <div class="form-text">Minimum wallet balance required before a vendor can request a payout.</div>
                            </div>
                        </div>
                    </div>

                    <div id="display" class="settings-section scroll-section">
                        <div class="settings-section-header">
                            <h5 class="fw-bold text-primary mb-1"><i class="bi bi-laptop me-2"></i>Display Settings</h5>
                            <p class="text-muted small mb-0">Front-end text and branding elements visible to visitors.</p>
                        </div>
                        <div class="mt-3">
                            <label class="form-label fw-bold small">Footer Copyright Text</label>
                            <textarea name="footer_text" class="form-control" rows="2" placeholder="© {{ date('Y') }} Gletra Multi-Vendor. All rights reserved.">{{ \App\Models\Setting::get('footer_text', '© ' . date('Y') . ' Gletra Multi-Vendor. All rights reserved.') }}</textarea>
                            <div class="form-text">Shown at the bottom of every public page on the storefront.</div>
                        </div>
                    </div>

                    <div id="payment" class="settings-section scroll-section">
                        <div class="settings-section-header">
                            <h5 class="fw-bold text-primary mb-1"><i class="bi bi-credit-card me-2"></i>Payment Overview</h5>
                            <p class="text-muted small mb-0">Quick snapshot of active payment methods on your store.</p>
                        </div>
                        <div class="row g-3 mt-3">
                            <div class="col-md-4">
                                <div class="settings-info-tile">
                                    <span class="settings-info-label">Cash on Delivery</span>
                                    <span class="badge {{ \App\Models\Setting::get('cod_enabled', 1) ? 'bg-success' : 'bg-secondary' }}">
                                        {{ \App\Models\Setting::get('cod_enabled', 1) ? 'Enabled' : 'Disabled' }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="settings-info-tile">
                                    <span class="settings-info-label">Wallet Payment</span>
                                    <span class="badge {{ \App\Models\Setting::get('wallet_pay_enabled', 1) ? 'bg-success' : 'bg-secondary' }}">
                                        {{ \App\Models\Setting::get('wallet_pay_enabled', 1) ? 'Enabled' : 'Disabled' }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="settings-info-tile">
                                    <span class="settings-info-label">Stripe Gateway</span>
                                    <span class="badge {{ \App\Models\Setting::get('stripe_enabled') ? 'bg-success' : 'bg-secondary' }}">
                                        {{ \App\Models\Setting::get('stripe_enabled') ? 'Enabled' : 'Disabled' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <p class="small text-muted mt-3 mb-0">
                            <i class="bi bi-info-circle me-1"></i>
                            For gateway keys, COD limits, and online payment toggles, open
                            <a href="{{ route('admin.settings.index', 'payment') }}" class="text-decoration-none fw-semibold">Payment Settings</a>.
                        </p>
                    </div>

                    <div id="email" class="settings-section scroll-section">
                        <div class="settings-section-header">
                            <h5 class="fw-bold text-primary mb-1"><i class="bi bi-envelope me-2"></i>Email Overview</h5>
                            <p class="text-muted small mb-0">Current mail delivery configuration at a glance.</p>
                        </div>
                        <div class="row g-3 mt-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted mb-1">Mail Host</label>
                                <p class="mb-0 fw-semibold">{{ \App\Models\Setting::get('mail_host', 'Not configured') ?: 'Not configured' }}</p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted mb-1">From Address</label>
                                <p class="mb-0 fw-semibold">{{ \App\Models\Setting::get('mail_from_address', 'no-reply@gletra.com') }}</p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted mb-1">Port / Encryption</label>
                                <p class="mb-0 fw-semibold">
                                    {{ \App\Models\Setting::get('mail_port', '—') }}
                                    @if(\App\Models\Setting::get('mail_encryption'))
                                        <span class="text-muted">({{ strtoupper(\App\Models\Setting::get('mail_encryption')) }})</span>
                                    @endif
                                </p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted mb-1">SMS (Twilio)</label>
                                <p class="mb-0 fw-semibold">
                                    {{ \App\Models\Setting::get('twilio_sid') ? 'Configured' : 'Not configured' }}
                                </p>
                            </div>
                        </div>
                        <p class="small text-muted mt-3 mb-0">
                            <i class="bi bi-info-circle me-1"></i>
                            Update SMTP credentials and SMS gateway in
                            <a href="{{ route('admin.settings.index', 'email') }}" class="text-decoration-none fw-semibold">Email &amp; SMS Settings</a>.
                        </p>
                    </div>

                    <div id="communication" class="settings-section scroll-section">
                        <div class="settings-section-header">
                            <h5 class="fw-bold text-primary mb-1"><i class="bi bi-chat-dots me-2"></i>Communication &amp; Modules</h5>
                            <p class="text-muted small mb-0">Real-time chat controls and broadcast connectivity.</p>
                        </div>
                        <div class="card bg-light border-0 rounded-4 mt-3">
                            <div class="card-body p-4">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <h6 class="fw-bold mb-0 text-dark">Gletra Chat Box</h6>
                                        <p class="text-muted small mb-0">Manage chat approvals and real-time connectivity.</p>
                                    </div>
                                    <a href="{{ route('admin.chat.index') }}" class="btn btn-primary btn-sm rounded-pill px-3 fw-bold">
                                        Open Approvals
                                    </a>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold small">Chat Approval Required</label>
                                        <select name="chat_approval_required" class="form-select">
                                            <option value="1" {{ \App\Models\Setting::get('chat_approval_required', 1) == 1 ? 'selected' : '' }}>Enabled (High Security)</option>
                                            <option value="0" {{ \App\Models\Setting::get('chat_approval_required', 1) == 0 ? 'selected' : '' }}>Disabled (Auto-Approve)</option>
                                        </select>
                                        <div class="form-text">When enabled, new chat sessions require admin approval before going live.</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold small">Broadcast Driver</label>
                                        <input type="text" class="form-control" value="Live Polling (Heartbeat)" readonly disabled>
                                        <div class="form-text">Real-time updates are delivered via active polling.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="sticky-bottom bg-white py-3 border-top mt-2">
                        <button type="submit" class="btn btn-primary px-5 py-2 fw-bold shadow-sm">Save All Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Right Sidebar: Recent Activity -->
    <div class="col-lg-3">
        <h5 class="fw-bold mb-3 ps-1">Audit Log</h5>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-0">
                <div class="list-group list-group-flush settings-audit-list">
                    @forelse($recentActivities as $activity)
                    <div class="list-group-item border-bottom-0 py-3">
                        <div class="d-flex align-items-center">
                             <div class="flex-shrink-0">
                                <span class="avatar avatar-sm rounded p-2 bg-light text-secondary">
                                    <i class="bi bi-gear"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-0 fw-semibold settings-audit-title">{{ $activity['title'] }}</h6>
                                <small class="text-muted settings-audit-meta">{{ $activity['time'] }} by {{ $activity['user'] }}</small>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="p-4 text-center text-muted">
                        <i class="bi bi-clock-history d-block mb-2 fs-4 opacity-50"></i>
                        No recent changes yet. Updates will appear here after settings are saved.
                    </div>
                    @endforelse
                </div>
            </div>
            <div class="card-footer bg-white text-center py-2 border-0">
                <a href="{{ route('admin.logs.index') }}" class="text-decoration-none small fw-bold text-primary">View Full Logs</a>
            </div>
        </div>

        <div class="card border-0 shadow-sm bg-info text-white">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-2">System Version</h5>
                <p class="small opacity-75 mb-3">You are running Gletra v1.2.0 (Stable). All core modules are up to date.</p>
                <button class="btn btn-sm btn-light text-info fw-bold w-100">Check Updates</button>
            </div>
        </div>
    </div>
</div>

<style>
    html { scroll-behavior: smooth; }

    .settings-hub .settings-section {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid var(--border-color, #e2e8f0);
    }

    .settings-hub .settings-section:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .settings-hub .settings-section-header {
        padding-bottom: 0.25rem;
    }

    .settings-hub .settings-info-tile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        height: 100%;
    }

    .settings-hub .settings-info-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #334155;
    }

    .settings-hub .settings-nav .list-group-item {
        border-left: 3px solid transparent;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .settings-hub .settings-nav .list-group-item.active {
        border-left-color: var(--primary-color, #4f46e5);
    }

    .settings-hub .settings-audit-title {
        font-size: 0.9rem;
    }

    .settings-hub .settings-audit-meta {
        font-size: 0.75rem;
    }

    .settings-hub .sticky-bottom {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    @media (max-width: 991.98px) {
        .settings-hub .settings-nav {
            position: static !important;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const navLinks = document.querySelectorAll('.settings-nav .list-group-item-action');
        const sections = document.querySelectorAll('.settings-hub .scroll-section');

        if (!navLinks.length || !sections.length) return;

        const setActive = (id) => {
            navLinks.forEach((link) => {
                link.classList.toggle('active', link.getAttribute('href') === '#' + id);
                link.classList.toggle('fw-bold', link.getAttribute('href') === '#' + id);
            });
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    setActive(entry.target.id);
                }
            });
        }, { rootMargin: '-30% 0px -55% 0px', threshold: 0 });

        sections.forEach((section) => observer.observe(section));
    });
</script>
@endsection