@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.credit_card')])

@section('gateway_head')
@endsection

@section('gateway_content')
    <form method="post" id="server_response">
        
        <div class="alert alert-failure mb-4" hidden id="errors"></div>

        @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
            {{ ctrans('texts.credit_card') }}
        @endcomponent
        
        @include('portal.ninja2020.gateways.includes.payment_details')


        @include('portal.ninja2020.gateways.includes.pay_now', ['type' => 'submit'])

   </form> 
   
      <div id="embed-target" style="margin: auto 98px;">
      
      </div> 
@endsection

@section('gateway_footer')
<script>
document.getElementById('server_response').addEventListener('submit', function(e) {
    e.preventDefault();

    Checkout.showEmbeddedPage('#embed-target')
});
</script>

@php
    $url = "https://nbe.gateway.mastercard.com/static/checkout/checkout.min.js";
@endphp

<script src="{{$url}}"
        data-error="errorCallback"
        data-cancel="cancelCallback"
        >
</script>
<script type="text/javascript">
    function errorCallback(error) {
        console.log(JSON.stringify(error));
    }
    function cancelCallback() {
        console.log('Payment cancelled');
    }
    Checkout.configure({
        session: {
            id: '{{ $session_id }}'
        },
        interaction: {
            merchant: {
                name: 'New Egy Look Travel'
            },
        },
    });
</script>
@endsection