@extends('layouts.welcomelayouts.app')

@section('title')
<title>Payment - {{$appSetting->h1}} | {{$appSetting->slogan}}</title>
@endsection

@section('SEO')
<meta name="description" content="{!!$appSetting->meta_description!!}">
<meta name="keywords" content="{{$appSetting->meta_keyword}}">
<meta property="og:title" content="{{$appSetting->h1}} {{$appSetting->slogan}}">
<meta property="og:description" content="{!!$appSetting->meta_description!!}">
<meta property="og:image" content="{asset($appSetting->logo())}}">
<meta property="og:url" content="{{route('welcome.checkout')}}">
@endsection

@push('css')
<style>
    .table-bordered td, .table-bordered th {
        padding: 5px;
    }

    .mybalanetotal {
    border: 1px solid #eaeded;
    padding: 10px;
    text-align: center;
    }
    .mybalanetotal p {
    padding: 10px;
    margin: 0;
    background: #eaeded;
    }
    .mybalanetotal h6 {
    font-weight: bold;
    margin: 0;
    padding: 5px;
    }
    .mybalanetotal span {
    font-size: 50px;
    font-weight: bold;
    }

@media only screen and (max-width: 770px) {
    .table-bordered td, .table-bordered th {
        font-size: 12px;
        padding: 2px 5px;
    }
}
    
</style>
@endpush

@section('contents')

<div class="row" style="background: #ffffff;margin: 0;">
  <div class="col-md-2 hidemobiletopsidebar" style="padding: 0;">
    @include('layouts.welcomelayouts.topsidebarmenu')
  </div>
  <div class="col-md-10">
   <p style="margin: 0;cursor: pointer;padding: 5px;"><a href="{{ route('welcome.shoppingcart') }}" style="text-decoration: none;color: #03A9F4;">Cart View <i class="fa fa-angle-double-right" aria-hidden="true"></i></a> Shipping & Billing <i class="fa fa-angle-double-right" aria-hidden="true"></i><span style="color: #cecece;"> Complete</span></p>
  </div>
</div>

<div class="fullcartdiv cart-all-div">
    <div class="row" style="margin:0;">
    <div class="col-md-8 cart-table-div">
    <div class="cart-table-items-div">
    @include('alerts.alerts')

    <table class="table table-bordered">
<tbody>
  <tr>
  <th>Products</th>
  <th width="15%">Image</th>
  <th width="20%">QTY</th>
  <th width="15%">Total</th>
</tr>
@foreach($order->items as $item)
<tr">
  <td style="">{{ $item->product_name }}<br>BDT {{ $item->final_price }}</td>
  <td style="text-align: center;"><img src="{{ route('imagecache', [ 'template'=>'ppsm','filename' => $item->product->usliveFi() ]) }}" width="" alt=""></td>
  <td style="text-align: center;">
    
    <span class="qtyitem ">{{ $item->total_quantity }}</span>
  
  </td>
  <td style="text-align: center;">BDT <span class="">{{ $item->product->final_price * $item->total_quantity }}</span></td>

</tr>
@endforeach
</tbody>
</table>


            
    </div>
</div>
<div class="col-md-4 cart-table-totals">
    <div class="cart-table-totals-div">
      <p style="font-weight: bold;">YOUR ORDER CODE: #{{ $order->id }} ({{ ucfirst($order->payment_status) }})</p><hr>

      
        <table class="table table-bordered">
            <tbody>
            <tr>
                <th>SubTotal</th>
                <td style="text-align: right;">BDT <span class="cartTotalPrice">{{ $order->final_price }}</span></td>
            </tr>
            <tr>
                <th>Delivery Charge</th>
                <td style="text-align: right;">BDT <span class="cartTax">{{ $order->delivery_cost }}</span></td>
            </tr>
            <tr>
                <th>Tax/Vat: (0 %)</th>
                <td style="text-align: right;">BDT <span class="cartTax">0</span></td>
            </tr>
            <tr>
                <th>Discount </th>
                <td style="text-align: right;">BDT <span class="cartTax">{{ $order->coupon_discount }}</span></td>
            </tr>
            <tr>
                <th>Grand Totals</th>
                <td style="text-align: right;">BDT <span class="grandTotalPrice">{{ $order->grand_total }}</span></td>
            </tr>
        </tbody>
        </table>
        

<div>
    <center>
        <p style="margin: 0;padding: 5px;background: #232f3e;color: white;font-size: 20px;">Payment Method</p>
    </center>
    <div>
      <p style="margin: 0;padding: 10px 0;font-size: 18px;font-weight: bold;">Select Payment Method</p>



      <!-- Nav pills -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#online">Online Payment</a>
  </li>


  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#balance">My Wallet</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#hc">Hand Cash</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active bg-light" id="online">
    
    
    <div class="p-5">

       <button class="btn btn-primary" id="sslczPayBtn"
        token="{{ $order->id }}"
        postdata=""
        order="{{ $order->id }}"
        endpoint="/pay-via-ajax"> Pay Online Now
        </button>
        
    </div>
        
       

      </div>



  <div class="tab-pane container fade" id="balance">


    <div class="p-3 bg-light">
      
      <div class="mybalanetotal">
          <p>My Balance Total (BDT)</p>
          <span>{{ Auth::user()->balance ?: 0.00 }}</span>


          @if(Auth::user()->balance > $order->grand_total)

          <br>

      <a class="btn btn-primary btn-xs text-center" href="{{ route('user.payFromWallet', $order) }}">Pay Now From Your Wallet</a>

      @else

      <br>

      <button class="btn btn-sm btn-warning">You have no enough balance</button> <br>

      <a class="btn btn-link" href="{{ route('user.myBalance') }}">Add Balance</a>

      @endif

      </div>



    </div>


   </div>
  <div class="tab-pane container fade" id="hc">

    <div class="p-5 bg-light">
      
      <a class="btn btn-primary btn-xs text-center" href="{{ route('user.cashOnDelivery',$order) }}">Cash on Delivery</a>

    </div>
    

  </div>
</div>


</div>
</div>

</div>
</div>
</div>
</div>

<br> 



@endsection


@push('js')


<script>
    
    $(function(){
        

    
    });
</script>


{{-- <script>
  //for sandbox
    (function (window, document) {
        var loader = function () {
            var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0];
            script.src = "https://sandbox.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7);
            tag.parentNode.insertBefore(script, tag);
        };

        window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
    })(window, document);
</script> --}}


<script>
    (function (window, document) {
        var loader = function () {
            var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0];
            script.src = "https://seamless-epay.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7);
            tag.parentNode.insertBefore(script, tag);
        };
    
        window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
    })(window, document);
</script>

@endpush