@extends('admin.layout')

@section('title', $category->exists ? 'Edit Category' : 'Tambah Category')

@section('content')
    <div class="card">
        <div class="card-body">
        <form method="post" action="{{ $category->exists ? route('dashboard.categories.update', $category) : route('dashboard.categories.store') }}">
            @csrf
            @if ($category->exists)
                @method('put')
            @endif

            <div class="mb-3">
                <label class="form-label">Title</label>
                <input id="category-title" class="form-control" type="text" name="title" value="{{ old('title', $category->title) }}" required>
                @error('title')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Seo Title (opsional)</label>
                <input id="category-seotitle" class="form-control" type="text" name="seotitle" value="{{ old('seotitle', $category->seotitle) }}">
                @error('seotitle')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Parent</label>
                <select name="parent" class="form-select">
                    <option value="">-- none --</option>
                    @foreach ($parents as $parent)
                        <option value="{{ $parent->id }}" {{ (string) old('parent', $category->parent) === (string) $parent->id ? 'selected' : '' }}>
                            {{ $parent->title }}
                        </option>
                    @endforeach
                </select>
                @error('parent')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3 form-check">
                <input class="form-check-input" type="checkbox" name="active" value="1" id="active" {{ old('active', $category->active ?? true) ? 'checked' : '' }}>
                <label class="form-check-label" for="active">Active</label>
            </div>

            <button type="submit" class="btn btn-primary">Simpan</button>
            <a href="{{ route('dashboard.categories.index') }}" class="btn btn-outline-secondary">Kembali</a>
        </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            var $title = $('#category-title');
            var $slug = $('#category-seotitle');

            if (!$title.length || !$slug.length) {
                return;
            }

            var manual = ($slug.val() || '').trim().length > 0;

            var slugify = function (text) {
                text = (text || '').toString();
                try {
                    text = text.normalize('NFKD').replace(/[\u0300-\u036f]/g, '');
                } catch (e) {}

                return text
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9]+/g, '-')
                    .replace(/^-+|-+$/g, '')
                    .replace(/-+/g, '-');
            };

            $slug.on('input', function () {
                manual = ($slug.val() || '').trim().length > 0;
            });

            $title.on('input', function () {
                if (manual) {
                    return;
                }
                $slug.val(slugify($title.val()));
            });

            if (!manual && ($slug.val() || '').trim() === '') {
                $slug.val(slugify($title.val()));
            }
        });
    </script>
@endpush