<!-- <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>-->
<div class="row">
  <!-- <div class="col-lg-12" style="padding:0px;margin:0px;"> -->
  <div class="col-lg-5" style="padding:10px;margin:0px;">
    <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-search"></i> Manage Claim</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">
            <thead>
                <tr>
                    <th>Ref#</th>
                    <th>Date</th>
                    <th>Claim</th>   
                    <th>Claim Type</th>
                    <th>Status</th>
                </tr>                  
            </thead>
            <tbody>
                <?php 
                    if($claims){
                      $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 }
                    }else{?>
                        <tr>
                          <td>No Available Claims</td>
                        </tr> 
                <?php }?>
            </tbody>
        </table>
    </div>
  </div>


      <div class="col-lg-7" style="padding:10px;margin:0px;">      
        <div class="openForm" id="myForm">
            <form action="#" class="form-container">
              <div class="box-header">
                <p><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-6">
                    <label for="inputEmail4">Email</label>
                    <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                  </div>
                  <div class="form-group col-md-6">
                    <label for="inputPassword4">Password</label>
                    <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputAddress">Address</label>
                  <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                </div>
                <div class="form-group">
                  <label for="inputAddress2">Address 2</label>
                  <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                </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-group">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="gridCheck">
                    <label class="form-check-label" for="gridCheck">
                      Check me out
                    </label>
                  </div>
                </div>
                <div class="btn-ground pull-right">
                  <button type="submit" id="action-submit" class="btn btn-primary">Submit</button>
                  <button type="button" class="btn" data-toggle="modal" data-target="#attachDocument">Attach Documents</button>
                  <button type="button" id="action-cancel" class="btn cancel">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 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="action-upload">Upload Documents</button>
                </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>
  // $("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", " 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]);
          });

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

  // document.querySelector(".openFormButton") .addEventListener("click", openForm);
  //document.querySelector(".btn-danger").addEventListener("click", closeForm);
  // function openForm() {
  //     // var refno = document.getElementById('refno').value;
  //     // var refno = $('#refno').val();
  //     // var refno2 = $(this).attr('refno');
  //     // alert(refno2);
  //     // alert(data[1]);
  //     $('.refno2').text(data[1]);   
  //     document.querySelector(".openForm").style.display = "block";
  //  }

  $("#action-manage").on('click', function() { 
      $('.refno2').text(data[1]);   
      document.querySelector(".openForm").style.display = "block";
  });


  $("#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-upload").on('click', function() { 
    alert(data[1]);  
  });

  $("#action-submit").on('click', function() { 
    alert(data[1]);  
    document.querySelector(".openForm").style.display = "none";
  });


   $(document).ready(function() {
      $('#my-table').DataTable( {
          "columnDefs": [
              {
                  "render": function ( data, type, row ) {
                      return data +' ('+ row[3]+')';
                  },
                  "targets": 0
              },
              { "visible": false,  "targets": [ 3 ] }
          ]
      } );
  } );


  // $('#my-table').on( 'click', 'tbody tr', function () {
  //   alert(1);
  // });
  // $(document).ready(function(){
  //   $("#my-table").on("click", "tbody tr", function(e) {
  //     var name = $(this).find("td").first().text();
  //     alert(name);
  //   });
  // });

 
// $(document).ready(function(e) {
//   var header = <//?=$header?>;
//   var rows = <//?=$rows?>;
//   var options= <//?=$options?>;

//   options.columns = header;

//   $('#my-table').dbTable(options,rows);


// });
});


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