@extends('layouts.admin.main')

@section('content')
<div class="mb-3">
    <h1 class="h3 d-inline align-middle">Taxonomy</h1>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-actions float-end">
                    <a href="{{ route('admin.settings.taxonomies.index', ['type' => $type->value()]) }}" class="btn btn-sm btn-secondary">
                        <i class="align-middle me-2" data-feather="table"></i>Daftar {{ $type->label() }}
                    </a>
                </div>
                <h4 class="card-title mb-0">Tambah {{ $type->label() }} Baru</h4>
            </div>
            <div class="card-body">
                <form id="form-create-taxonomy" action="{{ route('admin.settings.taxonomies.store', ['type' => $type]) }}" method="POST" class="needs-validation" novalidate>
                    @csrf
                    <input type="hidden" name="type" value="{{ $type }}">

                    <div class="row mb-3">
                        <div class="col-md-3 col-12 form-group">
                            <label for="name" class="form-label">Nama</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}">
                            @error('name')
                            <div class="error invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <button type="reset" class="btn btn-sm btn-secondary mt-3"><i class="align-middle me-2" data-feather="refresh-ccw"></i>Reset</button>
                    <button type="submit" class="btn btn-sm btn-success mt-3"><i class="align-middle me-2" data-feather="save"></i>Simpan</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.22.1/jquery.validate.min.js" integrity="sha512-aK+gwLBXdXY6QDrdpK6jYtTlIfzChVNqAh3V6D5c8nV8U9O5NvC/EJ44aAKj9moRsx7bAibHZbX0wvblVp8wSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function() {
        $("#form-create-taxonomy").validate({
            rules: {
                name: { required: true, maxlength: 255 },
            },
            messages: {
                name: { required: "Nama harus diisi.", maxlength: "Nama maksimal 255 karakter." },
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
@endpush