@extends('admin.layout')

@section('title', $tag->exists ? 'Edit Tag' : 'Tambah Tag')

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

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

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

@push('scripts')
    <script>
        $(function () {
            var $title = $('#tag-title');
            var $slug = $('#tag-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