@extends('layouts.app') @push('css')
@endpush
@push('js')

@endpush
@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h4>Add Description</h4>
            </div>
            <!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <div class="d-inline p-2 text-white text-right">
                        <a href="{{ route('course.remuneration') }}" class="btn btn-md btn-primary text-right btn-sm m-1"> Back</a>
                    </div>
                </ol>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<section class="content">
    <div class="container-fluid">
        <!-- Main row -->
        <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12">
                <form method="POST" action="{{ route('select.headsave') }}" class="from-hiden">
                    @csrf
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="name">Description</label>
                                <input id="head_name" name="head_name" type="text" placeholder="Description" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-info" style="margin-top: 32px;">Create</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-x-12 col-sm-12">
                <table id="tablecontents" class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Description</th>
                            <!-- <th scope="col">Action</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($heads as $key => $head)
                        <tr class="row1" data-id="{{ $head->id }}">
                            <td class="pl-3">{{ $key + 1 }}</td>
                            <td>{{ $head->head_name }}</td>
                            <!-- <td>
                                <button type="submit" class="btn btn-danger btn-sm m-1" onclick="deleteCategory('{{ $head->id }}')"><i class="fas fa-trash"></i>
                                    DELETE</button>
                                <form id="delete-form-{{ $head->id }}" action="{{ route('head.destroy', $head->id) }}" method="POST" style="display: none;">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </td> -->
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

@endsection @push('js')
<script type="text/javascript">
    $(function() {
        $("#table").DataTable();

        $("#tablecontents").sortable({
            items: "tr",
            cursor: 'move',
            opacity: 0.6,
            update: function() {
                sendOrderToServer();
            }
        });

        function sendOrderToServer() {
            var order = [];
            var token = $('meta[name="csrf-token"]').attr('content');
            $('tr.row1').each(function(index, element) {
                order.push({
                    id: $(this).attr('data-id'),
                    position: index + 1
                });
            });

            $.ajax({
                type: "POST",
                dataType: "json",
                url: '{{ url("/")}}' + '/batch/updatehead',
                data: {
                    order: order,
                    _token: token
                },
                success: function(response) {
                    if (response.status == "success") {
                        //  console.log(response);
                    } else {
                        // console.log(response);
                    }
                }
            });
        }
    });
</script>
@endpush