@extends('admin.layouts.app')
@section('title')
Education
@endsection
@section('content')
    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row page-title">
                    <div class="col-md-12">
                        <div class="col-md-12 d-flex justify-content-between">
                            <div class="">
                                <h4 class="mb-1 mt-0">Education ReOrder</h4>
                            </div>
                            <nav aria-label="breadcrumb" class="float-right">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a>admin</a></li>
                                    <li class="breadcrumb-item"><a>Education ReOrder</a></li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                @if ($message = Session::get('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <strong>{{ $message }}</strong>
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                @endif
                            <form method="post" action="">
                                <div class="table-responsive mt-2">
                                    <table id='showall' class="table m-0">

                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>Order Id</th>
                                                <th>Title</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody id="sortable">
                                            @foreach ($Education as $edu)
                                                <tr class="row1" data-id="{{$edu->id}}">
                                                    <td>{{ $edu->id }}</td>
                                                    <td>{{ $edu->order_id }}</td>
                                                    <td>{{ $edu->title }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endsection
            @section('js')
            <script nonce="{{ $cspNonce }}">
                $("#sortable").sortable({
                    items: "tr",
                    cursor: 'move',
                    opacity: 0.6,
                    update: function() {
                        sendOrderToServer();
                    }
                });
            
                function sendOrderToServer() {
                    var order = [];
                    $('.row1').each(function(index, element) {
                        order.push({
                            id: $(this).attr('data-id'),
                            position: index + 1
                        });
                    });
                    console.log(order);
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "{{ route('education.reorder') }}",
                        data: {
                            order: order,
                            _token: "{{ csrf_token() }}",
                        },
                        success: function(response) {
                            console.log(response);
                            location.reload();
                     
                        }
                    });
                }
            </script>
            @endsection