@extends('admin.layout')

@section('title', 'Website Content')

@section('content')
    <h1>Website content</h1>
    <p>Update the public homepage while keeping its existing design. Changes are published when you save. Verify impact figures and provide their source and reporting date before publication.</p>

    @if (session('status'))
        <div class="notice" role="status">{{ session('status') }}</div>
    @endif
    @if (session('warning'))
        <div class="notice warning" role="alert">{{ session('warning') }}</div>
    @endif
    @if ($errors->any())
        <div class="notice error" role="alert">
            <strong>Some changes could not be saved.</strong>
            <ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
    @endif

    <form id="content-form" method="POST" action="{{ route('admin.content.update') }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        @foreach ($fields as $section => $sectionFields)
            <section class="panel content-section" id="section-{{ strtolower(str_replace(' ', '-', $section)) }}">
                <h2>{{ $section }}</h2>
                <div class="content-grid">
                    @foreach ($sectionFields as $key => [$label, $default, $type])
                        <div class="content-field">
                            <label for="field-{{ $key }}">{{ $label }}</label>
                            @if ($type === 'textarea')
                                <textarea id="field-{{ $key }}" name="content[{{ $key }}]" rows="3">{{ old('content.'.$key, $content[$key] ?? $default) }}</textarea>
                            @else
                                <input id="field-{{ $key }}" name="content[{{ $key }}]" type="{{ $type === 'date' ? 'date' : ($type === 'url' ? 'url' : 'text') }}" value="{{ old('content.'.$key, $content[$key] ?? $default) }}" maxlength="5000">
                            @endif
                        </div>
                    @endforeach
                </div>
            </section>
        @endforeach

        <section class="panel content-section">
            <h2>Images</h2>
            <p>Use JPG, PNG, or WebP images up to 3 MB. Replacing or deleting an image updates the live homepage when saved. Alternative text helps visitors using screen readers.</p>
            <div class="content-grid">
                @foreach ($images as $key => $image)
                    <div class="image-field">
                        <label for="image-{{ $key }}">{{ $image['label'] }}</label>
                        @if ($image['url'])
                            <img class="image-preview" id="preview-{{ $key }}" src="{{ $image['url'] }}" alt="{{ old('content.'.$image['alt'], $content[$image['alt']]) }}">
                        @else
                            <img class="image-preview" id="preview-{{ $key }}" alt="Selected image preview" hidden>
                        @endif
                        <input id="image-{{ $key }}" name="images[{{ $key }}]" type="file" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" data-preview="preview-{{ $key }}">
                        @if ($image['url'])
                            <label class="image-delete">
                                <input type="checkbox" name="remove_images[{{ $key }}]" value="1" data-remove-image="preview-{{ $key }}">
                                Delete this image
                            </label>
                        @endif
                        <label for="field-{{ $image['alt'] }}">Alternative text</label>
                        <input id="field-{{ $image['alt'] }}" name="content[{{ $image['alt'] }}]" type="text" value="{{ old('content.'.$image['alt'], $content[$image['alt']]) }}" maxlength="500">
                    </div>
                @endforeach
            </div>
        </section>

        <div class="content-actions">
            <button class="button" type="submit">Save changes</button>
            <button class="button secondary" type="submit" formaction="{{ route('admin.content.preview') }}" formmethod="POST" formtarget="_blank" formnovalidate>Preview</button>
            <a class="button secondary cancel-content" href="{{ route('admin.dashboard') }}">Cancel</a>
        </div>
    </form>

    <style>
        .content-section{padding:1.4rem}
        .content-section>p{color:#625b6c;margin:-.35rem 0 1rem}
        .content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
        .content-field{min-width:0}
        .content-field textarea,.content-field input,.image-field input[type=text]{width:100%;min-height:42px;border:1px solid #d9d6e3;border-radius:7px;padding:.65rem;font:inherit;color:#332d3c}
        .content-field textarea{resize:vertical;min-height:90px}
        .image-field{display:flex;flex-direction:column;gap:.45rem}
        .image-field input[type=file]{font:inherit;max-width:100%}
        .image-field .image-delete{display:flex;align-items:center;gap:.5rem;color:#8d1e18}
        .image-field .image-delete input{accent-color:#8d1e18}
        .image-preview{width:min(100%,360px);max-height:220px;object-fit:contain;object-position:left center;background:#f6f5f9;border:1px solid #e9e6ef;border-radius:8px}
        .content-actions{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:.7rem;padding:1rem;background:rgba(246,245,249,.95);border-top:1px solid #e9e6ef;z-index:5}
        .content-actions .button{font:600 .9rem system-ui,sans-serif}
        @media(max-width:680px){.content-grid{grid-template-columns:1fr}.content-section{padding:1rem}.content-actions{margin-inline:-1rem}}
    </style>
    <script>
        (() => {
            const form = document.getElementById('content-form');
            let dirty = false;
            form.addEventListener('input', () => { dirty = true; });
            form.addEventListener('change', () => { dirty = true; });
            form.addEventListener('submit', event => {
                if (event.submitter?.formTarget === '_blank') return;
                const hasImageDeletions = form.querySelector('input[data-remove-image]:checked');
                if (hasImageDeletions && !window.confirm('Delete the selected image(s) from the live website? This cannot be undone.')) {
                    event.preventDefault();
                    return;
                }
                dirty = false;
            });
            window.addEventListener('beforeunload', event => {
                if (dirty) {
                    event.preventDefault();
                    event.returnValue = '';
                }
            });
            document.querySelectorAll('input[type="file"][data-preview]').forEach(input => {
                input.addEventListener('change', () => {
                    const file = input.files?.[0];
                    if (!file) return;
                    const preview = document.getElementById(input.dataset.preview);
                    if (preview.dataset.objectUrl) URL.revokeObjectURL(preview.dataset.objectUrl);
                    preview.dataset.objectUrl = URL.createObjectURL(file);
                    preview.src = preview.dataset.objectUrl;
                    preview.hidden = false;
                    const remove = form.querySelector(`[data-remove-image="${input.dataset.preview}"]`);
                    if (remove) {
                        remove.checked = false;
                        preview.hidden = false;
                    }
                });
            });
            document.querySelectorAll('input[data-remove-image]').forEach(remove => {
                remove.addEventListener('change', () => {
                    if (remove.checked) {
                        const preview = document.getElementById(remove.dataset.removeImage);
                        preview.hidden = true;
                    } else {
                        const preview = document.getElementById(remove.dataset.removeImage);
                        preview.hidden = !preview.src;
                    }
                });
            });
            document.querySelector('.cancel-content').addEventListener('click', event => {
                if (dirty) {
                    if (!window.confirm('Discard your unsaved changes?')) {
                        event.preventDefault();
                    } else {
                        dirty = false;
                    }
                }
            });
        })();
    </script>
@endsection