{{-- Button Class "payment-button" or function takePayment --}}
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    _old_payment_btn_text = "";
    function takePayment(planId,obj) {
        _old_payment_btn_text = $(obj).text();
        // TODO :: check enabled Payment 
        // create or get order id
        console.log(1,_old_payment_btn_text);
        $(obj).text("Please wait..")
        $.ajax({
            url: "{{ route('payment.createOrder') }}",
            type:"POST",
            data: {
                planId
            },
            success: function(res) {
                console.log(res);
                orderId = res.orderId;
                openPopup(res,obj);
                $(obj).text(_old_payment_btn_text)
            },
            error: function(err) {
                $(obj).text(_old_payment_btn_text)
                console.log(err);
            }
        })
    }

    function openPopup(options, obj){
        var razorpay_key = options.razorpay_key;
        var razorpay_order_id = options.razorpay_order_id;
        var amount = options.amount;
        var currency =  options.currency;
        var description = options.description;
        var order_id = options.order_id

        var options = {
            key: razorpay_key,
            amount: amount * 100, // Amount in paisa
            currency,
            name: "{{ config('app.name') }}",
            description,
            order_id: razorpay_order_id,
            handler: function(response) {
                console.log("options",response,options);
                successCallback(response,{amount,order_id}, obj);
            },
            prefill: {
                name: options.user.name,
                email: options.user.email,
                contact: options.user.phone
            },
        };

        var rzp = new Razorpay(options);
        rzp.on('payment.failed', function (response){
            // Handle the failed payment event
            console.log(response.error.code);
            console.log(response.error.description);
            console.log(response.error.source);
            console.log(response.error.step);
            console.log(response.error.reason);
            console.log(response.error.metadata.order_id);
            console.log(response.error.metadata.payment_id);
            // window.location.href = '/failed';
            // $.ajax({
            //     type: 'POST',
            //     url: '/razorpay/return/',
            //     data: {
            //         order_status: 'Failed',
            //         tracking_id: response.razorpay_payment_id,
            //         amount: '',
            //         razorpay_order_id: response.razorpay_order_id,
            //         razorpay_signature: response.razorpay_signature
            //     },
            //     dataType: 'json',
            //     headers: {
            //         'X-CSRF-TOKEN': '{{ csrf_token() }}'
            //     },
            //     success: function (res) {
            //         console.log(res);
            //         // Handle the success response as needed
            //     },
            //     error: function (xhr, status, error) {
            //         console.error('Something Went Wrong');
            //     }
            // });
        });
        rzp.open()
    }

    function successCallback(response,{amount,order_id}, obj){
        console.log("response",response);
        fetch('/razorpay/return', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                order_id,
                tracking_id: response.razorpay_payment_id,
                order_status: 'Success',
                amount,
                razorpay_order_id: response.razorpay_order_id,
                razorpay_signature: response.razorpay_signature
            })
        })
        .then(response => response.json())
        .then(res => {
            console.log(res);
            if (res.status == 1) {
                window.location.href = obj.href;
            } else {
                console.error('Server returned error:', res.message);
            }
        })
        .catch(error => {
            console.error('Fetch request failed:', error);
        });
    }
</script>