@extends('layouts.master')

@section('css')
{!! Html::style('css/jquery_ui.css')!!}
{!! Html::style('css/datepicker.css')!!}
@stop

@section('content')
    @if(Session::has('message_error'))
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        <div class="alert alert-danger error-msg centrado"><strong>{!! Session::get('message_error') !!}</strong></div>
      </div>
    </div>
    @endif
    @if(Session::has('message_success'))
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
        <div class="alert alert-success success-msg centrado"><strong>{!! Session::get('message_success') !!}</strong></div>
      </div>
    </div>
    @endif
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
               Por favor indique los datos de la transacci&oacute;n realizada
            </div>
            <div class="panel-body">
                {!!Form::open(array('url' => 'ze/guardarpago', 'method' => 'POST', 'enctype'=>'multipart/form-data'))!!}{!! csrf_field() !!}
                <div class="form-group col-lg-12 col-md-12 col-col-sm-12 col-col-xs-12">
                <table>
                  <tr>
                    <td width="100%" style="font-size:14px">
                      <strong>C&eacute;dula: </strong>{!! $cedula !!}<br />
                      <strong>Estudiante: </strong>{!! App\Models\Estudiante::find($cedula)->nombres !!} {!! App\Models\Estudiante::find($cedula)->apellidos !!}<br />
                    </td>
                  </tr>
                </table>
                </div>       
                 <div id="div_fecha" class="form-group col-lg-3 col-md-3 col-sm-6 col-xs-12 @if($errors->has('fecha')){!!'has-error'!!} @endif">
                    <label>Fecha de la Transferencia <span class="glyphicon glyphicon-asterisk text-danger"></span></label>
                        <div class="input-group date" id="fecha" name="fecha">
                        {!! Form::text('fecha', NULL, $attributes = array('class' => 'form-control', 'id'=>'fecha1', 'placeholder'=>'Seleccione fecha', 'readonly'=>'readonly', 'required'=>'required')) !!}<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>                  
                        <div id="fechaAviso" class="text-danger"></div>             
                  </div>
                  <div class="form-group col-lg-3 col-md-3 col-sm-12 col-xs-12 @if($errors->has('referencia')){!!'has-error'!!} @endif">
                    <label for="referencia">Referencia: <span class="glyphicon glyphicon-asterisk text-danger"></span></label>
                        {!!Form::text('referencia',NULL,array('id' => 'referencia', 'class' => 'form-control','maxlength' => '50'))!!}
                      <div class="text-danger">
                        @if($errors->has('referencia'))  {!! $errors->first('referencia') !!} @else {!! "&nbsp;" !!} @endif
                      </div> 
                  </div>  
                  <div class="form-group col-lg-3 col-md-3 col-sm-12 col-xs-12 @if($errors->has('banco de origen')){!!'has-error'!!} @endif"">
                    <label for="banco_origen">Banco Origen:<span class="glyphicon glyphicon-asterisk text-danger"></span></label> 
                        {!!Form::select('banco_origen',$bancos,NULL,array('id' => 'banco_origen', 'class' => 'form-control','maxlength' => '50','required'=>'required'))!!}
                      <div class="text-danger">
                        @if($errors->has('banco de origen'))  {!! $errors->first('banco de origen') !!} @else {!! "&nbsp;" !!} @endif
                      </div>
                  </div>
                  <div class="form-group col-lg-3 col-md-3 col-sm-12 col-xs-12 @if($errors->has('banco de destino')){!!'has-error'!!} @endif"">
                    <label for="banco_destino">Banco Destino:<span class="glyphicon glyphicon-asterisk text-danger"></span></label> 
                    {!! Form::select('banco_destino', $banco_destino ,'NULL', $attributes =array('class' => 'form-control', 'id'=>'banco_destino', 'required'=>'required')) !!}
                    <div id="msg_tipo" class="text-danger">
                        @if($errors->has('banco de destino'))  {!! $errors->first('banco de destino') !!} @else {!! "&nbsp;" !!} @endif
                    </div>  
                  </div>
                  <div class="form-group col-lg-2 col-md-2 col-sm-12 col-xs-12 @if($errors->has('monto')){!!'has-error'!!} @endif">
                    <label for="monto">Monto en Bolivares:<span class="glyphicon glyphicon-asterisk text-danger"></span></label> 
                      <input readonly id="monto" value="00,00" name="monto" class="form-control" data-decimal="," data-thousands="." required/>
                  </div>
                   <div class="form-group col-lg-2 col-md-2 col-sm-12 col-xs-12 @if($errors->has('monto')){!!'has-error'!!} @endif"">
                    <label for="monto">Monto en Dolares:<span class="glyphicon glyphicon-asterisk text-danger"></span></label> 
                      <input readonly id="montoDolares" value="00,00" name="montoDolares" class="form-control" data-decimal="," data-thousands="." required />
                  </div>
                  <div class="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 @if($errors->has('concepto')){!!'has-error'!!} @endif"">
                    <label for="concepto">Concepto:<span class="glyphicon glyphicon-asterisk text-danger"></span></label> 
                      {!!Form::select('concepto',$conceptos,NULL,array('id' => 'concepto', 'class' => 'form-control','maxlength' => '50','required'=>'required'))!!}
                      <div class="text-danger">
                        @if($errors->has('concepto'))  {!! $errors->first('concepto') !!} @else {!! "&nbsp;" !!} @endif
                      </div>
                  </div>
                  <div class="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 @if($errors->has('correo')){!!'has-error'!!} @endif"">
                    <label for="correo">Correo para Notificar:<span class="glyphicon glyphicon-asterisk text-danger"></span></label>
                        {!!Form::text('correo',NULL,array('id' => 'correo', 'class' => 'form-control'))!!}
                      <div class="text-danger">
                        @if($errors->has('correo'))  {!! $errors->first('correo') !!} @else {!! "&nbsp;" !!} @endif
                      </div> 
                  </div>
                  <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 @if($errors->has('observaciones')){!!'has-error'!!} @endif"">
                    <label for="observaciones">Observaciones: <span class="glyphicon glyphicon-asterisk text-danger"></span></label> 
                        {!!Form::text('observaciones',NULL,array('id' => 'observaciones', 'class' => 'form-control'))!!}
                      <div class="text-danger">
                        @if($errors->has('observaciones'))  {!! $errors->first('observaciones') !!} @else {!! "&nbsp;" !!} @endif
                      </div> 
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <label style="color:#C70039;">Adjuntar comprobante de transferencia en pdf</label>
                  </div>
                  <div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12 @if($errors->has('archivo')){!!'has-error'!!} @endif">  
                    <label for="documento"><h4><strong>Recibo de Pago</strong></h4></label><span class="glyphicon glyphicon-asterisk text-danger" style="font-size:9px;"></span>
                    {!! Form::file('documento',array('id' => 'doc')) !!}
                    <div class="text-danger">
                      @if($errors->has('archivo'))  {!! $errors->first('archivo') !!} @else {!! "&nbsp;" !!} @endif
                    </div> 
                  </div>
                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                    <input type="submit" value="Enviar Datos" class="btn btn-primary">
                </div>
                {!! Form::hidden('estudiante_id',$cedula,array('id' => 'cedula')) !!}
                {!!Form::close()!!}
            </div>
        </div>
    </div>
