<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
<form>

<div class="row">
  <div class="col-7">
    <div class="pearCard"> 
      <div class="pearCardHeader .pearGreen">Fill in to submit </div>
      <div class="padding16">
        <!-- from group start -->
        <div class="form-group row">
          <label for="example-text-input" class="col-2 col-form-label">Store name</label>
          <div class="col">
            <input class="form-control" type="text" ng-model="storename" placeholder="e.g. Three" id="example-text-input">
          </div>
        </div>

        <div class="form-group row">
          <div class="col">
            <div class="searchList">
                <ul class="list-group" ng-repeat="store in storeList">
                    <li class="list-group-item ">{{store.store_id}}</li>       
                    <li class="list-group-item ">{{store.store_name}}</li>
                    <li class="list-group-item ">{{store.store_address}}</li>
                </ul>
            </div>

          </div>
        </div>

        <div class="form-group row">
          <label for="example-search-input" class="col-2 col-form-label">amount</label>
          <div class="col">
            <input class="form-control" type="decimal" ng-model="amount" placeholder="e.g. 6.66" id="example-search-input">
          </div>
        </div>

        <div class="form-group row justify-content-center">
          <label for="example-email-input" class="col col-form-label">Image(Click 'Add' button or Drag an image into the box below)</label>
        </div>

        <div class="row">
          <div class="col">
            <input type='file' ng-model ="receiptPhoto" accept="image/*"
            onchange="angular.element(this).scope().getImage(this)"
            />
          </div>
        </div> 

        <div class="row"> 
          <div class="col">
            <div class="dragImageBox">
              <div class="row no-gutters">
                <img class="col-2 thumb" ng-src="{{receiptPhotoSrc}}"/>
                <!-- image details, progress bar etc. -->
                <div class="col-5 thumb">
                  filename:{{receiptPhoto.filename}}<br> filesize:{{receiptPhoto.filesize}}<br>  
                </div>
              </div> 
            </div>
          </div>    
        </div>

        <div class="row">
          <div class="pearCardFooter"> 
            <button type="button" ng-click="uploadReceipt()" class="btn btn-primary"> Submit </button>
            <button type="button" class="btn btn-danger"> Reset </button>
          </div>
        </div>


        <!-- from group end -->
      </div>
      <!-- PADDING -->
    </div>
    <!-- pear card -->
  </div>  
  <!-- first col-5 -->

  <div class="col"> 
    <div class="pearCard"> 
      <div class="pearCardHeader pearOrange"> Pending receipt
        <span class="badge badge-info">5 </span> </div>
        <!-- content start here -->
        <table class="table">
          <thead> 
            <tr>  
              <th>#</th>
              <th>When</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody> 
            <tr ng-repeat="receipt in pending_list">
              <td>{{$index + 1}}</td>
              <td>{{receipt.submitted_time}}</td>
              <td>{{receipt.submitted_amount}}</td>
            </tr>
          </tbody>
        </table>
    </div>
  </div>
  <!-- second col -->
</div>
<!-- first row-->



</main>