
<style>
  .input-lg {
      height: 46px;
      padding: 7px 18px;
      font-size: 18px;
      line-height: 1.3333333;
      border-radius: 6px;
      border: 1px solid #ccc;
    
  }
  #approval-table td:nth-child(7) {
   display: none;
}
#approval-table td:nth-child(8) {
   display: none;
}
#card {

display:none;

}
#form-inputs-view {
      width: 100%;
    }
.view_doc {
    margin: auto;
    width: 50%;
    /* border: 3px solid green; */
    padding: 10px;
  }
.card-product .img-wrap {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    position: relative;
    height: 220px;
    text-align: center;
  }
  .card-product .img-wrap img {
      max-height: 100%;
      max-width: 100%;
      object-fit: cover;
  }
  .card-product .info-wrap {
      overflow: hidden;
      padding: 15px;
      border-top: 1px solid #eee;
      text-align: center;
  }
  .card-product .bottom-wrap {
      padding: 15px;
      border-top: 1px solid #eee;
  }
  .embedpdf{
     pointer-events: none;
  }

  .pop1{
      display:inline-block;
  }

  .nav-link {
    color: white;
    padding: .75rem 1rem;
  }
</style>
  <div class="row">
  <div class="col-lg-5">
  <div class="card shadow mt-2">
					<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between" style="margin: 0;background-color: #515357;padding: 3px;font-weight: 700;">
   				<h6 class="m-0 font-weight-bold text-light" style="color: #FFFFFF;">APPROVALS</h6>
					</div>
					 
					<div class ="card-body" >
             <form>
              <div class="input-group">
                  <!-- <span class="input-group-text">Date</span>
                  <input type="date" id="" name="" class="form-control date-picker"> -->
                  <span class="input-group-text">Distributor</span>
						      <select  class="form-control" name="selectDsr" id="selectDsr" style="width: 110px">
                    <option value="" class="form-control me-2 ">All</option>
							    </select>
                  <span class="input-group-text">Date</span>
                  <input class="form-control" type="month" id="datefilter" name="start">
                  <button type="button" class="btn btn-outline-success btn-sm pull-right" id="selectDsrButton"><i class="fa fa-refresh"></i></button>
							</div>
              </form>
          <div class="alert alert-default"></strong>
            <div class="pull-right" style="margin: 0 5px 10px 0;padding-top: 5px;">
                <button id="action-approve" disabled="disabled" type="button" class="btn btn-success btn-sm openFormButton" data-toggle="modal" data-target="#approveModal"><i class="fa fa-check"></i>Approve</button>
                <button id="action-decline" disabled="disabled" type="button" class="btn btn-danger btn-sm openFormButton"  data-toggle="modal" data-target="#declineModal"><i class="fa fa-times"></i>Decline</button>
                <button id="action-view" disabled="disabled" type="button" class="btn btn-primary btn-sm openFormButton"><i class="fa fa-eye"></i>View</button>
                <!-- <button id="action-view" disabled="disabled" type="button" class="btn btn-success" data-toggle="modal" data-target="#quick_view"><i class="fa fa-search"></i> View Details</button>   -->
            </div>
          </div>
						<div class="table-responsive col-lg-12 col-sm-12 col-md-12">
								<table id="approval-table" class="table table-stripedx table-bordered table-hover" style="margin: 0">
								
									<thead class="">
									<tr>
										<th class="d-none" ></th>
										<th>#</th>
                    <th>Distributor</th>
										<th>Claim Name</th>
										<th>Ref No.</th>
                    <th>Claim Type</th>
										<th>Application Date</th>
									</tr>
									</thead>
									<tbody class="">
                          <?php 
                            if($claims){
                              $no=0;
                              foreach($claims as $claim) 
                              {
                                $no++; 
                        ?>  

                        <tr>
                            <!-- <td><//?php echo $no ?></td> -->
                            <td><?php echo $no ?></td>
                            <td><?php echo $claim->dis; ?></td>
                            <td><?php echo $claim->cname; ?></td>  
                            <td><?php echo $claim->refno; ?></td>
                            <td><?php echo $claim->ct; ?></td> 
                            <td><?php echo $claim->date; ?></td>
                            <td><?php echo $claim->adminid; ?></td> 
                            <td><?php echo $claim->claimname; ?></td>  
                                                 
                        </tr> 

                        <?php }
                            }else{?>
                                <tr>
                                  <td>No Available Claims</td>
                                </tr> 
                        <?php }?>
                  </tbody>
								</table>
							</div>
				
					
			</div>
      </div>
      </div>
      <div class="col-lg-7">
      <div class="card shadow mt-2" id="card">
					<!-- <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between" style="margin: 0;background-color: #515357;padding: 3px;font-weight: 700;"> -->
   				<!-- <h6 class="m-0 font-weight-bold text-light" style="color: #FFFFFF;">APPROVALS</h6> -->
          <div>
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist" style="background-color: #515357">
                    <a class="nav-item nav-link active"  data-toggle="tab" role="tab" aria-controls="nav-home" aria-selected="true" id="details">Details</a>
                    <a class="nav-item nav-link"  data-toggle="tab" role="tab" aria-controls="nav-profile" aria-selected="false" id="imgs">Image</a>
                </div>
            </nav>
					</div>
      <div class ="card-body" >
      <div class="col-lg-12" style="padding:10px;margin:0px;">    
      <!--------------- manage claim application --------------->
        <div class="openForms" id="myForm">
            <form action="#" class="form-container">
              <div class="box-header" style="background-color: #146fa8">
                <p>Ref# <span class="refno2"></span></p>
              </div>
                <div class="space-ten"></div>
                <div class="form-row">
                  <div class="form-group col-md-3">
                    <label for="curdate">Current Date</label>
                    <input type="date" class="form-control" id="curdate" name="curdate" value="<?=date('Y-m-d')?>">
                  </div>
                  <div class="form-group col-md-3">
                    <label for="shipdate">Ship Date</label>
                    <input type="date" class="form-control" id="shipdate" name="shipdate" placeholder="Ship Date">
                  </div>
                  <div class="form-group col-md-3">
                    <label for="cndbol">C&D BOL#</label>
                    <input type="text" class="form-control reqInput" id="cndbol" name="cndbol" placeholder="C&D BOL#">
                  </div>
                  <div class="form-group col-md-3">
                    <label for="cuspo">Customer PO#</label>
                    <input type="text" class="form-control reqInput" id="cuspo" name="cuspo" placeholder="Customer PO#">
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="shipper">Shipper</label>
                    <input type="text" class="form-control reqInput" id="shipper" name="shipper" placeholder="Shipper">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="phonenum1">Phone Number</label>
                    <input type="text" class="form-control reqInput" id="phonenum1" name="phonenum1" placeholder="Phone Number">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="email1">Email Address</label>
                    <input type="email" class="form-control reqInput" id="email1" name="email1" placeholder="Email Address">
                  </div>
                </div>
                <div class="form-group">
                  <label for="address1">Address</label>
                  <input type="text" class="form-control reqInput" id="address1" name="address1" placeholder="Address">
                </div>
                <div class="form-row">
                  <div class="form-group col-md-4">
                    <label for="consigner">Consigner</label>
                    <input type="text" class="form-control reqInput" id="consigner" name="consigner" placeholder="Shipper">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="phonenum2">Phone Number</label>
                    <input type="text" class="form-control reqInput" id="phonenum2" name="phonenum2" placeholder="Phone Number">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="email2">Email Address</label>
                    <input type="email" class="form-control reqInput" id="email2" name="email2" placeholder="Email Address">
                  </div>
                </div>
                <div class="form-group">
                  <label for="address2">Address</label>
                  <input type="text" class="form-control reqInput" id="address2" name="address2" placeholder="Address">
                </div>
                <div class="form-row">
                  <div class="form-group col-md-3">
                      Check reason for this claim submission:
                  </div>
                  <div class="form-group col-md-2">
                    <div class="form-check">
                      <input type="checkbox" id="lost" value="1">
                      <label for="lost">
                        Lost
                      </label>
                    </div>
                    <div class="form-check">
                      <input type="checkbox" id="damaged" value="1">
                      <label for="damaged">
                        Damaged
                      </label>
                    </div>
                  </div>
                  <div class="form-group col-md-4">
                    <div class="form-check">
                      <input type="checkbox" id="shortshipped" value="1">
                      <label for="shortshipped">
                        Short Shipped
                      </label>
                    </div>
                    <div class="form-check">
                      <input type="checkbox" id="concealed" value="1">
                      <label for="concealed">
                        Concealed Damaged
                      </label>
                    </div>
                  </div>
                  <div class="form-group col-md-3">
                    <label for="claimval">Claim Value</label>
                    <input type="text" class="form-control reqInput" id="claimval">
                  </div>
                </div>
                <div class="btn-ground pull-right buttons">
                  <button type="button" id="action-cancel" class="btn btn-secondary">Close</button>
                </div>
                <br>
              </div>


          <div class="openForms2" id="myForm2">
            <form action="#" class="form-container">
              <!-- <div class="box-header">
                <p><span class="refno2"></span></p>
              </div> -->
              <div>          
              <div class="row view_doc" id="form-inputs-view" >
              </div>
              </div>
            </form>
          </div>
					</div>
			</div>
      </div>
      </div>
      </div>
      <!-- <div>
          <h6>Sample Only</h6>
      </div> -->
  <!-- <a href="javascript:void(0)" data-toggle="modal" id="btn-select" data-target="#approveModal" class="btn btn-sm btn-primary shadow-sm"><i class="fas fa-pen-fancy fa-sm text-white-50"></i> Select</a>                            -->

	<div id="approveModal" class="modal fade" data-keyboard="false" data-backdrop="static">
		<div class="modal-dialog modal-lg modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title m-0 font-weight-bold text-light">Final Approver</h5>
					<button type="button" class="close btn btn-sm" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
					<div class="input-group col-lg-5">
					</div>
					<div class="card shadow mt-2">
						<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"style="margin: 0;background-color: #515357;padding: 3px;font-weight: 700;">
							<!-- <h6 class="m-0 font-weight-bold text-light">Final Approver</h6> -->
						</div>
						<div class="card-body">
							<input id="pr-user" hidden value=" "/>
							<input id="emp-number" hidden/>
	 						<div>
							<label>Select Final Approver: </label>
						  <select  name="selectfa" id="selectfa" style="width: 250px">
                    <option value="">No Selected</option>
							</select>
							</div>
							<br>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<a href="javascript:void(0)" id="action-submit" class="btn btn-sm btn-primary shadow-sm">Submit</a>
					<!-- <button type="button" id="reset-prlisting" class="btn btn-sm btn-outline-danger shadow-sm">Reset</button> -->
					<button type="button" class="btn btn-sm btn-secondary shadow-sm" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>


  <div id="declineModal" class="modal fade" data-keyboard="false" data-backdrop="static">
		<div class="modal-dialog modal-lg modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title m-0 font-weight-bold text-light">Decline Claim</h5>
					<button type="button" class="close btn btn-sm" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
					<div class="input-group col-lg-5">
					</div>
					<div class="card shadow mt-2">
						<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"style="margin: 0;background-color: #515357;padding: 3px;font-weight: 700;">
							<!-- <h6 class="m-0 font-weight-bold text-light">Final Approver</h6> -->
						</div>
						<div class="card-body">
							<input id="pr-user" hidden value=" "/>
							<input id="emp-number" hidden/>
	 						<div>
							<label>Input Remarks: </label>
						  <input  name="remark" id="remark" style="width: 580px">
							</div>
							<br>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<a href="javascript:void(0)" id="action-submit2" class="btn btn-sm btn-primary shadow-sm">Submit</a>
					<!-- <button type="button" id="reset-prlisting" class="btn btn-sm btn-outline-danger shadow-sm">Reset</button> -->
					<button onclick="document.getElementById('remark').value = ''" type="button" class="btn btn-sm btn-secondary shadow-sm" id="declineClose" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

  <div id="ModalView" class="modal fade"  tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="Modal-title-view"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body" id="Modal-body">
                <form id="form101" name="uploadImages" class="form-horizontal" role="form" method="post" enctype="multipart/form-data">
                    <div class="row" >  
                        <div class="row view_doc" id="form-inputs-views" >
                        </div>
                    </div>
                </form>   
            </div>
           <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="imgclose">Close</button>       
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" data-dismiss="modal">
    <div class="modal-content"  >              
      <div class="modal-body">
      	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" >&times;</span><span class="sr-only">Close</span></button>
        <img src="" class="imagepreview" style="width: 100%;" >
      </div>          
    </div>
  </div>
