@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 Responsibilities</h2>
		</div>
		<div class="col-md-6 text-md-right text-center">
			<a href="{{ URL('/manage/responsibilities-create')}}"><button type="button" class="btn btn-primary">+ Add</button></a>
		</div>
	</div>

	<!-- <div class="col-md-12 row">
		<input type="text" name="keyword" id="keyword" class="">&nbsp;
		<button type="button" class="btn btn-primary" id="btnSearch">Search</button>
    </div>
	<br> -->

	<!-- <div id="inner_data"></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">Responsibility Name</th>
				  <th scope="col">Description</th>
				  <th scope="col">Action</th>
				</tr>
			  </thead>
            
			</table>
			

	<!--	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>
</div>
	

@endsection

@section('append')
<script src="/assets/js/jquery.dataTables.min.js"></script>
	<script src="/assets/js/dataTables.bootstrap4.min.js"></script>
<script>
    
	$(document).ready(function() {
		tabledata();
	});

  function tabledata(){
   var t = $('#TableTools').DataTable({
        processing: true,
				serverSide: true,
				searchable:true,
				bPaginate: true,
        retrieve: true,
        destroy: true,
        order:[ 1, "asc" ],
				ajax: "{{ route('r.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: 'responsibility', name: 'responsibility' },
              { data: 'description', name: 'description' },
              { data: 'action', name: 'action',orderable:false}
          ]

			});
    }

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

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

      $.ajax({
            type: "POST",
            url: '/delete/responsibilities',
            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