@extends('admin.app')

@section('content')
<div class="container-fluid px-3 mt-5">

    <h2 class="mb-3">Blog Categories</h2>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <a href="{{ route('blog-categories.create') }}" class="btn btn-primary mb-3">
        + Add Category
    </a>

    <div class="table-responsive">
        <table class="table table-bordered align-middle" id="categoryTable">

            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Category Name</th>
                    <th width="180">Action</th>
                </tr>
            </thead>

            <tbody>

                @forelse($categories as $cat)

                <tr>

                    <td>{{ $loop->iteration }}</td>

                    <td style="min-width:250px;">
                        {{ $cat->name }}
                    </td>

                    <td class="text-nowrap">

                        <a href="{{ route('blog-categories.edit',$cat->id) }}"
                           class="btn btn-sm btn-warning mb-1">
                            Edit
                        </a>

                        <form action="{{ route('blog-categories.destroy',$cat->id) }}"
                              method="POST"
                              class="d-inline"
                              onsubmit="return confirm('Delete this category?')">

                            @csrf
                            @method('DELETE')

                            <button class="btn btn-sm btn-danger mb-1">
                                Delete
                            </button>

                        </form>

                    </td>

                </tr>

                @empty

                <tr>
                    <td colspan="3" class="text-center">
                        No categories found
                    </td>
                </tr>

                @endforelse

            </tbody>

        </table>
    </div>

</div>
@endsection

@push('styles')
<style>
@media (max-width: 768px) {
    table th,
    table td {
        font-size: 14px;
    }
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function () {
    $('#categoryTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        scrollX: true,
        autoWidth: false
    });
});
</script>
@endpush