@extends('user::layouts.backend-master')

@section('breadcrumb_title', $pageTitle)
@section('breadcrumb_subtitle', trans('translate.Manage your site configurations'))

@section('content')
    <div class="site-configuration-management">
        <!-- Header Section -->
        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-6">
            <div class="flex-1">
                <h2 class="mb-2 text-3xl font-semibold">
                    {{ $pageTitle }}
                </h2>
                <p class="site-config-subtitle text-gray-600 dark:text-gray-400">
                    {{ trans('translate.Configure your website sections and content') }}
                </p>
            </div>
        </div>

        @if (isset($error))
            <div class="flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800"
                role="alert">
                <svg class="flex-shrink-0 inline w-4 h-4 me-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                        clip-rule="evenodd"></path>
                </svg>
                <span class="sr-only">Error</span>
                <div>{{ $error }}</div>
                <button type="button"
                    class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700"
                    data-dismiss-target="#alert-2" aria-label="Close">
                    <span class="sr-only">Close</span>
                    <svg class="w-3 h-3" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                </button>
            </div>
        @endif

        <div class="card mb-10">
            <!-- Theme Information -->
            @if ($activeTheme)
                <div class="theme-info-card mb-6">
                    <div class="flex items-center">
                        <div
                            class="theme-icon flex items-center justify-center w-14 h-14 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-xl">
                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zM3 15a1 1 0 011-1h1a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zm7-13a1 1 0 011-1h3a1 1 0 011 1v8a1 1 0 01-1 1h-3a1 1 0 01-1-1V2zm2 6a1 1 0 100-2 1 1 0 000 2z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="ms-4 flex-1">
                            <p class="text-gray-600 dark:text-gray-400 mb-0">
                                {{ $activeTheme['title'] ?? '' }}</p>
                                <span
                                class="inline-flex items-center bg-green-400 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">
                                {{ trans('translate.Active') }}
                            </span>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Filter and Search -->
            <div class="configuration-filters mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="relative">
                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 20 20">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                            </svg>
                        </div>
                        <div class="input-with-label">
                            <input type="text" id="searchConfigs"
                                placeholder="{{ trans('translate.Search configurations...') }}">
                        </div>
                    </div>
                    <div>
                        <select id="filterByPage" class="form-select w-full py-3">
                            <option value="">{{ trans('translate.All Pages') }}</option>
                            @foreach ($sectionsByPage as $page => $sections)
                                <option value="{{ $page }}">{{ ucfirst($page) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <select id="filterByStatus" class="form-select w-full py-3">
                            <option value="">{{ trans('translate.All Status') }}</option>
                            <option value="active">{{ trans('translate.Active') }}</option>
                            <option value="inactive">{{ trans('translate.Inactive') }}</option>
                            <option value="draft">{{ trans('translate.Draft') }}</option>
                        </select>
                    </div>
                    <div>
                        <button type="button" id="clearFilters"
                            class="btn-primary justify-center px-6 bg-[#FFEBEB] border-[#FFEBEB] text-error w-full py-3">
                            <svg class="w-4 h-4 inline" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            {{ trans('translate.Clear') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Configuration Sections -->
        <div class="configuration-sections">
            @if (empty($sectionsByPage))
                <div
                    class="empty-state text-center py-16 bg-white dark:bg-gray-800 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600">
                    <div class="empty-state-icon mb-4">
                        <svg class="mx-auto w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
                            </path>
                        </svg>
                    </div>
                    <h4 class="text-xl font-medium text-gray-900 dark:text-white mb-2">
                        {{ trans('translate.No configurations found') }}</h4>
                    <p class="text-gray-500 dark:text-gray-400">
                        {{ trans('translate.Start by creating your first configuration section') }}</p>
                </div>
            @else
                @foreach ($sectionsByPage as $page => $sections)
                    <div class="page-section mb-8" data-page="{{ $page }}">
                        <div class="page-header flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <h3 class="page-title text-2xl font-semibold text-gray-900 mb-0">
                                    {{ ucfirst($page) }} {{ trans('translate.Configurations') }}
                                </h3>
                                <span
                                    class="inline-flex items-center bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300 ms-3">
                                    {{ count($sections) }}
                                </span>
                            </div>
                            <button
                                class="text-gray-500 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200"
                                type="button" data-collapse-toggle="page-{{ $page }}" aria-expanded="true">
                                <svg class="w-4 h-4 transform transition-transform duration-200" fill="currentColor"
                                    viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </button>
                        </div>

                        <div class="collapse-content" id="page-{{ $page }}">
                            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
                                @foreach ($sections as $key => $section)
                                    <div class="configuration-card card" data-section="{{ $key }}"
                                        data-page="{{ $page }}">

                                        <div>
                                            <div class="flex justify-between items-start">
                                                <div class="section-info flex-1">
                                                    <h2 class="section-title text-xl font-semibold mb-3">
                                                        {{ $section['name'] ?? $key }}
                                                    </h2>
                                                    <p
                                                        class="hidden section-description text-sm text-gray-600 dark:text-gray-400 mb-0">
                                                        {{ $section['description'] ?? trans('translate.No description available') }}
                                                    </p>
                                                </div>
                                                <div class="relative">
                                                    <button
                                                        class="hidden text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center dark:hover:bg-gray-700 dark:hover:text-white"
                                                        type="button"
                                                        data-dropdown-toggle="dropdown-{{ $key }}">
                                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                            <path
                                                                d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
                                                            </path>
                                                        </svg>
                                                    </button>
                                                    <div id="dropdown-{{ $key }}"
                                                        class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
                                                        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
                                                            <li>
                                                                <a href="{{ route('admin.site-configuration.edit', $key) }}"
                                                                    class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                                                                    <svg class="w-4 h-4 me-2" fill="currentColor"
                                                                        viewBox="0 0 20 20">
                                                                        <path
                                                                            d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z">
                                                                        </path>
                                                                    </svg>
                                                                    {{ trans('translate.Edit') }}
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="#"
                                                                    class="preview-config flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                                                                    data-section="{{ $key }}">
                                                                    <svg class="w-4 h-4 me-2" fill="currentColor"
                                                                        viewBox="0 0 20 20">
                                                                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                                                                        <path fill-rule="evenodd"
                                                                            d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                                                                            clip-rule="evenodd"></path>
                                                                    </svg>
                                                                    {{ trans('translate.Preview') }}
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <hr class="my-1 border-gray-200 dark:border-gray-600">
                                                            </li>
                                                            <li>
                                                                <a href="#"
                                                                    class="delete-config flex items-center px-4 py-2 text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-red-500 dark:hover:text-red-400"
                                                                    data-section="{{ $key }}">
                                                                    <svg class="w-4 h-4 me-2" fill="currentColor"
                                                                        viewBox="0 0 20 20">
                                                                        <path fill-rule="evenodd"
                                                                            d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"
                                                                            clip-rule="evenodd"></path>
                                                                        <path fill-rule="evenodd"
                                                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414L7.586 12l-1.293 1.293a1 1 0 101.414 1.414L9 13.414l1.293 1.293a1 1 0 001.414-1.414L10.414 12l1.293-1.293z"
                                                                            clip-rule="evenodd"></path>
                                                                    </svg>
                                                                    {{ trans('translate.Reset') }}
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div>
                                            <div class="section-meta mb-4">
                                                <div class="grid grid-cols-2 gap-3">
                                                    <div>
                                                        <small
                                                            class="text-xs text-gray-600 dark:text-gray-400 block mb-1">{{ trans('translate.Type') }}</small>
                                                        <span
                                                            class="inline-flex items-center bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded dark:bg-blue-900 dark:text-blue-300">
                                                            {{ isset($section['content']) ? 'Content' : 'Element' }}
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <small
                                                            class="text-xs text-gray-500 dark:text-gray-400 block mb-1">{{ trans('translate.Order') }}</small>
                                                        <span
                                                            class="inline-flex items-center bg-gray-100 text-gray-800 text-xs font-medium px-2 py-1 rounded dark:bg-gray-700 dark:text-gray-300">
                                                            {{ $section['order'] ?? 'N/A' }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>

                                            @if (isset($section['content']) || isset($section['element']))
                                                <div class="field-summary mb-4">
                                                    <small
                                                        class="text-xs text-gray-500 dark:text-gray-400 block mb-2">{{ trans('translate.Fields') }}</small>
                                                    <div class="field-types flex flex-wrap gap-1">
                                                        @php
                                                            $fields =
                                                                $section['content'] ?? ($section['element'] ?? []);
                                                            $fieldTypes = collect($fields)
                                                                ->map(fn($field) => $field['type'] ?? 'text')
                                                                ->unique();
                                                        @endphp
                                                        @foreach ($fieldTypes->take(3) as $type)
                                                            <span class="badge success">{{ $type }}</span>
                                                        @endforeach
                                                        @if ($fieldTypes->count() > 3)
                                                            <span
                                                                class="badge success">+{{ $fieldTypes->count() - 3 }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif

                                            {{-- Screenshot Preview --}}
                                            @php
                                                $screenshot = $section['screenshot'] ?? null;
                                                $screenshotUrl = $screenshot
                                                    ? asset($screenshot)
                                                    : asset('backend/assets/img/placeholder-image.png');
                                            @endphp
                                            <div class="section-screenshot mb-4 hidden">
                                                <div
                                                    class="relative w-full aspect-video border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden bg-gray-50 dark:bg-gray-700">
                                                    <img src="{{ $screenshotUrl }}"
                                                        alt="{{ $section['name'] ?? $key }} screenshot"
                                                        class="w-full h-full object-cover"
                                                        onerror="this.src='{{ asset('backend/assets/img/placeholder-image.png') }}'">
                                                </div>
                                                <small
                                                    class="text-xs text-gray-500 dark:text-gray-400 block mt-2">{{ trans('translate.Preview') }}</small>
                                            </div>

                                            <div class="section-actions mt-3">
                                                <a href="{{ route('admin.site-configuration.edit', $key) }}"
                                                    class="btn btn-primary">
                                                    {{ trans('translate.Configure') }}
                                                </a>
                                            </div>
                                        </div>

                                        <div
                                            class="hidden card-footer bg-gray-50 dark:bg-gray-900 px-4 py-3 border-t border-gray-200 dark:border-gray-700 rounded-b-xl">
                                            <div class="flex justify-between items-center">
                                                <small class="text-xs text-gray-500 dark:text-gray-400">
                                                    {{ trans('translate.Last updated') }}:
                                                    <span
                                                        class="last-updated font-medium">{{ trans('translate.Never') }}</span>
                                                </small>
                                                <div class="status-indicator">
                                                    <span
                                                        class="inline-flex items-center bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded dark:bg-green-900 dark:text-green-300">
                                                        {{ trans('translate.Active') }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .site-configuration-management {
            padding: 0;
        }

        .site-config-title {
            line-height: 1.2;
        }

        .theme-info-card,
        .configuration-filters {
            backdrop-filter: blur(8px);
        }

        .configuration-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .configuration-card:hover {
           box-shadow: 0 4px 4px 0px rgb(0 0 0 / 1%), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .empty-state {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
        }

        .configuration-sections {
            animation: fadeInUp 0.6s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .page-section {
            animation: slideIn 0.5s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Loading states */
        .loading {
            position: relative;
            pointer-events: none;
            opacity: 0.6;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            border-radius: inherit;
        }

        .loading::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border: 2px solid #e5e7eb;
            border-top: 2px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 11;
        }

        @keyframes spin {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* Results counter styling */
        #results-counter {
            background: #3b82f6;
            border-left: 4px solid #3b82f6;
            display: none;
        }

        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Custom collapse animation */
        .collapse-content {
            transition: all 0.3s ease;
            max-height: 9999px;
            overflow: hidden;
        }

        .collapse-content.collapsed {
            max-height: 0;
            opacity: 0;
            transform: translateY(-10px);
        }

        /* Responsive grid improvements */
        @media (min-width: 1536px) {
            .configuration-sections .grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        /* Focus styles for accessibility */
        .configuration-card:focus-within {
            ring: 2px;
            ring-color: #3b82f6;
            ring-offset: 2px;
            outline: none;
        }

        /* Smooth hover transitions */
        a,
        button {
            transition: all 0.2s ease;
        }

        /* Custom scrollbar */
        .thin-scrollbar::-webkit-scrollbar {
            width: 4px;
        }

        .thin-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
        }

        .thin-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 2px;
        }

        .thin-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Animation classes */
        .animate-fade-in {
            animation: fadeInUp 0.3s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
    <script>
        $(document).ready(function() {
            // Search functionality with debounce
            let searchTimeout;
            $('#searchConfigs').on('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    filterConfigurations();
                }, 300);
            });

            // Initialize search on page load
            filterConfigurations();

            // Filter functionality
            $('#filterByPage, #filterByStatus').on('change', function() {
                filterConfigurations();
            });

            // Clear filters
            $('#clearFilters').on('click', function() {
                $('#searchConfigs').val('');
                $('#filterByPage').val('');
                $('#filterByStatus').val('');
                filterConfigurations();
            });

            // Custom collapse functionality
            $('[data-collapse-toggle]').on('click', function() {
                const targetId = $(this).data('collapse-toggle');
                const target = $('#' + targetId);
                const icon = $(this).find('svg');

                target.toggleClass('collapsed');
                icon.toggleClass('rotate-180');
            });

            // Filter configurations with improved logic
            function filterConfigurations() {
                const searchTerm = $('#searchConfigs').val().toLowerCase().trim();
                const pageFilter = $('#filterByPage').val().trim();
                const statusFilter = $('#filterByStatus').val().trim();

                let visibleCount = 0;
                let totalCount = 0;

                // Reset all cards and sections to visible first
                $('.page-section').show();
                $('.configuration-card').each(function() {
                    $(this).show();
                });

                $('.configuration-card').each(function() {
                    const $card = $(this);
                    const sectionName = $card.find('.section-title').text().toLowerCase().trim();
                    const sectionDesc = $card.find('.section-description').text().toLowerCase().trim();
                    const cardPage = $card.data('page') ? String($card.data('page')).toLowerCase() : '';
                    const cardSection = $card.data('section') ? String($card.data('section'))
                        .toLowerCase() : '';

                    totalCount++;
                    let showCard = true;

                    // Search filter
                    if (searchTerm.length > 0) {
                        const searchInName = sectionName.includes(searchTerm);
                        const searchInDesc = sectionDesc.includes(searchTerm);
                        const searchInSection = cardSection.includes(searchTerm);

                        if (!searchInName && !searchInDesc && !searchInSection) {
                            showCard = false;
                        }
                    }

                    // Page filter
                    if (pageFilter.length > 0 && pageFilter !== cardPage) {
                        showCard = false;
                    }

                    // Status filter
                    if (statusFilter.length > 0) {
                        const statusElement = $card.find('.status-indicator span');
                        const cardStatus = statusElement.text().toLowerCase().trim();

                        if (cardStatus) {
                            let matchesStatus = false;
                            if (statusFilter === 'active' && cardStatus.includes('active')) {
                                matchesStatus = true;
                            } else if (statusFilter === 'inactive' && !cardStatus.includes('active') && !
                                cardStatus.includes('draft')) {
                                matchesStatus = true;
                            } else if (statusFilter === 'draft' && cardStatus.includes('draft')) {
                                matchesStatus = true;
                            }

                            if (!matchesStatus) {
                                showCard = false;
                            }
                        }
                    }

                    // Show or hide the card
                    if (showCard) {
                        visibleCount++;
                        $card.show().addClass('animate-fade-in');
                    } else {
                        $card.hide().removeClass('animate-fade-in');
                    }
                });

                // Hide/show page sections based on visible cards
                $('.page-section').each(function() {
                    const $section = $(this);
                    const visibleCards = $section.find('.configuration-card:visible').length;

                    if (visibleCards > 0) {
                        $section.show().addClass('animate-fade-in');
                    } else {
                        $section.hide().removeClass('animate-fade-in');
                    }
                });

                // Update results counter
                updateResultsCounter(visibleCount, totalCount, searchTerm, pageFilter, statusFilter);
            }

            // Update results counter with enhanced messaging
            function updateResultsCounter(visible, total, searchTerm, pageFilter, statusFilter) {
                let resultsText = '';
                let hasFilters = searchTerm.length > 0 || pageFilter.length > 0 || statusFilter.length > 0;

                if (hasFilters) {
                    let filterParts = [];
                    if (searchTerm.length > 0) filterParts.push(`search: "${searchTerm}"`);
                    if (pageFilter.length > 0) filterParts.push(`page: "${pageFilter}"`);
                    if (statusFilter.length > 0) filterParts.push(`status: "${statusFilter}"`);

                    if (visible === 0) {
                        resultsText = `No configurations found with ${filterParts.join(', ')}`;
                    } else {
                        resultsText = `Found ${visible} of ${total} configurations with ${filterParts.join(', ')}`;
                    }
                } else {
                    resultsText = `Showing all ${total} configurations`;
                }

                // Create or update results counter
                let $counter = $('#results-counter');
                if ($counter.length === 0) {
                    const alertClass = visible === 0 && hasFilters ?
                        'border-yellow-300 bg-yellow-50 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300' :
                        visible === total ?
                        'border-green-300 bg-green-50 text-green-800 dark:bg-green-900 dark:text-green-300' :
                        'border-blue-300 bg-blue-50 text-blue-800 dark:bg-blue-900 dark:text-blue-300';

                    $counter = $(`<div id="results-counter" class="flex items-center mt-6 p-4 mb-4 text-sm border rounded-lg ${alertClass}">
                    <svg class="flex-shrink-0 inline w-4 h-4 me-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                    </svg>
                    <span>${resultsText}</span>
                </div>`);
                    $('.configuration-sections').before($counter);
                } else {
                    $counter.find('span').text(resultsText);
                    $counter.removeClass().addClass(`flex items-center p-4 mb-4 text-sm border rounded-lg ${
                    visible === 0 && hasFilters ? 'border-yellow-300 bg-yellow-50 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300' :
                    visible === total ? 'border-green-300 bg-green-50 text-green-800 dark:bg-green-900 dark:text-green-300' :
                    'border-blue-300 bg-blue-50 text-blue-800 dark:bg-blue-900 dark:text-blue-300'
                }`);
                }
            }

            // Preview configuration
            $('.preview-config').on('click', function(e) {
                e.preventDefault();
                const sectionKey = $(this).data('section');
                previewConfiguration(sectionKey);
            });

            // Delete/Reset configuration
            $('.delete-config').on('click', function(e) {
                e.preventDefault();
                const sectionKey = $(this).data('section');

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: '{{ trans('translate.Are you sure?') }}',
                        text: '{{ trans('translate.This will reset the configuration to default values') }}',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ef4444',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: '{{ trans('translate.Yes, reset it!') }}',
                        cancelButtonText: '{{ trans('translate.Cancel') }}'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            resetConfiguration(sectionKey);
                        }
                    });
                } else {
                    if (confirm(
                            '{{ trans('translate.Are you sure? This will reset the configuration to default values') }}'
                        )) {
                        resetConfiguration(sectionKey);
                    }
                }
            });

            // Refresh configurations
            $('#refreshConfigs').on('click', function(e) {
                e.preventDefault();
                location.reload();
            });

            // Preview configuration function
            function previewConfiguration(sectionKey) {
                showLoading();

                $.get(`{{ route('admin.site-configuration.preview', 'PLACEHOLDER') }}`.replace('PLACEHOLDER',
                        sectionKey))
                    .done(function(response) {
                        if (response.success) {
                            showPreviewModal(response.data);
                        } else {
                            showError(response.message);
                        }
                    })
                    .fail(function() {
                        showError('{{ trans('translate.Failed to load preview') }}');
                    })
                    .always(function() {
                        hideLoading();
                    });
            }

            // Reset configuration function
            function resetConfiguration(sectionKey) {
                showLoading();

                $.ajax({
                        url: `{{ route('admin.site-configuration.reset', '') }}/${sectionKey}`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        }
                    })
                    .done(function(response) {
                        if (response.success) {
                            if (typeof Swal !== 'undefined') {
                                Swal.fire(
                                    '{{ trans('translate.Reset!') }}',
                                    response.message,
                                    'success'
                                );
                            } else {
                                alert(response.message);
                            }
                            setTimeout(() => location.reload(), 1500);
                        } else {
                            showError(response.message);
                        }
                    })
                    .fail(function() {
                        showError('{{ trans('translate.Failed to reset configuration') }}');
                    })
                    .always(function() {
                        hideLoading();
                    });
            }

            // Utility functions
            function showLoading() {
                const loadingDiv = `
                <div id="global-loading" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 flex items-center space-x-4">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                        <span class="text-gray-700 dark:text-gray-300">{{ trans('translate.Loading...') }}</span>
                    </div>
                </div>
            `;
                $('body').append(loadingDiv);
            }

            function hideLoading() {
                $('#global-loading').remove();
            }

            function showError(message) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'error',
                        title: '{{ trans('translate.Error') }}',
                        text: message
                    });
                } else {
                    alert('{{ trans('translate.Error') }}: ' + message);
                }
            }

            function showPreviewModal(data) {
                // Implement preview modal logic here
                console.log('Preview data:', data);
            }

            // Add loading animation on page change
            $('a[href*="admin.site-configuration"]').on('click', function() {
                showLoading();
            });

            // Initialize Flowbite components
            if (typeof initFlowbite === 'function') {
                initFlowbite();
            }
        });

        // Global functions
        function refreshConfigurations() {
            const loadingHtml = `
            <div id="global-loading" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 text-center">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
                    <div class="text-gray-700 dark:text-gray-300">Refreshing configurations...</div>
                </div>
            </div>
        `;
            document.body.insertAdjacentHTML('beforeend', loadingHtml);
            setTimeout(() => window.location.reload(), 500);
        }
    </script>
@endpush