@extends('layouts.admin')

@section('content')
<div class="card admin-card">
    <div class="card-body p-4">
        <div class="admin-toolbar">
            <h1 class="h3 mb-0">{{ $page->exists ? 'Edit page' : 'Create page' }}</h1>
            @if($page->exists)
                <form method="post" action="{{ route('admin.content-pages.destroy', $page) }}" onsubmit="return confirm('Delete this page?');">
                    @csrf
                    @method('DELETE')
                    <button class="btn admin-btn admin-btn-danger"><i class="fa-solid fa-trash"></i><span>Delete page</span></button>
                </form>
            @endif
        </div>

        <form method="post" action="{{ $page->exists ? route('admin.content-pages.update', $page) : route('admin.content-pages.store') }}" class="row g-3 admin-form-grid">
            @csrf
            @if($page->exists)
                @method('PUT')
            @endif

            <div class="col-md-6">
                <label class="form-label" for="page_title">Page title</label>
                <input id="page_title" name="title" value="{{ old('title', $page->title) }}" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label" for="page_slug">Slug</label>
                <input id="page_slug" name="slug" value="{{ old('slug', $page->slug) }}" class="form-control" data-autofill="{{ $page->exists ? 'false' : 'true' }}">
                <div class="form-text">Auto generates, but can be modified.</div>
            </div>
            <div class="col-md-3">
                <label class="form-label" for="page_type">Page type</label>
                <select id="page_type" name="page_type" class="form-select">
                    <option value="">Select page type</option>
                    @foreach($pageTypes as $pageType)
                        <option value="{{ $pageType }}" @selected(old('page_type', $page->page_type) === $pageType)>{{ \Illuminate\Support\Str::headline(str_replace('_', ' ', $pageType)) }}</option>
                    @endforeach
                    @if(old('page_type', $page->page_type) && ! in_array(old('page_type', $page->page_type), $pageTypes, true))
                        <option value="{{ old('page_type', $page->page_type) }}" selected>{{ old('page_type', $page->page_type) }}</option>
                    @endif
                </select>
            </div>
            <div class="col-12">
                <label class="form-label" for="page_content">Page content</label>
                <textarea id="page_content" name="content" class="form-control" rows="12">{{ old('content', $page->content) }}</textarea>
            </div>
            <div class="col-md-4">
                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" name="is_published" value="1" id="page_published" @checked(old('is_published', $page->exists ? $page->is_published : true))>
                    <label class="form-check-label" for="page_published">Published</label>
                </div>
            </div>
            <div class="col-12 d-flex gap-2">
                <button class="btn admin-btn admin-btn-primary"><i class="fa-solid fa-floppy-disk"></i><span>Save page</span></button>
                <a href="{{ route('admin.content-pages.index') }}" class="btn admin-btn admin-btn-secondary"><i class="fa-solid fa-arrow-left"></i><span>Back</span></a>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const titleInput = document.getElementById('page_title');
        const slugInput = document.getElementById('page_slug');

        if (!titleInput || !slugInput) {
            return;
        }

        const isAutoFillEnabled = (input) => input.dataset.autofill !== 'false';
        const setManualIfEdited = (input) => {
            input.addEventListener('input', () => {
                input.dataset.autofill = input.value.trim() === '' ? 'true' : 'false';
            });
        };
        const slugify = (value) => value
            .toLowerCase()
            .trim()
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/^-+|-+$/g, '');

        titleInput.addEventListener('input', () => {
            if (isAutoFillEnabled(slugInput)) {
                slugInput.value = slugify(titleInput.value);
            }
        });

        setManualIfEdited(slugInput);
    });
</script>
@endsection