<!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> -->
<!--<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<style>
    header {
      padding: 0 15px;
      margin-top: 30px;
    }
    .product_view .modal-dialog{
      max-width: 800px; 
      width: 100%;
    }
    .pre-cost{
      text-decoration: line-through; 
      color: #a5a5a5;
    }
    .space-ten{
      padding: 10px 0;
    }

    .container{
      margin-left: 90px;
      margin-top: 40px;
    }
    .col-md-4 {
      width: 50%;
    }

    .thumbnail {
      line-height: 1;
      width: 90%;
    }
    
    .box-header {
      margin: 0;
      background-color: #515357;
      padding: 3px;
      font-weight: 700;
      color: #FFFFFF;
    }

    p, h3{
      text-align: center;
    }

    h4{
      margin-left: 110px;
    }

    p {
      margin: 0 0 5px;
    }

    .space-ten {
      padding: 5px 0;
    }
    .openForm {
      display: none;
      /* position: fixed; */
      bottom: 0;
      right: 15px;
      border: .5px solid #D3D3D3;
      line-height: 1;
      z-index: 9;
      margin-right: 75px;
      margin-top:20px;
      width: 90%;
      height: 500px; 
      padding: 5px;
    }

    .form-row, .form-group{
      padding: 8px;
    }
</style>
<div class="row">
  <div class="row col-lg-12" style="padding:9px;background: #fff;color: #000;border-bottom: 1px solid #717171;">
      <h4>Manage Claims</h4>
  </div>
</div>-->
<style>
 .openForm {
    margin: auto;
  }
    .col-md-4{
      max-width: 35%
    }

    #form-inputs-view {
      width: 100%;
    }
  .buttons{
    padding-right: 8px;
  }

  .control-label {
    padding-left: 15px;
  }
  .input-lg {
      /* height: 46px; */
      overflow: hidden;
      padding: 7px 18px;
      font-size: 18px;
      line-height: 1.3333333;
      border-radius: 6px;
      border: 1px solid #ccc;
  }
  .progress {
    line-height: 1;
  }
  .form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #e74a3b;
    padding-right: calc(1.5em + .75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23e74a3b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23e74a3b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E);
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
  }  
  .form-control:focus {
    color: #3a3b45 !important;
    background-color: #fff;
    border-color: #bac8f3;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, .25);
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, .25);
  }

  .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;
  }

  .label-rating { margin-right:10px;
      color: #333;
      display: inline-block;
      vertical-align: middle;
  }

  .card-product .price-old {
      color: #999;
  }

  .view_doc {
    margin: auto;
    width: 50%;
    /* border: 3px solid green; */
    padding: 10px;
  }
  .upload_doc {
    padding-left: 20px;
  }

  .no_doc {
    border-color: #e74a3b;
  }  

  .info_upload {
    padding-left: 30px;
    padding-top: 1rem;
    /* text-align: center; */
    font-style: italic;
  }  

  .close{
    font-size: 1rem;
    font-weight: 1000;
  }

  /* .imagepreview{
    padding-top: 1rem;
  } */

  .embedpdf{
     pointer-events: none;
  }

  .pop1{
      display:inline-block;
  }
  /* table td:nth-child(1),table th:nth-child(1){ 
    display:none;
  }  */

</style>

