@extends('admin.settings.sidebar')

@section('title', __('particles::messages.admin.title'))

@php
    $enabledFrontendRaw = old('particles_enabled_frontend', $enabled_frontend ?? false);
    $enabledFrontendChecked = filter_var($enabledFrontendRaw, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
    $enabledFrontendChecked = $enabledFrontendChecked === null ? (bool) $enabledFrontendRaw : $enabledFrontendChecked;
    
    $enabledCustomerRaw = old('particles_enabled_customer', $enabled_customer ?? false);
    $enabledCustomerChecked = filter_var($enabledCustomerRaw, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
    $enabledCustomerChecked = $enabledCustomerChecked === null ? (bool) $enabledCustomerRaw : $enabledCustomerChecked;
    
    $startValue = $start_date ? \Illuminate\Support\Carbon::parse($start_date)->format('Y-m-d\TH:i') : null;
    $endValue = $end_date ? \Illuminate\Support\Carbon::parse($end_date)->format('Y-m-d\TH:i') : null;
@endphp

@section('setting')
    <div class="card">
        <h4 class="font-semibold uppercase text-gray-600 dark:text-gray-400">
            {{ __('particles::messages.admin.title') }}
        </h4>
        <p class="mb-2 font-semibold text-gray-600 dark:text-gray-400">
            {{ __('particles::messages.admin.description') }}
        </p>

        <form action="{{ route('admin.particles.settings') }}" method="POST" class="mt-4">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 gap-4">
                <!-- Enable for Frontend -->
                <div class="flex items-center justify-between p-4 border rounded-lg dark:border-gray-700 bg-gray-50 dark:bg-slate-900">
                    <div>
                        <p class="font-medium text-gray-800 dark:text-gray-200">
                            {{ __('particles::messages.admin.enabled_frontend_label') }}
                        </p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            {{ __('particles::messages.admin.enabled_frontend_helper') }}
                        </p>
                    </div>
                    @include('admin/shared/switch', [
                        'name' => 'particles_enabled_frontend',
                        'checked' => (bool) $enabledFrontendChecked,
                    ])
                </div>

                <!-- Enable for Customer Area -->
                <div class="flex items-center justify-between p-4 border rounded-lg dark:border-gray-700 bg-gray-50 dark:bg-slate-900">
                    <div>
                        <p class="font-medium text-gray-800 dark:text-gray-200">
                            {{ __('particles::messages.admin.enabled_customer_label') }}
                        </p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            {{ __('particles::messages.admin.enabled_customer_helper') }}
                        </p>
                    </div>
                    @include('admin/shared/switch', [
                        'name' => 'particles_enabled_customer',
                        'checked' => (bool) $enabledCustomerChecked,
                    ])
                </div>

                <!-- Advanced Settings -->
                <div id="particles-advanced-fields" class="{{ ($enabledFrontendChecked || $enabledCustomerChecked) ? '' : 'hidden' }}">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            @include('admin/shared/input', [
                                'name' => 'particles_z_index',
                                'label' => __('particles::messages.admin.z_index_label'),
                                'value' => old('particles_z_index', $z_index ?? '0'),
                                'type' => 'text',
                                'help' => __('particles::messages.admin.z_index_helper'),
                            ])
                        </div>
                        <div>
                            @include('admin/shared/input', [
                                'name' => 'particles_canvas_opacity',
                                'label' => __('particles::messages.admin.canvas_opacity_label'),
                                'value' => old('particles_canvas_opacity', $canvas_opacity ?? '1'),
                                'type' => 'number',
                                'step' => '0.1',
                                'min' => '0',
                                'max' => '1',
                                'help' => __('particles::messages.admin.canvas_opacity_helper'),
                            ])
                        </div>
                    </div>

                    <!-- Schedule Section -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <div>
                            @include('admin/shared/input', [
                                'name' => 'particles_start',
                                'label' => __('particles::messages.admin.start_label'),
                                'value' => old('particles_start', $startValue),
                                'type' => 'datetime-local',
                                'optional' => true,
                            ])
                        </div>
                        <div>
                            @include('admin/shared/input', [
                                'name' => 'particles_end',
                                'label' => __('particles::messages.admin.end_label'),
                                'value' => old('particles_end', $endValue),
                                'type' => 'datetime-local',
                                'optional' => true,
                            ])
                        </div>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                        {{ __('particles::messages.admin.schedule_helper', ['timezone' => config('app.timezone')]) }}
                    </p>

                    <!-- Particles Configuration -->
                    <div class="mb-4">
                        <label for="particles_config" class="block mb-2 font-medium text-gray-700 dark:text-gray-300">
                            {{ __('particles::messages.admin.config_label') }}
                        </label>
                        <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
                            {{ __('particles::messages.admin.config_helper') }}
                        </p>
                        <textarea
                            id="particles_config"
                            name="particles_config"
                            rows="20"
                            class="w-full px-3 py-2 border rounded-lg dark:border-gray-700 dark:bg-slate-800 dark:text-gray-200 font-mono text-sm"
                        >{{ old('particles_config', $config ?? '') }}</textarea>
                        @error('particles_config')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        
                        <div class="flex gap-2 mt-2">
                            <a href="https://vincentgarreau.com/particles.js/" target="_blank" class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                <i class="bi bi-box-arrow-up-right"></i>
                                {{ __('particles::messages.admin.config_generator') }}
                            </a>
                            <span class="text-gray-400">|</span>
                            <button type="button" id="validate-json-btn" class="text-sm text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300">
                                <i class="bi bi-check-circle"></i>
                                {{ __('particles::messages.admin.validate_json') }}
                            </button>
                            <span class="text-gray-400">|</span>
                            <button type="button" id="format-json-btn" class="text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300">
                                <i class="bi bi-code-square"></i>
                                {{ __('particles::messages.admin.format_json') }}
                            </button>
                        </div>
                        <div id="json-validation-result" class="mt-2"></div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex items-center justify-between gap-4">
                    <div class="flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            {{ __('particles::messages.admin.submit') }}
                        </button>
                        <button type="button" id="reset-default-btn" class="btn btn-secondary">
                            {{ __('particles::messages.admin.reset_default') }}
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- Reset to Default Form (Hidden) -->
        <form id="reset-default-form" action="{{ route('admin.particles.reset') }}" method="POST" style="display: none;">
            @csrf
            @method('POST')
        </form>
    </div>
@endsection

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggleFrontend = document.querySelector('input[name="particles_enabled_frontend"]');
            const toggleCustomer = document.querySelector('input[name="particles_enabled_customer"]');
            const advancedFields = document.getElementById('particles-advanced-fields');
            const configTextarea = document.getElementById('particles_config');
            const validateBtn = document.getElementById('validate-json-btn');
            const formatBtn = document.getElementById('format-json-btn');
            const validationResult = document.getElementById('json-validation-result');
            const resetDefaultBtn = document.getElementById('reset-default-btn');

            // Toggle visibility of advanced fields
            const updateVisibilityFields = () => {
                const shouldShow = toggleFrontend.checked || toggleCustomer.checked;
                advancedFields.classList.toggle('hidden', !shouldShow);
            };

            if (toggleFrontend && toggleCustomer && advancedFields) {
                updateVisibilityFields();
                toggleFrontend.addEventListener('change', updateVisibilityFields);
                toggleCustomer.addEventListener('change', updateVisibilityFields);
            }

            // Validate JSON
            if (validateBtn && configTextarea && validationResult) {
                validateBtn.addEventListener('click', function () {
                    const jsonText = configTextarea.value;
                    try {
                        JSON.parse(jsonText);
                        validationResult.innerHTML = '<p class="text-sm text-green-600 dark:text-green-400"><i class="bi bi-check-circle-fill"></i> {{ __("particles::messages.admin.valid_json") }}</p>';
                    } catch (e) {
                        validationResult.innerHTML = '<p class="text-sm text-red-600 dark:text-red-400"><i class="bi bi-x-circle-fill"></i> {{ __("particles::messages.admin.invalid_json_error") }}: ' + e.message + '</p>';
                    }
                });
            }

            // Format JSON
            if (formatBtn && configTextarea) {
                formatBtn.addEventListener('click', function () {
                    const jsonText = configTextarea.value;
                    try {
                        const parsed = JSON.parse(jsonText);
                        configTextarea.value = JSON.stringify(parsed, null, 2);
                        if (validationResult) {
                            validationResult.innerHTML = '<p class="text-sm text-blue-600 dark:text-blue-400"><i class="bi bi-info-circle-fill"></i> {{ __("particles::messages.admin.json_formatted") }}</p>';
                        }
                    } catch (e) {
                        if (validationResult) {
                            validationResult.innerHTML = '<p class="text-sm text-red-600 dark:text-red-400"><i class="bi bi-x-circle-fill"></i> {{ __("particles::messages.admin.cannot_format") }}: ' + e.message + '</p>';
                        }
                    }
                });
            }

            // Reset to default
            if (resetDefaultBtn) {
                resetDefaultBtn.addEventListener('click', function () {
                    if (confirm('{{ __("particles::messages.admin.reset_confirm") }}')) {
                        document.getElementById('reset-default-form').submit();
                    }
                });
            }
        });
    </script>
@endsection