@extends('layouts.app')

@section('content')

@if($message = Session::get('error'))
<div class="alert alert-danger alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Error!</strong> {{ $message }}
</div>
@endif

@if($message = Session::get('success'))
<div class="alert alert-success alert-dismissible fade {{ Session::has('success') ? 'show' : 'in' }}" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Success!</strong> {{ $message }}
</div>
@endif

<div class="card card-default">
    <div class="card-header">
        Laravel - Razorpay Payment Gateway Integration
    </div>

    <div class="card-body text-center">
        <form action="{{ route('razorpay.payment.store') }}" method="post" id="addPaymentForm">
            @csrf
            @method('POST')
            <div class="popupForm">
                <div class="popupHeading">
                    <h2>Payment</h2>
                </div>
                <div class="form-group floating-field">
                    <input type="hidden" name="razorpay_payment_id" value="" id="razorpay_payment_id">
                    <input type="hidden" name="razorpay_order_id" value="" id="razorpay_order_id">
                    <input type="hidden" name="razorpay_signature" value="" id="razorpay_signature">
                    <input type="hidden" name="generated_signature" value="" id="generated_signature">
                     <input type="text" name="amount" value="" id="payment">

                </div><!--//popupForm-->

                <div class="col-sm-6 text-right">
                    <button class="btn btn-primary" type="button" id="addPaymentButton">Submit</button>
                </div>

            </div>
        </form>
        <button class="btn btn-default" id="addAppointButton">Click to Pay</button>
    </div>
</div>
@endsection

@section('script')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
$('#addAppointButton').on('click', function (e) {
    e.preventDefault();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: "post",
        url: "{{route('razorpay.order_id_generate')}}",
        data: $("#addPaymentForm").serialize(),
        success: function (data) {
            var order_id = '';
            if (data.order_id) {
                order_id = data.order_id;
            }
            var amount = data.amount;

            var options = {
                "key": "{{ config('app.razorpay_api_key') }}", // Enter the Key ID generated from the Dashboard
                "amount": amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                "currency": "{{ BASE_CURRENCY }}",
                "name": "{{ RAZOR_PAY_ACCOUNT_NAME }}",
                "description": '',
                "image": "{{ asset('images/logo-black.svg') }}",
                "order_id": order_id, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
                "handler": function (response) {
                    $('#razorpay_payment_id').val(response.razorpay_payment_id);
                    $('#razorpay_order_id').val(response.razorpay_order_id);
                    $('#razorpay_signature').val(response.razorpay_signature);
                    $('#addPaymentForm').submit();
                },
                "prefill": {
                    "name": "{{ auth()->user()->full_name }}",
                    "email": "{{ auth()->user()->email }}",
                    "contact": ""
                },
                "notes": {
                    "address": "Razorpay Corporate Office"
                },
                "theme": {
                    "color": "#3399cc"
                }
            };
            var rzp1 = new Razorpay(options);
            rzp1.on('payment.failed', function (response) {

            });

            rzp1.open();


        },

    });

});
</script>
@endsection