<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/jquery.mask.min.js',CClientScript::POS_HEAD); ?>
<script type="text/javascript">
    $(document).ready(function () {
        function porcentajeRetiro(e) {
            var porcent = parseFloat($(this).val()) / 100;
            var monto = parseFloat($('#monto').data('monto'));
            var monto_retirar = monto * porcent;
            var monto_capitalizar = monto - monto_retirar;
            var retira = $('#comision_retira');
            var capitaliza = $('#comision_capitaliza');

            var comision = 0;
            if (retira.data('v') == true) {
                comision = parseFloat($('#comision').val());
            }
            var monto_comision_retira = monto_retirar * comision;
            var monto_final_r = monto_retirar - monto_comision_retira;

            comision = 0;
            if (capitaliza.data('v') == true) {
                comision = parseFloat($('#comision').val());
            }
            var monto_comision_capitaliza = monto_capitalizar * comision;
            var monto_final_c = monto_capitalizar - monto_comision_capitaliza;


            retira.html(parseFloat(monto_comision_retira).toFixed(2));
            $('#monto_final_r').html(parseFloat(monto_final_r).toFixed(2));

            capitaliza.html(parseFloat(monto_comision_capitaliza).toFixed(2));
            $('#monto_final_c').html(parseFloat(monto_final_c).toFixed(2));

            $('#monto_retirar').val(parseFloat(monto_retirar).toFixed(2));
            $('#monto_capitalizar').val(parseFloat(monto_capitalizar).toFixed(2));
        }

        $('#opcion_retiro').on('change', function (e) {
            $('#distribuido').hide();
            $('#porcentaje').hide();
            $('#montos').hide();
            var comision = $('#comision').val();
            var capi_comision = $('#comision_rc').data('c');
            var reti_comision = $('#comision_rc').data('r');
            var monto = $('#monto').data('monto');

            if ($(this).val() == 1) {
                $('#tipo_operacion_simple').fadeIn();
                if (capi_comision == true) {
                    $('#aplica').html(`Aplíca (${comision * 100} %)`).addClass('label-info');
                    var comision = comision;
                } else {
                    var comision = 0;
                    $('#aplica').html('No aplíca').removeClass('label-info');
                }
            }

            if ($(this).val() == 2) {
                $('#tipo_operacion_simple').fadeIn();
                if (reti_comision == true) {
                    $('#aplica').html(`Aplíca (${comision * 100} %)`).addClass('label-info');
                    var comision = comision;
                } else {
                    var comision = 0;
                    $('#aplica').html('No aplíca').removeClass('label-info');
                }
            }
            var monto_comision = monto * comision;
            var monto_final = monto - monto_comision;
            $('#comision_rc').html(parseFloat(monto_comision).toFixed(2));
            $('#monto_final_cr').html(parseFloat(monto_final).toFixed(2));

            if ($(this).val() == 3) {
                $('#tipo_operacion_simple').fadeOut();
                $('#distribuido').fadeIn()
                $('#comision_rc').html('');
                $('#monto_final_cr').html('');
                return;
            }

            $('#monto_retirar').val('')
            $('#porcentaje_retiro').val('')
            $('#monto_capitalizar').val('');
        });

        $('input[type=radio][name=tipo_distribucion]').on('change', function (e) {
            $('#comision_retira').html('');
            $('#comision_capitaliza').html('');
            $('#monto_final_r').html('');
            $('#monto_final_c').html('');
            $('#monto_retirar').val('')
            $('#monto_capitalizar').val('');

            if (this.value == 1) {
                $('#porcentaje').show();
                $('#monto_retirar').attr('readonly', true);
                $('#monto_capitalizar').attr('readonly', true);
            } else if (this.value == 2) {
                $('#porcentaje').hide();
                $('#porcentaje_retiro').val('')
                $('#monto_retirar').attr('readonly', false);
                $('#monto_capitalizar').attr('readonly', false);
            }
            $('#montos').show();
        });

        $('#porcentaje_retiro').on('change', porcentajeRetiro);

        function validarMontosAporteManual(total, aporte) {
            if (total > aporte) {
                $('#error_aporte_distribuido')
                    .removeClass('hidden')
                    .addClass('show');
                return $('[type="submit"]').prop('disabled', true);
            }
            $('#error_aporte_distribuido')
                    .removeClass('show')
                    .addClass('hidden');
            $('[type="submit"]').prop('disabled', false);
        }

        $('#monto_retirar').on('keyup', function (e) {
            if ($(this).val() == '') {
                $('#monto_capitalizar').val('');
                $('#comision_retira').html('');
                $('#comision_capitaliza').html('');
                $('#monto_final_r').html('');
                $('#monto_final_c').html('');
                return;
            }
            var comision = 0;
            var retira = $('#comision_retira');

            if (retira.data('v') == true) {
                comision = $('#comision').val();
            }

            var monto = parseFloat($(this).val());
            var monto_aporte = parseFloat($('#monto').data('monto'));
            var monto_capitalizar = monto_aporte - monto;

            var monto_comision_retira = monto * comision;
            var monto_final_r = monto - monto_comision_retira;

            if (monto_capitalizar < 0) {
                monto_capitalizar = 0;
            }

            $('#monto_capitalizar').val(monto_capitalizar);
            retira.html(parseFloat(monto_comision_retira).toFixed(2));
            $('#monto_final_r').html(parseFloat(monto_final_r).toFixed(2));

            var suma = monto + monto_capitalizar;
            validarMontosAporteManual(suma, monto_aporte);
            $('#monto_capitalizar').triggerHandler('keyup');
        });

        $('#monto_capitalizar').on('keyup', function (e) {
            if (e.target == e.currentTarget) {
                $($(e.currentTarget).children()[0]).trigger('keyup');
            }

            if ($(this).val() == '') {
                $('#monto_retirar').val('');
                $('#comision_retira').html('');
                $('#comision_capitaliza').html('');
                $('#monto_final_r').html('');
                $('#monto_final_c').html('');
                return;
            }
            var comision = 0;
            var capitaliza = $('#comision_capitaliza');

            if (capitaliza.data('v') == true) {
                comision = $('#comision').val();
            }

            var monto = parseFloat($(this).val());
            var monto_aporte = parseFloat($('#monto').data('monto'));
            var monto_retira = monto_aporte - monto;

            var monto_comision_retira = monto * comision;
            var monto_final_r = monto - monto_comision_retira;

            if (monto_retira < 0) {
                monto_retira = 0;
            }

            $('#monto_retirar').val(monto_retira);
            capitaliza.html(parseFloat(monto_comision_retira).toFixed(2));
            $('#monto_final_c').html(parseFloat(monto_final_r).toFixed(2));

            var comision = 0;
            var retira = $('#comision_retira');
            if (retira.data('v') == true) {
                comision = $('#comision').val();
            }

            var monto_comision_retira = monto_retira * comision;
            var monto_final_r = monto_retira - monto_comision_retira;
            retira.html(parseFloat(monto_comision_retira).toFixed(2));
            $('#monto_final_r').html(parseFloat(monto_final_r).toFixed(2));
            
            var suma = monto + monto_retira;
            validarMontosAporteManual(suma, monto_aporte);
        });

        $('#terminos').on('click', function (e) {
            var value = true;
            if ($(this).is(':checked')) {
                value = false;
            }

            $('#modificar_aporte_especial').prop('disabled', value);
        });
    });
