@extends('admin::layouts.app')

@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            <div class="row titlepad">
                <div class="col-md-12">
                    <div class="mt-3 mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>

                    <div class="row align-items-end">
                        <div class="col-sm-9">
                            <h4>{{ __('master.reorder_category_list') }}</h4>
                        </div>
                        <div class="col-md-3">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive bg-white">
                        {{-- Table Start --}}
                        <table class="table table-striped table-bordered admintable border-0" cellspacing="0"
                            cellpadding="0" id="sortable-table">
                            <thead>
                                <tr data-id='0'>
                                    <th>#</th>
                                    <th>{{ __('master.title_in_english') }}</th>
                                    <th>{{ __('master.title_in_arabic') }}</th>
                                    <th>{{ __('admin.status') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($categories as $key => $category)
                                    <tr data-id={{ $category->id }}>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $category->title_en }}</td>
                                        <td>{{ $category->title_ar }}</td>
                                        <td><span
                                                class="badge bad-status @if ($category->status == 'active') badge-success @else badge-danger @endif">{{ ucfirst($category->status) }}</span>
                                        </td>
                                    @empty
                                    <tr>
                                        <td colspan="10">
                                            <p>
                                                <center class="text-danger">{{ __('admin::message.no_records_found') }}
                                                </center>
                                            </p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        {{-- Table End --}}
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("#sortable-table tbody").sortable({
                update: function(event, ui) {
                    // Get the updated order
                    var newOrder = $(this).sortable('toArray', {
                        attribute: 'data-id'
                    });

                    // Send the new order to the backend using AJAX
                    $.ajax({
                        url: app_url + '/api/admin/categories/update-sequence',
                        method: 'POST',
                        data: {
                            order: newOrder
                        },
                        success: function(response) {
                            Swal.fire(
                                "Success!",
                                "Order updated.",
                                "success"
                            );
                        }
                    });
                }
            });
        });
    </script>
@endsection