@extends('layouts.admin')
@section('title', 'Settings')
@section('presence-resource', 'settings')
@section('content')
@php
  $activeMeta = $sections[$section] ?? $sections['general'];
@endphp
<x-admin.page
    title="Platform settings"
    subtitle="Store identity, security, storefront behaviour, and purpose-routed SMTP for every automated email."
>
    <x-slot:actions>
        <a href="{{ route('admin.notifications.index') }}" class="admin-btn">Notification templates</a>
        @if(config('admin_modules.crm'))
            <a href="{{ route('admin.crm.settings.edit') }}" class="admin-btn">CRM automation</a>
        @endif
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <div class="admin-settings" data-admin-settings>
        <aside class="admin-settings-nav" data-admin-settings-nav>
            <div class="admin-settings-nav-head">
                <span class="text-xs font-semibold uppercase tracking-wide text-[#6d7175]">Sections</span>
                <button type="button" class="admin-settings-collapse" data-admin-settings-collapse aria-label="Collapse settings navigation" title="Collapse">
                    <i data-lucide="panel-left-close" class="h-3.5 w-3.5" data-settings-collapse-icon></i>
                </button>
            </div>
            <nav class="admin-settings-nav-list">
                @foreach($sections as $key => $meta)
                    <a
                        href="{{ route('admin.settings.edit', ['section' => $key]) }}"
                        class="admin-settings-link {{ $section === $key ? 'is-active' : '' }}"
                        title="{{ $meta['label'] }} — {{ $meta['description'] }}"
                    >
                        <i data-lucide="{{ $meta['icon'] }}" class="admin-settings-link-icon"></i>
                        <span class="admin-settings-link-text">
                            <span class="admin-settings-link-label">{{ $meta['label'] }}</span>
                            <span class="admin-settings-link-desc">{{ $meta['description'] }}</span>
                        </span>
                    </a>
                @endforeach
            </nav>
        </aside>

        <div class="admin-settings-main">
            <div class="mb-4">
                <h2 class="text-base font-semibold text-[#202223]">{{ $activeMeta['label'] }}</h2>
                <p class="mt-0.5 text-sm text-[#6d7175]">{{ $activeMeta['description'] }}</p>
                <p id="presence-users" class="mt-1 text-xs text-black/45">Presence: connecting…</p>
            </div>

            @include('admin.settings.partials.'.$section)
        </div>
    </div>
</x-admin.page>

@push('scripts')
<script>
(() => {
  const root = document.querySelector('[data-admin-settings]');
  const nav = document.querySelector('[data-admin-settings-nav]');
  const btn = document.querySelector('[data-admin-settings-collapse]');
  if (!root || !nav || !btn) return;
  const key = 'tra_admin_settings_nav_collapsed';
  const apply = (collapsed) => {
    root.classList.toggle('is-nav-collapsed', collapsed);
    nav.classList.toggle('is-collapsed', collapsed);
    const icon = btn.querySelector('[data-settings-collapse-icon]');
    if (icon) icon.setAttribute('data-lucide', collapsed ? 'panel-left-open' : 'panel-left-close');
    if (window.lucide) window.lucide.createIcons();
    try { localStorage.setItem(key, collapsed ? '1' : '0'); } catch (e) {}
  };
  apply(localStorage.getItem(key) === '1');
  btn.addEventListener('click', () => apply(!root.classList.contains('is-nav-collapsed')));
})();
</script>
@endpush
@endsection