@extends('admin::Layouts.master')
@section('content')
<div class="container-fluid pt-4">
    @include('partials.messages')
    <form action="{{ route('admin.forums.category.' . (isset($category) ? 'update' : 'store')) }}" method="post">
        @csrf
        <input type="hidden" name="uuid" id="uuid" value="{{ $category->uuid ?? '' }}">
        <div class="row">
            <div class="col-12 col-md-6">
                <label for="title" class="required">Bezeichnung:</label>
                <input id="title" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title', $category->title ?? '') }}">
            </div>
            <div class="col-12 col-md-6">
                <label for="slug" class="required">URL:</label>
                <div class="input-group">
                    <div class="input-group-text">{{ env('APP_FURL') }}/category/</div>
                    <input id="slug" name="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $category->slug ?? '') }}" readonly>
                    <button type="button" class="btn btn-outline-secondary js-edit-slug">
                        <span class="fas fa-fw fa-edit"></span>
                    </button>
                </div>
            </div>
            <div class="col-12 col-sm-3 col-md-2 col-lg-2 col-xl-1 mt-3">
                <button class="btn btn-primary btn-block">
                    <span class="fas fa-fw fa-save"></span> Speichern
                </button>
            </div>
        </div>
    </form>
</div>
@stop
@section('pagejs')
<script>
    $('#title').on('keyup', function() {
        let $this = $(this);
        if($(this).val().length > 0) {
            delay(function() {
                $.get('{{ route('slug') }}/' + $this.val(), function($return) {
                    $('#slug').val($return.slug);
                });
            }, 200);
        } else {
            $('#slug').val('');
        }
    });

    $('.js-edit-slug').on('click', function() {
        let $readonly = $(this).parents('.input-group').find('.form-control').prop('readonly');
        $(this).parents('.input-group').find('.form-control').prop('readonly', !$readonly);
        $(this).find('.fas').toggleClass('fa-edit fa-check');
    });
</script>
@stop
