{% extends "site_base.html" %}

{% load i18n %}
{% load uni_form %}
{% load ifsetting_tag %}

{% block head_title %}{% trans "Recharge" %}{% endblock %}

{% block body %}
    <div id='cont'>
        <form class="login uniForm" method="POST" action="{% url call_recharge %}">
            <fieldset class="inlineLabels">
                {{ form|as_uni_form }}
                <div class="form_block">
                    <input id='submit' type="button" value="{% trans 'Recharge' %}" />
                   </div>
                <div id='radiodiv'></div>
            </fieldset>
        </form>
    </div>

{% endblock %}

{% block extra_body %}
<script src="{{ STATIC_URL }}js/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/jquery.simplemodal-1.3.5.min.js" type="text/javascript"></script>
<style type="text/css">
    #simplemodal-container a.modalCloseImg {
        background:url({{ STATIC_URL }}images/loadingAnimatio.gif) no-repeat; /* adjust url as required */
        width:25px;
        height:29px;
        display:inline;
        z-index:3200;
        position:absolute;
        top:-15px;
        right:-18px;
        cursor:pointer;
    }
</style>

<script type="text/javascript">

        function callModal() {
            $.modal("<div><h2>{% trans 'Loading...' %}</h2><img src='{{ STATIC_URL }}images/loadingAnimation.gif' /></div>",
            {
                opacity: 50,
                close: true,
                modal: true,
                overlayCss: {backgroundColor:"#fff"}
            });
        }

        function closeModal() {
            $.modal.close();
        }

        function get_value(value, id) {
            $('#id_product_value').val(value);
            $('#id_product').val(id);
        }

        $(function() {

            $('#id_phone1').focus();
            $('#id_phone1').mask("(99)-9999.9999");
            $('#id_phone2').mask("(99)-9999.9999");

            $('#id_phone2').attr('readonly', 'readonly');
            $('#id_phone1').keyup(function() {
                if ( $('#id_phone1').val().indexOf('_') != -1 ) {
                    $('#errormsg').remove();
                    $('#id_phone2').val("");
                    $('option[value=0]').attr('selected', 'selected');
                    $('#id_mobile_carrier').attr('disabled', 'disabled');
                    $('#div_radio').empty();
                    return false;
                }
                if ( $('#id_phone1').val().indexOf('_') != -1 ) {
                    $('#errormsg').remove();
                    $('#id_phone1').after("<span id='errormsg'>{% trans 'Phone field must have 10 digits.' %}</span>");
                    $('#id_phone2').attr('readonly', 'readonly');
                    $('#id_phone2').val("");
                    $('#id_mobile_carrier').attr('disabled', 'disabled');
                } else {
                    $('#errormsg').remove();
                    $('#id_phone2').attr('readonly', '');
                    if ( $('#id_phone1').val() == $('#id_phone2').val() ) {
                        $('#id_mobile_carrier').attr('disabled', '');
                    } else {
                        $('#id_mobile_carrier').attr('disabled', 'disabled');
                    }
                }
            });

            $('#id_mobile_carrier').attr('disabled', 'disabled');
            $('#id_phone2').keyup(function() {
                if ( $('#id_phone2').val().indexOf('_') != -1 ) {
                    $('#errormsg').remove();
                    $('option[value=0]').attr('selected', 'selected');
                    $('#id_mobile_carrier').attr('disabled', 'disabled');
                    $('#div_radio').empty();
                    return false;
                }
                if ( $('#id_phone2').val().indexOf('_') == -1 ) {
                    if ( $('#id_phone1').val() == $('#id_phone2').val() ) {
                        $('#errormsg').remove();
                        $('#id_mobile_carrier').attr('disabled', '');
                    } else {
                        $('#errormsg').remove();
                        $('#id_phone2').after("<span id='errormsg'>{% trans 'You must type the same phone each time.' %}</span>");
                        $('#id_mobile_carrier').attr('disabled', 'disabled');
                    }
                } else {
                    $('#errormsg').remove();
                    $('#id_phone2').after("<span id='errormsg'>{% trans 'Phone field must have 10 digits.' %}</span>");
                    $('#id_mobile_carrier').attr('disabled', 'disabled');
                }

            });

            $('#div_id_mobile_carrier').after("<p>{% trans 'Values*' %} </p><div id='div_id_price' class='ctrlHolder'><div id='div_radio'></div></div>");
            $('#id_mobile_carrier').change(function() {
                callModal();
                ddd = $('#id_phone1').val().substr(1, 2);
                $.ajax({
                    type: "GET",
                    url: "/gadget/get_prices/",
                    dataType: "json",
                    data: 'ddd=' + ddd + '&op=' + $(this).val(),
                    success: function(data) {
                        closeModal();
                        $('#div_radio').empty();
                        if ( data != '' ) {
                            $.each(data, function(i, item){
                                $('#div_radio').append(
                                    "<input type='radio' id='id_price' name='price' value='" + item.fields['rv_id'] + "' onclick='get_value(" + moeda2float(item.fields['price']) + ", $(this).val())'> R$ " + moeda2float(item.fields['price'])
                                );
                            });
                        } else {
                            $('#div_radio').append("{% trans 'No values founded ' %}");
                        }
                    },
                    error: function(error) {
                        closeModal();
                        $('#div_radio').append("{% trans 'No values founded ' %}");
                    }
                });
            });

            function moeda2float(moeda){
                moeda = moeda.replace(".",",");
                return parseFloat(moeda);
            }

            $('#submit').click(function() {
                if ( valid() ) {
                    callModal();
                    query = 'action=process' +
                    '&ntc=' + remove_mask($('#id_phone1').val()) +
                    '&confirm_ntc=' + remove_mask($('#id_phone2').val()) +
                    '&value_product=' + $('#id_product_value').val() +
                    '&username=' + $('#id_username').val() +
                    '&password=' + $('#id_password').val() +
                    '&type_file=xml' +
                    '&cod_product=' + $('#id_product').val();
                    $.ajax({
                        type: 'POST',
                        url: '{% url call_recharge %}',
                        //url: '{% url auth_recharge %}',
                        data: query,
                        success: function(ret) {
                            closeModal();
                            $('#cont').html(ret);
                        }
                    });
                } else {
                    closeModal();
                }
            });

            function remove_mask(value) {
                if (value.indexOf('-') == -1) {
                    return value;
                } else {
                    value = value.replace(/[-]/, "");
                    value = value.replace(/[.]/, "");
                    value = value.replace(/[(]/, "");
                    value = value.replace(/[)]/, "");
                    return value;
                }
            }

            function valid() {
                var status = true;
                status = status && field_valid('id_phone1');
                status = status && field_valid('id_phone2');
                status = status && field_valid('id_mobile_carrier');
                status = status && field_valid('id_product_value');
                status = status && field_valid('id_username');
                status = status && field_valid('id_password');
                status = status && field_valid('id_product');
                return status;
            }

            function field_valid(field) {
                $('#div_' + field).removeClass('error');
                $('#error_1_' + field).remove();
                if ( $('#' + field).val() == '' ||  $('#' + field).val() == 0) {
                    $('#div_' + field).addClass('error');
                    $('label[for=' + field + ']').before("<p id='error_1_" + field + "' class='errorField'>{% trans 'This field is required.' %}</p>");
                    return false;
                } else {
                    return true;
                }
            }
        });
</script>
{% endblock %}