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

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

            <div class="col-md-6">
                <label class="form-label" for="category_name">Category name</label>
                <input id="category_name" name="name" value="{{ old('name', $category->name) }}" class="form-control">
            </div>
            <div class="col-md-6">
                <label class="form-label" for="category_slug">Slug</label>
                <input id="category_slug" name="slug" value="{{ old('slug', $category->slug) }}" class="form-control" data-autofill="{{ $category->exists ? 'false' : 'true' }}">
                <div class="form-text">Auto generates, but can be modified.</div>
            </div>
            <div class="col-md-6">
                <label class="form-label" for="parent_id">Parent category</label>
                <select id="parent_id" name="parent_id" class="form-select">
                    <option value="">No parent</option>
                    @foreach($parents as $parent)
                        <option value="{{ $parent->id }}" @selected(old('parent_id', $category->parent_id) == $parent->id)>{{ $parent->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label" for="category_type">Category type</label>
                <select id="category_type" name="type" class="form-select">
                    <option value="">Select type</option>
                    @foreach($categoryTypes as $value => $label)
                        <option value="{{ $value }}" @selected(old('type', $category->type) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label" for="sort_order">Sort order</label>
                <input id="sort_order" type="number" name="sort_order" value="{{ old('sort_order', $category->sort_order) }}" class="form-control">
            </div>
            <div class="col-12">
                <label class="form-label" for="image_path">Category image</label>
                <input id="image_path" type="file" name="image_path" class="form-control" accept=".jpg,.jpeg,.png,.webp">
            </div>
            <div class="col-12">
                <label class="form-label" for="description">Description</label>
                <textarea id="description" name="description" class="form-control" rows="4">{{ old('description', $category->description) }}</textarea>
            </div>
            <div class="col-md-6">
                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" name="is_featured" value="1" id="isFeatured" @checked(old('is_featured', $category->is_featured))>
                    <label class="form-check-label" for="isFeatured">Feature this category on the homepage</label>
                </div>
                <div class="small text-muted mt-1">Only featured categories can appear in the homepage category section. Up to 6 are shown.</div>
            </div>
            <div class="col-md-6">
                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" id="isActive" @checked(old('is_active', $category->exists ? $category->is_active : true))>
                    <label class="form-check-label" for="isActive">Category is active</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 category</span></button>
                <a href="{{ route('admin.categories.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 nameInput = document.getElementById('category_name');
        const slugInput = document.getElementById('category_slug');

        if (!nameInput || !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, '');

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

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