@extends('admin.layouts.app')
@include('admin.nav')
@section('main')
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-main">
                    <h4 class="text-capitalize breadcrumb-title">Blog Category</h4>
                    <div class="breadcrumb-action justify-content-center flex-wrap">
                        <div class="action-btn">
                            <a href="{{ route('blog-category-create') }}" class="btn btn-sm btn-primary btn-add">
                                <i class="la la-plus"></i> Add New</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-12 mb-30">

                <div class="card mb-25">
                    
                    <div class="card-body p-0">
                        <div class="drag-drop-wrap">
                            <div class="drag-drop table-responsive-lg bg-white w-100 mb-30">
                                <table class="table mb-0 table-borderless table-rounded">
                                    <thead>
                                        <th>S No.</th>
                                        <th>Name</th>
                                        <th>No. of Blog</th>
                                        <th>Parent Category</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </thead>
                                    <tbody>
                                        @forelse ($categories as $cat)
                                            <tr class="draggable" draggable="true">
                                                <td>{{ $cat->id }}</td>
                                                <td>{{ $cat->name }}</td>
                                                <td>{{ $cat->blogs_count }}</td>
                                                <td>{{ @$cat->parent->name ?? 'N/A' }}</td>
                                                <td>{{ $cat->status === 1 ? 'Active' : 'Not Active' }}</td>
                                                <td>
                                                    <div class="table-actions">
                                                        <a href="{{ route('blog-category-edit', $cat) }}" class="edit-btn">
                                                            <span data-feather="edit"></span>
                                                        </a>
                                                        <form method="POST"
                                                            action="{{ route('blog-category-destroy', $cat) }}">
                                                            @csrf
                                                            @method('DELETE')
                                                            <a class="del-btn" href="#"
                                                                onclick="handleDelteCat(this,'{{ $cat->name }}')">
                                                                <span data-feather="trash-2"></span>
                                                            </a>
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <strong>No categories</strong>
                                        @endforelse

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ends: card -->

            </div>
        </div>
    </div>
@endsection
@section('pageJs')
    <script>
        function handleDelteCat(obj, name) {
            const res = confirm(`Delete category '${name}'?`)
            if (!res) return false;
            $(obj).closest('form').submit()
        }
    </script>
@endsection