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

@section('breadcrumb_title', $pageTitle)
@section('breadcrumb_subtitle', trans('translate.Configure section settings'))

@section('content')
    <div class="site-configuration-edit">
        <!-- Header Section -->
        <div class="config-header mb-6">
            <div class="flex flex-col lg:flex-row justify-between items-start gap-4">
                <div class="header-info">
                    <h1 class="config-title text-2xl lg:text-3xl font-semibold text-gray-900 mb-2">{{ $pageTitle }}</h1>
                    <p class="config-description text-gray-600 text-base leading-6 mb-4">
                        {{ $section['description'] ?? trans('backend::translate.Configure this section settings') }}
                    </p>
                    @if ($themeInfo)
                        <div class="theme-badge">
                            <span
                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M4 2a2 2 0 00-2 2v11a2 2 0 002 2V4a2 2 0 012-2h11a2 2 0 00-2-2H4z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                {{ $themeInfo['title'] ?? $themeInfo['name'] }}
                            </span>
                        </div>
                    @endif
                </div>
                <div class="header-actions flex flex-col sm:flex-row gap-2">
                    <a href="{{ route('admin.site-configuration.index') }}"
                        class="btn btn-primary btn-black">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        {{ trans('backend::translate.Back to List') }}
                    </a>
                    <button type="button"
                        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 hidden"
                        id="previewBtn">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                            </path>
                        </svg>
                        {{ trans('backend::translate.Preview') }}
                    </button>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Main Configuration Form -->
                <div class="lg:col-span-2">
                    <div>
                        <div class="border-b border-gray-200 py-4">
                            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                                <h5 class="text-lg font-medium text-gray-900 flex items-center">
                                    <svg class="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    {{ trans('backend::translate.Configuration Settings') }}
                                </h5>
                                <div class="form-actions flex gap-2 hidden">
                                    <button type="button"
                                        class="inline-flex items-center px-3 py-1.5 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                        id="resetForm">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                                            </path>
                                        </svg>
                                        {{ trans('backend::translate.Reset') }}
                                    </button>
                                    <button type="button"
                                        class="inline-flex items-center px-3 py-1.5 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-green-50 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                                        id="saveAsDraft">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4">
                                            </path>
                                        </svg>
                                        {{ trans('backend::translate.Save as Draft') }}
                                    </button>
                                </div>
                            </div>
                        </div>


                        <form id="configurationForm"
                            action="{{ route('admin.site-configuration.store', ['key' => $sectionKey, 'id' => $configuration?->id]) }}"
                            method="POST" enctype="multipart/form-data" novalidate>
                            @csrf
                            @if ($configuration?->id)
                                @method('PUT')
                            @endif

                            <input type="hidden" name="lang_code" value="{{ $languageCode }}">

                            <!-- Progress Indicator -->
                            <div class="form-progress mb-6">
                                <div class="w-full bg-gray-200 rounded-full h-1">
                                    <div class="bg-blue-600 h-1 rounded-full transition-all duration-300 ease-out"
                                        role="progressbar" style="width: 0%"></div>
                                </div>
                                <small class="text-gray-500 text-sm mt-2 block">
                                    <span id="completedFields">0</span> of <span id="totalFields">0</span> fields
                                    completed
                                </small>
                            </div>

                            @if ($contentType === 'content' && isset($section['content']))
                                @php $fields = $section['content']; @endphp
                            @elseif($contentType === 'element' && isset($section['element']))
                                @php $fields = $section['element']; @endphp
                            @else
                                @php $fields = []; @endphp
                            @endif

                            @if (!empty($fields))
                                <div class="configuration-fields space-y-6">
                                    @foreach ($fields as $fieldName => $fieldConfig)
                                        @if (is_array($fieldConfig))
                                            @php
                                                $fieldType = $fieldConfig['type'] ?? 'text';
                                                $fieldValue = $dataValues[$fieldName] ?? null;
                                                $fieldProps = [
                                                    'name' => $fieldName,
                                                    'label' =>
                                                        $fieldConfig['label'] ??
                                                        str_replace('_', ' ', ucfirst($fieldName)),
                                                    'value' => $fieldValue,
                                                    'required' => $fieldConfig['required'] ?? false,
                                                    'help' => $fieldConfig['help'] ?? null,
                                                    'placeholder' => $fieldConfig['placeholder'] ?? null,
                                                ];

                                                // Add type-specific props
                                                if (isset($fieldConfig['options'])) {
                                                    $fieldProps['options'] = $fieldConfig['options'];
                                                }
                                                if (isset($fieldConfig['fields'])) {
                                                    $fieldProps['fields'] = $fieldConfig['fields'];
                                                }
                                                if (isset($fieldConfig['min'])) {
                                                    $fieldProps['min'] = $fieldConfig['min'];
                                                }
                                                if (isset($fieldConfig['max'])) {
                                                    $fieldProps['max'] = $fieldConfig['max'];
                                                }
                                                if (isset($fieldConfig['size'])) {
                                                    $fieldProps['size'] = $fieldConfig['size'];
                                                }
                                            @endphp

                                            <div class="field-group p-3 mb-4" data-field-type="{{ $fieldType }}"
                                                data-field-name="{{ $fieldName }}">
                                                @include(
                                                    "backend::site-configuration.fields.{$fieldType}",
                                                    $fieldProps)
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            @else
                                <div class="no-fields-message text-center py-12 bg-gray-50 rounded-xl">
                                    <div class="no-fields-icon mb-4">
                                        <svg class="w-12 h-12 text-yellow-500 mx-auto" fill="currentColor"
                                            viewBox="0 0 20 20">
                                            <path fill-rule="evenodd"
                                                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                    </div>
                                    <h5 class="text-lg font-medium text-gray-700 mb-2">
                                        {{ trans('backend::translate.No fields configured') }}</h5>
                                    <p class="text-gray-500">
                                        {{ trans('backend::translate.This section has no configurable fields') }}</p>
                                </div>
                            @endif

                            <!-- Form Actions -->
                            <div
                                class="form-actions-bottom flex flex-col sm:flex-row justify-between items-center mt-6 pt-6 border-t border-gray-200 bg-gray-50 rounded-lg p-4 -mx-6 -mb-6">
                                <div class="form-status mb-4 sm:mb-0">
                                    <small class="text-gray-500 flex items-center">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        {{ trans('backend::translate.Last saved') }}:
                                        <span id="lastSaved"
                                            class="ml-1">{{ $configuration?->updated_at?->diffForHumans() ?? trans('translate.Never') }}</span>
                                    </small>
                                </div>
                                <div class="action-buttons flex gap-3">
                                    <button type="button"
                                        class="btn btn-primary !bg-red-300 !border-red-300 flex items-center"
                                        id="discardChanges">
                                        {{ trans('backend::translate.Discard Changes') }}
                                    </button>
                                    <button type="submit"
                                        class="btn btn-primary flex items-center"
                                        id="saveConfiguration">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4">
                                            </path>
                                        </svg>
                                        {{ trans('backend::translate.Save Configuration') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="space-y-6">
                    <!-- Optional Section Screenshot -->
                    @php
                        $screenshotPath = $section['screenshot'] ?? null;
                        $screenshotUrl = $screenshotPath
                            ? asset($screenshotPath)
                            : asset('backend/assets/img/placeholder-image.png');
                    @endphp
                    <div class="hidden bg-white rounded-xl border border-gray-200 shadow-sm">
                        <div class="border-b border-gray-200 px-6 py-4">
                            <h6 class="text-base font-medium text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                                    </path>
                                </svg>
                                {{ trans('backend::translate.Preview') }}
                            </h6>
                        </div>
                        <div class="p-6">
                            <div class="aspect-w-16 aspect-h-9 border rounded-lg overflow-hidden bg-gray-50">
                                <img id="sectionScreenshotPreview" src="{{ $screenshotUrl }}" alt="section screenshot"
                                    onerror="this.src='{{ asset('backend/assets/img/placeholder-image.png') }}'"
                                    class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>

                    <!-- Language Switcher -->
                    <div class="language-switcher-card bg-white rounded-xl border border-gray-200">
                        <div class="border-b border-gray-200 px-6 py-4">
                            <h6 class="text-base font-medium text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129">
                                    </path>
                                </svg>
                                {{ trans('backend::translate.Language Settings') }}
                            </h6>
                        </div>
                        <div class="p-6">
                            <div class="current-language mb-6">
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-2">{{ trans('backend::translate.Current Language') }}</label>
                                <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                                    <div class="language-flag mr-3">
                                        <img src="{{ asset('flags/' . $languageCode . '.png') }}"
                                            alt="{{ $editedLanguage?->name }}"
                                            class="w-6 h-4 rounded border border-gray-200"
                                            onerror="this.style.display='none'">
                                    </div>
                                    <span
                                        class="font-semibold text-gray-900 flex-1">{{ $editedLanguage?->name ?? 'English' }}</span>
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ strtoupper($languageCode) }}</span>
                                </div>
                            </div>

                            <div class="available-languages">
                                <label
                                    class="block text-sm font-medium text-gray-700 mb-3">{{ trans('backend::translate.Switch Language') }}</label>
                                <div class="flex flex-wrap gap-2">
                                    @foreach ($languages as $language)
                                        <a href="{{ route('admin.site-configuration.edit', ['key' => $sectionKey, 'lang_code' => $language->code]) }}"
                                            class="px-3 py-2 text-xs font-medium rounded-md transition-colors {{ $language->code === $languageCode ? 'bg-blue-100 text-blue-800 border border-blue-200' : 'bg-gray-100 text-gray-700 border border-gray-200 hover:bg-gray-200' }}">
                                            {{ $language->name }}
                                        </a>
                                    @endforeach
                                </div>
                            </div>

                            @if ($languageCode !== 'en')
                                <div class="translation-status mt-6">
                                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start">
                                        <svg class="w-5 h-5 text-blue-600 mr-3 mt-0.5 flex-shrink-0" 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>
                                        <div>
                                            <strong
                                                class="text-blue-800 font-medium">{{ trans('backend::translate.Translation Mode') }}</strong>
                                            <p class="text-blue-700 text-sm mt-1">
                                                {{ trans('translate.You are editing the translation for') }}
                                                {{ $editedLanguage?->name }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Configuration Info -->
                    <div class="config-info-card bg-white rounded-xl border border-gray-200 shadow-sm">
                        <div class="border-b border-gray-200 px-6 py-4">
                            <h6 class="text-base font-medium text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-blue-600" 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>
                                {{ trans('backend::translate.Configuration Info') }}
                            </h6>
                        </div>
                        <div class="p-6 space-y-4">
                            <div class="info-item">
                                <label
                                    class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">{{ trans('backend::translate.Section Key') }}</label>
                                <div class="flex items-center">
                                    <code
                                        class="flex-1 bg-gray-100 text-blue-800 px-2 py-1 rounded text-sm font-mono">{{ $sectionKey }}</code>
                                    <button type="button"
                                        class="ml-2 p-2 text-gray-400 hover:text-gray-600 rounded-md hover:bg-gray-100"
                                        onclick="copyToClipboard('{{ $sectionKey }}')">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
                                            </path>
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <div class="info-item">
                                <label
                                    class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">{{ trans('backend::translate.Type') }}</label>
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ ucfirst($contentType) }}</span>
                            </div>

                            <div class="info-item">
                                <label
                                    class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">{{ trans('backend::translate.Page') }}</label>
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">{{ ucfirst($section['page'] ?? 'global') }}</span>
                            </div>

                            @if (isset($section['order']))
                                <div class="info-item">
                                    <label
                                        class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">{{ trans('backend::translate.Order') }}</label>
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">{{ $section['order'] }}</span>
                                </div>
                            @endif

                            @if ($configuration)
                                <div class="info-item">
                                    <label
                                        class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">{{ trans('backend::translate.Last Updatede') }}</label>
                                    <small
                                        class="text-sm text-gray-600">{{ $configuration->updated_at->format('M d, Y H:i') }}</small>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Help & Tips -->
                    <div class="help-card bg-white rounded-xl border border-gray-200 shadow-sm">
                        <div class="border-b border-gray-200 px-6 py-4">
                            <h6 class="text-base font-medium text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                    </path>
                                </svg>
                                {{ trans('backend::translate.Tips & Help') }}
                            </h6>
                        </div>
                        <div class="p-6">
                            <div class="help-tips space-y-4">
                                <div class="tip-item p-3 bg-gray-50 rounded-lg">
                                    <div class="flex">
                                        <svg class="w-5 h-5 text-blue-600 mr-3 mt-0.5 flex-shrink-0" fill="none"
                                            stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                                            </path>
                                        </svg>
                                        <div>
                                            <strong
                                                class="text-sm font-medium text-gray-900">{{ trans('backend::translate.Images') }}</strong>
                                            <p class="text-xs text-gray-600 mt-1">
                                                {{ trans('backend::translate.Upload high-quality images for better visual impact') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tip-item p-3 bg-gray-50 rounded-lg">
                                    <div class="flex">
                                        <svg class="w-5 h-5 text-green-600 mr-3 mt-0.5 flex-shrink-0" fill="none"
                                            stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129">
                                            </path>
                                        </svg>
                                        <div>
                                            <strong
                                                class="text-sm font-medium text-gray-900">{{ trans('backend::translate.Translations') }}</strong>
                                            <p class="text-xs text-gray-600 mt-1">
                                                {{ trans('backend::translate.Configure in English first, then translate to other languages') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="tip-item p-3 bg-gray-50 rounded-lg">
                                    <div class="flex">
                                        <svg class="w-5 h-5 text-blue-600 mr-3 mt-0.5 flex-shrink-0" fill="none"
                                            stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4">
                                            </path>
                                        </svg>
                                        <div>
                                            <strong
                                                class="text-sm font-medium text-gray-900">{{ trans('backend::translate.Auto-save') }}</strong>
                                            <p class="text-xs text-gray-600 mt-1">
                                                {{ trans('backend::translate.Changes are automatically saved as you type') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="help-actions mt-6">
                                <button type="button"
                                    class="w-full inline-flex items-center justify-center px-4 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                    data-bs-toggle="modal" data-bs-target="#helpModal">
                                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    {{ trans('backend::translate.Need Help?') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

        .config-title {
            font-weight: 600;
            color: #111827;
            margin-bottom: 0.5rem;
        }

        .config-description {
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .configuration-form-card,
        .language-switcher-card,
        .config-info-card,
        .help-card {
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }

        .field-group {
            position: relative;
            transition: all 0.2s ease-in-out;
        }

        .field-group.has-error {
            border-color: #f87171;
            background-color: rgba(254, 242, 242, 0.5);
        }

        .field-group.is-completed {
            border-color: #34d399;
            background-color: rgba(240, 253, 244, 0.5);
        }

        .field-group.is-completed::after {
            content: '✓';
            position: absolute;
            top: 13px;
            right: 13px;
            color: #10b981;
            font-size: 1.25rem;
            font-weight: bold;
        }

        .no-fields-message {
            background-color: #f9fafb;
            padding: 3rem 2rem;
        }

        .form-actions-bottom {
            margin: 0 -1.5rem -1.5rem -1.5rem;
        }

        .language-flag img {
            border: 1px solid #e5e7eb;
        }

        .info-item code {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }

        /* Form validation styles */
        .field-group input.is-valid,
        .field-group textarea.is-valid,
        .field-group select.is-valid {
            border-color: #10b981;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310b981' d='m2.3 6.73 1.4 1.42c.2.2.5.2.7 0L7.3 5.3c.2-.2.2-.5 0-.7L6.6 4c-.2-.2-.5-.2-.7 0L4.1 5.9 2.3 4.1c-.2-.2-.5-.2-.7 0l-.7.7c-.2.2-.2.5 0 .7z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1rem 1rem;
        }

        .field-group input.is-invalid,
        .field-group textarea.is-invalid,
        .field-group select.is-invalid {
            border-color: #ef4444;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23ef4444' d='M7.3 6.3l-.7.7L4 4.4 1.4 7l-.7-.7L3.3 4 .6 1.3l.7-.7L4 3.3 6.6.6l.7.7L4.7 4z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1rem 1rem;
        }

        .invalid-feedback {
            color: #ef4444;
            font-size: 0.875rem;
            margin-top: 0.25rem;
            display: block;
        }

        /* Auto-save indicator */
        .auto-save-indicator {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 50;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .auto-save-indicator.show {
            opacity: 1;
        }

        .auto-save-indicator .toast {
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        /* Loading states */
        .btn.loading {
            position: relative;
            color: transparent !important;
        }

        .btn.loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .config-header .flex {
                flex-direction: column;
                gap: 1rem;
            }

            .header-actions {
                width: 100%;
                justify-content: flex-start;
            }

            .form-actions-bottom .flex {
                flex-direction: column;
                gap: 1rem;
            }

            .action-buttons {
                width: 100%;
                display: flex;
                gap: 0.75rem;
            }

            .action-buttons button {
                flex: 1;
            }
        }

        @media (max-width: 640px) {
            .field-group {
                padding: 1rem;
            }

            .field-group.is-completed::after {
                top: 1rem;
                right: 1rem;
            }

            .available-languages .flex {
                flex-direction: column;
            }

            .available-languages a {
                text-align: center;
            }
        }

        /* Aspect ratio utility (for older browsers) */
        .aspect-w-16 {
            position: relative;
            padding-bottom: calc(9 / 16 * 100%);
        }

        .aspect-w-16>* {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            let formData = new FormData($('#configurationForm')[0]);
            let autoSaveTimeout;
            let isFormDirty = false;

            // Initialize form
            initializeForm();
            updateProgress();
            setupAutoSave();
            setupValidation();

            // Initialize form functionality
            function initializeForm() {
                // Track form changes
                $('#configurationForm').on('input change', function() {
                    isFormDirty = true;
                    markFieldAsCompleted($(event.target).closest('.field-group'));
                    updateProgress();
                    // scheduleAutoSave();
                });

                // File input changes
                $('#configurationForm').on('change', 'input[type="file"]', function() {
                    isFormDirty = true;
                    handleFilePreview(this);
                    // scheduleAutoSave();
                });

                // Form submission
                $('#configurationForm').on('submit', function(e) {
                    e.preventDefault();
                    submitForm();
                });

                // Reset form
                $('#resetForm').on('click', function() {
                    resetForm();
                });

                // Save as draft
                $('#saveAsDraft').on('click', function() {
                    saveAsDraft();
                });

                // Discard changes
                $('#discardChanges').on('click', function() {
                    discardChanges();
                });

                // Preview
                $('#previewBtn').on('click', function() {
                    previewConfiguration();
                });
            }

            // Update progress indicator
            function updateProgress() {
                const totalFields = $('.field-group').length;
                const completedFields = $('.field-group.is-completed').length;
                const progressPercentage = totalFields > 0 ? (completedFields / totalFields) * 100 : 0;

                $('.bg-blue-600').css('width', progressPercentage + '%');
                $('#completedFields').text(completedFields);
                $('#totalFields').text(totalFields);
            }

            // Mark field as completed
            function markFieldAsCompleted($fieldGroup) {
                const inputs = $fieldGroup.find('input, textarea, select').not('[type="hidden"]');
                let hasValue = false;

                inputs.each(function() {
                    const $input = $(this);
                    const value = $input.val();

                    if ($input.attr('type') === 'checkbox' || $input.attr('type') === 'radio') {
                        if ($input.is(':checked')) hasValue = true;
                    } else if (value && value.trim() !== '') {
                        hasValue = true;
                    }
                });

                $fieldGroup.toggleClass('is-completed', hasValue);
            }

            // Setup auto-save
            function setupAutoSave() {
                // Check all fields on load
                $('.field-group').each(function() {
                    markFieldAsCompleted($(this));
                });
            }

            // Schedule auto-save
            function scheduleAutoSave() {
                clearTimeout(autoSaveTimeout);
                autoSaveTimeout = setTimeout(function() {
                    if (isFormDirty) {
                        autoSave();
                    }
                }, 2000); // Auto-save after 2 seconds of inactivity
            }

            // Auto-save functionality
            function autoSave() {
                if (!isFormDirty) return;

                showAutoSaveIndicator('saving');

                const formData = new FormData($('#configurationForm')[0]);
                formData.append('_auto_save', '1');

                $.ajax({
                    url: $('#configurationForm').attr('action'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        isFormDirty = false;
                        showAutoSaveIndicator('saved');
                        updateLastSaved();
                    },
                    error: function() {
                        showAutoSaveIndicator('error');
                    }
                });
            }

            // Show auto-save indicator
            function showAutoSaveIndicator(status) {
                let message, icon, bgClass;

                switch (status) {
                    case 'saving':
                        message = '{{ trans('translate.Saving...') }}';
                        icon = 'fas fa-spinner fa-spin';
                        bgClass = 'bg-blue-600';
                        break;
                    case 'saved':
                        message = '{{ trans('translate.Saved') }}';
                        icon = 'fas fa-check';
                        bgClass = 'bg-green-600';
                        break;
                    case 'error':
                        message = '{{ trans('translate.Save failed') }}';
                        icon = 'fas fa-exclamation-triangle';
                        bgClass = 'bg-red-600';
                        break;
                }

                const $indicator = $(`
                <div class="auto-save-indicator">
                    <div class="toast ${bgClass} text-white" role="alert">
                        <div class="toast-body flex items-center">
                            <i class="${icon} mr-2"></i>${message}
                        </div>
                    </div>
                </div>
            `).appendTo('body');

                $indicator.addClass('show');

                setTimeout(() => {
                    $indicator.removeClass('show');
                    setTimeout(() => $indicator.remove(), 300);
                }, status === 'saving' ? 5000 : 2000);
            }

            // Setup form validation
            function setupValidation() {
                $('#configurationForm').on('blur', 'input, textarea, select', function() {
                    validateField($(this));
                });
            }

            // Validate individual field
            function validateField($field) {
                const fieldGroup = $field.closest('.field-group');
                const isRequired = $field.prop('required');
                const value = $field.val();
                const fieldType = $field.attr('type');

                // Remove previous validation classes
                $field.removeClass('is-valid is-invalid');
                fieldGroup.removeClass('has-error');

                let isValid = true;
                let errorMessage = '';

                // Required validation
                if (isRequired && (!value || value.trim() === '')) {
                    isValid = false;
                    errorMessage = '{{ trans('translate.This field is required') }}';
                }

                // Type-specific validation
                if (isValid && value) {
                    switch (fieldType) {
                        case 'email':
                            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                            if (!emailRegex.test(value)) {
                                isValid = false;
                                errorMessage = '{{ trans('translate.Please enter a valid email address') }}';
                            }
                            break;
                        case 'url':
                            try {
                                new URL(value);
                            } catch {
                                isValid = false;
                                errorMessage = '{{ trans('translate.Please enter a valid URL') }}';
                            }
                            break;
                        case 'number':
                            if (isNaN(value)) {
                                isValid = false;
                                errorMessage = '{{ trans('translate.Please enter a valid number') }}';
                            }
                            break;
                    }
                }

                // Apply validation styles
                if (isValid) {
                    $field.addClass('is-valid');
                } else {
                    $field.addClass('is-invalid');
                    fieldGroup.addClass('has-error');

                    // Show error message
                    let $errorDiv = fieldGroup.find('.invalid-feedback');
                    if ($errorDiv.length === 0) {
                        $errorDiv = $('<div class="invalid-feedback"></div>').appendTo(fieldGroup);
                    }
                    $errorDiv.text(errorMessage);
                }

                return isValid;
            }

            // Handle file preview
            function handleFilePreview(input) {
                if (input.files && input.files[0]) {
                    const file = input.files[0];

                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const $repeaterItem = $(input).closest('.repeater-item');

                            if ($repeaterItem.length) {
                                // Preview inside the specific repeater item next to this input
                                const $holder = $(input).closest('.mb-3');
                                let $preview = $holder.find('.image-preview');
                                if ($preview.length === 0) {
                                    $preview = $('<div class="image-preview mt-2"></div>').insertAfter($(input));
                                }
                                $preview.html(
                                    `<img src="${e.target.result}" class="img-thumbnail" style="max-width: 100px; max-height: 100px;">`
                                );
                            } else {
                                // Fallback: preview at field-group level for non-repeater fields
                                const $fieldGroup = $(input).closest('.field-group');
                                let $preview = $fieldGroup.find('.image-preview');
                                if ($preview.length === 0) {
                                    $preview = $('<div class="image-preview mt-3"></div>').appendTo($fieldGroup);
                                }
                                $preview.html(
                                    `<img src="${e.target.result}" class="rounded-lg border border-gray-200 shadow-sm" style="max-width: 200px; max-height: 150px; object-fit: cover;">`
                                );
                            }
                        };
                        reader.readAsDataURL(file);
                    }
                }
            }

            // Submit form
            function submitForm() {
                const $submitBtn = $('#saveConfiguration');
                $submitBtn.addClass('loading').prop('disabled', true);

                // Validate all fields
                let isFormValid = true;
                $('#configurationForm input, #configurationForm textarea, #configurationForm select').each(
                    function() {
                        if (!validateField($(this))) {
                            isFormValid = false;
                        }
                    });

                if (!isFormValid) {
                    $submitBtn.removeClass('loading').prop('disabled', false);
                    showNotification('error', '{{ trans('translate.Please fix the errors before submitting') }}');
                    return;
                }

                // Submit form
                const formData = new FormData($('#configurationForm')[0]);

                $.ajax({
                    url: $('#configurationForm').attr('action'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        isFormDirty = false;
                        showNotification('success',
                            '{{ trans('translate.Configuration saved successfully') }}');
                        updateLastSaved();

                        // Redirect if specified
                        if (response.redirect) {
                            setTimeout(() => {
                                window.location.href = response.redirect;
                            }, 1500);
                        }
                    },
                    error: function(xhr) {
                        const errors = xhr.responseJSON?.errors;
                        if (errors) {
                            showValidationErrors(errors);
                        } else {
                            showNotification('error',
                                '{{ trans('translate.An error occurred while saving') }}');
                        }
                    },
                    complete: function() {
                        $submitBtn.removeClass('loading').prop('disabled', false);
                    }
                });
            }

            // Show validation errors
            function showValidationErrors(errors) {
                Object.keys(errors).forEach(fieldName => {
                    const $field = $(`[name="${fieldName}"]`);
                    const $fieldGroup = $field.closest('.field-group');

                    $field.addClass('is-invalid');
                    $fieldGroup.addClass('has-error');

                    let $errorDiv = $fieldGroup.find('.invalid-feedback');
                    if ($errorDiv.length === 0) {
                        $errorDiv = $('<div class="invalid-feedback"></div>').appendTo($fieldGroup);
                    }
                    $errorDiv.text(errors[fieldName][0]);
                });
            }

            // Reset form
            function resetForm() {
                if (isFormDirty) {
                    Swal.fire({
                        title: '{{ trans('translate.Are you sure?') }}',
                        text: '{{ trans('translate.This will reset all changes') }}',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ trans('translate.Yes, reset') }}',
                        cancelButtonText: '{{ trans('translate.Cancel') }}'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#configurationForm')[0].reset();
                            $('.field-group').removeClass('is-completed has-error');
                            $('input, textarea, select').removeClass('is-valid is-invalid');
                            $('.invalid-feedback').remove();
                            $('.image-preview').remove();
                            isFormDirty = false;
                            updateProgress();
                        }
                    });
                } else {
                    $('#configurationForm')[0].reset();
                    updateProgress();
                }
            }

            // Save as draft
            function saveAsDraft() {
                const formData = new FormData($('#configurationForm')[0]);
                formData.append('status', 'draft');

                $.ajax({
                    url: $('#configurationForm').attr('action'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function() {
                        showNotification('success', '{{ trans('translate.Saved as draft') }}');
                        isFormDirty = false;
                    },
                    error: function() {
                        showNotification('error', '{{ trans('translate.Failed to save draft') }}');
                    }
                });
            }

            // Discard changes
            function discardChanges() {
                if (isFormDirty) {
                    Swal.fire({
                        title: '{{ trans('translate.Discard changes?') }}',
                        text: '{{ trans('translate.All unsaved changes will be lost') }}',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ trans('translate.Discard') }}',
                        cancelButtonText: '{{ trans('translate.Keep editing') }}'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.reload();
                        }
                    });
                }
            }

            // Preview configuration
            function previewConfiguration() {
                const formData = new FormData($('#configurationForm')[0]);

                $.ajax({
                    url: '{{ route('admin.site-configuration.preview', $sectionKey) }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            showPreviewModal(response.data);
                        } else {
                            showNotification('error', response.message);
                        }
                    },
                    error: function() {
                        showNotification('error',
                            '{{ trans('translate.Failed to generate preview') }}');
                    }
                });
            }

            // Update last saved time
            function updateLastSaved() {
                $('#lastSaved').text(new Date().toLocaleString());
            }

            // Show notification
            function showNotification(type, message) {
                const icon = type === 'success' ? 'success' : 'error';
                Swal.fire({
                    icon: icon,
                    title: type === 'success' ? '{{ trans('translate.Success') }}' :
                        '{{ trans('translate.Error') }}',
                    text: message,
                    showConfirmButton: true,
                    confirmButtonText: 'Ok! Close'
                });
            }

            // Show preview modal
            function showPreviewModal(data) {
                $('#previewModal').modal('show');
                $('#previewContent').html(JSON.stringify(data, null, 2));
            }

            // Copy to clipboard function
            window.copyToClipboard = function(text) {
                navigator.clipboard.writeText(text).then(() => {
                    showNotification('success', '{{ trans('translate.Copied to clipboard') }}');
                }).catch(() => {
                    showNotification('error', '{{ trans('translate.Failed to copy') }}');
                });
            };

            // Warn before leaving page if form is dirty
            $(window).on('beforeunload', function(e) {
                if (isFormDirty) {
                    e.preventDefault();
                    return '{{ trans('translate.You have unsaved changes') }}';
                }
            });

            // Initialize tooltips and popovers if using libraries that support them
            if (typeof $().tooltip === 'function') {
                $('[data-bs-toggle="tooltip"]').tooltip();
            }
            if (typeof $().popover === 'function') {
                $('[data-bs-toggle="popover"]').popover();
            }
        });
    </script>
@endpush