@extends('user::layouts.backend-master')
@section('breadcrumb_title', trans('backend::translate.All Blogs'))

@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="bg-white rounded-lg border border-border p-6 w-full">

        <!-- Header Section -->
        <x-backend::datatable-header :title="trans('backend::translate.All Blogs')" :searchPlaceholder="trans('backend::translate.Search blogs')" :addNewUrl="route('admin.blog.create')" :addNewText="trans('backend::translate.Add New Blog')"
            :showPrint="true" :showExport="true" :showBulkActions="true" :columnVisibilityOptions="[
                'select' => trans('backend::translate.Row Select'),
                'image' => trans('backend::translate.Image'),
                'title' => trans('backend::translate.Title'),
                'categories' => trans('backend::translate.Categories'),
                'status' => trans('backend::translate.Status'),
                'created' => trans('backend::translate.Created Date'),
                'actions' => trans('backend::translate.Actions'),
            ]" />

        <!-- Filter Tabs Section -->
        <x-backend::datatable-filter-tabs :tabs="[
            'all' => ['label' => trans('backend::translate.All Blogs'), 'count' => 0],
            'published' => ['label' => trans('backend::translate.Published'), 'count' => 0],
            'draft' => ['label' => trans('backend::translate.Draft'), 'count' => 0],
            'scheduled' => ['label' => trans('backend::translate.Scheduled'), 'count' => 0],
            'trash' => ['label' => trans('backend::translate.Trash'), 'count' => 0],
        ]" />

        <!-- Advanced Filters Section -->

        <!-- Data Table -->
        <x-backend::datatable-table tableId="blogs-table" :columns="[
            ['key' => 'select', 'label' => '', 'sortable' => false, 'class' => 'col-select'],
            [
                'key' => 'image',
                'label' => trans('backend::translate.Image'),
                'sortable' => true,
                'class' => 'col-image',
            ],
            [
                'key' => 'title',
                'label' => trans('backend::translate.Title'),
                'sortable' => true,
                'class' => 'col-title',
            ],
            [
                'key' => 'categories',
                'label' => trans('backend::translate.Categories'),
                'sortable' => true,
                'class' => 'col-categories',
            ],
            [
                'key' => 'status',
                'label' => trans('backend::translate.Status'),
                'sortable' => true,
                'class' => 'col-status',
            ],
            [
                'key' => 'created',
                'label' => trans('backend::translate.Created'),
                'sortable' => true,
                'class' => 'col-created',
            ],
            [
                'key' => 'actions',
                'label' => trans('backend::translate.Action'),
                'sortable' => false,
                'class' => 'col-actions w-[110px]',
            ],
        ]" />

        <!-- Empty State -->
        <div id="empty-state" class="hidden">
            <x-backend::datatable-empty-state icon="blog" :title="trans('backend::translate.No blogs found')" :description="trans('backend::translate.No results found for your current search or filter criteria.')" :actionText="trans('backend::translate.Add New Blog')"
                :actionUrl="route('admin.blog.create')" />
        </div>

        <!-- Pagination -->
        <x-backend::datatable-pagination :showPageLength="true" :pageLength="10" :pageLengthOptions="[10, 25, 50, 100]" :showInfo="true"
            :showControls="true" :responsive="true" />
    </div>

    <!-- Bulk Actions Modal -->
    <x-backend::datatable-bulk-actions-modal :actions="[
        'publish' => trans('backend::translate.Publish'),
        'draft' => trans('backend::translate.Move to Draft'),
        'trash' => trans('backend::translate.Move to Trash'),
        'permanent_delete' => trans('backend::translate.Delete Permanently'),
    ]" />
@endsection

