@extends('backend.app')

@section('title', 'FAQ Page')

@push('style')
    <link rel="stylesheet" href="{{ asset('backend/assets/datatable/css/datatables.min.css') }}">
@endpush
@section('title', 'FAQ')
@section('content')


    <div class="app-content content ">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">FAQ List</h3>
                <a href="{{ route('faq.create') }}" class="btn btn-primary float-end">Add FAQ</a>
            </div>
            <div class="card-body">
                <div class="table-responsive mt-4 p-4 card-datatable table-responsive pt-0">
                    <table class="table table-hover" id="data-table">
                        <thead>
                            <tr>
                                <th>
                                    <div class="form-checkbox">
                                        <input type="checkbox" class="form-check-input" id="select_all"
                                            onclick="select_all()">
                                        <label class="form-check-label" for="select_all"></label>
                                    </div>
                                </th>
                                <th>Title</th>
                                <th>Short Description</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="{{ asset('backend/assets/datatable/js/datatables.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            var searchable = [];
            var selectable = [];
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                }
            });
            let dTable = $('#data-table').DataTable({
                order: [],
                destroy: true,
                lengthMenu: [
                    [25, 50, 100, 200, 500, -1],
                    [25, 50, 100, 200, 500, "All"]
                ],
                processing: true,
                responsive: true,
                serverSide: true,
                // paging: true,
                language: {
                    processing: `<div class="text-center">
                                            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>`
                },

                scroller: {
                    loadingIndicator: false
                },
                pagingType: "full_numbers",
                dom: "<'row justify-content-between align-items-center table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
                ajax: {
                    url: "{{ route('faq.index') }}",
                    type: "get",
                },
                columns: [{
                        data: 'bulk_check',
                        name: 'bulk_check',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'title',
                        name: 'title',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'short_description',
                        name: 'short_description',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return data.length > 30 ? data.substr(0, 30) + '...' : data;
                        }
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                drawCallback: function(settings) {
                    const totalPages = Math.ceil(settings._iRecordsDisplay / settings._iDisplayLength);
                    const currentPage = settings._iDisplayStart / settings._iDisplayLength + 1;
                    updateCustomPagination(totalPages, currentPage);
                }
            });

            $('#customSearchBox').on('keyup', function() {
                dTable.search(this.value).draw();
            });

            $('#pageLength').on('change', function() {
                dTable.page.len(this.value).draw();
            });

            function updateCustomPagination(totalPages, currentPage) {
                const paginationContainer = $('#customPagination');
                paginationContainer.empty();

                const maxVisiblePages = 5;
                let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
                let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

                if (startPage > 1) {
                    paginationContainer.append('<a href="#" class="pagination-item" data-page="1">1</a>');
                    if (startPage > 2) {
                        paginationContainer.append('<span class="ellipsis">...</span>');
                    }
                }

                for (let i = startPage; i <= endPage; i++) {
                    paginationContainer.append(
                        `<a href="#" class="pagination-item ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</a>`
                    );
                }

                if (endPage < totalPages) {
                    if (endPage < totalPages - 1) {
                        paginationContainer.append('<span class="ellipsis">...</span>');
                    }
                    paginationContainer.append(
                        `<a href="#" class="pagination-item" data-page="${totalPages}">${totalPages}</a>`
                    );
                }

                $('.pagination-item').on('click', function(e) {
                    e.preventDefault();
                    const page = $(this).data('page');
                    dTable.page(page - 1).draw('page');
                });
            }
        });
    </script>
    <script>
        // Use the status change alert
        function changeStatus(event, id) {
            event.preventDefault();
            let statusUrl = '{{ route('faq.status', ':id') }}'.replace(':id', id);

            Swal.fire({
                title: 'Are you sure?',
                text: "You want to change the status of this dynamic page.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, change it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: statusUrl,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            Swal.fire(
                                'Status Updated!',
                                response.success,
                                'success'
                            );
                            $('#data-table').DataTable().ajax.reload(); // Reload DataTable
                        },
                        error: function(response) {
                            Swal.fire(
                                'Error!',
                                response.responseJSON.error || 'An error occurred.',
                                'error'
                            );
                        }
                    });
                }
            });
        }


        // Use the delete confirm alert
        function deleteRecord(event, id) {
            event.preventDefault();
            let deleteUrl = '{{ route('faq.destroy', ':id') }}'.replace(':id', id);

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: deleteUrl,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            Swal.fire(
                                'Deleted!',
                                response.success,
                                'success'
                            );
                            $('#data-table').DataTable().ajax.reload(); // Reload DataTable
                        },
                        error: function(response) {
                            Swal.fire(
                                'Error!',
                                response.responseJSON.error || 'An error occurred.',
                                'error'
                            );
                        }
                    });
                }
            });
        }
    </script>
@endpush