@extends('layouts.app')

@section('content')
    <article class="active text">
        <header>
            <h2 class="h2 article-title">Blog Categories</h2>
        </header>
        <section>
            <span class="float-end">
                <a href="{{ route('dashboard') }}" class="float-left me-3"><i class="fa-solid fa-left-long"> Back</i></a>
                <a href="{{ route('admin.blogCategory.create') }}" class="float-end"><i class="fa-solid fa-file-circle-plus"> Create</i></a>
            </span>
            <table class="table table-striped w-100 table-dark table-auto">
                <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col">Name</th>
                    <th scope="col">Created At</th>
                </tr>
                </thead>
                <tbody>
                @foreach($blogCategories as $b)
                    <tr>
                        <th scope="row">
                            <a href="{{ route('admin.blogCategory.show', $b) }}" title="View"><i class="fa-regular fa-eye text-primary pr-2"></i></a>
                            <a href="{{ route('admin.blogCategory.edit', $b) }}" title="Edit"><i class="fa-regular fa-pen-to-square text-success pr-2"></i></a>
                            <i
                                class="fa-regular fa-trash-can text-danger delete-blog"
                                data-blog-id="{{ $b->id }}"
                                data-blog-name="{{ $b->name }}"
                                data-toggle="modal"
                                data-target="#deleteBlogCategoryModal"
                                title="Delete"
                            ></i>
                        </th>
                        <td>{{ $b->name }}</td>
                        <td>{{ $b->created_at }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </section>
    </article>

    <div class="modal fade" id="deleteBlogCategoryModal" tabindex="-1" role="dialog" aria-labelledby="deleteBlogCategoryModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <h5 class="modal-title text-white fw-bold" id="deleteBlogCategoryModalLabel">Delete Blog Category?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span inert>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="deleteBlogCategory" type="button" class="btn btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('.delete-blog').click(function(event) {
            $('#deleteBlogCategoryModal').data('blogId', $(event.currentTarget).data('blogId'));
            $('#deleteBlogCategoryModal .modal-body').text('Are you sure you want to delete "' + $(event.currentTarget).data('blogName') + '"?');
            $('#deleteBlogCategoryModal').modal('show');
            $('#deleteBlogCategoryModal').show();
        });
        $('#deleteBlogCategoryModalLabel').click(function() {
            $('#deleteBlogCategoryModal').modal('hide');
            $('#deleteBlogCategoryModal').hide();
        });
        $('button#deleteBlogCategory').click(function(event) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                method: 'DELETE',
                url: '{{ route('admin.blogCategory.index') }}/'+$('#deleteBlogCategoryModal').data('blogId'),
                success: function() {
                    location.reload();
                },
                failure: function() {},
            });
        });
    </script>
@endsection