$(document).ready(function () {


    $('.ziehharmonika').ziehharmonika({
        collapsible: true
    });

    $(".modal-trigger").click(() => {
    })

    $(".cb-pay").click(() => {
        $("#debitNumber").addClass("d-none")
        $("#tobil").addClass("d-none")
        $("#for-other").addClass("d-none")
        $("#for-me").addClass("d-none")
        $(".msisdn-input").removeClass("col-6")
        $(".msisdn-input").addClass("col-12")


    })
    $(".mvola-pay").click(() => {
        $("#debitNumber").removeClass("d-none")
        $("#tobil").removeClass("d-none")
        $("#for-other").removeClass("d-none")
        $(".msisdn-input").removeClass("col-12")

        $(".msisdn-input").addClass("col-6")



        $("#for-me").removeClass("d-none")

    })

    $("input[name='buyer']").change(() => {
        let buyerValue = $("input[name='buyer']:checked").val()
        if (buyerValue === "forme") {
            $("#debitNumber").attr("disabled", "true")

        }
        else {
            $("#debitNumber").removeAttr("disabled")
            $("#debitNumber").val("")


        }
    });

    $("#msisdn").blur(() => {
        let buyerValue = $("input[name='buyer']:checked").val()
        if (buyerValue === "forme") {
            $("#debitNumber").val($("#msisdn").val())

        }

    })


    $("#send-buy").click(() => {

        let msisdn = $("#msisdn").val()
        let price = $("#price").val()
        let tarifCode = $("#tarifCode").val()
        let debitNumber = $("#debitNumber").val()
        let offerName = $("#offerName").text()
        let offerId = $("#offerId").val()

        let toSend = {
            msisdn: msisdn,
            amount: price,
            tarifCode: tarifCode,
            debitNumber: debitNumber,
            offerName: offerName,
            offerId: offerId,
            type: 'offer'
        }

        let toSendBni = {
            msisdn: msisdn,
            amount: price,
            tarifCode: tarifCode,
            offerName: offerName,
            offerId: offerId,

        }
        let paymentMode = $("input[name='paymode']:checked").val()
        if (paymentMode === "mvola") {
            $('#numberModal').modal('show')

            $(".modal-dialog").addClass("d-none")
            $(".modal-dialog").addClass("d-none")

            $(".dot-falling").removeClass("d-none")
            $(".spinner-caption").removeClass("d-none")
            $(".inserted-number").text($("#debitNumber").val())
            let objectDataString = JSON.stringify(toSend)

            $.ajax({
                url: '/checkout/mvola',
                data: objectDataString,
                processData: false,
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                success: async function (res) {
                    if (res.success === "true") {
                        $(".modal-dialog").removeClass("d-none")
                        $(".dot-falling").addClass("d-none")
                        $(".spinner-caption").addClass("d-none")

                        $(".modal-body").html('<div class="modal-content border-0 text-center py-3"><div class="py-4"><i class="fas fa-info-circle"  style="color:#ffd100; font-size:5rem"></i></div> <h3>Validez votre achat !</h3><p>Finalisez votre achat en insérant votre code secret sur votre téléphone.</p></div>')
                    }
                    else if (res.success === "false") {
                        $(".modal-dialog").removeClass("d-none")
                        $(".dot-falling").addClass("d-none")
                        $(".spinner-caption").addClass("d-none")

                        $(".modal-body").html('<div class="modal-content border-0 text-center py-3"><div class="py-4"><i class="far fa-times-circle "  style="color:#F03450; font-size:5rem"></i></div><h3>Désolé !</h3><p>L\'achat n\'a pas abouti. </p></div>')


                    }

                },
                error: function (res) {
                    $(".modal-dialog").removeClass("d-none")
                    $(".dot-falling").addClass("d-none")
                    $(".spinner-caption").addClass("d-none")
                    if (res.responseJSON.error === "unknown-error") {
                        $(".modal-body").html('<div class="modal-content border-0 text-center py-3"><div class="py-4"><i class="far fa-times-circle "  style="color:#F03450; font-size:5rem"></i></div><h3>Désolé !</h3> <p>Une erreur s\'est produite lors de la transaction.<br>Veuillez assurer que ce numéro dispose d\'un compte MVola et réessayer plus tard</p></div>')
                    } else if (res.responseJSON.error === "invalid-msisdn") {
                        $(".modal-body").html('<div class="modal-content border-0 text-center py-3"><div class="py-4"><i class="far fa-times-circle "  style="color:#F03450; font-size:5rem"></i></div><h3>Désolé !</h3> <p>Le numéro que vous avez inséré n\'existe pas.</p></div>')
                    }
                }
            });

        } else if (paymentMode === "visa" || paymentMode === "mastercard") {
            let objectDataString = JSON.stringify(toSendBni)

            $.ajax({
                url: '/checkout/bni-pay',
                data: objectDataString,
                processData: false,
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                success: async function (res) {
                    window.location.assign('/services/achat-bni/bundle/' + res.id)


                }
            });

        }


    })

});