@extends('admin.layout', ['title' => $article->exists ? 'Edit story' : 'Add story'])

@section('content')
    @php
        $sections = old('sections', $article->sections ?: [['heading' => '', 'body' => '']]);
    @endphp
    <div class="admin-top">
        <div><p class="admin-kicker">JOURNAL</p><h1>{{ $article->exists ? 'Edit story.' : 'Add story.' }}</h1></div>
        <a class="button-quiet" href="{{ route('admin.articles.index') }}">Back to stories</a>
    </div>
    <form class="panel form-grid" method="post" action="{{ $article->exists ? route('admin.articles.update', $article) : route('admin.articles.store') }}">
        @csrf
        @if ($article->exists) @method('put') @endif
        <label class="field">Title
            <input type="text" name="title" value="{{ old('title', $article->title) }}" required>
        </label>
        <div class="split">
            <label class="field">Category
                <input type="text" name="category" value="{{ old('category', $article->category) }}" list="categories" required>
                <datalist id="categories">
                    <option value="FOUNDATION"></option>
                    <option value="COMMUNITY"></option>
                    <option value="PHILANTHROPY"></option>
                    <option value="BUSINESS"></option>
                    <option value="LEADERSHIP"></option>
                    <option value="RECOGNITION"></option>
                    <option value="MEDIA"></option>
                </datalist>
            </label>
            <label class="field">Date
                <input type="date" name="published_at" value="{{ old('published_at', optional($article->published_at)->toDateString()) }}" required>
            </label>
            <label class="field">Web address
                <input type="text" name="slug" value="{{ old('slug', $article->slug) }}" placeholder="Leave blank to create from the title">
            </label>
        </div>
        <label class="field">Short summary
            <textarea name="excerpt" required>{{ old('excerpt', $article->excerpt) }}</textarea>
        </label>
        <label class="check"><input type="hidden" name="is_published" value="0"><input type="checkbox" name="is_published" value="1" @checked(old('is_published', $article->is_published ? '1' : '0') == '1')> Show this story on the website</label>
        <div>
            <div class="admin-top"><h2>Sections</h2><button class="button-quiet" type="button" id="add-section">Add section</button></div>
            <div id="sections" class="form-grid">
                @foreach ($sections as $index => $section)
                    <article class="section-card">
                        <header><span class="table-meta">SECTION</span><button class="button-danger" type="button" data-remove>Remove</button></header>
                        <label class="field">Heading
                            <input type="text" name="sections[{{ $index }}][heading]" value="{{ $section['heading'] ?? '' }}" required>
                        </label>
                        <label class="field">Paragraph
                            <textarea name="sections[{{ $index }}][body]" required>{{ $section['body'] ?? '' }}</textarea>
                        </label>
                    </article>
                @endforeach
            </div>
        </div>
        <div class="admin-actions"><button class="button" type="submit">{{ $article->exists ? 'Save story' : 'Publish story' }}</button></div>
    </form>
    <template id="section-template">
        <article class="section-card">
            <header><span class="table-meta">SECTION</span><button class="button-danger" type="button" data-remove>Remove</button></header>
            <label class="field">Heading
                <input type="text" data-name="heading" required>
            </label>
            <label class="field">Paragraph
                <textarea data-name="body" required></textarea>
            </label>
        </article>
    </template>
    <script>
        const sections = document.getElementById('sections');
        const template = document.getElementById('section-template');
        function reindex() {
            [...sections.children].forEach((card, index) => {
                card.querySelector('[data-name="heading"], [name$="[heading]"]').name = `sections[${index}][heading]`;
                card.querySelector('[data-name="body"], [name$="[body]"]').name = `sections[${index}][body]`;
            });
        }
        document.getElementById('add-section').addEventListener('click', () => {
            sections.append(template.content.cloneNode(true));
            reindex();
        });
        sections.addEventListener('click', (event) => {
            const button = event.target.closest('[data-remove]');
            if (!button || sections.children.length === 1) return;
            button.closest('.section-card').remove();
            reindex();
        });
    </script>
@endsection