@extends('front.patient.inner-layout.app')
@section('page_tab_title' ,"Check out")
@section('content')
<form action="{{route('patient.show.storeOrder')}}" method="POST" id="checkout-form" name="checkout-form">
@csrf
    <div data-url="{{ route('patient.product.index') }}" class="page-content dashboard-wrapper mdashboard-wrapper space-bttm-n small-sc-relative redirect">
         <div class="row align-items-center">
            <div class="col-lg-6 col-md-6 col-sm-4">
               <h1 class="page-title eagle-font font-400"> <span class="arca-font">My</span> Products</h1>
            </div>
            @include('front.patient.inner-layout.header')
         </div>
         <div class="brdr-bttm mb-0"></div>
         <div class="mydashboard-upcoming-area upcoming-appintarea">
            <div class="row">
               <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 mt-20 order-2 order-xl-1">
                <a href="{{ route('patient.product.index') }}" class="cursor-pointer text-green mt-0 mb-4 d-none d-xl-block">
                  <img src="{{asset("assets/images/back-img.png")}}" alt="" class="img-fluid ml-0 mr-1"> Back </a>
               <h2 class="sub-title mb-30">Shipping address</h2>

               <div class="shipping-form comm-form">
                  <div class="row">
                    <div class="col-lg-6 col-md-6">
                      <div class="form-group">

                        <label>First name <span class="required-field">*</span></label>
                        <input required type="text" value="{{ $client->name ?? "" }}" id="shipping_first_name" name="shipping_first_name" class="form-control" placeholder="First name">
                      </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                      <div class="form-group">
                        <label>Last name <span class="required-field">*</span></label>
                        <input required type="text" value="{{ $client->last_name ?? "" }}" id="shipping_last_name" name="shipping_last_name" class="form-control" placeholder="Last name">
                      </div>
                    </div>
                  </div>
                  <div class="mb-20"></div>
                  <div class="row">
                    <div class="col-lg-12 col-md-12">
                      <div class="form-group">
                        <label>Address <span class="required-field">*</span></label>
                        <input required type="text" name="address1" class="form-control" placeholder="Address" value="{{ $client->address ?? "" }}">
                      </div>
                      {{--  <div class="form-group">
                        <input required type="text" name="address2" class="form-control" placeholder="Address 2">
                      </div>
                      <div class="form-group">
                        <input required type="text" name="address3" class="form-control" placeholder="Address 3">
                      </div>  --}}
                    </div>
                  </div>
                  <div class="mb-20"></div>
                  <div class="row">
                    <div class="col-lg-4 col-md-4">
                      <div class="form-group">
                        <label>Country <span class="required-field">*</span></label>
                        <input required name="country" id="country" type="text" class="form-control" placeholder="Country">
                      </div>
                    </div>
                    <div class="col-lg-4 col-md-4">
                      <div class="form-group">
                        <label>State/territory <span class="required-field">*</span></label>
                        <input required name="state" id="state" type="text" class="form-control" placeholder="State/territory">
                      </div>
                    </div>
                    <div class="col-lg-4 col-md-4">
                      <div class="form-group">
                        <label>Postcode <span class="required-field">*</span></label>
                        <input required name="postcode" id="postcode" type="text" class="form-control" placeholder="Postcode">
                      </div>
                    </div>
                  </div>
                  <div class="shipping-method-area">



                  <h2 class="sub-title mb-30 mt-30">Shipping method</h2>
                  <div class="popup-more-filter">
                     <div class="popup-label ajex_shipping_method">
                        <div class="row">
                           <div class="col-lg-12 col-md-12">
                               @if(count($shipping_method))
                                    @foreach($shipping_method as $key => $value)
                                    <div class="custom-control custom-checkbox">
                                        <input
                                        @if($loop->iteration==1)
                                           checked
                                        @endif

                                        data-charge="{{ $value['shiping_cost'] ?? "" }}" type="radio" class="custom-control-input shipping_charge" name="shipping_method" id="post{{ $loop->iteration }}" value="{{ $value['shipping_method'] ?? "" }}" >
                                        <label class="custom-control-label" for="post{{ $loop->iteration }}">{{ $value['title'] ?? "" }}</label>
                                        <span class="textprice">$ {{ $value['shiping_cost'] ?? "" }}</span>
                                     </div>

                                    @endforeach
                               @endif
                              {{--  <div class="custom-control custom-checkbox">
                                 <input data-charge="{{ $shipping_regular ?? "" }}" type="radio" class="custom-control-input shipping_charge" name="shipping_method" id="post1" value="female" >
                                 <label class="custom-control-label" for="post1">Regular post</label>
                                 <span class="textprice">$ {{ $shipping_regular ?? "" }}</span>
                              </div>
                              <div class="custom-control custom-checkbox">
                                 <input data-charge="{{ $shipping_express ?? "" }}" type="radio" class="custom-control-input shipping_charge" name="shipping_method" id="post2" value="female" >
                                 <label class="custom-control-label" for="post2">Express post</label>
                                 <span class="textprice">$ {{ $shipping_express ?? "" }}</span>
                              </div>
                              <div class="custom-control custom-checkbox">
                                 <input data-charge="0.00" type="radio" class="custom-control-input shipping_charge" name="shipping_method" id="post3" value="female" checked>
                                 <label class="custom-control-label" for="post3">Pick up from {{ $shipping_pickup ?? "" }}</label>
                                 <span class="textprice"></span>
                              </div>  --}}
                           </div>
                        </div>
                     </div>
                     <h2 class="sub-title mb-30 mt-30">Special instructions</h2>
                     <div class="form-group">
                      <p class="d-none"><span class="input-wrap"><span class="width-machine" aria-hidden="true"></span><input class="input" value="99" type="number"></span></p>
                      <textarea  name="instruction" id="instruction" class="increase-textarea" placeholder="Special instructions"></textarea>
                      </div>
                     <!-- <div class="row align-items-center mt-20">
                          <div class="col-md-4 col-4 text-left">
                             <a href="{{ route('patient.product.index') }}" class="cursor-pointer text-green mt-0"><img
                                 src="{{asset("assets/images/back-img.png")}}"
                                 alt="" class="img-fluid ml-0 mr-1"> Back </a>
                          </div>
                          <div class="col-md-8 col-8 text-sm-right mt-sm-0">
                              <input type="submit" name="payment" id="payment" value="Continue to payment"  class="cursor-pointer continue-txt appointment-btn green-lg-btn mb-0 float-right text-white">

                          </div>
                     </div> -->
                  <!-- <ul class="popup-label">
                     <li><div class="custom-control custom-checkbox">
                           <input type="radio" class="custom-control-input" name="gender" id="female" value="female">
                           <label class="custom-control-label" for="female">Female</label>
                        </div>
                     </li>
                     <li><div class="custom-control custom-checkbox">
                           <input type="radio" class="custom-control-input" name="gender" id="female4" value="female" checked>
                           <label class="custom-control-label" for="female4">Female</label>
                        </div>
                     </li>
                     <li><div class="custom-control custom-checkbox">
                           <input type="radio" class="custom-control-input" name="gender" id="female5" value="female">
                           <label class="custom-control-label" for="female5">Female</label>
                        </div>
                     </li>
                  </ul> -->
                  </div>
                  </div>

               </div>

               </div>
               <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 brdr-left spl-bdr order-1 order-xl-2">
                <div class="row">
                  <div class="col-4">
                    <a href="{{ route('patient.product.index') }}" class="cursor-pointer text-green mt-4 mb-4 d-xl-none">
                  <img src="{{asset("assets/images/back-img.png")}}" alt="" class="img-fluid ml-0 mr-1"> Back </a>
                  </div>
                  <div class="col-8">
                    <div class="text-right payment-btn-main">
                    <input type="submit" name="payment" id="payment" value="Continue to payment"  class="cursor-pointer continue-txt appointment-btn green-lg-btn text-white">
                  </div>
                  </div>
                </div>


                @if(isset($products) && count($products))
                  <div class="customscroll mt-30 shipping-productbox-cartarea mt-0 mt-xl-4">
                     <div class="mCustomScrollbar">
                    @foreach($products as $key => $value)
                     <div class="productbox-cartarea mainproduct">
                        <div class="row align-items-center">
                           <div class="col-lg-7 col-md-7 col-sm-7">
                              <div class="media">
                                 <img src="{{$value['image'] }}" class="mr-3 mCS_img_loaded" alt="...">
                                 <div class="media-body">
                                 <h5 class="mt-0 mb-0">{{$value['product_name'] ?? "" }}</h5>
                                 </div>
                              </div>
                           </div>
                           <div class="col-lg-3 col-md-3 col-sm-3">
                           <div class="addcart-rarea">
                              <table>
                                 <tbody>
                                    <tr>
                                       <td>Qty: </td>
                                       {{-- <td class="customdroppdown gray-brdr line-dropdown">
                                       <div class="form-group marg-bttm mb-0 online-dropdown select-dropdown avalable-drop hide-first-child">
                                          <select id="mounth50" class="form-control box-shadow-none">
                                             <option>1 </option>
                                             <option>5</option>
                                             <option>6 </option>
                                             <option>4</option>
                                             <option>2 </option>
                                             <option>3 </option>
                                          </select>
                                       </div>
                                       </td> --}}

                                       <td class="customdroppdown gray-brdr line-dropdown">
                                        <div class="form-group marg-bttm mb-0 online-dropdown select-dropdown avalable-drop hide-first-child">
                                           <input
                                            type="text"
                                            value="{{$value['quantity'] ?? ""}}"
                                             class="form-control wid-60 cart_qty"
                                             data-practitioner_id="{{ $value['practitioner_id'] ?? "" }}"
                                             data-product_id="{{ $value['prescribed_product_id'] ?? "" }}"
                                             data-repeats_allowed="{{ $value['repeats_allowed'] ?? "" }}"
                                             data-url="{{ route('patient.product.add_cart_checkout') }}"

                                             class="change_qty"
                                             >

                                        </div>
                                     </td>
                                    </tr>
                                 </tbody>
                              </table>
                              </div>
                           </div>
                           <div class="col-lg-2 col-md-2 col-sm-2">
                              <div class="addcart-rarea">
                                 <h5>${{$value['product_price'] ?? "" }}</h5>
                                 <a
                                  data-url="{{ route('patient.product.remove_iteam', $value['cart_id']) }}"
                                  href="javascript:void(0)"
                                  class="text-green remove_iteam"
                                  >Remove</a>
                              </div>
                           </div>
                        </div>
                     </div>
                     @endforeach

                     </div>

                  </div>
                  <div class="subtotoal-pricingarea">
                     <div class="subtotal-pring-area">
                     <div class="row">
                        <div class="col-6">
                        <h6>Subtotal</h6>
                        </div>
                        <div class="col-6 text-right">
                        <h6 >$<span class="sub_total">{{ number_format($total, 2) ?? "0.00" }}</span></h6>
                        </div>
                     </div>
                     </div>
                     <div class="subtotal-pring-area">
                     <div class="row">
                        <div class="col-6">
                        <h6>Shipping</h6>
                        </div>
                        <div class="col-6 text-right">
                        <h6 >$<span class="shipping_total">{{$shipping_method[0]['shiping_cost'] ?? 0.00}}</span></h6>
                        </div>
                     </div>
                     </div>
                     <div class="brdr-bttm"></div>
                     <div class="subtotal-pring-area">
                     <div class="row">
                        <div class="col-6">
                        <h6 class="font-bold">Total</h6>
                        </div>
                        <div class="col-6 text-right">
                        <h6 class="font-bold">$<span class="main_total">{{ number_format($total+$shipping_method[0]['shiping_cost'], 2) ?? "0.00" }}</span></h6>
                        </div>
                     </div>
                     </div>
                  </div>
                 @endif

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



    </form>



    <div class="call-model"  data-target-modal="#showPaymentgatewayCheckoutModal"
      data-url="{{route('patient.product.get_checkout_payment_model')}}"></div>


@endsection


@section('modals')
<div id="load-modal"></div>
@endsection

@section('css')

@endsection

@section('js')
<script src="{{asset('assets/patient/js/checkout/checkout.js')}}"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>

<script>
  $( document ).ready(function() {
      // Dealing with Input width
  let el = document.querySelector(".input-wrap .input");
  let widthMachine = document.querySelector(".input-wrap .width-machine");
  el.addEventListener("keyup", () => {
    widthMachine.innerHTML = el.value;
  });

  // Dealing with Textarea Height
  function calcHeight(value) {
    let numberOfLineBreaks = (value.match(/\n/g) || []).length;
    // min-height + lines x line-height + padding + border
    let newHeight = 20 + numberOfLineBreaks * 20 + 12 + 2;
    return newHeight;
  }

  let textarea = document.querySelector(".increase-textarea");
  textarea.addEventListener("keyup", () => {
    textarea.style.height = calcHeight(textarea.value) + "px";
  });
  });


</script>

@endsection