@extends('front.frontLayout')
@section('title','Checkout')
@section('pagelevelcss')
<style type="text/css">
   .payment-https { color: red; }
</style>
@stop
@section('content')
<section class="checkout-page section-padding" id="checkout-section">
   <div class="container">
      <form class="payment-form" method="post" id="card-payment" action="{{route('payment')}}">
         @csrf
      <div class="row">         
         <div class="col-md-6">
               <!-- <form class="checkout-form" id="billing_details" name="billing_details" method="post" action="{{route('billing.detail')}}"> -->
                  <input type="hidden" name="billing_id" value="{{@($getBillingDetails) ? \App\helpers\helper::encrypt($getBillingDetails->id) : ''}}">
                  <h2 class="h3 mb-3 main-title" style="text-align: center">Billing Details</h2>
                  <div class="row">
                     <div class="form-group col-md-6">
                        <label>First name<span class="error">*</span></label>
                        <input class="form-control" type="text" id="first_name" name="first_name" value="{{@($getBillingDetails) ? $getBillingDetails->first_name : ''}}" placeholder="First Name" readonly>
                     </div>
                     <div class="form-group col-md-6">
                        <label>Last name<span class="error">*</span></label>
                        <input class="form-control" type="text" id="last_name" name="last_name" value="{{@($getBillingDetails) ? $getBillingDetails->last_name : ''}}" placeholder="Last Name" readonly>
                     </div>
                     <div class="form-group col-md-6">
                        <label>Phone<span class="error">*</span></label>
                        <input class="form-control" type="text" id="phone" name="phone" value="{{@($getBillingDetails) ? $getBillingDetails->phone : ''}}" placeholder="Phone" readonly>
                     </div>
                     <div class="form-group col-md-6">
                        <label>Email<span class="error">*</span></label>
                        <input class="form-control" type="text" id="email" name="email" value="{{@($getBillingDetails) ? $getBillingDetails->email : ''}}" placeholder="Email" readonly>
                     </div>
                     <div class="form-group col-md-12">
                        <label>Contact Address</label>
                        <textarea class="form-control" id="cont_address" name="cont_address" rows="4" cols="50" placeholder="Address" readonly>{{@($getBillingDetails) ? $getBillingDetails->address : ''}}</textarea>
                     </div>
                     <div class="form-group col-md-12">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" value="" id="address_checkbox">
                          <label class="form-check-label" for="defaultCheck1">
                            Is the billing address the same as contact address?
                          </label>
                        </div>
                     </div>
                     <div class="form-group col-md-12">
                        <label>Billing Address<span class="error">*</span></label>
                        <textarea class="form-control" id="address" name="address" rows="4" cols="50" placeholder="Address"></textarea>
                     </div>
                     <div class="form-group col-md-6" style="display:none;">
                        <label>Country<span class="error">*</span></label>
                        <input class="form-control" type="text" id="country" name="country" value="{{@($getBillingDetails) ? $getBillingDetails->country : ''}}" placeholder="Country" readonly>
                     </div>
                     <div class="form-group col-md-6">
                        <label>Street<span class="error">*</span></label>
                        <input class="form-control" type="text" id="street" name="street" value="{{@($getBillingDetails) ? $getBillingDetails->street : ''}}" placeholder="Street" readonly>
                     </div>
                     <div class="form-group col-md-6">
                        <label>State<span class="error">*</span></label>
                        <input class="form-control" type="text" id="state" name="state" value="{{@($getBillingDetails) ? $getBillingDetails->state : ''}}" placeholder="State" readonly>
                     </div>
                     <div class="form-group col-md-6">
                        <label>City<span class="error">*</span></label>
                        <input class="form-control" type="text" id="city" name="city" value="{{@($getBillingDetails) ? $getBillingDetails->city : ''}}" placeholder="City" readonly>
                     </div>
                     <div class="form-group col-md-6">
                        <label>Zip code<span class="error">*</span></label>
                        <input class="form-control" type="text" id="zipcode" name="zipcode" value="{{@($getBillingDetails) ? $getBillingDetails->zipcode : ''}}" placeholder="Zipcode" readonly>
                     </div>
                  </div>
                  <div class="text-center mt-2 mb-4" style="display:none;">
                     <button class="btn custom-btn" id="contact-submit" type="submit">Submit</button>
                  </div>
               <!-- </form> -->
         </div>
         <div class="col-md-6">
            <div class="products">
               <h3 class="title">Checkout</h3>
               @php $totale_price = 0; $date_check = 0; @endphp
               @if(count($carts) > 0)
                  @foreach($carts as $value)
                     @if($value->package)
                        <div class="item">
                           <span class="price">{{config('app.covid_currency')}}{{ @($value->quantity) ? number_format($value->package->price * $value->quantity, 2, '.', '') : number_format($value->package->price, 2, '.', '') }}</span>
                           <p class="item-name">{{ $value->package->name }}</p>
                           <p class="item-description">
                              Price: {{config('app.covid_currency')}}{{ number_format($value->package->price, 2, '.', '') }} &nbsp;
                              Category: {{ $value->package->package_category->name }} &nbsp;
                              Qty: {{ $value->quantity }} &nbsp;
                           </p>
                        </div>
                        @php
                           if($value->quantity){
                              $totale_price += ($value->package->price * $value->quantity);
                           } else {
                              $totale_price += $value->package->price;
                           }
                        @endphp
                     @elseif($value->order)
                        <div class="item">
                           <span class="price">{{config('app.covid_currency')}}{{ @($value->quantity) ? number_format($value->order->test_price * $value->quantity, 2, '.', '') : number_format($value->order->test_price, 2, '.', '') }}</span>
                           <p class="item-name">{{ ($value->order->kittype == 'pcr') ? 'RT-PCR' : 'Rapid Antigen test' }}</p>
                           <p class="item-description">
                              Price: {{config('app.covid_currency')}}{{ $value->order->test_price }} &nbsp;
                              Qty: {{ $value->quantity }} &nbsp;
                           </p>
                        </div>
                        @php
                           if($value->quantity){
                              $totale_price += ($value->order->test_price * $value->quantity);
                           } else {
                              $totale_price += $value->order->test_price;
                           }
                        @endphp
                     @endif
                  @endforeach
               @endif
               <div class="total">Total<span class="price">{{config('app.covid_currency')}}{{ number_format($totale_price, 2, '.', '') }}</span></div>
            </div>
            <!-- <div class="card-details">
               <h3 class="title">Card Details</h3>
               <div id="card"></div>
               <div class="row"> -->
                  <!-- <div class="form-group col-sm-7">
                     <label for="card-holder">Card Holder</label>
                     <input id="card-holder" type="text" class="form-control" placeholder="Card Holder" aria-label="Card Holder" aria-describedby="basic-addon1">
                  </div>
                  <div class="form-group col-sm-5">
                     <label for="">Expiration Date</label>
                     <div class="input-group expiration-date">
                        <input type="text" class="form-control" placeholder="MM" aria-label="MM" aria-describedby="basic-addon1">
                        <span class="date-separator">/</span>
                        <input type="text" class="form-control" placeholder="YY" aria-label="YY" aria-describedby="basic-addon1">
                     </div>
                  </div>
                  <div class="form-group col-sm-8">
                     <label for="card-number">Card Number</label>
                     <input id="card-number" type="text" class="form-control" placeholder="Card Number" aria-label="Card Holder" aria-describedby="basic-addon1">
                  </div>
                  <div class="form-group col-sm-4">
                     <label for="cvc">CVC</label>
                     <input id="cvc" type="text" class="form-control" placeholder="CVC" aria-label="Card Holder" aria-describedby="basic-addon1">
                  </div>
                  <input type="hidden" id="billing_address_id" name="billing_address_id" value=""> -->
                  <!-- <div class="form-group col-sm-12 payment-https">
                     <label>Payment can only available on sites that use HTTPS.</label>
                  </div>
                  <div class="form-group col-sm-12 text-center">
                     <button type="submit" class="btn custom-btn proceed-btn" @if(!$getBillingDetails) disabled @endif>{{config('app.covid_currency')}}{{ number_format($totale_price, 2, '.', '') }} Pay</button>
                  </div>
               </div>
            </div>-->
            <div class="card-details">
               <div class="form-group col-sm-12 text-center">
                  <button type="submit" class="btn custom-btn proceed-btn" >Submit</button>
               </div>
            </div>
         </div>
      </div>
      </form>
   </div>
