$(document).ready(function(){

    $('.share').change( function(e) {
        // $('#successModal').modal('show');
        const form= $(this).closest('form')
        if(! checkVal(form) ) {
            return
        }
        getAvaliableMonths( form )
    } )

    $('.period').change( function(e) {
        const form= $(this).closest('form')
        if(! checkVal(form) ) {
            return
        }
        getAvaliableMonths( form )
    } )

    $('.selectMonth').click(function(){
        $('.selectMonth').removeClass('month-selected')
        if($(this).has('label> input[checked]')) {
            $(this).addClass('month-selected')
            $('.sendButton').removeClass('gray').removeAttr('disabled');
        }
    })

    $('.sendButton').click(async function(){
        const form= $(this).closest('form')
        if(! checkVal(form) ) {
            return
        }
        const share= form.find('.share').val()
        const period= parseInt(form.find('.period').val())
        const month= parseInt(form.find('[name=month]:checked').val())
        // console.log({ share, period, month })

        $('.sendButton').addClass('gray').attr('disabled', true);

        const subscribe= await ajax({
            url: subscribe_route,
            data: {share, period, month},
            method: 'post'
        })

        if (subscribe.redirect) {
            location= subscribe.redirect
            return
        }

        if (subscribe.success == true) {
            $('#successModal').modal('show');
            // location= verfiy_route
            const parentNode= $('.invoice_details')
            const { data }= subscribe
            parentNode.find('.invoice_id').html('#'+data.invoice_id)
            parentNode.find('.subscribe_date').html(data.subscribeDate.subscribe_date)
            parentNode.find('.subscribe_time').html(data.subscribeDate.subscribe_time)
            parentNode.find('.encashment_month').html(data.encashMentDate)
            parentNode.find('.totalFees').html(data.totalFees + ' SAR')
            parentNode.find('.invoice_period').html(data.period + ' Months')
            parentNode.find('.invoice_share').html(data.share + ' SAR')
            parentNode.find('.invoice_total').html(data.totalPaid + ' SAR')
        } else {
            $('.sendButton').removeClass('gray').removeAttr('disabled');
        }
        console.log({subscribe});
    })

    function checkVal(form){
        let error= false
        let share= form.find('.share').val()
        let period= parseInt(form.find('.period').val())

        if ( share <100 || parseInt(share % 100) != 0) {
            $('.share').addClass('input-error')
            $('.share').nextAll('.error').show()
            error= true
        } else {
            $('.share').removeClass('input-error')
            $('.share').nextAll('.error').hide()
        }

        if (! ( period >=3 && period <=12 ) ) {
            error= true
        }

        if(error) {
            $('.sendButton').addClass('gray').attr('disabled', true);
        }

        return ! error
    }

    async function getAvaliableMonths( form ) {
        let share= form.find('.share').val()
        let period= parseInt(form.find('.period').val())
        if (share >=100 && share % 100 == 0  && ( period >=3 && period <=12 )) {
            console.clear()
            console.log({share, period});
            $('.month-circle li').attr('class',"disable");
            $('.selectMonth').removeClass('month-selected')
            $('.sendButton').addClass('gray').attr('disabled', true);

            const months= await ajax({
                url: check_month_route,
                data: {share, period},
                method: 'get'
            })
            // console.log({months});
            if ( months) {
                for (const monthKey in months)  {
                    const month= months[monthKey]

                    const monthNode= $('.month-circle li:nth-child('+month.month+')')
                    monthNode.attr('class', month.class)
                    if (month.class) {
                        monthNode.find('a').attr('disabled', true)
                    }else {
                        monthNode.find('a').removeAttr('disabled')
                    }
                }
            }
        }
    }

    /* To reload the page and display loop details after closing the bill */
    $("#successModal").on("hidden.bs.modal", function () {
        if ($('#billModal').length) {
            $('#billModal').modal('show')
        }
    });
    $("#billModal").on("hidden.bs.modal", function () {
        console.clear()
        if ($(this).find('.go_to_route').length && $(this).find('.go_to_route').val()) {
            location.href= $(this).find('.go_to_route').val()
            return
        }
        location.reload()
    });

    $('.goToStep').click(function(){
        $('.steps').hide()
        $($(this).data('step')).show()
    })

})
