@extends('admin.settings.sidebar')

@section('title', __('announcement_bar::messages.admin.title'))
@php
    $startValue = setting('announcement_bar_start') ? \Illuminate\Support\Carbon::parse(setting('announcement_bar_start'))->format('Y-m-d\TH:i') : null;
    $endValue = setting('announcement_bar_end') ? \Illuminate\Support\Carbon::parse(setting('announcement_bar_end'))->format('Y-m-d\TH:i') : null;
    $enabledRaw = old('announcement_bar_enabled', setting('announcement_bar_enabled', false));
    $enabledChecked = filter_var($enabledRaw, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
    $enabledChecked = $enabledChecked === null ? (bool) $enabledRaw : $enabledChecked;
    $canAddHeader = method_exists(app('seo'), 'addHeaderIfNotExists');
@endphp
@section('setting')
    <div class="card">
        <h4 class="font-semibold uppercase text-gray-600 dark:text-gray-400">
            {{ __('announcement_bar::messages.admin.title') }}
        </h4>
        <p class="mb-2 font-semibold text-gray-600 dark:text-gray-400">
            {{ __('announcement_bar::messages.admin.description') }}
        </p>
        @if (! $canAddHeader)
            <div class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300" role="alert">
                <span class="font-medium">{{ __('announcement_bar::messages.admin.warning_title') }}</span>
                <p>{{ __('announcement_bar::messages.admin.warning_description') }}</p>
            </div>
        @endif

        <form action="{{ route('admin.announcement_bar.settings') }}" method="POST" class="mt-4">
            @csrf
            @method('PUT')
            
                <div class="grid grid-cols-1 gap-4">
                    <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">
                                {{ __('announcement_bar::messages.admin.enabled_label') }}
                            </p>
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                {{ __('announcement_bar::messages.admin.enabled_helper') }}
                            </p>
                        </div>
                        @include('admin/shared/switch', [
                            'name' => 'announcement_bar_enabled',
                            'checked' => (bool) $enabledChecked,
                        ])
                    </div>
                    <div id="announcement-bar-fields" class="{{ $enabledChecked ? '' : 'hidden' }}">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        @include('admin/shared/textarea', [
                            'name' => 'announcement_bar_html',
                            'label' => __('announcement_bar::messages.admin.label'),
                            'value' => old('announcement_bar_html', $content ?? ''),
                            'rows' => 6,
                            'optional' => true,
                        ])
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                            {{ __('announcement_bar::messages.admin.helper') }}
                        </p>
                    </div>
                            <div>
                                @include('admin/shared/input', [
                                    'name' => 'announcement_bar_start',
                                    'label' => __('announcement_bar::messages.admin.start_label'),
                                    'value' => old('announcement_bar_start', $startValue),
                                    'type' => 'datetime-local',
                                    'optional' => true,
                                ])
                            </div>
                            <div>
                                @include('admin/shared/input', [
                                    'name' => 'announcement_bar_end',
                                    'label' => __('announcement_bar::messages.admin.end_label'),
                                    'value' => old('announcement_bar_end', $endValue),
                                    'type' => 'datetime-local',
                                    'optional' => true,
                                ])
                            </div>
                        </div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                {{ __('announcement_bar::messages.admin.schedule_helper', ['timezone' => config('app.timezone')]) }}
                            </p>
                        </div>

            <div class="flex items-center justify-between mt-4">
                <button type="submit" class="btn btn-primary">
                    {{ __('announcement_bar::messages.admin.submit') }}
                </button>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggle = document.querySelector('input[name="announcement_bar_enabled"]');
            const fields = document.getElementById('announcement-bar-fields');
            if (!toggle || !fields) {
                return;
            }
            const updateVisibilityFields = () => {
                fields.classList.toggle('hidden', !toggle.checked);
            };
            updateVisibilityFields();
            toggle.addEventListener('change', updateVisibilityFields);
        });
    </script>
@endsection