@extends('admin.layouts.app')
@section('page-title', 'Settings')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/settings.css') }}?v={{ filemtime(public_path('assets/settings.css')) }}">
@endpush

@section('content')
@php
    $settingsGroups = [
        [
            'name' => 'Dashboard Settings', 'icon' => 'dashboard', 'tone' => 'violet',
            'description' => 'Brand, workspace and staff access.',
            'items' => [
                ['name' => 'Brand Name & Logo', 'icon' => 'image', 'description' => 'Current name: '.$brand['name'], 'permission' => 'settings.brand', 'url' => route('admin.settings.brand')],
                ['name' => 'Layout & Display', 'icon' => 'dashboard', 'description' => 'Workspace appearance and display preferences.', 'permission' => 'settings.layout', 'url' => route('admin.settings.layout')],
                ['name' => 'Login Security', 'icon' => 'phone', 'description' => 'Enable or disable mobile OTP for staff sign-in.', 'permission' => 'super-admin', 'url' => route('admin.settings.security')],
                ['name' => 'User Management', 'icon' => 'users', 'description' => 'Create staff users, edit profiles and manage account status.', 'permission' => 'super-admin', 'url' => route('admin.settings.users')],
                ['name' => 'User Access Control', 'icon' => 'settings', 'description' => 'Allow modules and features for each staff user.', 'permission' => 'super-admin', 'url' => route('admin.settings.access')],
            ],
        ],
        [
            'name' => 'Website Settings', 'icon' => 'website', 'tone' => 'teal',
            'description' => 'Storefront content and category placement.',
            'items' => [
                ['name' => 'General Settings', 'icon' => 'globe', 'description' => 'Store details and website preferences.', 'permission' => 'settings.general', 'url' => route('admin.settings.general')],
                ['name' => 'Header & Navigation', 'icon' => 'menu', 'description' => 'Header content and navigation links.', 'permission' => 'settings.header', 'url' => route('admin.settings.header')],
                ['name' => 'Categories & Images', 'icon' => 'category', 'description' => 'Category names, images and website visibility.', 'permission' => 'products.categories', 'url' => route('admin.products.categories')],
                ['name' => 'Homepage Sections', 'icon' => 'website', 'description' => 'Category positions and homepage display order.', 'permission' => 'products.categories', 'url' => route('admin.products.categories').'#category-homepage-control'],
                ['name' => 'Partner Logos', 'icon' => 'image', 'description' => 'Logos for the Work with us today section.', 'permission' => 'settings.partners', 'url' => route('admin.settings.partners')],
                ['name' => 'Footer & Contact', 'icon' => 'phone', 'description' => 'Store contact details and footer content.', 'permission' => 'settings.footer', 'url' => route('admin.settings.footer')],
            ],
        ],
    ];
@endphp

<div class="settings-grid">
    @foreach($settingsGroups as $group)
        <section class="panel settings-panel" aria-labelledby="settings-group-{{ $loop->index }}">
            <header class="settings-heading">
                <span class="settings-group-icon tone-{{ $group['tone'] }}"><x-icon :name="$group['icon']" :size="20" /></span>
                <div><h2 id="settings-group-{{ $loop->index }}">{{ $group['name'] }}</h2><p>{{ $group['description'] }}</p></div>
            </header>
            <ul class="settings-list">
                @foreach($group['items'] as $item)
                    <li>
                        @if(isset($item['url']) && ($item['permission'] === 'super-admin' ? auth()->user()->is_super_admin : auth()->user()->hasPermission($item['permission'])))
                            <a class="settings-row settings-row-link" href="{{ $item['url'] }}">
                                <span class="settings-item-icon"><x-icon :name="$item['icon']" :size="18" /></span>
                                <span class="settings-row-copy"><strong>{{ $item['name'] }}</strong><span>{{ $item['description'] }}</span></span>
                                <x-icon name="chevron" :size="15" />
                            </a>
                        @else
                            <div class="settings-row">
                                <span class="settings-item-icon"><x-icon :name="$item['icon']" :size="18" /></span>
                                <span class="settings-row-copy"><strong>{{ $item['name'] }}</strong><span>{{ $item['description'] }}</span></span>
                                <span class="settings-planned">{{ isset($item['url']) ? 'Restricted' : 'Planned' }}</span>
                            </div>
                        @endif
                    </li>
                @endforeach
            </ul>
        </section>
    @endforeach
</div>
<p class="settings-note"><x-icon name="settings" :size="14" /><span>Settings save to the database. Access to each control is assigned per user.</span></p>
@endsection