<!-- <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>
  .input-lg {
      height: 46px;
      padding: 7px 18px;
      font-size: 18px;
      line-height: 1.3333333;
      border-radius: 6px;
      border: 1px solid #ccc;
  }
</style>
   <div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Notifications:<i class="fa fa-bell"></i><span class="badge badge-light">1</span>
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
          <table>
            <tbody> <?php 
                    if($claims){
                      $no=0;
                      foreach($claims as $claim) 
                      {
                        $no++; 
                ?>  

                <tr>
                    <!-- <td><//?php echo $no ?></td> -->
                    <td><i class="fa fa-bullseye"></i> <?php echo $claim->message; ?></td>  
                                        
                </tr> 

                <?php }
                    }else{?>
                        <tr>
                          <td>No Available Claims</td>
                        </tr> 
                <?php }?>
             
            </tbody>
          </table>
      </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", "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]);
          });

          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-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 = "";
        // docu=[];
        $.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" class="input-lg" size="20" /> ';
            formInput+= "          </div>"; 
            formInput+= "          <div class='col-sm-1'></div>";
            formInput+= "      </div>";

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

  $("#action-upload").on('click', function() { 
    // alert(data[1]);  
    // console.log(data);
     $('#Modal').modal('toggle');
  });

  $("#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>
