@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('/student/create',[$id]) }}" class="btn btn-primary btn-rounded">New Student</a>
                                    <a href="{{ url('/batch') }}" class="btn btn-success btn-rounded">Batch List</a>
                                       
                                    </div>
                                    <h4 class="page-title">Students</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 Students - {{$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>Name</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("student.showstudents",[":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: 'name', name: 'name'},
           {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('student.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('student.restore') }}",
         data: { id: id },
         success: function (data) {
             table.draw();
         },
         error: function (data) {
             console.log('Error:', data);
         }
     });
     }
        

 });

 
   });
       </script> 
        
@endsection