<div class="card-body">
<div class="row">
  <!-- <div class="col-lg-12" style="padding:0px;margin:0px;"> -->
  <div class="col-lg-5" style="padding:10px;margin:0px;">
  <div class="card shadow mt-2">
    <div id="sidebar">
        <div class="alert alert-default"></strong>
            <div class="pull-right" style="margin: 0 5px 10px 0;padding-top: 5px;">
                <button id="action-manage" disabled="disabled" type="button" class="btn btn-primary openFormButton"><i class="fa fa-edit"></i> Manage</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>     
        <!-- <div> -->
    <div class="table-responsive col-lg-12 col-sm-12 col-md-12">
            <!-- <table id="my-table" class="table table-stripedx table-borderedx table-hover"></table> -->
        <!-- <table class="display" id="example" style="width:100%"> -->
        <table class="table table-striped t" id="my-table">
        <?php if($claims){?>  	
            <thead>
                <tr>
                    <th>Ref#</th>
                    <th>Date Opened</th>
                    <th>Claim</th>   
                    <th>Claim Type</th>
                    <th>Status</th>
                </tr>                  
            </thead>
            <tbody>
                <?php 
                      $no=0;
                      foreach($claims as $claim) 
                      {
                        $no++; 
                ?>  

                <tr>
                    <!-- <td><//?php echo $no ?></td> -->
                    <td><?php echo $claim->refno; ?></td>  
                    <td><?php echo $claim->date_added; ?></td> 
                    <td><?php echo $claim->name; ?></td>  
                    <td><?php echo $claim->claim_type; ?></td>   
                    <td><?php echo $claim->status_desc; ?></td>                      
                </tr> 

                <?php }?>                  
                  </tbody>
                  <?php }else{?>
                                <tr>
                                  <h6 class="text-center mt-3">No Available Claims</h6>
                                </tr> 
                        <?php }?>
        </table>
    </div>
    </div>
  </div>


      <div class="col-lg-7" style="padding:10px;margin:0px;">    
      <div class="card shadow mt-2">
      <!--------------- manage claim application --------------->
        <div class="openForm" id="myForm">
            <form action="#" class="form-container">
              <div class="box-header">
                <p>Ref# <span class="refno2"></span>
                  <button type="button" class="close" data-dismiss="modal" id="action-close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                </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-6">
                    <label for="inputCity">City</label>
                    <input type="text" class="form-control" id="inputCity">
                  </div>
                  <div class="form-group col-md-4">
                    <label for="inputState">State</label>
                    <select id="inputState" class="form-control">
                      <option selected>Choose...</option>
                      <option>...</option>
                    </select>
                  </div>
                  <div class="form-group col-md-2">
                    <label for="inputZip">Zip</label>
                    <input type="text" class="form-control" id="inputZip">
                  </div>
                </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-submit" class="btn btn-primary">Submit</button>
                  <button type="button" id="action-view_doc" class="btn btn-secondary" data-toggle="modal">View Documents</button>
                  <button type="button" id="action-attach" class="btn btn-secondary" data-toggle="modal">Attach Documents</button>
                  <button type="button" id="action-cancel" class="btn btn-secondary">Cancel</button>
                </div>
                <!-- <button type="submit" class="btn">Submit</button>
                <button type="button" class="btn">Attach Documents</button>
                <button type="button" class="btn cancel" onclick="closeForm()">Cancel</button> -->
              </div>
            </form>
          </div>
          </div>
    </div>
  </div>
</div>


<div class="modal fade" id="attachDocument" tabindex="-1" aria-labelledby="attachDocument" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="attachDocument">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" id="a-upload">Upload Documents</button>
                </div>
              </div>
            </div>
    </div>
    
<div id="Modal" class="modal fade"  tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="Modal-title"></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="form-horizontal upload_doc" id="form-inputs" >
                          <div class="row" > 
                          </div>
                        </div>
                    </div>
                </form>   
                <!-- <div class="progress">
                    <div class="bar"></div >
                    <div class="percent">0%</div >
                </div>
                <div id="statusp"></div> -->
                <!-- <progress id="progress-bar" max="100" value="0"></progress>  -->
                <div class="info_upload">*Supported file extensions:  .jpg,.jpeg,.png,.pdf <br> *Max File Size: 5MB per file</div>
            
            </div>
           <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
                <button type="button" class="btn btn-primary" id="action-upload" >Upload</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-view" >
                        </div>
                    </div>
                <!-- </form>    -->
            </div>
           <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">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" 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="460px" height="600px"></iframe>
      </div>          
    </div>
  </div>
</div>

