@extends('layouts.header')

@section('content')

<input type="hidden" value="{{ Auth::user()->role }}" name="auth_role" id="auth_role"> 

<div class="row my-4 align-items-center">
		<div class="col-md-6 text-md-left text-center">
			<h2 class="page-title ">My Service Request</h2>
		</div>
		<div class="col-md-6 text-md-right text-center">
			<button type="button" class="btn btn-primary" onClick="window.location.href='/manage/my-service-request-create'">+ Create New Request</button>
		</div>
	</div>
	<div class="tab-style-2">
	 	<ul class="nav nav-tabs mb-3" id="pills-tab" role="tablist">
		  <li class="nav-item" role="presentation">
			<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true" onclick="pending()">Pending</a>
		  </li>
		  <li class="nav-item" role="presentation">
			<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false" onclick="closed()">Closed</a>
		  </li>
		  
		</ul>
		<div class="tab-content" id="pills-tabContent">
		  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
			
            <table class="table table-style-1 table-responsive mb-4 table-bordered table-striped dtbl " id="TableTools" style="width:100% !important;">
			  
              <thead>
              <tr>
                <th scope="col" class="srno-th">ID</th>
                <th scope="col">Title</th>
                <th scope="col">Type</th>
                <th scope="col">Requested Date & Time</th>
                <th scope="col">Status</th>
                <th scope="col" width="220"> Action</th>
              </tr>
              </thead>
			 
		      	</table>
            
            <!-- 
            <table class="table table-style-1 table-responsive mb-4 table-bordered table-striped dtbl " id="TableTools_admin" style="width:100% !important;">
                
                <thead>
                <tr>
                  <th scope="col" class="srno-th">ID</th>
                  <th scope="col">Title</th>
                  <th scope="col">Type</th>
                  <th scope="col">Request By</th>
                  <th scope="col">Requested Date & Time</th>
                  <th scope="col">Status</th>
                  <th scope="col" width="220"> Action</th>
                </tr>
                </thead>
        
              </table> -->

			</div>

            <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
				<table class="table table-style-1 table-responsive mb-4 table-bordered table-striped dtbl " id="TableTools2" style="width:100% !important;">
			  <thead>
				<tr>
				  <th scope="col"   class="srno-th">ID</th>
				  <th scope="col">Title</th>
				  <th scope="col">Type</th>
				  <th scope="col">Requested Date & Time</th>
				  <th scope="col">Closed Date & Time</th>
				  <th scope="col">Status</th>
				  <th scope="col" width="220"> Action</th>
				</tr>
			  </thead>
              </table>
              </div>

		</div>
	</div>
			
</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">Cancel </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-4 px-3">
        <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 Cancel Request?</h3>
			</div>
		
		</div>
			
      </div>
      <input type="hidden" name="id" id="id" value="">
      <div class="modal-footer border-0 justify-content-center">
		<button type="button" data-dismiss="modal" class="btn btn-outline-primary">No</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="cancelRequest()">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() {
        // if($('#auth_role').val() == 'USER'){
        //   pending();
        // }else{
        //   pendingAll();
        // }
        pending();
	});

    function pending(){
        $('#TableTools').DataTable({
                processing: true,
				serverSide: true,
				searchable:true,
				bPaginate: true,
                destroy: true,
                order:[ 0, "desc" ],
				ajax: { 
                   url: "{{ route('service.request.data')}}",
                   data:{
                       type:"PENDING",
                   }
                },
                columns: [
                    { data: 'id', name: 'id'},
                    { data: 'title', name: 'title' },
                    { data: 'responsibility', name: 'responsibility' },
                    { data: 'created_at', name: 'created_at'},
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action',orderable:false}
                ],

			});
    }

    function pendingAll(){
        $('#TableTools_admin').DataTable({
                processing: true,
				serverSide: true,
				searchable:true,
				bPaginate: true,
                destroy: true,
                order:[ 0, "desc" ],
				ajax: { 
                   url: "{{ route('service.request.data')}}",
                   data:{
                       type:"PENDING",
                   }
                },
                columns: [
                    { data: 'id', name: 'id'},
                    { data: 'title', name: 'title' },
                    { data: 'responsibility', name: 'responsibility' },
                    { data: 'first_name', name: 'first_name' },
                    { data: 'created_at', name: 'created_at'},
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action',orderable:false}
                ],

			});
    }


    function closed(){

         $('#TableTools2').DataTable({
                processing: true,
				serverSide: true,
				searchable:true,
				bPaginate: true,
                destroy: true,
                order:[ 0, "desc" ],
				ajax: { 
                   url: "{{ route('service.request.data')}}",
                   data:{
                       type:"",
                   }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'title', name: 'title' },
                    { data: 'responsibility', name: 'responsibility' },
                    { data: 'created_at', name: 'created_at'},
                    { data: 'closed_at', name: 'closed_at'},
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action',orderable:false}
                ],

			});

    }

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

  function cancelRequest(){
    var id = $('#id').val();
    var status = "CANCELLED";
    
      $.ajax({
            type: "POST",
            url: '/update/my-service-request',
            data: {
                "id":id,
                "status":status
            },
            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