</script>

<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id' => 'aporte-voluntario-form',
    'enableClientValidation' => true,
    'clientOptions' => array(
        'validateOnSubmit' => false,
    ),
    'type' => 'horizontal',
)); 

foreach (Yii::app()->user->getFlashes() as $key => $message) {
  echo '<div class="success flash-' . $key . '">' . $message . "</div>\n";
}
?>
    <input type="hidden" id="comision" value="<?= $model->confAporteExtra() ?>">
    <div class="control-group">
        <p class="help-block">Los campos con <span class="required">*</span> son obligatorios.</p>
    </div>
        <?php echo $form->errorSummary($model); ?>
        <?php if (Yii::app()->user->checkAccess('usuario_administrador') && ! $view): ?>
        <?= $form->dropDownListRow($model, 'cuenta_destino', AsociadoCuentaBanco::all($model->id_asociado), array(
            'prompt' => 'Seleccione',
            'class' => 'input-xxlarge',
        )) ?>
        <?php endif ?>
        <?= $form->dropDownListRow($model, 'opcion_retiro', CHtml::listData(TipoOperacion::model()->findAll(), 'id', 'nombre'), array(
            'prompt' => 'Seleccione',
            'id' => 'opcion_retiro',
        )) ?>
        <div class="control-group">
            <div class="row">
                <div class="span2" style="margin-left: 10px;"></div>
                <div class="span3">
                    <label for="monto_retirar"><?= $model->getAttributeLabel('monto_cargado') ?></label>
                    <span id="monto" class="monto uneditable-input" disabled="disabled" data-monto="<?= $model->monto_cargado ?>"><?= $model->monto_cargado ?></span>
                </div>
                <div id="tipo_operacion_simple">
                    <div class="span3">
                        <label for="monto_retirar">Comisión administrativa <span class="label label-info" id="aplica"></span></label>
                        <span id="comision_rc" class="monto uneditable-input" data-c="<?= $model->confAporteExtra(1) ?>" data-r="<?= $model->confAporteExtra(2) ?>" disabled="disabled"></span>
                    </div>
                    <div class="span3">
                        <label for="monto_retirar">Monto Final</label>
                        <span id="monto_final_cr" class="monto uneditable-input" disabled="disabled"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="control-group" id="distribuido" style="display: none;">
            <label class="control-label" for="opcion_1">Porcentaje</label>
            <div class="controls">
                <label class="radio">
                    <input type="radio" name="tipo_distribucion" id="opcion_1" class="tipo_distribucion" value="1">
                </label>
            </div>
            <label class="control-label" for="opcion_2">Manual</label>
            <div class="controls">
                <label class="radio">
                    <input type="radio" name="tipo_distribucion" id="opcion_2" class="tipo_distribucion" value="2">
                </label>
            </div>
        </div>
        <div class="control-group" id="porcentaje" style="display: none;">
            <label class="control-label" for="porcentaje_retiro">Porcentaje retiro</label>
            <div class="controls">
                <select id="porcentaje_retiro">
                    <option value="">--SELECCIONE--</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                    <option value="32">32</option>
                    <option value="33">33</option>
                    <option value="34">34</option>
                    <option value="35">35</option>
                    <option value="36">36</option>
                    <option value="37">37</option>
                    <option value="38">38</option>
                    <option value="39">39</option>
                    <option value="40">40</option>
                    <option value="41">41</option>
                    <option value="42">42</option>
                    <option value="43">43</option>
                    <option value="44">44</option>
                    <option value="45">45</option>
                    <option value="46">46</option>
                    <option value="47">47</option>
                    <option value="48">48</option>
                    <option value="49">49</option>
                    <option value="50">50</option>
                    <option value="51">51</option>
                    <option value="52">52</option>
                    <option value="53">53</option>
                    <option value="54">54</option>
                    <option value="55">55</option>
                    <option value="56">56</option>
                    <option value="57">57</option>
                    <option value="58">58</option>
                    <option value="59">59</option>
                    <option value="60">60</option>
                    <option value="61">61</option>
                    <option value="62">62</option>
                    <option value="63">63</option>
                    <option value="64">64</option>
                    <option value="65">65</option>
                    <option value="66">66</option>
                    <option value="67">67</option>
                    <option value="68">68</option>
                    <option value="69">69</option>
                    <option value="70">70</option>
                    <option value="71">71</option>
                    <option value="72">72</option>
                    <option value="73">73</option>
                    <option value="74">74</option>
                    <option value="75">75</option>
                    <option value="76">76</option>
                    <option value="77">77</option>
                    <option value="78">78</option>
                    <option value="79">79</option>
                    <option value="80">80</option>
                    <option value="81">81</option>
                    <option value="82">82</option>
                    <option value="83">83</option>
                    <option value="84">84</option>
                    <option value="85">85</option>
                    <option value="86">86</option>
                    <option value="87">87</option>
                    <option value="88">88</option>
                    <option value="89">89</option>
                    <option value="90">90</option>
                    <option value="91">91</option>
                    <option value="92">92</option>
                    <option value="93">93</option>
                    <option value="94">94</option>
                    <option value="95">95</option>
                    <option value="96">96</option>
                    <option value="97">97</option>
                    <option value="98">98</option>
                    <option value="99">99</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>
        <div id="montos" style="display: none;">
            <div class="control-group">
                <div class="row">
                    <div class="span2" style="margin-left: 10px;"></div>
                    <div class="span3">
                        <label for="monto_retirar">Monto a retirar</label>
                        <input type="text" name="AporteVoluntario[monto_retirado]" id="monto_retirar" value="">
                    </div>
                    <div class="span3">
                        <label for="monto_retirar">Comisión administrativa <?= $model->confAporteExtra(2) ? '<span class="label label-info">Aplíca ('.$model->comisionAporteExtra().' %)</span>' : '<span class="label">No aplíca</span>' ?></label>
                        <span id="comision_retira" class="monto uneditable-input" data-v="<?= $model->confAporteExtra(2) ?>" disabled="disabled"></span>
                    </div>
                    <div class="span3">
                        <label for="monto_retirar">Total retirar</label>
                        <span id="monto_final_r" class="monto uneditable-input" disabled="disabled"></span>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <div class="row">
                    <div class="span2" style="margin-left: 10px;"></div>
                    <div class="span3">
                        <label for="monto_capitalizar">Monto a capitalizar</label>
                        <input type="text" name="AporteVoluntario[monto_capitalizado]" id="monto_capitalizar" value="">
                    </div>
                    <div class="span3">
                        <label for="monto_capitalizar">Comisión administrativa <?= $model->confAporteExtra(1) ? '<span class="label label-info">Aplíca ('.$model->comisionAporteExtra().' %)</span>' : '<span class="label">No aplíca</span>' ?></label>
                        <span id="comision_capitaliza" class="monto uneditable-input" data-v="<?= $model->confAporteExtra(1) ?>" disabled="disabled"></span>
                    </div>
                    <div class="span3">
                        <label for="monto_capitalizar">Total capitalizar</label>
                        <span id="monto_final_c" class="monto uneditable-input" disabled="disabled"></span>
                    </div>
                </div>
            </div>
            <span class="help-inline error hidden" id="error_aporte_distribuido">La suma del "Monto a retirado" y el "Monto a capitalizar", no puede ser mayor al "Monto Aporte".</span>
        </div>
        <?php if (! Yii::app()->user->checkAccess('usuario_administrador')): ?>
        <div class="control-group">
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" id="terminos"> ¿Acepta los terminos y condiciones del servicio?. <span style="color: red;">*</span>
                </label>
            </div>
        </div>
        <?php endif ?>
        <div class="form-actions">
            <?php $this->widget('bootstrap.widgets.TbButton', array(
                'buttonType' => 'submit',
                'type' => 'info',
                'label' => 'Modificar' ,
                'htmlOptions' => array(
                    'id' => 'modificar_aporte_especial',
                    'disabled' => Yii::app()->user->checkAccess('usuario_administrador') ? false : true,
                ),
            )); ?>
        </div>
    </div>

<?php $this->endWidget(); ?>

<?php Yii::app()->clientScript->registerScript('mascaraMoneda', '$(".monto").mask(\'#.##0,00\', {reverse: true});', CClientScript::POS_END);?>