</section>
@endsection
@section('pageleveljs')
<script src="{{asset('backend/js/sweetalert.min.js')}}"></script>
<script src="{{asset('frontend/js/jquery.validate.min.js')}}?v=1.0"></script>
<script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
<script type="text/javascript">
async function paymentsData() {
   const payments = Square.payments('{{ config('app.square_application_id') }}', '{{ config('app.square_location') }}');
   const card = await payments.card({
      // const card = payments.card({
      // "postalCode" : "12345",
      "style": {
       "input": {
         "color": "red",
       },
       // "@media screen and (max-width: 600px)": {
       //     "input": {
       //       "fontSize": "12px",
       //    }
       //  }
      }
   });
   await card.attach('#card');
   if (card.attached == true) {
      // $('.proceed-btn').removeClass("disabled");
      $('.payment-https').hide();
   }
   const form = document.querySelector('#card-payment');
   form.addEventListener('submit', async (event) => {
      event.preventDefault();
      const result = await card.tokenize(); // the card nonce
      // console.log('result==----------------------->', result)
      if (result.status && result.status == "OK") {
         var address = $('#address').val();
         var billing_id = $('#billing_id').val();
         $.ajax({
            type: "get",
            url: '{{route('payment')}}',
            data: {"_token": "{{ csrf_token() }}", 'token': result.token, 'status': result.status, 'amount': '{{$totale_price}}', 'address':address, 'billing_id':billing_id},
            success: function (data) {
               swal(data.message, {
                  icon: data.status,
               });
               setTimeout(function(){ location.href = '{{ route('home') }}'; }, 2000);
               // setTimeout(function(){ location.reload(); }, 2000);
            },
            error: function (data) {
               swal({
                  title: 'Error',
                  icon: data.message
               });
            }
         });
      }
   });
}