@push('scripts')
    <!-- Load jQuery and DataTables -->
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

    <script>
        let blogsTable;
        let selectedIds = [];

        $(document).ready(function() {
            // Initialize DataTable
            blogsTable = $('#blogs-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                dom: 't', // Only show table
                pageLength: 10,
                order: [
                    [2, 'desc']
                ], // Order by title column
                ajax: {
                    url: '{{ route('admin.blog.index') }}',
                    data: function(d) {
                        d.status = getCurrentFilterStatus();
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            return `<input type="checkbox" class="blog-checkbox border border-border bg-gray rounded text-main size-4" value="${data}">`;
                        }
                    },
                    {
                        data: 'featured_image_url',
                        name: 'featured_image',
                        orderable: false,
                        render: function(data, type, row) {
                            if (data) {
                                return `<div class="size-12 rounded overflow-hidden"><img src="${data}" class="w-full h-full object-cover"></div>`;
                            }
                            return '<div class="size-12 rounded bg-gray flex items-center justify-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z" fill="currentColor"/></svg></div>';
                        }
                    },
                    {
                        data: 'title',
                        name: 'title',
                        render: function(data, type, row) {
                            return `<div class="max-w-xs"><h4 class="font-medium text-headline">${data}</h4></div>`;
                        }
                    },
                    {
                        data: 'categories',
                        name: 'categories',
                        orderable: false,
                        render: function(data) {
                            if (data && data.length > 0) {
                                return data.map(cat =>
                                    `<span class="badge success inline-block mr-1 mb-1">${cat}</span>`
                                ).join('');
                            }
                            return '<span class="text-paragraph">No category</span>';
                        }
                    },
                    {
                        data: 'status',
                        name: 'status',
                        render: function(data) {
                            const badgeClasses = {
                                'published': 'badge success',
                                'draft': 'badge warning',
                                'scheduled': 'badge info',
                                'trash': 'badge error'
                            };
                            const badgeClass = badgeClasses[data] || 'badge secondary';
                            return `<span>${data.charAt(0).toUpperCase() + data.slice(1)}</span>`;
                        }
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data) {
                            return new Date(data).toLocaleDateString('en-US', {
                                year: 'numeric',
                                month: 'short',
                                day: 'numeric',
                                hour: '2-digit',
                                minute: '2-digit'
                            });
                        }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return renderActionButtons(row);
                        }
                    }
                ],
                drawCallback: function(settings) {
                    updateStatusCounts(settings);
                    updatePaginationInfo();
                    updateBulkActionButton();
                    handleEmptyState();
                },
                language: {
                    processing: '<div class="flex justify-center items-center py-8"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-main"></div></div>',
                    emptyTable: '',
                    info: '',
                    lengthMenu: '',
                    search: '',
                    paginate: {
                        first: '',
                        last: '',
                        next: '',
                        previous: ''
                    }
                }
            });

            setupEventHandlers();
        });

        // Get current filter status from active tab
        function getCurrentFilterStatus() {
            const activeTab = $('.filter-tab.text-main');
            if (activeTab.length > 0) {
                const filterId = activeTab.attr('id');
                return filterId === 'filter-all' ? '' : filterId.replace('filter-', '');
            }
            return '';
        }

        // Render action buttons for each row
        function renderActionButtons(row) {

            let status = row.plain_status;
            let html = '<div class="flex items-center gap-2.5 w-fit pe-10">';



            // Delete/Restore buttons
            if (status == 'trash') {
                // Restore button
                html += `<button class="size-10 p-2 rounded-full flex justify-center items-center bg-success/10 text-success restore-btn" data-id="${row.id}">
                    <svg class="size-8 sm:size-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 5V2L8 6L12 10V7C15.31 7 18 9.69 18 13C18 16.31 15.31 19 12 19C8.69 19 6 16.31 6 13H4C4 17.42 7.58 21 12 21C16.42 21 20 17.42 20 13C20 8.58 16.42 5 12 5Z" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>`;

                // Force delete button
                html += `<button class="size-10 p-2 rounded-full flex justify-center items-center bg-error/10 text-error force-delete-btn" data-id="${row.id}">
                    <svg class="size-8 sm:size-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4 7H20" stroke="#da0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M6 7V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V7" stroke="#da0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#da0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>`;
            } else {

                // View button
                html += `<button class="size-10 p-2 rounded-full flex justify-center items-center bg-main text-white view-btn" data-id="${row.id}">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M15 13.8564C15 12.1995 13.6569 10.8564 12 10.8564C10.3431 10.8564 9 12.1995 9 13.8564C9 15.5133 10.3431 16.8564 12 16.8564C13.6569 16.8564 15 15.5133 15 13.8564Z" stroke="currentColor" stroke-width="1.5"/>
                    <path d="M11.9996 6.85645C16.1814 6.85645 19.7636 10.8697 21.2568 12.8186C21.731 13.4377 21.731 14.2751 21.2568 14.8942C19.7636 16.8432 16.1814 20.8564 11.9996 20.8564C7.81782 20.8564 4.23557 16.8432 2.74242 14.8942C2.26815 14.2751 2.26816 13.4377 2.74242 12.8186C4.23557 10.8697 7.81782 6.85645 11.9996 6.85645Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                </svg>
            </button>`;

                // Edit button
                let editUrl = `{{ route('admin.blog.edit', ':id') }}`;
                editUrl = editUrl.replace(':id', row.id);
                html += `<a href="${editUrl}" class="size-10 p-2 rounded-full flex justify-center items-center bg-main/5 text-main">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M3.78181 16.3092L3 21L7.69086 20.2182C8.50544 20.0825 9.25725 19.6956 9.84119 19.1116L20.4198 8.53288C21.1934 7.75922 21.1934 6.5049 20.4197 5.73126L18.2687 3.58024C17.495 2.80658 16.2406 2.80659 15.4669 3.58027L4.88841 14.159C4.30447 14.7429 3.91757 15.4947 3.78181 16.3092Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M14 6L18 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>`;

                // Delete button
                html += `<button class="size-10 p-2 rounded-full flex justify-center items-center bg-error/10 text-error delete-btn" data-id="${row.id}">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M19.5 5.5L18.6139 20.121C18.5499 21.1766 17.6751 22 16.6175 22H7.38246C6.32488 22 5.4501 21.1766 5.38612 20.121L4.5 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3 5.5H8M8 5.5L9.24025 2.60608C9.39783 2.2384 9.75937 2 10.1594 2H13.8406C14.2406 2 14.6022 2.2384 14.7597 2.60608L16 5.5M8 5.5H16M21 5.5H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M9.5 16.5V10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M14.5 16.5V10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>`;
            }

            html += '</div>';
            return html;
        }

        // Setup all event handlers
        function setupEventHandlers() {
            // Global search
            $('#global-search').on('keyup', function() {
                blogsTable.search(this.value).draw();
            });

            // Filter tabs
            $('.filter-tab').on('click', function(e) {
                e.preventDefault();
                $('.filter-tab').removeClass('text-main before:block').addClass('text-paragraph before:hidden');
                $(this).removeClass('text-paragraph before:hidden').addClass('text-main before:block');
                blogsTable.draw();
            });

            // Select all checkbox
            $('#select-all').on('change', function() {
                const isChecked = this.checked;
                $('.blog-checkbox').prop('checked', isChecked);
                updateSelectedIds();
                updateBulkActionButton();
            });

            // Individual checkboxes
            $(document).on('change', '.blog-checkbox', function() {
                updateSelectedIds();
                updateSelectAllState();
                updateBulkActionButton();
            });

            // Action buttons
            $(document).on('click', '.view-btn', function() {
                const id = $(this).data('id');
                window.location = `{{ route('admin.blog.show', ':id') }}`.replace(':id', id);
            });

            $(document).on('click', '.delete-btn', function() {
                const id = $(this).data('id');
                Swal.fire({
                    title: "Are you sure move to trash?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, move it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        performAction(`{{ route('admin.blog.destroy', ':id') }}`.replace(':id', id),
                            'DELETE');
                    }
                });

            });

            $(document).on('click', '.restore-btn', function() {
                const id = $(this).data('id');
                Swal.fire({
                    title: "Are you sure to restore?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, restore it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        performAction(`{{ route('admin.blog.restore', ':id') }}`.replace(':id', id),
                        'GET');
                    }
                });
            });

            $(document).on('click', '.force-delete-btn', function() {
                const id = $(this).data('id');
                Swal.fire({
                    title: "Are you sure to permanently delete?",
                    text: "This action cannot be undone.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        performAction(`{{ route('admin.blog.force-delete', ':id') }}`.replace(':id', id),
                            'DELETE');
                    }
                });
            });

            // Page length
            $('#page-length-select').on('change', function() {
                blogsTable.page.len(parseInt(this.value)).draw();
            });

            // Pagination controls
            $(document).on('click', '.pagination-number, .pagination-arrow', function() {
                if ($(this).prop('disabled')) return;
                const page = parseInt($(this).data('page'));
                blogsTable.page(page).draw('page');
            });

            // Bulk actions
            $('#bulk-action-btn').on('click', function() {
                $('#selected-ids').val(selectedIds.join(','));
                showModal('bulkActionsModal');
            });

            $('#execute-bulk-action').on('click', function() {
                const action = $('select[name="action"]').val();
                if (!action) {
                    alert('Please select an action');
                    return;
                }

                $.ajax({
                    url: '{{ route('admin.blog.bulk-action') }}',
                    type: 'POST',
                    data: $('#bulk-actions-form').serialize(),
                    success: function(response) {
                        if (response.success) {
                            hideModal('bulkActionsModal');
                            selectedIds = [];
                            updateBulkActionButton();
                            blogsTable.draw();
                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message);
                            } else {
                                alert(response.message);
                            }
                        } else {
                            if (typeof toastr !== 'undefined') {
                                toastr.error(response.message);
                            } else {
                                alert(response.message);
                            }
                        }
                    },
                    error: function() {
                        if (typeof toastr !== 'undefined') {
                            toastr.error('An error occurred. Please try again.');
                        } else {
                            alert('An error occurred. Please try again.');
                        }
                    }
                });
            });

            // Modal handlers
            $(document).on('click', '.modal-close', function() {
                const modal = $(this).closest('.modal-overlay');
                hideModal(modal.attr('id'));
            });
        }

        // Utility functions
        function updateSelectedIds() {
            selectedIds = [];
            $('.blog-checkbox:checked').each(function() {
                selectedIds.push($(this).val());
            });
        }

        function updateSelectAllState() {
            const checkboxes = $('.blog-checkbox');
            const checkedCheckboxes = $('.blog-checkbox:checked');
            $('#select-all').prop('checked', checkboxes.length > 0 && checkboxes.length === checkedCheckboxes.length);
        }

        function updateBulkActionButton() {
            if (selectedIds.length > 0) {
                $('#bulk-action-btn').removeClass('hidden');
            } else {
                $('#bulk-action-btn').addClass('hidden');
            }
        }

        function updateStatusCounts(settings) {
            const info = settings.json;
            if (info && info.statusCounts) {
                Object.keys(info.statusCounts).forEach(status => {
                    $(`#count-${status}`).text(info.statusCounts[status] || 0);
                });
            }
        }

        function updatePaginationInfo() {
            const info = blogsTable.page.info();
            $('#showing-start').text(info.start + 1);
            $('#showing-end').text(info.end);
            $('#total-records').text(info.recordsTotal);

            if (typeof generatePaginationControls === 'function') {
                generatePaginationControls(info);
            }
        }

        function handleEmptyState() {
            const info = blogsTable.page.info();
            if (info.recordsTotal === 0) {
                $('#blogs-table').parent().hide();
                $('#custom-pagination').hide();
                $('#empty-state').show();
            } else {
                $('#blogs-table').parent().show();
                $('#custom-pagination').show();
                $('#empty-state').hide();
            }
        }

        function performAction(url, method) {
            $.ajax({
                url: url,
                type: method,
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        blogsTable.draw();
                        if (typeof toastr !== 'undefined') {
                            toastr.success(response.message);
                        } else {
                            alert(response.message);
                        }
                    } else {
                        if (typeof toastr !== 'undefined') {
                            toastr.error(response.message);
                        } else {
                            alert(response.message);
                        }
                    }
                },
                error: function() {
                    if (typeof toastr !== 'undefined') {
                        toastr.error('An error occurred. Please try again.');
                    } else {
                        alert('An error occurred. Please try again.');
                    }
                }
            });
        }

        function showModal(modalId) {
            $(`#${modalId}`).removeClass('!hidden').addClass('opacity-100');
        }

        function hideModal(modalId) {
            $(`#${modalId}`).addClass('!hidden').removeClass('opacity-100');
        }

        // Clear filters functionality
        window.clearAllFilters = function() {
            $('#global-search').val('');
            $('.filter-tab').removeClass('text-main before:block').addClass('text-paragraph before:hidden');
            $('#filter-all').removeClass('text-paragraph before:hidden').addClass('text-main before:block');
            blogsTable.draw();
        };
    </script>
@endpush