@extends('layouts.admin')

@section('title', 'Pengaturan')

@section('content')
    <div id="settingsRoot" data-csrf="{{ csrf_token() }}" data-update-url="{{ route('admin.settings.update') }}">
        <h1 style="margin-top: 0;">Pengaturan Situs</h1>

        <div id="settingsFormErrors" class="alert alert-error" style="display: none;"></div>

        <form id="settingsForm" class="card" method="post" action="{{ route('admin.settings.update') }}">
            @csrf
            <h2 style="margin-top: 0;">Hero Section</h2>
            <div class="grid grid-2">
                <div class="form-group"><label>Hero Title</label><input name="hero_title" value="{{ old('hero_title', $hero['title'] ?? '') }}" required></div>
                <div class="form-group"><label>Hero Highlight</label><input name="hero_highlight" value="{{ old('hero_highlight', $hero['highlight'] ?? '') }}" required></div>
            </div>
            <div class="form-group"><label>Hero Description</label><textarea name="hero_description" required>{{ old('hero_description', $hero['description'] ?? '') }}</textarea></div>

            <h2>About Section</h2>
            <div class="grid grid-2">
                <div class="form-group"><label>About Subtitle</label><input name="about_subtitle" value="{{ old('about_subtitle', $about['subtitle'] ?? '') }}" required></div>
                <div class="form-group"><label>About Title</label><input name="about_title" value="{{ old('about_title', $about['title'] ?? '') }}" required></div>
            </div>
            <div class="form-group"><label>About Description</label><textarea name="about_description" required>{{ old('about_description', $about['description'] ?? '') }}</textarea></div>

            <h2>Culture (JSON array)</h2>
            <div class="form-group">
                <textarea name="culture_json">{{ old('culture_json', json_encode($culture, JSON_PRETTY_PRINT)) }}</textarea>
            </div>

            <h2>Certifications (JSON array)</h2>
            <div class="form-group">
                <textarea name="certifications_json">{{ old('certifications_json', json_encode($certifications, JSON_PRETTY_PRINT)) }}</textarea>
            </div>

            <button id="settingsSaveBtn" class="btn btn-primary" type="submit">Simpan Pengaturan</button>
        </form>
    </div>

    <script>
        (() => {
            const root = document.getElementById('settingsRoot');
            if (!root) {
                return;
            }

            const csrfToken = root.dataset.csrf;
            const updateUrl = root.dataset.updateUrl;
            const form = document.getElementById('settingsForm');
            const saveBtn = document.getElementById('settingsSaveBtn');
            const errorBox = document.getElementById('settingsFormErrors');

            const setBusy = (busy) => {
                saveBtn.disabled = busy;
                saveBtn.textContent = busy ? 'Menyimpan...' : 'Simpan Pengaturan';
            };

            const showFeedback = (message, type = 'success') => {
                if (type === 'error') {
                    window.toastError?.(message);
                    return;
                }

                window.toastSuccess?.(message);
            };

            const showErrors = (errors) => {
                if (!errors || Object.keys(errors).length === 0) {
                    errorBox.style.display = 'none';
                    errorBox.innerHTML = '';
                    return;
                }

                const items = Object.values(errors)
                    .flat()
                    .map((message) => `<li>${message}</li>`)
                    .join('');

                errorBox.innerHTML = `<ul style="margin: 0; padding-left: 20px;">${items}</ul>`;
                errorBox.style.display = 'block';
                window.toastError?.('Validasi gagal. Periksa input form.');
            };

            form.addEventListener('submit', async (event) => {
                event.preventDefault();
                showErrors({});
                setBusy(true);

                try {
                    const response = await fetch(updateUrl, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken,
                        },
                        body: new FormData(form),
                    });

                    if (response.status === 422) {
                        const payload = await response.json();
                        showErrors(payload.errors || {});
                        return;
                    }

                    if (!response.ok) {
                        throw new Error('Gagal menyimpan pengaturan.');
                    }

                    const payload = await response.json();
                    showFeedback(payload.message || 'Pengaturan berhasil disimpan.');
                } catch (error) {
                    showFeedback(error.message, 'error');
                } finally {
                    setBusy(false);
                }
            });
        })();
    </script>
@endsection