@extends('layouts.admin')

@section('title', 'Edit Page')

@push('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css">
@endpush

@section('content')
    <section class="dashboard-head">
        <div>
            <span class="eyebrow">Content</span>
            <h1>Edit {{ $page->title }}</h1>
        </div>
        <a class="button ghost" href="{{ route('admin.content-pages.index') }}">Back</a>
    </section>

    <section class="panel form-panel page-editor-panel">
        <form method="POST" action="{{ route('admin.content-pages.update', $page) }}" class="admin-form" enctype="multipart/form-data">
            @csrf
            @method('PATCH')

            <label>
                <span>Title</span>
                <input name="title" value="{{ old('title', $page->title) }}" required>
            </label>

            <label>
                <span>Content</span>
                <textarea class="summernote-editor" name="body_html" rows="14" required>{{ old('body_html', $page->body_html) }}</textarea>
            </label>

            <section class="settings-card">
                <div class="settings-card-head">
                    <div>
                        <span class="eyebrow">SEO</span>
                        <h2>Search Metadata</h2>
                    </div>
                </div>
                <label>
                    <span>Meta Title</span>
                    <input name="meta_title" value="{{ old('meta_title', $page->meta_title) }}">
                </label>
                <label>
                    <span>Meta Description</span>
                    <textarea name="meta_description" rows="3">{{ old('meta_description', $page->meta_description) }}</textarea>
                </label>
                <label>
                    <span>OG Image</span>
                    <input name="og_image" type="file" accept="image/jpeg,image/png,image/webp">
                </label>
                @if ($page->ogImageUrl())
                    <div class="settings-preview">
                        <img src="{{ $page->ogImageUrl() }}" alt="{{ $page->title }} OG image">
                        <span>Current OG image</span>
                    </div>
                @endif
            </section>

            <label class="checkbox-label">
                <input name="is_active" type="checkbox" value="1" @checked(old('is_active', $page->is_active))>
                <span>Active</span>
            </label>

            @if ($errors->any())
                <p class="form-error">{{ $errors->first() }}</p>
            @endif

            <button class="button primary" type="submit">Update page</button>
        </form>
    </section>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            if (window.jQuery && jQuery.fn.summernote) {
                jQuery('.summernote-editor').summernote({
                    height: 360,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'italic', 'underline', 'clear']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['insert', ['link', 'table']],
                        ['view', ['codeview']]
                    ]
                });
            }
        });
    </script>
@endpush