@php
$breadcrumb = [
['label' => 'Dashboard', 'url' => route('admin.dashboard')],
['label' => 'Blogs']
];
@endphp
@extends('admin.layouts.app')
@section('title', 'Blogs')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h6>All Blogs</h6>
                </div>
                <div>
                    <a href="{{route('admin.blog.add')}}" class="btn btn-primary">Create a Blog</a>
                </div>
            </div>
            <div class="ms-4 me-4 d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <label for="page-size" class="form-label mb-0">Size:</label>
                    <select id="page-size" class="form-select form-select-sm" style="width: auto; min-width: 80px;">
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <div class="col-lg-4">
                    <input type="text" class="form-control" id="search-string" placeholder="Search...">
                </div>
            </div>
            <div class="row">

            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-4">
                    <div id="blog-table"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<link href="{{ asset('backend/assets/css/tabulator.min.css') }}" rel="stylesheet">
<link href="{{ asset('backend/assets/css/tabulator_materialize.min.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('backend/assets/js/tabulator.min.js') }}"></script>
<script>
    var table = new Tabulator("#blog-table", {
        ajaxURL: "{{ route('admin.blog.paginate') }}",
        ajaxParams: function() {
            return {
                _token: document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
                search: document.querySelector("#search-string").value
            };
        },
        ajaxConfig: "POST",
        layout: "fitDataStretch",
        theme: "bootstrap5",
        paginationMode: "remote",
        pagination: true,
        paginationSize: 25,
        paginationSizeSelector: false,
        layout: "fitColumns",
        ajaxProgressiveLoad: "scroll",
        placeholder: "<span class='px-4 py-4 rounded text-secondary'>No Data Available</span>",
        search: true,
        movableRows: true,
        columns: [{
                title: "SL",
                field: "id"
            },
            {
                title: "Heading",
                headerSort: false,
                formatter: function(cell) {
                    const data = cell.getRow().getData();
                    return `<div>
                    <h6 class="mb-0 text-sm">${data.heading}</h6>
                </div>`;
                }
            },
            {
                title: "Status",
                headerSort: false,
                headerHozAlign: "center",
                formatter: function(cell) {
                    const rowdata = cell.getRow().getData();
                    const status = rowdata.status == '1' ?
                        '<div class="d-flex justify-content-center align-items-center"><span class="badge badge-sm bg-gradient-success">Active</span></div>' :
                        '<div class="d-flex justify-content-center align-items-center"><span class="badge badge-sm bg-gradient-danger">Inactive</span></div>';
                    return status;
                },

                cellClick: function(e, cell) {
                    let rowData = cell.getRow().getData();
                    let newStatus = rowData.status == '1' ? '0' : '1';
                    $.ajax({
                        type: "POST",
                        url: "{{ route('admin.blog.status') }}",
                        dataType: 'json',
                        data: {
                            id: rowData.id,
                            newStatus: newStatus,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status == true) {
                                toastr.success("Successfully Changed", "Success", toastrProperties);
                                setTimeout(() => {
                                    table.setData();
                                }, 400)
                            } else {
                                toastr.error("Error! Please try after some time", "Error", toastrProperties);
                            }
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });
                }
            },
            {
                title: "Action",
                headerSort: false,

                headerHozAlign: "center",
                formatter: function() {
                    return `
            <div class="d-flex  justify-content-center align-items-center gap-3">
            <a href="javascript:;" class="action-link text-secondary font-weight-bold text-xs" data-action="edit_page" data-toggle="tooltip" data-original-title="Edit Page">
                    <i class="fa-solid fa-pen-to-square"></i>
                </a>
            </div>
        `;
                },
                cellClick: function(e, cell) {
                    const rowData = cell.getRow().getData();
                    const actionEl = e.target.closest('[data-action]');
                    const action = actionEl ? actionEl.dataset.action : null;

                    if (action === "view") {
                        let encodedId = btoa(rowData.id); // JS base64 encode
                        window.location.href = "/admin/blog/" + encodedId;

                    } else if (action === "edit_page") {
                        let encodedId = btoa(rowData.id); // JS base64 encode
                        window.location.href =  "{{route('admin.blog.edit')}}" + '/' + encodedId;

                    } else if (action === "delete") {
                        const swalWithBootstrapButtons = Swal.mixin({
                            customClass: {
                                confirmButton: "btn btn-success",
                                cancelButton: "btn btn-danger"
                            },
                            buttonsStyling: false
                        });
                        swalWithBootstrapButtons.fire({
                            title: "Are you sure?",
                            text: `You want to this blog.`,
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonText: "Yes, delete it!",
                            cancelButtonText: "No, cancel!",
                            reverseButtons: true
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.ajax({
                                    type: "POST",
                                    url: "{{ route('admin.blog.delete') }}",
                                    dataType: 'json',
                                    data: {
                                        id: rowData.id,
                                        _token: '{{ csrf_token() }}'
                                    },
                                    success: function(response) {
                                        if (response.status == true) {
                                            toastr.success("Deleted Successfully", "Success", toastrProperties);
                                            setTimeout(() => {
                                                table.setData();
                                            }, 400)
                                        } else {
                                            toastr.error("Error! Please try after some time", "Error", toastrProperties);
                                        }
                                    },
                                    error: function(error) {
                                        console.log(error);
                                    }
                                });

                            }
                        });
                    }
                }
            }
        ],

        ajaxResponse: function(url, params, response) {
            if (!response.data || response.data.length === 0) {
                return [];
            }
            return response.data;
        }
    });
    $(document).ready(function() {
        $('#page-size').on('change', function() {
            table.setPageSize(Number($(this).val()));
        });
        $('#search-string').on('input', function() {
            table.setData();
        });
    });
    table.on("rowClick", function(e, row) {
        const isActionClick = e.target.closest(".action-link");

        // Prevent redirect if user clicked on action buttons (edit/delete/status)
        if (!isActionClick && !e.target.closest('.badge')) {
            const rowData = row.getData();
            let encodedId = btoa(rowData.id); // base64 encode
            window.location.href = "{{route('admin.blog')}}" + '/' + encodedId;
        }
    });
    table.on("rowMoved", function(row) {
        // Get all rows in their new order
        const rows = table.getData();

        // Prepare simplified data for backend
        const orderData = rows.map((r, index) => ({
            id: r.id,
            sort_order: index + 1 // position starts from 1
        }));

        // Send the new order to backend
        $.ajax({
            url: "{{ route('admin.blog.reorder') }}",
            method: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                order: orderData
            },
            success: function(response) {
                if (response.status) {
                    toastr.success("Order saved successfully!", "Success", toastrProperties);
                } else {
                    toastr.error("Failed to save order", "Error", toastrProperties);
                }
            },
            error: function(xhr) {
                console.error(xhr);
                toastr.error("Something went wrong!", "Error", toastrProperties);
            }
        });
    });
</script>
@endpush