@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">{{ $article->exists ? 'Edit guide' : 'Create guide' }}</h1>
            @if($article->exists)
                <form method="post" action="{{ route('admin.articles.destroy', $article) }}" onsubmit="return confirm('Delete this guide?');">
                    @csrf
                    @method('DELETE')
                    <button class="btn admin-btn admin-btn-danger"><i class="fa-solid fa-trash"></i><span>Delete guide</span></button>
                </form>
            @endif
        </div>

        <form method="post" enctype="multipart/form-data" action="{{ $article->exists ? route('admin.articles.update', $article) : route('admin.articles.store') }}" class="row g-3 admin-form-grid">
            @csrf
            @if($article->exists)
                @method('PUT')
            @endif

            <div class="col-md-6">
                <label class="form-label" for="guide_title">Guide title</label>
                <input id="guide_title" name="title" value="{{ old('title', $article->title) }}" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label" for="guide_category">Guide category</label>
                <select id="guide_category" name="category" class="form-select">
                    <option value="">Select category</option>
                    @foreach($categories as $category)
                        <option value="{{ $category }}" @selected(old('category', $article->category) === $category)>{{ $category }}</option>
                    @endforeach
                    @if(old('category', $article->category) && ! in_array(old('category', $article->category), $categories, true))
                        <option value="{{ old('category', $article->category) }}" selected>{{ old('category', $article->category) }}</option>
                    @endif
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold" for="published_at">Publish date</label>
                <input id="published_at" type="date" name="published_at" value="{{ old('published_at', optional($article->published_at)->format('Y-m-d')) }}" class="form-control">
            </div>
            <div class="col-12">
                <label class="form-label" for="guide_slug">Slug</label>
                <input id="guide_slug" name="slug" value="{{ old('slug', $article->slug) }}" class="form-control" data-autofill="{{ $article->exists ? 'false' : 'true' }}">
                <div class="form-text">Auto generates, but can be modified.</div>
            </div>
            <div class="col-12">
                <label class="form-label small fw-semibold" for="featured_image">Featured image</label>
                <input id="featured_image" type="file" name="featured_image" class="form-control" accept=".jpg,.jpeg,.png,.webp">
            </div>
            @if($article->featured_image)
                <div class="col-12">
                    <div class="small text-muted mb-2">Current image</div>
                    <img src="{{ asset('storage/'.$article->featured_image) }}" alt="{{ $article->title }}" class="img-fluid rounded-4 border" style="max-height: 220px;">
                </div>
            @endif
            <div class="col-12">
                <label class="form-label" for="excerpt">Excerpt</label>
                <textarea id="excerpt" name="excerpt" class="form-control" rows="3">{{ old('excerpt', $article->excerpt) }}</textarea>
            </div>
            <div class="col-12">
                <label class="form-label" for="content">HTML content</label>
                <textarea id="content" name="content" class="form-control font-monospace" rows="14">{{ old('content', $article->content) }}</textarea>
                <div class="small text-muted mt-1">HTML is allowed here so guides can include images, lists, links, and formatted sections.</div>
            </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="guide_published" @checked(old('is_published', $article->exists ? $article->is_published : true))>
                    <label class="form-check-label" for="guide_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 guide</span></button>
                <a href="{{ route('admin.articles.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('guide_title');
        const slugInput = document.getElementById('guide_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