<div class="modal fade" id="docmodal">
  <div class="modal-dialog modal-lg" style="padding-top:;width:600px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><i class="fa fa-newspaper-o"></i> <mtl class="labresult_desc">View Document</mtl></h4>
      </div>
      <div class="modal-body">
      	<img src="#" width="100%" height="100%" />
	  </div>
      <div class="modal-footer">
       <!-- <button type="button" class="btn btn-danger btn-md confirm_remove_item"><i class="fa fa-trash"></i> Remove</button> -->
        <button type="button" class="btn btn-primary btn-md" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  -->
<!-- <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 src="https://xplus.ph/shell-claims/assets/js/sweetalert.min.js"></script> -->
<script>
           $('.reqInput').keyup(function() {
               validateForm();
           });
           $('select.reqInput').change(function() {
               validateForm();
           });
function validateForm() {
               var valid = true;
               $('.reqInput').each(function() {
                   $(this).removeClass('is-invalid');
                   if ($(this).val() === '' || $(this).val() == 'null') {
                       valid = false;
                       $(this).addClass('is-invalid');
                   }
               });
               if (valid == true) {
                   $('.reqInput').removeClass('is-invalid');
                   $('#action-submit').prop('disabled', false);
                   $('.newWarning').hide();
               } else {
                   $('#action-submit').prop('disabled', true);
                   $('.newWarning').show();
               }
           }

function loadingScreen(title, html) {
    Swal.fire({
        title: title,
        html: html,
        allowOutsideClick: false,
        willOpen: () => {Swal.showLoading()},
        didClose () {Swal.hideLoading()}
        // onBeforeOpen: () => {Swal.showLoading()},
        // onClose: () => {}
        // onAfterClose () {Swal.hideLoading()}
    });
}
  // $("tr").click(function() {
  //             var str = this.innerText;
  //             var i = str.split('').indexOf("    ");
  //             alert(str.slice(0, i));
  // })
