@extends('frontend.layouts.amp-listing')

@section('title', 'Checkout - ' . app_name())

@section('content')


  <main id="content" role="main" class="main commerce-checkout flex flex-wrap items-start pb3">
    <section class="pt2 pb3 md-px4 md-pt4 md-pb7 col-12 md-col-8 md-px2">
      <h1 class="h3 mb2 px2 acc_shipping_addres">Checkout</h1>
     
     @if(!$data['customer'])
      <div class="col-12">
          <div class="checkout-quick-box">
               <p>
                  <i class="fa fa-user" aria-hidden="true"></i>
                  Returning customer?
                  <a class="Returning" on="tap:my-lightbox"  aria-expanded="true">Click here to login</a>
               </p>
          </div>

             <amp-lightbox id="my-lightbox" layout="nodisplay">
                  <div class="lightbox">
                    <div class="setUpForm">
                      <div class="cansle" on="tap:my-lightbox.close"
                        role="button"
                         >X</div>
                      <p>If you have shopped with us before, please enter your details in the boxes below. If you are a new customer please proceed to the Billing & Shipping section.</p>
                      <form method="post"
                        action-xhr="{{route('frontend.auth.login.post') }}"
                        target="_top">
                         @csrf
                        <input type="text"
                          name="email"
                          placeholder="E-Mail Address"
                          required>
                       
                        <input type="password"
                          name="password"
                          placeholder="password"
                          required>
                        <input type="submit"
                          value="Login"
                          class="button button-primary">
                      </form>
                    </div>
                  </div>
                </amp-lightbox>
            </div>
                    

    @endif


          <div class="card-header" id="acc_shipping_address">
              <h5 class="mb-0">
              <a href=";" class="checkout-headers text-decoration-none" data-toggle="collapse" data-target="#acc_body_shipping_address" aria-expanded="true" aria-controls="collapseOne">
              <i class="fa fa-home" aria-hidden="true"></i> SHIPPING ADDRESS
              </a>
            </h5>
         </div>
         
          <hr class="xs-hide sm-hide mt2 mb1 ml2">
          <div class="px2 mt4 md-mt3">
              
       <div class="flex flex-wrap mxn2">

          <div class="col-12 md-col-6 px2">

                <!-- Start Input -->
              @if(!$data['customer'])
                <div class="ampstart-input inline-block relative m0 p0 mb3 ">
                  <input type="text" value="{{ $data['v_shipping_details']['email']}}" name="
                  email" id="sp_email" class="block border-none p0 m0" placeholder=" Enter Email Address">
                  <label for="email" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"> Email Address</label>
                </div>
                   <div id="div_sp_email" class="alert alert-info d-none mt--10" role="alert"></div>
               @endif
                <!-- End Input-->
          </div>

          <div class="col-12 md-col-6 px2">

                <!-- Start Input -->
                <div class="ampstart-input inline-block relative m0 p0 mb3 ">
                  <input type="text" value="{{ $data['v_shipping_details']['first_name'] }}" name="first-name" id="first-name" class="block border-none p0 m0" placeholder="Enter First name" required >
                  <label for="first-name" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true"> First name</label>
                </div>
                <!-- End Input-->
          </div>
         <div class="col-12 md-col-6 px2">

                  <!-- Start Input -->
                  <div class="ampstart-input inline-block relative m0 p0 mb3 ">
                    <input type="text" value="{{ $data['v_shipping_details']['last_name'] }}" name="last-name" id="last-name" class="block border-none p0 m0" placeholder="Enter Last name" required="">
                    <label for="last-name" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Last name</label>
                  </div>
                  <!-- End Input-->
           </div>
         <div class="col-12 md-col-6 px2">

              <!-- Start Input -->
              <div class="ampstart-input inline-block relative m0 p0 mb3 ">
                <input type="text" value="{{ $data['v_shipping_details']['company']}}" name="company"  class="block border-none p0 m0" placeholder="Enter Company name">
                <label for="address-1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Company:</label>
              </div>
              <!-- End Input-->
         </div>
       <div class="col-12 md-col-6 px2">
            <!-- Start Input -->
            <div class="ampstart-input inline-block relative m0 p0 mb3 ">
              <input type="text" value="{{ $data['v_shipping_details']['address1'] }}" name="address1"  class="block border-none p0 m0" placeholder="Enter Address line 2">
              <label for="address1" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Address 1*</label>
            </div>
            <!-- End Input-->
        </div>
      
       <div class="col-12 md-col-6 px2">
            <!-- Start Input -->
            <div class="ampstart-input inline-block relative m0 p0 mb3 ">
              <input type="text" value="{{ $data['v_shipping_details']['address2'] }}" name="address2"  class="block border-none p0 m0" placeholder="Enter Address line 2">
              <label for="address2" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Address 2*</label>
            </div>
            <!-- End Input-->
        </div>
          
         <div class="col-12 md-col-6 px2">
              <!-- Start Input -->
              <div class="ampstart-input inline-block relative m0 p0 mb3 ">
                <input type="text" value="" name="city" id="city" class="block border-none p0 m0" onchange="get_states(this.value);"  placeholder="Enter Country Name" >
                <label for="city" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Country</label>
              </div>
              <!-- End Input-->
        </div>
       
            @php
                $show_text_field = true;
                if(isset($data['address']))
                {
                    if(is_numeric($data['address']->state))
                        $show_text_field = false;
                }
            @endphp
       
        <div class="col-12 md-col-6 px2">
              <!-- Start Input -->
              <div class="ampstart-input inline-block relative m0 p0 mb3 ">
                <input type="text" value="{{$data['v_shipping_details']['state']}}" name="city" id="city" class="block border-none p0 m0" placeholder="Enter State">
                <label for="city" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">State</label>
              </div>
              <!-- End Input-->
        </div>

    {{--      <div class="col-12 col-12 mb-20">
            {!! Form::label('country', 'Country:') !!}
            {!! Form::select('country', $data['countries'], $data['v_shipping_details']['country'],['class' => 'col-12 md-col-6 px2', 'required' => 'required', 'onchange="get_states(this.value);"', 'placeholder'=>'Select country ...']) !!}
        </div>

        <div class="col-md-6 col-12 mb-20">
            {!! Form::label('state', 'State:') !!}
            <div id="div_state">

                @php
                    $show_text_field = true;
                    if(isset($data['address']))
                    {
                        if(is_numeric($data['address']->state))
                            $show_text_field = false;
                    }
                @endphp

                @if($show_text_field)
                    {!! Form::text('state', $data['v_shipping_details']['state'],  ['required' => 'required', 'placeholder'=>'Enter state ...']) !!}
                @else
                    {!! Form::select('state', $data['states'], $data['v_shipping_details']['state'],['class' => 'col-12 md-col-6 px2', 'required' => 'required', 'placeholder'=>'Enter state ...']) !!}
                @endif

            </div>
        </div>
 --}}
                                                     
       <div class="col-12 md-col-6 px2">
              <!-- Start Input -->
              <div class="ampstart-input inline-block relative m0 p0 mb3 ">
                <input type="text" value="" name="city" id="city" class="block border-none p0 m0" placeholder="City/Region">
                <label for="city" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">City/Region</label>
              </div>
              <!-- End Input-->

        </div>
        <div class="col-12 md-col-6 px2">

            <!-- Start Input -->
            <div class="ampstart-input inline-block relative m0 p0 mb3 ">
            <input type="text" value="" name="postcode" id="postcode" class="block border-none p0 m0" placeholder="Zip / Post Code:">
            <label for="postcode" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Zip/Post Code:</label>
            </div>
            <!-- End Input-->
       </div>
         <div class="col-12 md-col-6 px2">

                <!-- Start Input -->
                <div class="ampstart-input inline-block relative m0 p0 mb3 ">
                  <input type="text" value="" name="phone" id="email" class="block border-none p0 m0" placeholder="Phone">
                  <label for="phone" class="absolute top-0 right-0 bottom-0 left-0" aria-hidden="true">Phone</label>
                </div>
                <!-- End Input-->
         </div>
              </div>
          </div>
          <hr class="xs-hide sm-hide mt2 ml2">
          <!-- <div class="mt2 px2">
            <div class="commerce-checkout-actions">
              <a href="checkout-success.amp.html" class="ampstart-btn ampstart-btn-secondary caps mt3">Continue</a>
            </div>
          </div> -->

           <div class="pt--15">
             <div id="btn_checkout_shipping">
                  <button type="submit" class="btn-black">Continue</button>
             </div>
          </div>

        </section>
            <div class="card-header-shipping" id="acc_shipping_address">
              <h5 class="mb-0">
              <a href=";" class="checkout-headers text-decoration-none" data-toggle="collapse" data-target="#acc_body_shipping_address" aria-expanded="true" aria-controls="collapseOne">
              <i class="fa fa-home" aria-hidden="true"></i> SHIPPING METHOD 
              </a>
            </h5>
         </div>
          <div class="card-header-shipping" id="acc_shipping_address">
              <h5 class="mb-0">
              <a class="checkout-headers text-decoration-none"  on="tap:payment-details" >
              <i class="fa fa-home" aria-hidden="true"></i> Payment Details 

              </a>
            </h5>  
          <amp-lightbox id="payment-details" layout="nodisplay">

                @php
                    if((!empty($data['shipping_details']['email']) && isset($data['shipping_rate'])) || $data['checkout_step'] == '3')
                        $css = '';
                    else
                        $css = 'class="collapse"';
                @endphp

              <div class="lightbox">
                <div class="setUpForm" id="acc_body_payment_form" {!! $css !!}>
                  <div class="cansle" on="tap:payment-details.close"
                    role="button"
                    >X</div>
                    
                  <form method="post"
                    action-xhr="{{route('frontend.process-payment')}}"
                    target="_top">
                     @csrf
                    <input type="text"
                      name="cc_name"
                      placeholder="Name on Card"
                      id="cc_name" 
                      required>

                      <input type="number"
                      name="cc_number"
                      placeholder="Card Number"
                      id="cc_number" 
                      required>

                       <select on="change:AMP.setState({ option: event.value })" data-type="text" id="cc_month" name="cc_month" required>
                          <option value="">Expiry Month</option>     
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option> 
                      </select>

                      <select on="change:AMP.setState({ option: event.value })" data-type="text" id="cc_year" name="cc_year" required>
                          <option value="">Expiry Year</option>     
                          <option value="2020">2020</option>
                          <option value="2021">2021</option>
                          <option value="2022">2022</option>
                          <option value="2023">2023</option>
                          <option value="2024">2024</option>
                          <option value="2025">2025</option>
                          <option value="2026">2026</option>
                          <option value="2027">2027</option>
                          <option value="2028">2028</option>
                          <option value="2029">2029</option>
                          <option value="2030">2030</option> 
                       </select>

                        <input type="number"
                         name="cc_cvv"
                         placeholder="CVC"
                         required>                      
                          <div class="term-block">
                            <input type="checkbox"
                              id="terms"
                              name="terms"
                              value="Y" @if(session()->get('move_to') == 'acc_payment_form') checked="checked" @endif >
                          </div>
                            <label for="animal1">I’ve read and accept the terms & conditions</label>
                                      
                        <input type="submit"
                           value="PLACE ORDER"
                           class="button button-payment"  id="btn_place_order" >
                     </form> 
                  </div>
                </div>
             </amp-lightbox>
        </div>

      <div class="col-lg-4">
         <div class="row">
            <div class="col-12">
               <div class="checkout-cart-total">
                  <p class="checkout-title">ORDER REVIEW</p>
                  <h4>Product <span>Total</span></h4>
                  <ul>
                    
                          @php
                                $sub_total = 0;
                                $bogo_discount = 0;
                            @endphp
                            @foreach($data['cart'] as $cart)

                                @php
                                    //$sub_total += $cart->getPriceWithConditions();
                                    $item_price = $cart->getPriceWithConditions();
                                    $total_price = $cart->getPriceSumWithConditions();

                                    if($cart->bogo_free)
                                    {
                                        $total_price_discount = $cart->bogo_free * $item_price;
                                        $bogo_discount += $total_price_discount;
                                        $talal_price_after_bogo = $total_price - $total_price_discount;
                                    }

                                    if($cart->bogod_count)
                                    {
                                        $discounted_price = ($item_price * $cart->bogod_percent) / 100;
                                        $total_price_discount = $cart->bogod_count * $discounted_price;
                                        $bogo_discount += $total_price_discount;
                                        $talal_price_after_bogo = $total_price - $total_price_discount;
                                    }

                                    $sub_total += $total_price;
                                     @endphp
                                            <li>
                                                  <span class="left">
                                                      {{ $cart->name }}<br>&bull; <em>{{ $cart->attributes->sku }} &nbsp;
                                                      ({{ $cart->quantity }})
                                                          @if($cart->bogo_free)
                                                              <br> <small class="red-text">{{ $cart->bogo_free }} free @if($cart->bogo_free > 1) items @else item @endif</small>
                                                          @elseif($cart->bogod_count)
                                                              <br> <small class="red-text"> {{ $cart->bogod_percent }}% discount on {{ $cart->bogod_count }} @if($cart->bogod_count > 1) items @else item @endif</small>
                                                      @endif
                                                  </span>
                                              @if($cart->bogo_free || $cart->bogod_count)
                                                  <span class="right">${{ number_format($talal_price_after_bogo, 2) }}</span>
                                                  {{--<small class="right red-text">{{ $cart->bogo_free }} free @if($cart->bogo_free > 1) items @else item @endif</small>--}}
                                              @else
                                                  <span class="right" @if($cart->bogo_free || $cart->bogod_count) class="old-price" @endif>${{ number_format($cart->getPriceSumWithConditions(), 2) }}</span>
                                              @endif
                                          </li>
                                  @endforeach                     
                             </ul>

                          @php
                            $discount = 0;

                            if(request()->session()->get('ses_coupon'))
                            {
                                $coupon = request()->session()->get('ses_coupon');

                                if($coupon['type'] == 'amount')
                                {
                                    $discount = $coupon['value'];
                                }
                                else
                                {
                                    $discount = ($sub_total * $coupon['value']) / 100;
                                }
                            }

                            if($bogo_discount)
                            {
                                $discount += $bogo_discount;
                            }

                            if( request()->session()->get('ses_shipping_rate') )
                                $shipping_rate = request()->session()->get('ses_shipping_rate');
                            else
                                $shipping_rate = 0;

                            $grand_total = ($sub_total + $shipping_rate) - $discount;

                            session()->put('ses_grand_total', $grand_total);
                        @endphp

                          <em>
                       <em>
                        <p>Sub Total <span>${{ number_format($sub_total, 2) }}</span></p>
                        <p>Discount <span>${{ number_format($discount, 2) }}</span></p>
                        <p>Shipping Fee <span id="sp_shipping_fee">{{ $data['shipping_rate'] ?? "$0.00" }}</span></p>
                        <p>Grand Total <span id="sp_grand_total">${{ number_format($grand_total, 2) }}</span></p>
                     </em>
                  </em>
               </div>
               <em><em>
               </em></em>
            </div>
            <em><em>
            </em></em>
         </div>
         <em><em>
         </em></em>
      </div>

  </main>
 
    {{--   @push('after-scripts')
        <script>
            @if($data['shipping_details']['country'] != '')
            $(function(){
                get_states($('#country').val(), '{{ $data['shipping_details']['state'] }}');
            });
            @endif
            @if(session()->get('move_to'))
            move_page_to('{{ session()->get('move_to') }}');
            @endif
        </script> --}}
        <!-- CLeave JS -->
   {{--      <script src="static/assets/js/cleave.min.js"></script>
    @endpush --}}

  @endsection