</div>


<div class="modal fade" id="imagemodalpdf" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" data-dismiss="modal">
    <div class="modal-content"  >              
      <div class="modal-body">
      	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <iframe src=""  id="myIframe" class="imagepreview" width="740px" height="600px"></iframe>
      </div>          
    </div>
  </div>
</div>
 

      
      



  


<!-- <script type="text/javascript" src="http://xplus-cdn.appspot.com/assets/js/dbtable.js?v=25.0"></script> -->
<!-- <script type="text/javascript" src="<//?= base_url() ?>assets/js/dbTable.js"></script> -->

<script>
var x;
var name;
var adminid;
var claimname;

function loadingScreen(title, html) {
    Swal.fire({
        title: title,
        html: html,
        allowOutsideClick: false,
        onBeforeOpen: () => {Swal.showLoading()},
        onClose: () => {}
    });
}



$(document).ready(function() {
   getDsr();
   document.querySelector("#datefilter").valueAsDate = new Date();

  function getDsr(){
  $.ajax({
      method: "POST",
        url:"<?= base_url()?>Approval/getDsr",
        data:{
           
        },
        dataType: "json",
        // beforeSend: function(){
        //     loadingScreen('Proccessing..', 'Please wait.');
        //   },
        success: function(res){
          //Swal.close();
          $('#selectDsr').find('option').not(':first').remove();
          $.each(res,function(index,data){
             $('#selectDsr').append('<option value="'+data['admin_id']+'">'+data['firstname']+'</option>');
          });
          //console.log(data['admin_id']);
        }


      });

}
  
 $("#action-approve").on('click', function() { 
      var refno = name;
      console.log(name);
      $.ajax({
      method: "POST",
        url:"<?= base_url()?>Approval/getfa",
        data:{
           
        },
        dataType: "json",
        // beforeSend: function(){
        //     loadingScreen('Proccessing..', 'Please wait.');
        //   },
        success: function(res){
          //Swal.close();
          $('#selectfa').find('option').not(':first').remove();
          $.each(res,function(index,data){
             $('#selectfa').append('<option value="'+data['admin_id']+'">'+data['firstname']+'</option>');
          });
          //console.log(data['admin_id']);
        }


      });
      //window.location.reload();

  });
  $("#action-view").on('click', function() { 
      var refno = name;
      console.log(name);
      $('.refno2').text(refno);
            $.ajax({
          url: "<?= base_url() ?>manage_claim_dst/select_claim",
          method: "POST",
          data: {refno: refno},
          dataType: "json",
          beforeSend: function(){
            loadingScreen('Proccessing..', 'Please wait.');
          },
          success: function(data) {
            Swal.close();
              $.each(data,function(key, value){
                  $('#'+key).val(value);
              });

              $("#lost").prop("checked", false);
              $("#damaged").prop("checked", false);
              $("#shortshipped").prop("checked", false);
              $("#concealed").prop("checked", false);

              $('#curdate').val(data.curdate);
              $('#shipdate').val(data.shipdate);
              $('#cndbol').val(data.cndbol);
              $('#cuspo').val(data.cuspo);
              $('#shipper').val(data.shipper);
              $('#phonenum1').val(data.phonenum1);
              $('#email1').val(data.email1);
              $('#address1').val(data.address1);
              $('#consigner').val(data.consigner);
              $('#phonenum2').val(data.phonenum2);
              $('#email2').val(data.email2);
              $('#address2').val(data.address2);
              $('#claimval').val(data.claimval);
              
              if(data.lost=='1'){
                $("#lost").prop("checked", true);
              }
              if(data.dmg=='1'){
                $("#damaged").prop("checked", true);
              }
              if(data.sship=='1'){
                $("#shortshipped").prop("checked", true);
              }
              if(data.condmg=='1'){
                $("#concealed").prop("checked", true);
              }
              
              //validateForm();
              //console.log('data =>',data);
              //validateForm();
          }
      });
      $('#card').show();
      $('#myForm2').hide();


  });
  $("#action-cancel").on('click', function() { 
      $('#card').hide();

  });
  $("#selectDsrButton").on('click', function() { 
    $('#card').hide();
      var selectDsr = $('#selectDsr').val();
      var datefilter = $('#datefilter').val();
      console.log(selectDsr);
      console.log(datefilter);
			//alert("Test");
			//$('#approval-table tbody').empty()
      $.ajax({
        type: "POST",
        url: "<?=base_url()?>Approval/claims",
        data: {selectDsr : selectDsr,
               
               
        },
        dataType: "json",
        success: function(res) {
          $('#approval-table tbody').empty()
					//salert("Success");
				for(i = 0; i < res.data.length ; i++) {
						$('#approval-table tbody').append(`
							<tr id="" class="">
              <td data-field="Distributor">${i+1}</td>
							<td data-field="Distributor">${res.data[i].dis}</td>
							<td data-field="Claim Name">${res.data[i].cname}</td>
							<td data-field="Refno">${res.data[i].refno}</td>
							<td data-field="Claim Type">${res.data[i].ct}</td>
							<td data-field="Application Date">${res.data[i].date}</td>
              <td data-field="Ticket No."></td>
              <td data-field="Ticket No."></td>
							
              
              
							
						</tr>`

						);
					
						
						
				}
				
			}
        
    });
     //window.location.reload();

  });
  
  $('#imgs').on('click', function (e) {
  			$("#myForm").hide()
        $("#myForm2").show()
        var refno = name;
        console.log(refno);
        $.ajax({
        type: "POST",
        url: "<?=base_url()?>manage_claim_dst/get_uploaded_docus",
        data: {refno : refno },
        dataType: "text",
        success: function(data){   

          get_docus_view(data);

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert("No Data."); 
        }
    });
        

        
  })
  $(document).on('click','.pop',function(event){
    $('.imagepreview').attr('src', $(this).find('img').attr('src'));
    $('#imagemodal').modal('show');

  });
  $(document).on('click','.pop1',function() {
      // alert($(this).find('embed').attr('src'));
      // getElementById('myIframe').contentDocument.location.reload();
      $('#imagemodalpdf iframe').attr('src',$(this).find('embed').attr('src'));
      $("#imagemodalpdf").modal('toggle');
		});
  // $(function() {
	// 	$('.but').on('click', function() {
  //     // $('.imagepreview').attr('src', $(this).find('img').attr('src')); 
  //     $('#imagemodal').modal('show'); 
	// 	});		
  // });
  function get_docus_view(docu){
    // console.log(JSON.parse(docu).length);
    if(JSON.parse(docu).length > 0) {
    $("#Modal-title-view").empty().append('View Documents');
        var i=1;
        var formInput = "";
        // var docus=[];
        $.each(JSON.parse(docu), function(index, item) {

          // var ext = item.filename.split(".");
          // alert(ext);
          // var ext2 = ext2.toUpperCase();
          // var ext3 = ext[2];
          

          formInput+= ' <div class="col-md-6">';
          formInput+= '   <figure class="card card-product">';
          // formInput+= '  <div class="img-wrap"><img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="http://xplus.ph/shell-claims/uploads/50f2f20fb80b1dcb5e90c6dd80c72aad_test12345654_1.png" style="width: 200px; height: 250px;">   </div>';       
         if(item.ext == 'PDF'){
            formInput+= '     <div class="img-wrap"><a href="#" class="pop1"><embed class="embedpdf" src="'+item.filename+'"  width="400px" height="220px"></a></div>';
         }else if(item.ext == ''){
            formInput+= '     <div class="img-wrap"><h2 class="noupload" style="color: red;">No File Uploaded</h2></div>';
         }else{
            formInput+= '     <div class="img-wrap"><a href="#" class="pop"><img id="myimg" src="'+item.filename+'"  class="img-responsive"></a></div>';
         }        
          formInput+= '     <figcaption class="info-wrap">';
          formInput+= '         <h3 class="title">'+item.doc+'</h3>';
          // formInput+= '         <p class="desc">Some small description goes here</p>';
          // formInput+= '         <div class="rating-wrap">';
          // formInput+= '           <div class="label-rating">132 reviews</div>';
          // formInput+= '           <div class="label-rating">154 orders </div>';
          // formInput+= '         </div> <!-- rating-wrap.// -->';
          formInput+= '     </figcaption>';
          // formInput+= '     <div class="bottom-wrap">';
          // formInput+= '       <a href="" class="btn btn-sm btn-primary float-right">Order Now</a>	';
          // formInput+= '       <div class="price-wrap h5">';
          // formInput+= '         <span class="price-new">$1280</span> <del class="price-old">$1980</del>';
          // formInput+= '       </div> <!-- price-wrap.// -->';
          // formInput+= '     </div> <!-- bottom-wrap.// -->';
          formInput+= '   </figure>';
          formInput+= ' </div>';

            // console.log(index, item);
             i++;
            // docus.push(i);
        });
        $("#form-inputs-view").empty().append(formInput);
        //$("#ModalView").modal('toggle');
    }
    else {
        Swal.fire({
                    type: 'info',
                    title: 'No uploaded document/s to show!',
                    // text: 'cancelled!',
        });
    }
  }
  $('#details').on('click', function (e) {
  			$("#myForm").show()
        $('#myForm2').hide();
			})


  
  
  function disable_action_buttons(disable) {
        if(disable) {
            $("#action-approve").attr('disabled','disabled');
            $("#action-decline").attr('disabled','disabled');
            $("#action-view").attr('disabled','disabled');
        }
        else {
            $("#action-approve").removeAttr('disabled');
            $("#action-decline").removeAttr('disabled');
            $("#action-view").removeAttr('disabled');
        }
  }

  $("#approval-table").on("click", "tbody tr", function(e) {
      var selectedClass   = "bg-primary";
      name = $(this).find("td").eq(3).text();
      adminid = $(this).find("td").eq(6).text();
      claimname =$(this).find("td").eq(2).text();
      distributor =$(this).find("td").eq(1).text();
      
      console.log(distributor);
      $('#card').hide();
      // console.log($(this).find('td').eq(1).text());
      
      $(this).toggleClass(selectedClass).siblings().removeClass(selectedClass);
      if($(this).hasClass(selectedClass)) {
          data=[];
          $('.'+selectedClass).each(function() {
              //alert($(this).attr('refno'));
              data.push($(this).attr('id'));
              $.each(this.cells, function(){
                  data.push($(this).html());
              });
              // alert($(this).find('td').eq(1).text());
              // alert(data[3]);
          });
          if(data[1] != 'No Available Claims'){
            disable_action_buttons(false);
          }

          //disable_action_buttons(false);
          document.querySelector(".openForm").style.display = "none";
          // $("#action-manage").removeAttr('disabled');
      }else{
          disable_action_buttons(true);
          document.querySelector(".openForm").style.display = "none";
      }
      return false;
  });

  $("#action-close").on('click', function() { 
      document.querySelector(".openForm").style.display = "none";
  });

  $("#action-cancel").on('click', function() { 
      document.querySelector(".openForm").style.display = "none";
  });


  // function closeForm() {
  //     document.querySelector(".openForm").style.display = "none";
  //  }

  $("#action-attach").on('click', function() {
    // get_docus(data[1]);
    var refno = data[1];
    // alert(refno);
    
    $.ajax({
        type: "POST",
        url: "<?=base_url()?>manage_claim_dst/get_docus",
        data: {'refno' : refno },
        dataType: "text",
        success: function(data){   

          get_docus(data);

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert("No Data."); 
        }
    });
  
  });

  

  function get_docus(docu){
    // console.log(JSON.parse(docu).length);
    if(JSON.parse(docu).length > 0) {
        $("#Modal-title").empty().append('Attach Documents');
        var i=1;
        var formInput = "";
        // var docus=[];
        $.each(JSON.parse(docu), function(index, item) {

            formInput+= "  <div class='form-group'>";
            formInput+= "          <label class='control-label'>"+item.doc+"</label>";
            formInput+= "          <div class='col-sm-8'>";
            formInput+= '              <input type="file" name="file" id="doc-'+item.id+'" class="input-lg docus" size="20" /> ';
            formInput+= "          </div>"; 
            formInput+= "          <div class='col-sm-1'></div>";
            formInput+= "      </div>";

            // console.log(index, item);
             i++;
            // docus.push(i);
        });
        $("#form-inputs").empty().append(formInput);
         $("#Modal").modal('toggle');
    }
    else {
        alert("Selection has no required documents.");
    }
  }


  $("#action-upload").on('click', function(e) { 
    var docus = $('.docus').length;
    var form_data = new FormData();

  
    var totalfiles = docus;
    
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);
     console.log(formData);

    $.ajax({
            url: '<?=base_url()?>manage_claim_dst/upload_docus',
            type: 'POST',
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            success: function (data) {
                alert("Data Uploaded: "+data);
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });

        return false;

    
  });


  

  $("#action-submit").on('click', function() {
    var selectfa = $('#selectfa').val();
    if($('#selectfa').val()==""){
            Swal.fire("Warning","Final Approver is empty, please select Final Approver .","warning");
            return;
            }
            console.log(selectfa);
    Swal.fire({
              title: 'WARNING !',
              text: "Are you sure you want to Submit?",
              type: 'info',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes'
              }).then((result) => {
              if (result.value) {
                  //preSave(); 
                    var refno = name;
                    console.log(x);
                    $.ajax({
                      type: "POST",
                      url:"<?= base_url()?>Approval/toApprove",
                      data:{
                        refno:refno,
                        adminid:adminid,
                        claimname:claimname,
                        distributor:distributor,
                        selectfa:selectfa
                      },
                      dataType: "json",
                      beforeSend: function(){
                        loadingScreen('Proccessing..', 'Please wait.');
                      },
                    });
                    
                    //window.location.reload();
	////////////////action/////////////////////		
  		
              }
              else {
                  Swal.fire({
                      type: 'info',
                      title: 'Cancelled!',
                      // text: 'cancelled!',
                      
                  });
                   $("#Modal").modal('hide');
                  
              }
              
        });


    
  });

   $("#action-submit2").on('click', function() { 
     var remark = document.getElementById("remark").value;
     console.log(remark);
     if($('#remark').val()==""){
            Swal.fire("Warning","Remark is empty, please input remark.","warning");
            return;
            }
    Swal.fire({
              title: 'WARNING !',
              text: "Are you sure you want to Submit?",
              type: 'info',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes'
              }).then((result) => {
              if (result.value) {
                  //preSave(); 
                    var refno = name;
                    console.log(x);
                    $.ajax({
                            type: "POST",
                            url:"<?= base_url()?>Approval/toDecline",
                            data:{
                              refno:refno,
                              adminid:adminid,
                              claimname:claimname,
                              remark:remark,
                              distributor:distributor
                            },
                            dataType: "json",
                            beforeSend: function(){
                            loadingScreen('Proccessing..', 'Please wait.');
                            },

                      });

                    window.location.reload();
	////////////////action/////////////////////		
  		
              }
              else {
                  Swal.fire({
                      type: 'info',
                      title: 'Cancelled!',
                      // text: 'cancelled!',
                      
                  });
                  // $("#Modal").modal('hide');
                  
              }
              
        });


    
  });


});



</script>
</body>
</html>
