@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="{{ route('messageType.create')}}" class="btn btn-primary btn-rounded">New Message Type</a>
                                           
                                       
                                    </div>
                                    <h4 class="page-title">Message Types</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 Message Types</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()
    {           
    table = $('.data-table').DataTable({
       processing: true,
       serverSide: true,
       ajax: {
           url:"{{ route('messageType.index') }}",
           data:{status:$("#datastatus").val()} 
       },
       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");
     confirm("Are You sure want to delete !");
   
     $.ajax({
         type: "DELETE",
         url: "{{ route('messageType.store') }}"+'/'+id,
         success: function (data) {
             table.draw();
         },
         error: function (data) {
             console.log('Error:', data);
         }
     });
 });

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

 
   });
       </script> 
        
@endsection