@extends('layouts.header')

@section('content')
<div class="row my-4 align-items-center">
		<div class="col-md-6 text-md-left text-center">
			<h2 class="page-title ">Manage Group</h2>
		</div>
		<div class="col-md-6 text-md-right text-center">
			<a href="{{ URL('/manage/groups-create')}}"><button type="button" class="btn btn-primary">+ Add Group</button></a>
		</div>
	</div>

	<table class="table table-style-1 table-responsive mb-4 table-bordered table-striped  " id="TableTools">
			  <thead>
				<tr>
				  <th scope="col"   class="srno-th">Sr. No.</th>
				  <th scope="col">Group Name</th>
				  <th scope="col" width="220"> Action</th>
				</tr>
			  </thead>
			
			</table>
</div>
</div>
	<!--	Delete -->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="delete"  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-22 text-primary">Delete </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <img src="/images/close.svg" width="20">
        </button>
      </div>
      <div class="modal-body form-style pb-0 px-lg-5">
        <div class="row justify-content-center">
			<div class="col-lg-12 mb-0 text-center">
				<h2><i class="fa fa-exclamation-circle text-danger" aria-hidden="true"></i></h2>
				<h3 class="text-dark font-22 font-weight-normal">Are you sure you want to delete?</h3>
			</div>
		
		</div>
			
      </div>
       <input type="hidden" name="id" id="id" value="">
       <div class="modal-footer border-0 justify-content-center">
           <button type="button" class="btn btn-outline-primary mb-3 " data-dismiss="modal">No</button>
           <button type="button" class="btn btn-primary mb-3 " data-dismiss="modal" onclick="deleteRow()">Yes</button>
        </div>
    </div>
  </div>
@endsection

@section('append')
<script src="/assets/js/jquery.dataTables.min.js"></script>
	<script src="/assets/js/dataTables.bootstrap4.min.js"></script>
<script>
    
	var keyword = "";
    var page = 1;
    var orderBy="ASC";
    var sortBy="";
	var ele2 ="";
	$(document).ready(function() {
		// getList();

		var t = $('#TableTools').DataTable({
                processing: true,
				serverSide: true,
				searchable:true,
				bPaginate: true,
                order:[ 1, "asc" ],
				ajax: "{{ route('group.data')}}",
        "rowCallback": function (nRow, aData, iDisplayIndex) {
              var oSettings = this.fnSettings ();
              $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
              return nRow;
          },  
                columns: [
                    { data: 'id', name: 'id', orderable:false },
                    { data: 'name', name: 'name' },
                    { data: 'action', name: 'action',orderable:false}
                ]

			});

	});

    function deleteModal(id){
        $('#id').val(id);
    }

  function deleteRow(){
    var id = $('#id').val();

      $.ajax({
            type: "POST",
            url: '/delete/groups',
            data: {
                "id":id,
            },
            beforeSend: function (request) {
                return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
            },
            success: function(data) {
              toastr.success(data.success);
              $('#TableTools').DataTable().draw();
            },
            error: function(error) {
              toastr.error('Something went wrong !');
          }
                
            });

  }





</script>

@endsection