@extends('layouts.admin')

@section('content')
    @php
        $sNo = request()->page ? request()->page * 10 - 10 : 0;
    @endphp
    <section class="section unique-dashboard-sec">
        <div class="section-body">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header custom-cart-header">
                            <h4>Website Features</h4>
                            <div class="new-card-header-form custom-search-form">
                                <a class="btn btn-primary btn-lg float-end"
                                    href="{{ route('admin.websitefeature.create') }}">Add
                                    Feature</a>
                            </div>
                        </div>
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="sortable-table" class="table table-striped table-md">
                                    <thead>
                                        <tr>
                                            <th>#Sno.</th>
                                            <th>Name</th>
                                            <th>Image</th>
                                            {{-- <th>Description</th> --}}
                                            <th>Status</th>
                                            <th>Created at</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($features as $key=>$feature)
                                            <tr data-id="{{ $feature->id }}">
                                                <td>
                                                    <span class="sort-icon">↕️</span>
                                                    <span class="row-index">{{ $sNo + $key + 1 }}</span>
                                                </td>
                                                <td>{{ $feature->name ?? 'N/A' }}</td>
                                                <td>
                                                    <img width="200" height="200" src="{{ Storage::url($feature->file_url) }}" alt="">
                                                </td>
                                                {{-- <td>{{ $feature->description }}</td> --}}
                                                <td>
                                                    <label>
                                                        <input type="checkbox" class="custom-switch-input"
                                                            @if ($feature->status == '1') checked="checked" @endif
                                                            onchange="toggleStatus(this, 'WebsiteFeature', '{{ jsencode_userdata($feature->id) }}');">
                                                        <span class="custom-switch-indicator"></span>
                                                    </label>
                                                </td>
                                                <td>{{ $feature->created_at->format('m/d/Y') }}</td>
                                                <td>
                                                    <div class="db-comman-acton-btns">
                                                        <a class="btn btn-success icon-font-size"
                                                            href="{{ route('admin.websitefeature.create', ['id' => jsencode_userdata($feature->id)]) }}"
                                                            title="Edit">
                                                            <i class="fa-solid fa-pen-to-square "></i>
                                                        </a>
                                                        <a class="btn btn-danger delete-category confirm-delete"
                                                            href="{{ route('admin.websitefeature.delete', ['id' => jsencode_userdata($feature->id)]) }}"
                                                            title="Delete">
                                                            <i class="fa-solid fa-trash "></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td class="no-record-found" colspan="8">
                                                    <center>Did not found any feature</center>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                                {{-- {{ $features->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.websitefeature.order.update') }}",
                        method: "POST",
                        data: {
                            order: order
                        },
                        success: function(response) {
                            // 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;
                            if (response.status) {
                                // Optional: Update order numbers visually
                                $('#sortable-table tbody tr').each(function(index) {
                                    // $(this).find('td:eq(2)').text(index + 1);
                                    $(this).find('span.row-index').text( index + 1);
                                });
                            }
                        },
                        error: function(xhr) {
                            console.error('Error:', xhr.responseText);
                        }
                    });
                }
            }).disableSelection();
        });
    </script>
@endpush