@section('css')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <link rel="stylesheet" href="{{asset('/admin/')}}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{asset('/admin/')}}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{asset('/admin/')}}/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
@endsection
<style>
    #sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 60%;
    }

    #sortable li {
        margin: 0 3px 3px 3px;
        padding: 0.4em;
        padding-left: 1.5em;
        font-size: 1.4em;
        height: 18px;
    }

    #sortable li span {
        position: absolute;
        margin-left: -1.3em;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(function () {
        $("#sortable").sortable();
    });
</script>


{{--data table--}}

<div class="card">
    <div class="card-header">
        <h3 class="card-title">DataTable with default features</h3>
    </div>

    <div class="card-body">
        <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
            <div class="row">
                <div class="col-sm-12">
                    <table id="example1" class="table table-bordered table-striped dataTable dtr-inline"
                           aria-describedby="example1_info">
                        <thead>
                        <tr>
                            <th class="sorting sorting_asc" tabindex="0" aria-controls="example1" rowspan="1"
                                colspan="1" aria-sort="ascending"
                                aria-label="Serial: activate to sort column descending">Serial
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                                aria-label="Name: activate to sort column ascending">Name
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                                aria-label="Total Post: activate to sort column ascending">Total Post
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                                aria-label="Action: activate to sort column ascending">Action
                            </th>

                        </tr>
                        </thead>
                        <tbody>
                        @forelse($tags as $key=>$info)
                        <tr class="{{$loop->iteration % 2 == 0 ?'odd' : 'even' }}  ui-state-default" data-id="{{$key}}" row-id="{{$info->id}}">
                            <td class="dtr-control sorting_1" tabindex="0">{{ $loop->iteration }}</td>
                            <td>{{ $info->name }}</td>
                            <td>0</td>
                            <td>
                                <a href="{{ route("tags.edit",$info->id) }}" class="m-3"> <i
                                        class="fa fa-edit text-success"></i> </a>
                                <a href="{{ route("tags.index",['id'=>$info->id,'delete'=>true]) }}" class="m-3"> <i
                                        class="fa fa-trash text-danger"></i> </a>
                            </td>
                        </tr>
                        @empty
                            <tr>
                                <td colspan="5"><p class="bg-danger p-10 text-center">No Tag Found</p></td>
                            </tr>
                        @endforelse
                        </tbody>
                        <tfoot>
                        <tr>
                            <th rowspan="1" colspan="1">Serial</th>
                            <th rowspan="1" colspan="1">Name</th>
                            <th rowspan="1" colspan="1">Total Post</th>
                            <th rowspan="1" colspan="1">Action</th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
{{--data table end--}}


@section('script')
    <script src="{{asset('/admin/')}}/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="{{asset('/admin/')}}/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
@endsection
<script>
    $(function () {
        $("#example1").DataTable({
            "responsive": true, "lengthChange": false, "autoWidth": false,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
        }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
        $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
        });
    });
</script>
<script>
    $(document).ready(function () {
        // Initialize the sortable UI
        $('#sortable').sortable({
            update: function (event, ui) {
                // Get the updated order
                var order = $(this).sortable('toArray', {attribute: 'data-id'});
                var itemId = $(this).sortable('toArray', {attribute: 'row-id'});
                console.log(itemId)


                // Make the AJAX request
                $.ajax({
                    url: '/items/update-order',
                    type: 'PATCH',
                    data: {order: order},
                    success: function (response) {
                        // Handle success response
                    },
                    error: function (xhr) {
                        // Handle error response
                    }
                });
            }
        });
    });
</script>