@extends('layouts.app')

@section('title', $title . ' - Admin')

@section('content')
<!-- Mobile Header: Only visible on small screens -->
<div class="d-lg-none mb-3">
    <div class="card border-0 shadow-sm">
        <div class="card-body p-3 d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0 text-primary"><i class="bi bi-gear-fill me-2"></i> Settings</h5>
            <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#mobileSettingsMenu">
                <i class="bi bi-list me-1"></i> Settings Menu
            </button>
        </div>
        <div class="collapse border-top" id="mobileSettingsMenu">
            <div class="list-group list-group-flush" style="max-height: 50vh; overflow-y: auto;">
                @php
                    $icons = [
                        'general' => 'gear', 'site' => 'layout-text-window', 'business' => 'building', 'localization' => 'geo-alt',
                        'currency' => 'currency-dollar', 'payment' => 'credit-card', 'shipping' => 'truck', 'tax' => 'receipt',
                        'vendor' => 'shop', 'commission' => 'percent', 'product' => 'box', 'order' => 'cart',
                        'user' => 'people', 'notification' => 'bell', 'email' => 'envelope', 'wallet' => 'wallet2',
                        'coupon' => 'ticket-perforated', 'media' => 'images', 'seo' => 'search', 'security' => 'shield-lock',
                        'api' => 'code-slash', 'theme' => 'palette', 'language' => 'translate', 'maintenance' => 'hammer',
                        'logs' => 'journal-text', 'system' => 'cpu', 'sliders' => 'easel2', 'home' => 'house',
                        'promotions' => 'lightning-charge-fill'
                    ];
                @endphp
                @foreach($sections as $slug => $name)
                    <a href="{{ route('admin.settings.index', $slug) }}" 
                       class="list-group-item list-group-item-action @if($group == $slug) active fw-bold bg-primary text-white @endif d-flex align-items-center py-3">
                        <i class="bi bi-{{ $icons[$slug] ?? 'dot' }} me-3"></i>
                        {{ $name }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Left Sidebar: Settings Navigation (Hidden on Mobile) -->
    <div class="col-lg-3 col-12">
        <div class="card border-0 shadow-sm sticky-top admin-sidebar-card" style="top: 12px;">
            <div class="card-header bg-white py-2">
                <h6 class="fw-semibold mb-0">Settings Menu</h6>
            </div>
            <div class="list-group list-group-flush" style="max-height: 75vh; overflow-y: auto;">
                @foreach($sections as $slug => $name)
                    <a href="{{ route('admin.settings.index', $slug) }}" 
                       class="list-group-item list-group-item-action py-2 @if($group == $slug) active fw-semibold @endif d-flex align-items-center">
                        <i class="bi bi-{{ $icons[$slug] ?? 'dot' }} me-2"></i>
                        {{ $name }}
                        @if($group == $slug) <i class="bi bi-chevron-right ms-auto small"></i> @endif
                    </a>
                @endforeach
            </div>
            <div class="card-footer bg-light p-2">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-sm w-100">
                    <i class="bi bi-arrow-left me-1"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Center Column: Setting Forms -->
    <div class="col-lg-7">
        <div class="admin-page-header">
            <div>
                <h1 class="h5 fw-semibold mb-1">{{ $title }}</h1>
                <nav aria-label="breadcrumb" class="d-none d-md-block">
                    <ol class="breadcrumb mb-0 small">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.settings.index') }}">Settings</a></li>
                        <li class="breadcrumb-item active">{{ $title }}</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

        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @yield('settings-content')
    </div>

    <!-- Right Column: Contextual Help & Activity -->
    <div class="col-lg-2">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <h6 class="fw-bold mb-3"><i class="bi bi-info-circle me-1 text-primary"></i> Quick Tips</h6>
                <p class="small text-muted mb-0">
                    Changes made here affect the entire platform. Always verify your changes before saving.
                </p>
            </div>
        </div>

        <div class="card border-0 shadow-sm bg-primary text-white mb-4">
            <div class="card-body p-3 text-center">
                <h6 class="fw-bold mb-3 small text-uppercase opacity-75">System Maintenance</h6>
                <form action="{{ route('admin.settings.clearCache') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-light btn-sm w-100 fw-bold shadow-sm">
                        <i class="bi bi-trash-fill me-1"></i> Flush Cache
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection