@extends('layouts.tienda')

@section('content')

<div class="container-fluid tope-imagen">
    <div class="row">
        <div class="col-12 mt-2">
            <div class="card">
                <div class="card-body">
                    
                    <div class="col-md-12">
                        <div class="d-flex justify-content-center">
                            <div class="col-md-4 col-6 mb-3">
                                <button class="btn btn-info w-100 js-payment-checkout">Paga con tu tarjeta</button>      
                            </div>
                        </div>
                    </div>
                    
                    
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('script')

<script src="https://cdn.paymentez.com/ccapi/sdk/payment_checkout_3.0.0.min.js"></script>

<script type="text/javascript">

    let paymentCheckout = new PaymentCheckout.modal({
    env_mode: "stg",
    onOpen: function () {
      console.log("modal open");
    },
    onClose: function () {
      console.log("modal closed");
    },
    onResponse: function (response) { // The callback to invoke when the Checkout process is completed
        
        if(response['transaction']['status_detail'] == 3 || response['transaction']['status_detail'] == 1){
            $(location).attr('href', '{{request()->root()}}/store/save/paymendez/{{$idcompra}}/1');
        }else{
            $(location).attr('href', '{{request()->root()}}/store/save/paymendez/{{$idcompra}}/2');
        }
        
        /*
        //In Case of an error, this will be the response.
        response = {
          "error": {
            "type": "Server Error",
            "help": "Try Again Later",
            "description": "Sorry, there was a problem loading Checkout."
          }
        }
        //When the User completes all the Flow in the Checkout, this will be the response.
        response = {
            "transaction":{
              "status": "success", // success or failure
              "id": "CB-81011", // transaction_id
              "status_detail": 3 // for the status detail please refer to: https://paymentez.github.io/api-doc/#status-details
            }
        }
      
      
      console.log("modal response");
      document.getElementById("response").innerHTML = JSON.stringify(response);
      */
      
     }
  });

  let btnOpenCheckout = document.querySelector('.js-payment-checkout');
  btnOpenCheckout.addEventListener('click', function () {
    paymentCheckout.open({
      reference: '{{$token}}' // reference received for Payment Gateway
    });
  });

  window.addEventListener('popstate', function () {
    paymentCheckout.close();
  });
  
  
  
</script>
@endpush