@extends('admin.layouts.app')
@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Education Sort Video
            <small>it all here</small>
        </h1>
        <ol class="breadcrumb">
            <li><a><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Education Sort Video</li>
            <li class="active">List</li>
        </ol>
    </section>
    <div style="margin-top: 10px" class="flash-message">
        @if(Session::has('message'))
        <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
        @endif
    </div>

    <section class="content">
        <!-- Default box -->
        <div class="box">
            <div class="box-header">
                <h4><a href="{{route("admin.education.add")}}" class="btn btn-success pull-right"> <i class="fa fa-plus"> Add</i></a></h4>
            </div>
            <div class="box-body">
                <table id="users-table" class="table table-bordered display responsive" width="100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name English</th>
                            <th>Name Welsh</th>
                            <th>Sub Title English</th>
                            <th>Sub Title Welsh</th>
                            <th>Type</th>
                            <th>Desctiption English</th>
                            <th>Desctiption Welsh</th>
                            <th>Orders</th>

                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </section>
</div>

@endsection
@section('js')
<script  nonce="{{ $cspNonce }}">
    $(document).ready(function () {
        var catid = "{{$catid}}";

        var url = "{{route('admin.education.datatable.with.cat',['catid'=>'slug'])}}";
        var furl = url.replace("slug", catid);

        var Sorturl = "{{route('admin.education.category.with.video.sort.order',['catid'=>'slug1'])}}";
        var furlOrder = Sorturl.replace("slug1", catid);

        var table = $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            "order": [[8, "asc"]],
            "pageLength": 100,
            ajax: furl,
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'name_welsh', name: 'name_welsh'},
                {data: 'sub_title', name: 'sub_title'},
                {data: 'sub_title_welsh', name: 'sub_title_welsh'},
                {data: 'type', name: 'type'},
                {data: 'description', name: 'description'},
                {data: 'description_welsh', name: 'description_welsh'},
                {data: 'sort_order', name: 'sort_order'},
                {data: 'action', name: 'action'},
            ]
        });


        $("#users-table").sortable({
            items: "tr",
            cursor: 'move',
            opacity: 0.6,
            update: function () {
                sendOrderToServer();
            }
        });
        
        function sendOrderToServer() {
            var order = [];
            var token = $('meta[name="csrf-token"]').attr('content');
            $('.row1').each(function (index, element) {

                order.push({
                    id: $(this).attr('data-id'),
                    position: index + 1
                });
            });

            $.ajax({
                type: "POST",
                dataType: "json",
                url: furlOrder,
                data: {
                    order: order,
                    _token: token
                },
                success: function (response) {
                    if (response.status_code == "200") {
                        table.ajax.reload();
                    }
                }
            });
        }

    });
</script>
@endsection