$(document).ready(function() {
  function disable_action_buttons(disable) {
        if(disable) {
            $("#action-manage").attr('disabled','disabled');
            $("#action-view").attr('disabled','disabled');
        }
        else {
            $("#action-manage").removeAttr('disabled');
            $("#action-view").removeAttr('disabled');
        }
  }

  $("#my-table").on("click", "tbody tr", function(e) {
      var selectedClass   = "bg-primary";
      var name = $(this).find("td").first().text();
      // console.log(name);
      // 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);
          }
          document.querySelector(".openForm").style.display = "none";
          // $("#action-manage").removeAttr('disabled');
      }else{
          disable_action_buttons(true);
          document.querySelector(".openForm").style.display = "none";
      }
      return false;
  });

  $("#action-manage").on('click', function() { 
      var refno = data[1];

      $('.refno2').text(data[1]);   
      document.querySelector(".openForm").style.display = "block";

      $.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);
              // $('#lost').val(data.lost);
              // $('#damaged').val(data.dmg);
              // $('#shortshipped').val(data.sship);
              // $('#concealed').val(data.condmg);

              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();
          }
      });
  });


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

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

  $("#action-view_doc").on('click', function() {
    var refno = data[1];
    // alert(refno);
    
    $.ajax({
        type: "POST",
        url: "<?=base_url()?>manage_claim_dst/get_uploaded_docus",
        data: {'refno' : refno },
        dataType: "text",
        beforeSend: function(){
            loadingScreen('Proccessing..', 'Please wait.');
        },
        success: function(data){   
          Swal.close()
          get_docus_view(data);

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

  // $(function() {
    $(document).on('click','.pop',function() {
		// $('.pop').on('click', function() {
    // $('img').click(function(){  
			// $('.imagepreview').attr('src', $(this).find('img').attr('src'));
      // alert(1);
      $('#imagemodal img').attr('src',$(this).find('img').attr('src'));
      $("#imagemodal").modal('toggle');
			// $('#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 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 src="'+item.filename+'"  class="img-responsive"></a></div>';
            formInput+= '     <div class="img-wrap"><a class="pop"><img src="'+item.filename+'"  class="img-responsive"></a></div>';
            // formInput+= '     <div class="img-wrap"><a class="pop"><img src="'+item.filename+'"  class="img-responsive" data-toggle="modal"  href="#docmodal"></a></div>';
         }        
          formInput+= '     <figcaption class="info-wrap">';
          formInput+= '         <h3 class="title">'+item.doc+'</h3>';
          // formInput+= '         <p class="desc">+item.description+</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">View</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!',
        });
    }
  }



  $("#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",
        beforeSend: function(){
            loadingScreen('Proccessing..', 'Please wait.');
          },
        success: function(data){   
          Swal.close()
          get_docus(data);

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Swal.close()
          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'>";
            if(item.filename == ''){
              formInput+= '              <input type="file" name="file[]" id="doc-'+item.id+'" class="input-lg docus no_doc" size="20"/> ';
            }else{
              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 {
        Swal.fire({
                    type: 'info',
                    title: 'Selection has no required documents set!',
                    // text: 'cancelled!',
        });
    }
  }

  //UPLOAD USING AJAX2
  $("#action-upload").on('click', function(e) { 
    var docus = $('.docus').length;
    var refno = data[1];
    //var form_data = new FormData();

    // Read selected files
    // var totalfiles = document.getElementsById('files').files.length;
    var totalfiles = docus;
    // for (var index = 0; index < totalfiles; index++) {
    //   // form_data.append("files[]", document.getElementById('files').files[index]);
    //   // form_data.append("files[]", document.getElementsByClassName('docus').files[index]);   
    //   console.log(index);
    // }

    var ajaxData = new FormData();
    var ids = [];
    // var json_arr = JSON.stringify(arr);

    ajaxData.append( 'action','uploadImages');
    ajaxData.append( 'refno',refno);
    $.each($("input[type=file]"), function(i, obj) {
            // ids.push($(this).attr('id'));
            // console.log('docid:'+$(this).attr('id'));
            if (obj.files.length > 0) {
              ids.push($(this).attr('id'));
              ajaxData.append('docid[]', $(this).attr('id')); 
              $.each(obj.files,function(j, file){
                // ajaxData.append('file['+j+']', file);
                ajaxData.append('file[]', file, $(this).attr('id'));                
              })
            }
    });
    if (ids.length === 0) {
        //alert('empty');
        Swal.fire({
                    type: 'info',
                    title: 'Please upload the required documents!',
                    // text: 'cancelled!',
        });
        // $("#Modal").modal('hide');
    }else{
    // ajaxData.append('docid[]', ids); 
    // ajaxData.getAll;
    // alert(ids);
    // console.log(JSON.stringify(ajaxData));
      Swal.fire({
              title: 'WARNING !',
              text: "Are you sure you want to Upload?",
              type: 'info',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes'
              }).then((result) => {
              if (result.value) {
                  //preSave();
                  var bar = $('.bar');
                  var percent = $('.percent');
                  var statusp = $('#statusp');

                  // // for (const i = 0; i <= ajaxData.files.length - 1; i++) { 
                  // $.each(ajaxData,function(i, file){
                  //   // ajaxData.append('file[]', file, $(this).attr('id'));  
                  //   const fsize = ajaxData.files.item(i).size; 
                  //   const sizef = Math.round((fsize / 1024)); 
                  //   // The size of the file. 
                  //   if (sizef >= 4096) { 
                  //       alert( 
                  //         "File too Big, please select a file less than 4mb"); 
                  //       alert(sizef);
                  //   } else if (sizef < 2048) { 
                  //       alert(sizef); 
                  //   } 

                  // })
  
                    
               

                  $.ajax({
                      url: '<?=base_url()?>manage_claim_dst/upload_docus',
                      data: ajaxData,
                      cache: false,
                      contentType: false,
                      processData: false,
                      type: 'POST',
                      dataType:'html',
                      beforeSend: function(){
                        loadingScreen('Uploading..', 'Please wait.');
                      },
                      // beforeSend: function() {
                      //     statusp.empty();
                      //     var percentVal = '0%';
                      //     bar.width(percentVal);
                      //     percent.html(percentVal);
                      // },
                      // uploadProgress: function(event, position, total, percentComplete) {
                      //     var percentVal = percentComplete + '%';
                      //     bar.width(percentVal);
                      //     percent.html(percentVal);
                      // },
                      // complete: function(xhr) {
                      //     // statusp.html(xhr.responseText);
                      // },
                      success: function(data) {
                        // console.log(data);
                        // alert(data);
                        Swal.fire({
                            type: 'success',
                            title: 'Upload Status',
                            text: 'success',
                        });
                        $('#swal2-content').html(data);
                        $("#Modal").modal('hide');
                        // alert(1);
                          // document.querySelector(".openForm").style.display = "none";
                      },
                      error: function(XMLHttpRequest, textStatus, errorThrown) {
                        // console.log(data);
                        // alert(textStatus);
                        // alert(errorThrown);
                        Swal.fire({
                            type: 'Failed',
                            title: 'Failed',
                            html: 'Upload Failed!',
                        });
                        $("#Modal").modal('hide');
                      }
                  });
              }
              else {
                  Swal.fire({
                      type: 'info',
                      title: 'Cancelled!',
                      // text: 'cancelled!',
                  });
                  // $("#Modal").modal('hide');
              }
        });
    }
  });


  $("#action-submit").on('click', function() { 
    // alert(data[1]);  
    var refno = data[1];
    var curdate = $('#curdate').val();
    var shipdate = $('#shipdate').val();
    var cndbol = $('#cndbol').val();
    var cuspo = $('#cuspo').val();
    var shipper = $('#shipper').val();
    var phonenum1 = $('#phonenum1').val();
    var email1 = $('#email1').val();
    var address1 = $('#address1').val();
    var consigner = $('#consigner').val();
    var phonenum2 = $('#phonenum2').val();
    var email2 = $('#email2').val();
    var address2 = $('#address2').val();
    var claimval = $('#claimval').val();

    if ($('#lost').is(":checked"))
    {
      var lost = 1;
    }else{
      var lost = 0;
    }

    if ($('#damaged').is(":checked"))
    {
      var damaged = 1;
    }else{
      var damaged = 0;
    } 

    if ($('#shortshipped').is(":checked"))
    {
      var shortshipped = 1;
    }else{
      var shortshipped = 0;
    }  

    if ($('#concealed').is(":checked"))
    {
      var concealed = 1;
    }else{
      var concealed = 0;
    }     
    // alert($('#lost').val());
    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();
                $.ajax({
                  type: "POST",
                  url: "<?=base_url()?>manage_claim_dst/submit_claims",
                  data: {'refno' : refno, 
                        'curdate' : curdate, 
                        'shipdate' : shipdate, 
                        'cndbol' : cndbol, 
                        'cuspo' : cuspo, 
                        'shipper' : shipper, 
                        'phonenum1' : phonenum1, 
                        'email1' : email1, 
                        'address1' : address1, 
                        'consigner' : consigner, 
                        'phonenum2' : phonenum2, 
                        'email2' : email2, 
                        'address2' : address2, 
                        'lost' : lost, 
                        'damaged' : damaged, 
                        'shortshipped' : shortshipped, 
                        'concealed' : concealed, 
                        'claimval' : claimval},
                  dataType: "text",
                  beforeSend: function(){
                    loadingScreen('Proccessing..', 'Please wait.');
                  },
                  success: function(data){  
                    console.log(data); 
                    Swal.fire({
                          type: 'success',
                          title: 'Success',
                          text: 'Claim Application successfully submitted!',
                      });
                    document.querySelector(".openForm").style.display = "none";

                  },
                  error: function(XMLHttpRequest, textStatus, errorThrown) {
                    Swal.fire({
                        type: 'info',
                        title: 'Failed!',
                        // text: 'cancelled!',
                    });
                  }
              });
            }
            else {
                Swal.fire({
                    type: 'info',
                    title: 'Cancelled!',
                    // text: 'cancelled!',
                });
            }
        });

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

});


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