@extends('producto.plantillaFormulario')
@section('titulo', $titulo)
@section('scripts')
<script>
    globalId = '0';
    
</script>
@endsection
@section('breadcrumb')
<script>
function fsalir(){
    location.href ="/formularioPago";
}
</script>

@endsection
@section('contenido')
<div class="panel-body" id="formularioPago">
        <div id = "msg"></div>
                <form id="form2" method="POST" action="">
        <div class="row">
                <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
                <input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}" required>
                <div class="col-sm-6  pr-sm-0 mr-sm-4 ml-sm-5 pl-sm-5">
                    <div class="card mb-4" style="width:100%;">
                        <div class="px-4 pt-3 pb-2">
                            <h6 class="m-0 font-weight-bold text-secondary">Datos de la tarjeta</h6>
                            <hr>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="form-group col-sm-6 pb-3">
                        
                        <select onchange="fCodigoCvv()" class="form-control" id="lstTarjeta" name="lstTarjeta" required>
                            <option selected disabled value="">Tipo de tajerta</option>
                            @for ($i = 0; $i < count($array_tarjeta); $i++)
                                @if (isset($pagoTarjeta) and $array_tarjeta[$i]->fk_idtipotarjeta == $pagoTarjeta->fk_idtipotarjeta)
                                    <option selected value="{{ $array_tarjeta[$i]->fk_idtipotarjeta }}">{{ $array_tarjeta[$i]->nombre}}</option>
                                @else
                                    <option value="{{ $array_tarjeta[$i]->fk_idtipotarjeta }}">{{ $array_tarjeta[$i]->nombre }}</option>
                                @endif
                            @endfor
                        </select>
                                </div>
                                <div class="form-group col-sm-6 pb-3">  
                                    <input type="text" autocomplete="cc-number" onchange="fValidarTarjeta()" class="form-control" id="txtNroTarjeta" name="txtNroTarjeta" placeholder="Número" required>
                                    <span id="err_nro_tarjeta" class="text-danger pt-2"></span>
                                </div>
                                <div class="form-group col-sm-6 pb-3">
                                    <input type="text" autocomplete="cc-exp" class="form-control" id="txtVencimiento" placeholder="Vencimiento" name="txtVencimiento" required>
                                    <span class="text-secondary pl-2">Formato MM/AA</span>
                                </div>
                                <div class="form-group col-sm-6 pb-3">
                                    <input type="text" autocomplete="cc-csc" id="txtCvv" name="txtCvv" class="form-control" placeholder="CVV" required>
                                    <span id="digito" class="text-secondary pl-2"></span>
                                </div>
                                <div class="form-group col-sm-12 pb-3">
                                    <input type="text" autocomplete="cc-name" id="txtNombreTitular" name="txtNombreTitular" placeholder="Nombre y apellido del Titular" class="form-control" required>
                                    <span class="text-secondary pl-2">Como figura en el plástico</span>
                                </div>
                                
                            </div>
                        </div>
    
                    </div>
                  
                </div>
                <div class="col-sm-3 mx-sm-0 mx-3">
                    <div class="row card pt-2">
                        <div class="col-sm-12">
                            
                            <h6 class="font-weight-bold text-secondary pl-1">Detalle de tu compra:</h6>
                        </div>
                        <div class="col-sm-12">
             
                            <p class="pl-1" style="font-size:15px; font-weight: bold;">{{$formularioDePago->concepto_factura}}</p>
                        </div>
                        <div class="col-sm-12 importeFormularioPago">
                            <div class="row">
                                <div class="col-6 text-left">
                                    <h6 class="font-weight-bold pl-1 text-secondary">Subtotal:</h6>
                                </div>
                                <div class="col-6 text-right">
                                    <span id="SpanSubtotalFormularioPago" style="display:inline !important;">${{number_format($cobro->importe, 2, ",", ".")}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 mt-3 py-4 importeFormularioPago" style="background-color: #e4f2fd;">
                            <div class="row">
                                <div class="col-6 text-left">
                                    <p class="font-weight-bold pl-1" style="font-size:20px; color: #456d8f;">A pagar</p>
                                </div>
                                <div class="col-6 text-right">
                                    <span id="SpanTotalFormularioPago" style="display:inline !important;">${{number_format($cobro->importe, 2, ",", ".")}}</span> <br>
                                    @if($cuota == 1)
                                    <span id="cantidadCuotas">en {{ $cuota}} cuota</span>
                                    @else 
                                    <span id="cantidadCuotas">en {{ $cuota}} cuotas</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                       
                    </div>
                    <div class="row">
                    <div class="col-sm-12 my-3">
                            <div class="row">
                                <div class="col-12 text-right p-0">
                                <button type="submit" id="linkPagoFormulario" class="btn btn-primary font-weight-bold" style="font-size:22px !important;">Pagar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        </form>
</div>
<div class="modal fade" id="mdlEliminar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Eliminar registro?</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">¿Deseas eliminar el registro actual?</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary" onclick="eliminar();">Sí</button>
          </div>
        </div>
      </div>
    </div>

        
<script>

    $("#form2").validate();


function guardarPrima() {
    if ($("#form2").valid()) {
        modificado = false;
        form1.submit(); 
    } else {
        $("#modalGuardar").modal('toggle');
        msgShow("Corrija los errores e intente nuevamente.", "danger");
        return false;
    }
}


    function eliminar() {
        $.ajax({
            type: "GET",
            url: "{{ asset('/formularioPago/eliminar') }}",
            data: { id:globalId },
            async: true,
            dataType: "json",
            success: function (data) {
                if (data) {
                    msgShow(data.msg, data.err);
    				$('#mdlEliminar').modal('toggle');
                } else {
                    msgShow("Error al eliminar", "success");
                }
            }
        });
    }



function fCodigoCvv(){
    var msg = "Ingresá los 3 números";
    var msg_ = "Ingresá los 4 números";
    var opt = $("#lstTarjeta option:selected").val();
    if(opt == 3){
        $("#digito").html(msg_);
    }
    if(opt == 1){
        $("#digito").html(msg);
    }
    if(opt == 2){
        $("#digito").html(msg);
    }
    if(opt == 5){
        $("#digito").html(msg);
    }
    if(opt == 4){
        $("#digito").html(msg);
    }

}

function fValidarTarjeta(){
    var opt = $("#lstTarjeta option:selected").val();
    codigo = $("#txtNroTarjeta").val().replace('-', '');
    var msg = "Valor incorrecto";
    VISA = /^4[0-9]{3}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/;
    MASTERCARD = /^5[1-5][0-9]{2}-?[0-9]{4}-?[0-9]{4}-?[0-9]   {4}$/;
    AMEX = /^3[47][0-9-]{16}$/;
    ARGENTA = "";
    CABAL = /^(6042|6043|6044|6045|6046|5896){4}[0-9]{12}$/;
    CORDOBESA = "";
    //DINERS = /^3(?:0[0-5]|[68][0-9])[0-9]{2}-?[0-9]{4}-?[0-9]   {4}-?[0-9]{4}$/;
    NARANJA =   /^(589562|402917|402918|527571|527572|0377798|0377799)[0-9]*$/;
    NATIVA = "";
    $("#err_nro_tarjeta").html("");
    if(luhn(codigo)){
        if(opt == "VISA" && !codigo.match(VISA)){
            $("#err_nro_tarjeta").html(msg);
        }
        if(opt == "MASTERCARD" && !codigo.match(MASTERCARD)){
            $("#err_nro_tarjeta").html(msg);
        }
        if(opt == "NARANJA" && !codigo.match(NARANJA)){
            $("#err_nro_tarjeta").html(msg);
        }
        if(opt == "CABAL" && !codigo.match(CABAL)){
            $("#err_nro_tarjeta").html(msg);
        }
        if(opt == "AMEX" && !codigo.match(AMEX)){
            $("#err_nro_tarjeta").html(msg);
        }
    } else {
        $("#err_nro_tarjeta").html(msg);
    }
}
function luhn(value) {
    // Accept only digits, dashes or spaces
    if (/[^0-9-\s]+/.test(value)) return false;
    // The Luhn Algorithm. It's so pretty.
    let nCheck = 0, bEven = false;
    value = value.replace(/\D/g, "");
    for (var n = value.length - 1; n >= 0; n--) {
        var cDigit = value.charAt(n),
        nDigit = parseInt(cDigit, 10);
        if (bEven && (nDigit *= 2) > 9) nDigit -= 9; nCheck +=  nDigit; bEven = !bEven;
    }
    return (nCheck % 10) == 0;
}
</script>
@endsection