<!-- <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> -->

<!--<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:40px;
      width: 90%;
      height: 500px; 
      padding: 5px;
    }

    .form-row, .form-group{
      padding: 8px;
    }
    /* .modal-body{
      background-color:#4db6ac; 
    } */
    .modal-header{
      background-color:#515357;
    }
    .modal-title{
      color:#D2F4FF;
    }
    .up{
      font-weight: bold;
      display: inline-block;
    }
  #fileElem{
    text-align: center;
    margin-left: 190px;
  }
  #progress-bar{
    text-align: center;
    margin:;
    width:100%;
  }
    
    
  
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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 class="container">
              <!-- <div class="row"> -->

                <?php if(!$claims){
                ?>
                  <div class="col-md-4">
                      <div class="thumbnail">
                          <div class="caption">
                            <h3><a href="#">No Available Claims</a></h3>
                          </div>
                        <div class="space-ten"></div>
                      </div>
                  </div>
                <?php  
                  }else{
                    foreach($claims as $claim){          
                ?>
                    <div class="row">
                      <div class="col-md-4">
                          <div class="thumbnail">              
                              <div class="box-header"><p>Ref#<?=$claim->refno?></p></div>                
                              <div class="caption">
                                <h3><a href="#"><?=$claim->name?></a></h3>
                                <p><?=date("m/d/Y", strtotime($claim->date_added))?></p>   
                              </div>
                              <div class="btn-ground text-center">
                                  <button type="button" class="btn btn-primary openFormButton" onclick="openForm()"><i class="fa fa-search"></i> Manage Claim</button>
                                  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#quick_view"><i class="fa fa-search"></i> Quick View</button>
                              </div>
                            <div class="space-ten"></div>
                          </div>
                      </div>  
                    </div>
                <?php 
                    } 
                  }
                ?>  
          </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>Test Claim 1</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" class="btn btn-primary">Submit</button>
                  <button type="button" class="btn" data-toggle="modal" data-target="#attachDocument">Attach Documents</button>
                  <button type="button" class="btn cancel" onclick="closeForm()">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">Upload Documents</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 class="upload">
                      <div class="upload-files">
                        <header class="header">
                        <p class="p">
                          <i class="fa fa-cloud-upload" aria-hidden="true" class="i"></i>
                          <span class="up">up</span>
                          <span class="load">load</span>
                        </p>
                        </header>
                        <br>
                        <div class="body" id="dropArea">
                        <i class="fas fa-file-upload"></i>
                        <p class="pointer-none"><b>Drag and drop</b> files here <br /> or choose file to begin the upload</p>
                            <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
                        <br>
                        </div>
                        <progress id="progress-bar" max=100 value=0></progress>
                        <footer>
                        <div class="divider">
                          <!-- <span><AR>FILES</AR></span> -->
                        </div>
                        <div class="list-files">
                          <!--   template   -->
                        </div>
                            <!-- <button class="importar">UPDATE FILES</button> -->
                        </footer>
                      </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" >Upload</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  
                  <!-- <button type="button" class="btn btn-primary">Upload Documents</button> -->
                </div>
              </div>
            </div>
    </div>

<script>
 
$(document).ready(function() {
  document.querySelector(".openFormButton") .addEventListener("click", openForm);
  document.querySelector(".btn-danger").addEventListener("click", closeForm);
  function openForm() {
      document.querySelector(".openForm").style.display = "block";
   }
  function closeForm() {
      document.querySelector(".openForm").style.display = "none";
   }

});
</script>

  
</body>
</html>