@stop
@section('postscript')

{!! Html::script('js/jquery_ui.js') !!}
{!! Html::script('js/datepicker/bootstrap-datepicker.js') !!}
{!! Html::script('js/datepicker/locales/bootstrap-datepicker.es.js') !!}
{!! Html::script('js/solonumeros.js') !!}

<script type="text/javascript">
    $(document).ready(function(){
        $('#fecha1').datepicker({
            language: "es",
            autoclose: true,
            format: "dd-mm-yyyy"
        });

        $("#fecha1").change(function(){
            $('#montoDolares').prop('readonly', false);
            $('#monto').prop('readonly', false);
        })

        $("#montoDolares").keyup(function(){
            var fecha = $("#fecha1").val();
            var monto = $("#montoDolares").val();

            if(fecha==''){
                var aviso = "Seleccione fecha";
                $('#montoDolares').prop('readonly', true);
                $('#monto').prop('readonly', true);
                $("#fechaAviso").html(aviso);   
            }else{
                var aviso = "";
                $('#montoDolares').prop('readonly', false);
                $('#monto').prop('readonly', false);
                $("#fechaAviso").html(aviso);
                $.ajax({
                    type: "POST",
                    url: "{!!URL::action('ZonaestudianteController@postActualizarMontoJquery')!!}", 
                    dataType: "json",
                    data:{
                        fecha:fecha,
                        monto:monto
                    },
                    cache: false,
                    success: function(data)
                    {    
                        $("#monto").val(data.montoDolares); 
                    }
                });
            }
        })

        $("#monto").keyup(function(){
            var fecha = $("#fecha1").val();
            var monto = $("#monto").val();

            if(fecha==''){
                var aviso = "Seleccione fecha";
                $('#montoDolares').prop('readonly', true);
                $('#monto').prop('readonly', true);
                $("#fechaAviso").html(aviso);
            }else{
                var aviso = "";
                $('#montoDolares').prop('readonly', false);
                $('#monto').prop('readonly', false);
                $("#fechaAviso").html(aviso);
                $.ajax({
                    type: "POST",
                    url: "{!!URL::action('ZonaestudianteController@postActualizarMontoJquery1')!!}", 
                    dataType: "json",
                    data:{
                        fecha:fecha,
                        monto:monto
                    },
                    cache: false,
                    success: function(data)
                    {    
                        $("#montoDolares").val(data.montoBolivares);    //Monto en Bolivares
                    }
                });
            }
        })

        $("#banco_destino").change(function(){
            if ($(this).val()=='04905') {
                $("#divisas").attr('hidden',false);
            }else{
                $("#divisas").attr('hidden',true);
            }
        });
    });
    (function (factory) {

        if (typeof define === 'function' && define.amd) {
            define(['jquery'], factory);
        } else if (typeof exports === 'object') {
            module.exports = factory(require('jquery'));
        } else {
            factory(jQuery || Zepto);
        }

    }(function($) {

        $.fn.maskNumber = function(options) {

            var settings = $.extend({}, $.fn.maskNumber.defaults, options);
            settings = $.extend(settings, options);
            settings = $.extend(settings, this.data());

            this.keyup(function() {
                format(this, settings);
            });
            
            return this;
        };

        $.fn.maskNumber.defaults = {
            thousands: ",",
            decimal: ".",
            integer: false,
        };

        function format(input, settings) {
            var inputValue = input.value;
            inputValue = removeNonDigits(inputValue);
            if (!settings.integer) {
                inputValue = addDecimalSeparator(inputValue, settings);
            }
            inputValue = addThousandSeparator(inputValue, settings);
            inputValue = removeLeftZeros(inputValue);
            applyNewValue(input, inputValue);
        }
        
        function removeNonDigits(value) {
            return value.replace(/\D/g, "");
        }
        
        function addDecimalSeparator(value, settings) {
            value = value.replace(/(\d{2})$/, settings.decimal.concat("$1"));
            value = value.replace(/(\d+)(\d{3}, \d{2})$/g, "$1".concat(settings.thousands).concat("$2"));
            return value;
        }
        
        function addThousandSeparator(value, settings) {
            var totalThousandsPoints = (value.length - 3) / 3;
            var thousandsPointsAdded = 0;
            while (totalThousandsPoints > thousandsPointsAdded) {
                thousandsPointsAdded++;
                value = value.replace(/(\d+)(\d{3}.*)/, "$1".concat(settings.thousands).concat("$2"));
            }
            
            return value;
        }
        
        function removeLeftZeros(value) {
            return value.replace(/^(0)(\d)/g,"$2");
        }
        
        function applyNewValue(input, newValue) {
            if (input.value != newValue) {
                input.value = newValue;
            }
            $(input).trigger('change', input.value);
        }

    }));

    $('#monto').maskNumber({
      decimal: ','
    });

    $('#montoDolares').maskNumber({
      decimal: ','
    });
</script>
@stop