@extends('layouts.frontLayout.front_design')
@section('content')
<section id="cart_items" class="divider-screen-payment fade-medium">
  <div class="container">
    <div class="shopper-informations">
      <div class="row"></div>
    </div>
    <div class="review-payment">
      <h2>Berblick & bezahlung</h2>
    </div>
    <div class="table-responsive cart_info">
      <table class="table table-condensed">
        <thead>
          <tr class="cart_menu">
            <td class="image">Produkt</td>
            <td class="description"></td>
            <td class="price">Preis</td>
            <td class="quantity">Menge</td>
            <td class="total">Total</td>
          </tr>
        </thead>
        <tbody>
                    @foreach($userCart as $cart)
            <tr>
              <td class="cart_product">
                <a href=""><img style="width:60px;" src="{{ asset('/images/backend_images/product/small/'.$cart->image) }}" alt=""></a>
              </td>
              <td class="cart_description">
                <h4 style="margin-left:10px;"><a href="">{{ utf8_decode($cart->product_name) }}</a></h4>
              </td>
              <td class="cart_price">
                <p>CHF {{ $cart->price }}</p>
              </td>
              <td class="cart_quantity">
                <div class="cart_quantity_button">
                  {{ $cart->quantity }}
                </div>
              </td>
              <td class="cart_total">
                <p class="cart_total_price">CHF {{ $cart->price*$cart->quantity }}</p>
              </td>
            </tr>
                      @endforeach
          <tr>
            <td colspan="4">&nbsp;</td>
                            <td colspan="2">
                <table class="table table-condensed total-result">
                  <tr>
                    <td>Warenkorb total</td>
                    <td> <span>CHF&nbsp</span><span id="warenkorb_total">0.00</span></td>
                  </tr>
                 <tr>
                  <td>Transport total</td>
                  <td> <span>CHF&nbsp</span><span id="transportTotal"></span></td>
                </tr>
                <tr>
                  <td>MwSt 7.7%</td>
                  <td> <span>CHF&nbsp</span><span id="tax"></span></td>
                </tr>
                <tr class="shipping-cost">
                  <td>Rabat (-)</td>
                  <td>
                    @if(!empty(Session::get('CouponAmount')))
                      <span>CHF</span> <span id="gratis">{{ number_format(Session::get('CouponAmount'), 2, '.', '.') }}</span>
                    @else
                      <span>CHF</span> <span id="gratis">0</span>
                    @endif
                  </td> 
                </tr>
                <tr>
                  <td>Preis total</td>
                  <td> <span>CHF&nbsp<span id="grandTotal"></span></span></td>
                </tr>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="card no-radius w-100">
      <div class="row p-5">
        <div class="col-md-4">
          <div class="login-form">
            <h2>Rechnungsadresse</h2>
            <div class="form-group">
              {{ $userDetails->name }}
            </div>
            <div class="form-group">
              {{ $userDetails->lastname }}
            </div>
            <div class="form-group">
              {{ $userDetails->address }}
            </div>
            <div class="form-group">
              {{ $userDetails->state }}
            </div>
            <div class="form-group">
              @if($userDetails->country == "Switzerland")
              Schweiz
              @elseif($userDetails->country == "Germany")
              Deutschland
              @endif
            </div>
            <div class="form-group">
              {{ $userDetails->pincode }}
            </div>
            <div class="form-group">
              +{{ $userDetails->mobile }}
            </div>
          </div>
        </div>
        <div class="col-md-4 col-md-offset-1">
          <div class="signup-form">
            <h2>Lieferadresse</h2>
            <div class="form-group">
              {{ $userDetails->name }}
            </div>
            <div class="form-group">
              {{ $userDetails->lastname }}
            </div>
            <div class="form-group">
              {{ $shippingDetails->address }}
            </div>
            <div class="form-group">
              {{ $shippingDetails->state }}
            </div>
            <div class="form-group">
              @if($userDetails->country == "Switzerland")
              Schweiz
              @elseif($userDetails->country == "Germany")
              Deutschland
              @endif
            </div>
            <div class="form-group">
              {{ $shippingDetails->pincode }}
            </div>
            <div class="form-group">
              +{{ $shippingDetails->mobile }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pull-right mt-30">
      <script>
        var vat = 7.7;
        var totalPrice = $("#warenkorb_total").html();
        var gratis = $("#gratis").html();

        // form that executes on document load which changes the price of every field upon load so we avoid transport
        $(document).ready(function() {
          totalPrice = totalPrice.replace(',', '');
          var temp = $("#couponForm").find( 'select[name="sort"]' ).val();
          formSubmit();
          var post_url = "/cart/apply-couponn/getSession"
          var request_method = "GET"
          var form_data = ''
          $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
          }).done(function(response) {
            console.log(response);
          });    
        });
        
        function formSubmit() {
          var post_url = "  /cart/apply-couponn"
          var request_method = "POST"
          var form_data = 'type=' + $("#couponForm").find( 'select[name="sort"]' ).val();
          $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
          }).done(function(response) {
          	totalPrice = totalPrice.replace(',', '');
            var transportType = response[0];
            var transportName = response[1];
            if(transportType == '150') {
              $("#transportTotal").html('150.00');
              var transportTotalElement = $("#transportTotal").html();
              $("#tax").html((Math.round((((((totalPrice / 1) + (transportTotalElement / 1)) / 100) * vat)) / 0.05) * 0.05).toFixed(2));
              var taxElement = $("#tax").html();
              totalPrice = totalPrice;
              transportTotalElement = transportTotalElement;
              taxElement = taxElement;
              gratis = gratis;
              $("#grandTotal").html(parseFloat(parseFloat(totalPrice) + parseFloat(transportTotalElement) + parseFloat(taxElement) - parseFloat(gratis)).toFixed(2));
              $("#paymentFormGrandTotal").val($("#grandTotal").html())
            } else {
              totalPrice = totalPrice;
              transportTotalElement = transportTotalElement;
              taxElement = taxElement;
              gratis = gratis;
              $("#transportTotal").html(0);
              var transportTotalElement = ($("#transportTotal").html());
              $("#tax").html((Math.round((((((totalPrice / 1) + (transportTotalElement / 1)) / 100) * vat)) / 0.05) * 0.05).toFixed(2));
              var taxElement = $("#tax").html();
              $("#grandTotal").html(parseFloat(parseFloat(totalPrice) + parseFloat(transportTotalElement) + parseFloat(taxElement) - parseFloat(gratis)).toFixed(2));
              $("#paymentFormGrandTotal").val($("#grandTotal").html())
            }
          });
        }

      </script>
      <form class="mb-20" action="/cart/apply-couponn" method="post" id="couponForm">
        @csrf
        <div class="sort-dropdown no-radius input-group">
          <h4 class="shop-text-fix">Versand</h4>
          <select name="sort" required id="#sort" class="form-control no-radius" onchange="formSubmit()">
            <option value="1" disabled="">Wählen Sie einen Transport</option>
            @if(Session::get('shippingMethod') === "auf Aufrage")
              <option value="2" name="shippingMethod" selected>auf Aufrage</option>
            @else
              <option value="2" name="shippingMethod">auf Aufrage</option>
            @endif
            @if(Session::get('shippingMethod') === "Selbstabholung")
              <option value="3" name="shippingMethod" selected>Selbstabholung</option>
            @else
              <option value="3" name="shippingMethod">Selbstabholung</option>
            @endif
            @if(Session::get('shippingMethod') === "Lieferung bis 50km")
              <option value="150" name="shippingMethod" selected>Lieferung bis 50km</option>
            @else
              <option value="150" name="shippingMethod">Lieferung bis 50km</option>
            @endif
          </select>
        </div>
      </form>
      <form name="paymentForm" class="mb-20" id="paymentForm" action="{{ url('/place-order') }}" method="post">{{ csrf_field() }}
        <div class="pull-right">
          <input type="hidden" id="paymentFormGrandTotal" name="grand_total" value="0">
          <div class="payment-options">
            <span>
              <label><strong>Bezahlung:</strong></label>
            </span>
            <span>
              <label><input type="radio" name="payment_method" id="COD" value="COD" checked=""> <strong>Vorauskasse</strong></label>
            </span>
            <br>
            <div class="btn-group mt-10">
              <button type="submit" class="btn btn-success btn-c no-radius" data-toggle="tooltip" rel="tooltip" data-placement="top">Bestellung abschließen</button>
            </div>
          </div>
        </div>
      </form>
      <script>
        $('#paymentForm').submit(function(event) {
          var post_url = "/place-order"
          var request_method = "POST"
          var form_data = "payment_method=COD"
          $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
          }).done(function(response) {
            // console.log(response);
          });    
        });
      </script>
    </div>
  </div>
</section>
@endsection