@extends('template.layouts.template-base')
@section('title', 'Blog List')

@section('styles')
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
    />
<style>
  .page-content{
    background-color:#F0F4F8!important;
    padding: 80px 10px;
  }
  .lang-dropdown{
    position: relative;
    width:160px;
}
.lang-btn{
    width:65%;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:6px 15px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.lang-btn span{
    font-size:14px;
}
.lang-menu{
    position:absolute;
    top: 82%;
    left: 0;
    width: 66%;
    background:#fff;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
    list-style:none;
    padding:8px 0;
    display:none;
}
.lang-dropdown.active .lang-menu{
    display:block;
}
.lang-menu li{
    padding:10px 15px;
    cursor:pointer;
}
.lang-menu li:hover{
    background:#f5f5f5;
}
.lang-menu li.active{
    color:#2563eb;
    font-weight:600;
}
</style>
@endsection

@section('content')
    <div class="page-header product-main service-list">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="javascript:void(0);">Blog / <span class="breadcrumb-link">List </span></a>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                   <div class="action-buttons d-none" id="bulkActions">
                    <button class="btn-delete-category" data-bs-toggle="modal" data-bs-target=".remove-blog-list-screen">
                        Delete List <i class='bx bxs-trash fs-5'></i>
                    </button>
                    </div>
                    <a id="exportBlogsBtn" href="{{ route('backend.blog-list.export') }}" class="btn-export-category">
                        Export
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 16V3"></path>
                            <polyline points="7 8 12 3 17 8"></polyline>
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>
                    </a>
                    <a class="btn-add-category" href="{{ route('backend.blog-list.add') }}">
                        Add Blog<i class="ri-add-fill fs-5"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec customer-page">
        <div class="content-wrapper blog-category">
            <div class="filter-section">
                <span class="badge-total-cus">Total Blogs - {{ $totalBlogs }}</span>

                <div class="position-relative">
                    <div class="col-md-3 custom-dropdown">
                        <select id="statusFilter" class="dropdown-btn">
                            <option value="">Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>

                <div class="position-relative">
                    <div class="col-md-3 custom-dropdown">
                        <select id="categoryFilter" class="dropdown-btn">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->category_name_en }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput">
                    <i class="bx bx-search"></i>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive table-card">
                    <table id="blogsTable" class="table align-middle mb-0 orders-table-container">
                        <thead class="custom-table-header">
                            <tr>
                                <th scope="col"><input type="checkbox" id="selectAll"></th>
                                <th scope="col">Blog Name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Slug</th>
                                <th scope="col">Category</th>
                                <th scope="col">Posted Date</th>
                                <th scope="col">Status</th>
                                <th scope="col">Default</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody id="categoryList"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Single Blog Modal -->
    <div class="modal fade remove-blog-cate-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-4">
                    <h5>Are you sure you want to delete this blog?</h5>
                    <p class="text-muted">This action cannot be undone.</p>
                    <div class="d-flex gap-2 justify-content-center mt-3">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form id="deleteBlogForm" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Bulk Blog Modal -->
    <div class="modal fade remove-blog-list-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-4">
                    <h5>Are you sure you want to delete selected blogs?</h5>
                    <p class="text-muted">This action cannot be undone.</p>
                    <div class="d-flex gap-2 justify-content-center mt-3">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger" id="confirmBulkDelete">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form id="bulkDeleteBlogForm" method="POST" action="{{ route('backend.blog-list.bulk-delete') }}" class="d-none">
        @csrf
        @method('DELETE')
    </form>
@endsection

