@extends('layouts.admin')
@section('content')
    <section class="section">
        @php
            $sNo = request()->page ? request()->page * 10 - 10 : 0;
        @endphp
        <div class="section-body">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12">
                    @php
                        $sNo = request()->page ? request()->page * 10 - 10 : 0;
                    @endphp
                    <div class="card">
                        <div class="card-header custom-cart-header">
                            <h4>Questions</h4>
                            <div class="new-card-header-form custom-search-form">
                                <a class="btn btn-primary btn-lg float-end" href="{{ route('admin.faq.create') }}">Add
                                    Question</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="sortable-table" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#Sno.</th>
                                            <th>Question</th>
                                            <th>Answer</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($data as $key => $item)
                                            <tr data-id="{{ $item->id }}">
                                                <td><span class="sort-icon">↕️</span> <span
                                                        class='row-index'>{{ $sNo + $key + 1 }}</span></td>
                                                <td>{{ $item->question }}</td>
                                                <td>{{ $item->answer }}</td>
                                                <td>
                                                    <label>
                                                        <input type="checkbox" class="custom-switch-input"
                                                            @if ($item->status == '1') checked="checked" @endif
                                                            onchange="toggleStatus(this, 'FaqQuestion', '{{ jsencode_userdata($item->id) }}');">
                                                        <span class="custom-switch-indicator"></span>
                                                    </label>
                                                </td>
                                                <td>
                                                    <div class="db-comman-acton-btns">
                                                        <a class="btn btn-success icon-font-size"
                                                            href="{{ route('admin.faq.create', ['id' => jsencode_userdata($item->id)]) }}"
                                                            title="Edit">
                                                            <i class="fa-solid fa-pen-to-square fa-2xl"
                                                                style="color: #0453d2;"></i>
                                                        </a>

                                                        <a class="btn btn-danger delete-category confirm-delete"
                                                            href="{{ route('admin.faq.delete', [jsencode_userdata($item->id)]) }}"
                                                            title="Delete">
                                                            <i class="fa-solid fa-trash fa-2xl" style="color: #ff0019;"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td class="no-record-found" colspan="8">
                                                    <center>Did not found any question</center>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                                {{-- {{ $data->appends(request()->input())->links() }} --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('pagespecificscripts')
    <script>
        $(document).ready(function() {
            // Set CSRF token for all AJAX requests
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#sortable-table tbody").sortable({
                axis: "y",
                handle: "td", // or add a specific handle class
                helper: function(e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function(index) {
                        $(this).width($originals.eq(index).width());
                    });
                    return $helper;
                },
                update: function(event, ui) {
                    var order = [];
                    $('#sortable-table tbody tr').each(function(index) {
                        order.push({
                            id: $(this).data('id'),
                            order: index + 1
                        });
                    });

                    $.ajax({
                        url: "{{ route('admin.faq.question.order.update') }}",
                        method: "POST",
                        data: {
                            order: order
                        },
                        success: function(response) {

                            if (response.status) {
                                // Optional: Update order numbers visually
                                // const queryString = window.location.search;
                                // const urlParams = new URLSearchParams(queryString);

                                // // Get a specific parameter
                                // const page = urlParams.get('page') ? urlParams.get('page')*10 - 10 : 0 ; 
                                $('#sortable-table tbody tr').each(function(index) {
                                    $(this).find('.row-index').text( index + 1)
                                });
                            }
                        },
                        error: function(xhr) {
                            console.error('Error:', xhr.responseText);
                        }
                    });
                }
            }).disableSelection();
        });
    </script>
@endpush