@extends('master')
@section('content')
<style>
 thead,
    tbody tr {
      min-width:200px !important;
    }
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    thead,
    tbody tr {
      min-width:700px !important;
    }
}


</style>
<div id="wrapper">
  <div id="page-wrapper">
    <div class="container-fluid">
      <div class="white-box">
        <div class="row">
              <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 pull-left">
                <ol class="breadcrumb" style="background-color:white">
                   <li><a href="{{ URL::to('admin/facilitylist') }}">Home</a></li>
                   <li><a href="{{ URL::to('admin/addpaymentlist') }}">Add Payment</a></li>
                   <li class="active">Order Review</li>
                </ol>
              </div>                    <div class="panel panel-default">
                    <div class="panel-body" style="padding-top:0px;">
                   
                      <div class="row">
                        <div class="col-md-6 col-md-offset-3 col-sm-12 col-xs-12 form-box ">
                          <div class="f1-steps">
                                 <div class="f1-progress">
                                     <div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 100%;"></div>
                                 </div>
                                 <div class="f1-step activated ">
                                    <div class="f1-step-icon"><i class="fa fa-check"></i></div>
                                    <p>Selection</p>
                                 </div>
                                 <div class="f1-step text-center activated">
                                    <div class="f1-step-icon"><i class="fa fa-usd"></i></div>
                                    <p>Payment Method</p>
                                 </div>
                                  <div class="f1-step text-right active">
                                    <div class="f1-step-icon active"><i class="fa fa-check-square-o"></i></div>
                                    <p>Order Review</p>
                                 </div>
                          </div>
                        </div>                 
                      </div>
                   
                     </div>
                  </div>
                  <div class="col-md-12 ">
                  <div class="well"> 
                    <div class="panel-body no-padding">
                       <div class="col-sm-12" style="padding-top:10px">
                          <div class="col-sm-6">
                             <div class="panel panel-primary">
                                <div class="panel-heading" style="margin: none;background-color:#02529B;color:#fff; padding: 15px 25px;">Payment Details</div>
                                <div class="panel-body" style="border:1px solid #979797;padding: 20px 10px;">
                                   <div class="col-md-6">
                                      <span style="color:#00529C;font-size:14px;">Payment Method</span>
                                      <div><b>{{ $details['payment_status'] }} /*********** </b></div>
                                   </div>
                                   <div class="col-md-6">
                                      <span style="color:#00529C;font-size:14px ">Billing Address</span>
                                      <div><b>{{ $details['creditcard_address'] }}, {{ $details['creditcard_city'] }}, {{ $details['creditcard_state'] }}, {{ $details['creditcard_pin'] }}.</b></div>
                                   </div>
                                   &nbsp
                                   <div class="col-md-12">
                                      <span style="color:#00529C;font-size:14px ">Order Tracking Email</span>
                                      <div><b>{{ $details['creditcard_email'] }}</b></div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="col-sm-6" >
                             <div class="panel panel-primary">
                                <div style="margin: none;background-color:#6EB005;color:#fff; padding: 15px 25px;" class="panel-heading">
                                   Order Summary
                                </div>
                                <div class="panel-body table-responsive" style="border:1px solid #979797;padding: 0;">
                                   <table class="table-stripped table-responsive table-bordered" width="100%;" id="table_id">
                                      <thead style="background-color:#B7DDFF;">
                                         <tr style="font-weight: bold;">
                                            <td width="10%">S.no</td>
                                            <td width="15%">FID</td>
                                            <td width="50%">Name</td>
                                            <td width="27%">USSBOA</td>
                                            <td width="15%">MGT</td>
                                         </tr>
                                      </thead>
                                      <tbody style="color: #000; height: 100%;" >
                                                                                  <tr style="">
                                           <td colspan="4" class="text-right" width="75%">Sub Total:</td>
                                            <td width="27%"><span>$ {{ $uss_total }}</span></td>
                                            <td width="15%"><span>$ {{ $mg_total }}</span></td>  
                                         </tr>
                                         <tr style="background-color: orange;">
                                           <td colspan="4" class="text-right" width="75%">Total Amount :</td>
                                            <td width="42%" colspan="4" class="text-center"><span>$ {{ $total }}</span></td>  
                                         </tr>
                                      </tbody>
                                   </table>
                                </div>
                                <hr style="border: none;">
                                <div class="col-md-12 pull-right" style="padding-right: 0px;">
                                   <form method="post" class="col-md-12" style="padding:10px 0;" action="{{url('admin/ordersubmit')}}">
                                      {{csrf_field()}}
                                      <input type="hidden" value="Reccuring" name="Reccuring">
                                      <button type="submit" class="btn btn-primary btn-md col-md-3 pull-right" style="background-color:#0A2E4F;" >Submit Order</button><a href="{{ URL::previous() }}" name="back_button" class="btn btn-default btn-md col-md-3 pull-right" style="background-color:#fff;color:#000;margin:0 10px;" >Back</a>
                                   </form>
                                </div>
                             </div>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<link rel="stylesheet" type="text/css" href="{{ url('css/mui.css') }}" />
<script src="//cdn.muicss.com/mui-latest/js/mui.min.js"></script>
<script>
   $(document).ready(function() {
   
    $('#example1').DataTable();
   
   } );
   
   $(document).ready(function() {
   
    $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
   
        e.preventDefault();
   
        $(this).siblings('a.active').removeClass("active");
   
        $(this).addClass("active");
   
        var index = $(this).index();
   
        $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
   
        $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
   
    });
   
   });


$("#content-1").mCustomScrollbar({enable: false});


   
</script>
<style type="text/css">
  .own-span{
      color: #fff;
      display: inline;
      font-size: 19px;
      font-weight: 700;
      padding: 5px 9px;
      border: 3px solid transparent;
      border-radius: 50%;
      line-height: normal;
      position: relative;
      text-align: center;
      z-index: 2;
      transition: all .1s linear 0s;
   }
</style>
@stop