@section('scripts')
<script>
    $(function () {
        const $selectAll = $('#selectAll');
        const $bulkActions = $('#bulkActions');
        const $searchInput = $('#searchInput');
        const $statusFilter = $('#statusFilter');
        const $categoryFilter = $('#categoryFilter');
        const $exportBlogsBtn = $('#exportBlogsBtn');
        const $bulkDeleteForm = $('#bulkDeleteBlogForm');
        const deleteUrlTemplate = @json(route('backend.blog-list.destroy', ['id' => '__ID__']));

        const blogTable = $('#blogsTable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            searching: false,
            responsive: true,
            pageLength: 10,
            ajax: {
                url: "{{ route('backend.blog-list.index') }}",
                data: function (d) {
                    d.search = $searchInput.val();
                    d.status = $statusFilter.val();
                    d.category_id = $categoryFilter.val();
                }
            },
            columns: [
                { data: 'checkbox', name: 'checkbox', orderable: false, searchable: false },
                { data: 'title', name: 'title_en' },
                { data: 'description_short', name: 'description_en' },
                { data: 'slug_name', name: 'slug' },
                { data: 'category_name', name: 'category.category_name_en' },
                { data: 'posted_on_formatted', name: 'posted_on' },
                { data: 'status_badge', name: 'status', orderable: false, searchable: false },
                { data: 'default_toggle', name: 'is_default', orderable: false, searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            drawCallback: function () {
                $selectAll.prop('checked', false);
                toggleBulkActions();
            }
        });

        function toggleBulkActions() {
            const anyChecked = $('.category-checkbox:checked').length > 0;
            $bulkActions.toggleClass('d-none', !anyChecked);
        }

        let searchTimer;
        $searchInput.on('input', function () {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(function () {
                blogTable.ajax.reload();
            }, 400);
        });

        $statusFilter.on('change', function () {
            blogTable.ajax.reload();
        });

        $categoryFilter.on('change', function () {
            blogTable.ajax.reload();
        });

        $selectAll.on('change', function () {
            $('#blogsTable .category-checkbox').prop('checked', this.checked);
            toggleBulkActions();
        });

        $(document).on('change', '.category-checkbox', function () {
            const total = $('#blogsTable .category-checkbox').length;
            const selected = $('#blogsTable .category-checkbox:checked').length;
            $selectAll.prop('checked', total > 0 && total === selected);
            toggleBulkActions();
        });

        $(document).on('click', '.delete-blog', function () {
            const id = $(this).data('id');
            $('#deleteBlogForm').attr('action', deleteUrlTemplate.replace('__ID__', id));
        });

        $('#confirmBulkDelete').on('click', function () {
            const selectedIds = $('.category-checkbox:checked').map(function () {
                return this.value;
            }).get();

            if (!selectedIds.length) {
                return;
            }

            $bulkDeleteForm.find('input[name="ids[]"]').remove();
            selectedIds.forEach(function (id) {
                $('<input>', { type: 'hidden', name: 'ids[]', value: id }).appendTo($bulkDeleteForm);
            });
            $bulkDeleteForm.trigger('submit');
        });

        $exportBlogsBtn.on('click', function () {
            const url = new URL(@json(route('backend.blog-list.export')), window.location.origin);
            const search = $searchInput.val();
            const status = $statusFilter.val();
            const categoryId = $categoryFilter.val();

            if (search) {
                url.searchParams.set('search', search);
            }
            if (status !== '') {
                url.searchParams.set('status', status);
            }
            if (categoryId !== '') {
                url.searchParams.set('category_id', categoryId);
            }

            this.href = url.toString();
        });

        $(document).on('change', '.default-toggle', function () {
            const id = $(this).data('id');
            const isDefault = $(this).is(':checked') ? 1 : 0;
            const toggle = $(this);

            $.ajax({
                url: "{{ route('backend.blog-list.toggle-default') }}",
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    is_default: isDefault
                },
                success: function (res) {
                    if (res && res.success) {
                        blogTable.ajax.reload(null, false);
                        return;
                    }
                    toggle.prop('checked', !toggle.is(':checked'));
                },
                error: function () {
                    toggle.prop('checked', !toggle.is(':checked'));
                }
            });
        });
    });
</script>
@endsection