@extends('layouts.master')

@section('content')
<div class="container-fluid col-lg-5">
    
    @if (session()->has('success'))
    <div class="alert alert-success" role="alert">
        {{ session('success')}}
    </div>
    @endif

    <div class="card shadow mb-4 ">
        <div class="card-header py-3 bg-gradient-primary form-inline justify-content-center">
            <h6 class="m-0 font-weight-bold text-primary">Add Blog Post</h6>
        </div>
        <div class="col-lg-12">
            
            <form method="POST" action="add-category-blog">
                @csrf
                <br>
                <div class="mb-3">
                
                  <label for="name" class="form-label">Category Name</label>
                  <input type="text" class="form-control name @error('name') is-invalid @enderror" id="name" name="name">
                    @error('name')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div><div class="mb-3">
                
                    <label for="slug" class="form-label">Category Slug</label>
                    <input type="text" class="form-control name @error('slug') is-invalid @enderror" id="slug" name="slug">
                      @error('slug')
                          <div class="invalid-feedback">
                              {{ $message }}
                          </div>
                      @enderror
                  </div>


                <button type="submit" class="btn btn-primary">Create New Category</button>
              </form>
        </div>
        <br>
    </div>

</div>
<script>
    const name = document.querySelector('#name');
    const slug = document.querySelector('#slug');

    title.addEventListener('change', function(){
        fetch('/dashboard/posts/checkSlug?name=' + name.value)
            .then(response => response.json())
            .then(data => slug.value = data.slug)
    });
</script>
@endsection