$(function(){
   paymentsData();
   if ('{{count($carts)}}' == 0) {
      location.href = '{{ route('home') }}';
   }
   $("#billing_details").validate({
      ignore: '',
      rules: {   
         first_name:"required",
         last_name:"required",
         phone:{
            required: true,
            phoneUS: true,
            maxlength:12
         },
         email:{
            required: true,
            email: true,
         },
         address:{
            required: true,
         },
         country:{
            required: true,
         },
         zipcode:{
            required: true,
            number: true
         },
      },
      messages:{
         first_name: {
            required: "Please enter first name.",
         },
         last_name: {
            required: "Please enter last name.",
         },
         phone: {
            required: "Please enter phone.",
            phoneUS: "Please enter a valid phone.",
         },
         email: {
            required: "Please enter email.",
            email: "Please enter valid email.",
         },
         address: {
            required: "Please enter address.",
         },
         country: {
            required: "Please enter country.",
         },
         zipcode: {
            required: "Please enter zipcode.",
            number: "Please enter a valid zipcode.",
         },
      },
      errorElement: 'span',
   });
});
$('body').on('click', '.remove-billing-detail', function (e) {
   var get_url = $(this).data("url");
   swal({
      title: "Are you sure?",
      text: "You will not be able to recover this billing detail!",
      icon: 'warning',
      dangerMode: true,
      buttons: {
          cancel: 'No, Please!',
          delete: 'Yes, Delete It'
      }
   }).then(function (willDelete) {                
      if (willDelete) {
         $.ajax({
            type: "get",
            url: get_url,
            data: {"_token": "{{ csrf_token() }}"},
            success: function (data) {
               swal("Your billing detail has been deleted!", {
                  icon: "success",
               });
               setTimeout(function(){ location.reload(); }, 2000);
            },
            error: function (data) {
               swal({
                  title: 'Error',
                  icon: 'error'
               });
            }
         });                    
      }
   });
});
// $('body').on('click', '.select_address', function (e) {
//    var id = $(this).data("id");
//    $('#billing_address_id').val(id);
//    $('.proceed-btn').removeAttr("disabled")
// });
$('body').on('click', '#address_checkbox', function (e) {
   if ($('#address_checkbox').prop('checked')) {
     var cont_address = $('#cont_address').val();
     $('#address').val(cont_address);
   } else {
     $('#address').val('');
   }
});

</script>
@stop