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

@section('title')
@lang('translation.Degrees') / Degrees
@endsection

@section('content')
@component('admin::components.breadcrumb')
@slot('li_1')
Dashboard
@endslot
@slot('title')
Degrees
@endslot
@endcomponent

@if ($text = Session::get('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@elseif ($text = Session::get('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body border-bottom">
                <div class="d-flex align-items-center">
                    <h5 class="mb-0 card-title flex-grow-1">Degrees Lists</h5>
                    <div class="flex-shrink-0">
                        <a href="{{ route('admin.degree.create') }}" class="btn btn-primary">Add Degree</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if(count($degrees) > 0)
                <table id="degreeTable" class="table table-bordered dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Sequence</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="tablecontents">
                        @foreach($degrees as $index => $value)
                        <tr class="row1" data-id="{{ $value->id }}">
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $value->name }}</td>
                            <td>{{ $value->sequence }}</td>
                            <td>
                                <a href="{{ route('admin.degree.edit', $value->id) }}" class="btn btn-soft-info btn-sm" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                @if ($value->status != 2)
                                <a href="{{ route('admin.degree.destroy', $value->id) }}" class="btn btn-soft-danger btn-sm" title="Delete"><i class="mdi mdi-delete-outline"></i></a>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <h3>No Data Found</h3>
                @endif
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(function() {
        // $("#degreeTable").DataTable();
        var catTable = document.getElementById('degreeTable');

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

        var currentURL = document.URL;

        function sendOrderToServer() {
            var order = [];
            $('tr.row1').each(function(index, element) {
                order.push({
                    id: $(this).attr('data-id'),
                    position: index + 1
                });
            });
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{ url('admin/degree/sort') }}",
                data: {
                    order: order,
                    _token: '{{csrf_token()}}',
                },
                success: function(response) {
                    if (response.status == "success") {
                        window.location.reload();
                        // $("#degreeTable").load(window.location + " #degreeTable").reload();
                    } else {
                        alert(response.message);
                    }
                }
            });
        }

    });
</script>
@endsection