@extends('admin.admin_master')

@section('admin')
@if(session('success'))
    <div style="
        background-color: #4CAF50;
        color: white;
        padding: 15px;
        text-align: center;
        font-weight: bold;
    ">
        {{ session('success') }}
    </div>
@endif
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="container py-5">
                <h1>Theme Options</h1>

                <div class="row">
                    <div class="col-md-3">
                        {{-- Sidebar vertical interne --}}
                        <ul class="list-group">
                            <li class="list-group-item active" data-target="#general-content">
                                <i data-feather="settings"></i> General
                            </li>
                            <li class="list-group-item" data-target="#seo-content">
                                <i data-feather="bar-chart-2"></i> SEO
                            </li>
                            <li class="list-group-item" data-target="#cookie-content">
                                <i data-feather="shield"></i> Cookie Consent
                            </li>
                            
                            <li class="list-group-item" data-target="#analytics-content">
                                <i data-feather="share-2"></i> Google Analytics
                            </li>
							<!--
                            <li class="list-group-item" data-target="#header-messages-content">
                                <i data-feather="message-square"></i> Header Messages
                            </li>
                            <li class="list-group-item" data-target="#contact-info-content">
                                <i data-feather="phone"></i> Contact Info Boxes
                            </li>
                            <li class="list-group-item" data-target="#style-content">
                                <i data-feather="feather"></i> Style
                            </li>
                            <li class="list-group-item" data-target="#bottom-bar-content">
                                <i data-feather="menu"></i> Bottom Bar Menu
                            </li>
                            <li class="list-group-item" data-target="#page-content">
                                <i data-feather="file-text"></i> Page
                            </li>
                            -->
                        </ul>
                    </div>

                    <div class="col-md-9">
                        {{-- Sections --}}
                        <div id="general-content" class="content-section">
                            @include('configuration.theme_options.general')
                        </div>

                        <div id="seo-content" class="content-section" style="display: none;">
                            @include('configuration.theme_options.seo')
                        </div>

                        <div id="cookie-content" class="content-section" style="display: none;">
                            @include('configuration.theme_options.cookie')
                        </div>
						
						<div id="analytics-content" class="content-section" style="display: none;">
                             @include('configuration.theme_options.analytics')
                        </div>
						<div id="social-links-content" class="content-section" style="display: none;">
                            {{-- Inclure social_links.blade.php ici si existant --}}
                        </div>

                        <div id="header-messages-content" class="content-section" style="display: none;">
                            {{-- Inclure header_messages.blade.php ici si existant --}}
                        </div>

                        <div id="contact-info-content" class="content-section" style="display: none;">
                            {{-- Inclure contact_info_boxes.blade.php ici si existant --}}
                        </div>

                        <div id="style-content" class="content-section" style="display: none;">
                            {{-- Inclure style.blade.php ici si existant --}}
                        </div>

                        <div id="bottom-bar-content" class="content-section" style="display: none;">
                            {{-- Inclure bottom_bar_menu.blade.php ici si existant --}}
                        </div>

                        

                        <div id="page-content" class="content-section" style="display: none;">
                            {{-- Inclure page.blade.php ici si existant --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Scripts --}}
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const items = document.querySelectorAll('.list-group-item');
        const sections = document.querySelectorAll('.content-section');

        items.forEach(item => {
			item.addEventListener('click', function() {
				console.log("Clicked on", this.getAttribute('data-target'));
				items.forEach(i => i.classList.remove('active'));
				this.classList.add('active');
				sections.forEach(s => s.style.display = 'none');
				const target = this.getAttribute('data-target');
				const targetElement = document.querySelector(target);
				if(targetElement){
					targetElement.style.display = 'block';
				} else {
					console.log("Target not found:", target);
				}
			});
		});

        // Initialise Feather icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    });
</script>
@endpush
@endsection