@extends('layouts.master')

@section('css')
<!-- third party css -->
<link href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')

<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    
                    <a href="{{ url('/batch') }}" class="btn btn-success btn-rounded">Batch List</a>

                </div>
                <h4 class="page-title">Tutorials</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-10">
                            <h4 class="header-title">List of Tutorials - {{$coursename}} {{$batch}}</h4>
                        </div>
                        <div class="col-2">
                            <select id="datastatus" class="form-control">
                                <option value='active'>Active</option>
                                <option value='deleteds'>Deleted</option>
                            </select>
                        </div>
                    </div>
                    <p class="text-muted font-13 mb-4">

                    </p>

                    <table class="table table-bordered data-table">
                        <thead>
                            <tr>
                                <th>Sr.</th>
                                <th>Title</th>
                                <th>Edit</th>
                                <th>Delete</th>

                            </tr>
                        </thead>

                    </table>

                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->



</div> <!-- container -->
@endsection

@section('script')

<!-- third party js -->
<script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
<!-- third party js ends -->

<script>
    $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }


        });

        inittable();
        var table;

        function inittable() {
            var url = '{{ route("tutorial.showtutorials",[":id",":status"]) }}';
            url = url.replace(':id', {{$id}});
            url = url.replace(':status', $("#datastatus").val());
            table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: url,
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        sWidth: '5%',
                        className: "text-center"
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'edit',
                        name: 'edit',
                        orderable: false,
                        searchable: false,
                        sWidth: '10%',
                        className: "text-center"
                    },
                    {
                        data: 'delete',
                        name: 'delete',
                        orderable: false,
                        searchable: false,
                        sWidth: '10%',
                        className: "text-center"
                    },
                ]
            });
        }

        $('body').on('change', '#datastatus', function() {
            table.destroy();
            inittable();
        });

        $('body').on('click', '.deleteData', function() {

            var id = $(this).data("id");
            if (confirm("Are You sure want to delete !")) {
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('tutorial.store') }}" + '/' + id,
                    success: function(data) {
                        table.draw();
                    },
                    error: function(data) {
                        console.log('Error:', data);
                    }
                });
            }


        });

        $('body').on('click', '.restoreData', function() {

            var id = $(this).data("id");
            if (confirm("Are You sure want to restore !")) {
                $.ajax({
                    type: "get",
                    url: "{{ route('tutorial.restore') }}",
                    data: {
                        id: id
                    },
                    success: function(data) {
                        table.draw();
                    },
                    error: function(data) {
                        console.log('Error:', data);
                    }
                });
            }


        });


    });
</script>

@endsection