<!-- Modal -->
<div id="modalPago" class="modal fade" data-backdrop="static"  data-keyboard="false" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="myModalLabel"><?php echo $_translator->_getTranslation('Pago');?></h3>
        </div> 
        <div id="flashmessenger-pago"></div>
        <div class="modal-body">            
            <div class="col-lg-5 col-md-5 col-sm-5">
                <div class='col-lg-12 col-md-12 col-sm-12'>
                    <div class='col-lg-8 col-md-8 col-sm-8 text-left'><h4 class='m-a-0 m-t-1'><?php echo $_translator->_getTranslation('Total a pagar')?></h4></div>
                    <div class='col-lg-4 col-md-4 col-sm-4 text-right'><h4 id="totalPagar" class='m-a-0 m-t-1'>0.00</h4></div>
                </div>
                <div class='col-lg-12 col-md-12 col-sm-12'>
                    <div class='col-lg-8 col-md-8 col-sm-8 text-left'><h4 class='m-a-0 m-t-1'><?php echo $_translator->_getTranslation('Total pagado')?></h4></div>
                    <div class='col-lg-4 col-md-4 col-sm-4 text-right'><h4 id="totalPagado" class='m-a-0 m-t-1'>0.00</h4></div>
                </div>
                <div class='col-lg-12 col-md-12 col-sm-12'>
                    <div class='col-lg-8 col-md-8 col-sm-8 text-left'><h4 class='m-a-0 m-t-1'><?php echo $_translator->_getTranslation('Balance')?></h4></div>
                    <div class='col-lg-4 col-md-4 col-sm-4 text-right'><h4 id="totalBalance" class='m-a-0 m-t-1'>0.00</h4></div>
                </div>
                <div class='col-lg-12 col-md-12 col-sm-12 p-l-3 m-t-3'>
                    <div class="table-responsive">
                        <table id='cobros-table' class="table table-condensed table-hover table-scroll">
                        <thead>                
                            <th style="width:60%"><?php echo $_translator->_getTranslation('Metodo');?></th>
                            <th style="width:25% !important;text-align:right"><?php echo $_translator->_getTranslation('Monto');?></th>
                            <th style="width:15% !important;text-align:center"><i class="fa fa-trash"></i></th>
                        </thead>
                        <tbody></tbody>
                        </table>
                    </div>                      
                </div>
            </div>
            <div  class="col-lg-7 col-md-7 col-sm-7" style='border-left: 1px solid #ccc'>
                <?php 
                $formCobro = new CobroForm();
                echo $formCobro->openForm();
                echo $formCobro->showId();
                ?>
                <div id="divElementsPyment" class="col-lg-12 col-md-12 col-sm-12 p-t-1">
                    <h4 id="paymentMethodName" class="m-t-0"><?php echo $_translator->_getTranslation('Monto');?></h4>
                    <div id='cardDetails' style="display: none">
                        <!-- Card Number -->
                        <div class="form-group">
                          <!--<label class="col-sm-4 control-label" for="textinput">Card Number</label>-->
                          <div class="input-group col-lg-12 col-md-12 col-sm-12">
                            <input type="text" id="cardnumber" name="cardnumber" maxlength="19" placeholder="Card Number" class="card-number form-control">
                          </div>
                        </div>

                        <!-- Expiry-->
                        <div class="form-group col-md-8 p-l-0 p-r-0">
                          <!--<label class="col-sm-4 control-label" for="textinput">Card Expiry Date</label>-->
                            <div class="form-inline m-t-0">
                              <select id="exp_month" name="exp_month" data-stripe="exp-month" class="card-expiry-month stripe-sensitive required form-control">
                                <option value="" selected="selected">- -</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                              </select>
                              <span> / </span>
                              <select id="exp_year" name="exp_year" data-stripe="exp-year" class="card-expiry-year stripe-sensitive required form-control">
                                   <option value="" selected="selected">- - - -</option>
                              </select>                              
                              <script type="text/javascript">
                                var select = $(".card-expiry-year"),
                                year = new Date().getFullYear();

                                for (var i = 0; i < 12; i++) {
                                    select.append($("<option value='"+(i + year)+"'>"+(i + year)+"</option>"));
                                }
                            </script>                             
                            </div>
                        </div>
                       
                        <!-- CVV -->
                         <div class="form-group col-md-4 p-l-0 p-r-0">
                            <input type="text" id="cvv" name="cvv" placeholder="CVV" maxlength="4" class="card-cvc form-control ">
                        </div>
                        <div class="clear"></div>
                    </div>                       
                    <?php $formCobro->showElement('formaPago')?>
                    <?php $formCobro->showElement('monto')?>                      
                    <div id='divNumDocumento' style="display: none"><?php $formCobro->showElement('numDocumento')?></div> 
                    <?php $formCobro->showElement('card_payment_type');?>
                    <table class="w-100 sparko_numPad" style="float:left">
                        <tr>
                            <td class="btn_numPad" data-value="7">7</td>
                            <td class="btn_numPad" data-value="8">8</td>
                            <td class="btn_numPad" data-value="9">9</td>
                            <td class="btn_numPad" data-value="backspace"><?php echo $_translator->_getTranslation('Borrar')?></td>
                        </tr>
                        <tr>
                            <td class="btn_numPad" data-value="4">4</td>
                            <td class="btn_numPad" data-value="5">5</td>
                            <td class="btn_numPad" data-value="6">6</td>
                            <td class="btn_numPad" data-value="clear"><?php echo $_translator->_getTranslation('Limpiar')?></td>
                        </tr>
                        <tr>
                            <td class="btn_numPad" data-value="3">3</td>
                            <td class="btn_numPad" data-value="2">2</td>
                            <td class="btn_numPad" data-value="1">1</td>
                            <td class="btn_numPad" data-value="cancel"><?php echo $_translator->_getTranslation('Cancelar')?></td>
                        </tr>
                        <tr>
                            <td class="btn_numPad" colspan="2" data-value="0">0</td>
                            <td class="btn_numPad" data-value=".">.</td>
                            <td class="btn_numPad" rowspan="2" data-value="done"><?php echo $_translator->_getTranslation('Ir')?></td>
                        </tr>
                        <tr>
                            <td class="btn_numPad quickPaymentBtn" id="quickBtnTotalPagar" colspan="3" data-value=""></td>                            
                        </tr>
                    </table>
                    <div class="clear"></div>
                    <br/>
                    <table class="w-100 sparko_numPad">
                    <tr>
                        <td></td>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-info-strong" data-value=".10">10c</td>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-info-strong" data-value=".25">25c</td>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-info-strong" data-value=".50">50c</td>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-success-strong" data-value="1">$1</td>
                        
                    </tr>
                    <tr>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-success-strong" data-value="5">$5</td>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-success-strong" data-value="10">$10</td>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-success-strong" data-value="20">$20</td>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-success-strong" data-value="50">$50</td>
                        <td class="btn_numPad_quickPayment quickPaymentBtn bg-success-strong" data-value="100">$100</td>
                    </tr>
                    </table>
                    <style>
                        form.cobro #monto{
                            height: 50px;
                            font-size: 32px;
                            text-align: center;
                        }
                        form.cobro .has-feedback select.form-control{
                            padding-right: 12px;
                        }
                        table.sparko_numPad td.btn_numPad{
                            width: 25%;
                            height: 50px;
                            text-align: center;
                            vertical-align: middle;  
                            border: 1px solid #e5e5e5;  
                            border-radius: 5px;
                            font-weight: bold;
                        }
                        
                        table.sparko_numPad td.btn_numPad:hover{
                            position: relative;  
                            top: 1px;  
                            left: 1px;  
                            border-color: #979797;  
                            cursor: pointer;                            
                        }
                        
                        table.sparko_numPad td.btn_numPad_quickPayment{
                            width: 14.285%;
                            height: 50px;
                            text-align: center;
                            vertical-align: middle;  
                            border: 1px solid #e5e5e5;  
                            font-weight: bold;
                        }
                        
                        table.sparko_numPad td.btn_numPad_quickPayment:hover{
                            position: relative;  
                            border-color: #979797;  
                            cursor: pointer;                            
                        }
                        
                        .bg-success-strong{
                            background-color: #28a745;
                        }
                        
                        .bg-info-strong{
                            background-color: #17a2b8;
                        }
                    </style>
                    <script>                        
                        $('#cardholdername').on('keyup',function(e){if(e.keyCode===13){$('#cardnumber').focus();}});
                        $('#cardnumber').on('keyup',function(e){if(e.keyCode===13){$('#exp_month').focus();}});
                        $('#exp_month').on('keyup',function(e){if(e.keyCode===13){$('#exp_year').focus();}});
                        $('#exp_year').on('keyup',function(e){if(e.keyCode===13){$('#cvv').focus();}});
                        
                        $('table.sparko_numPad td.btn_numPad,table.sparko_numPad td.btn_numPad_quickPayment').on('click',function(){setPaymentAmount(this);});
                        disabledAddPayment();
                        $(document).ready(function() {
                            $('form[name=cobro]').bootstrapValidator({
                                message: 'This value is not valid',
                                feedbackIcons: {
                                    valid: 'glyphicon glyphicon-ok',
                                    invalid: 'glyphicon glyphicon-remove',
                                    validating: 'glyphicon glyphicon-refresh'
                                },
                                fields: {
                                    cardholdername: {
                                        validators: {
                                            notEmpty: {
                                                message: 'The card holder name is required and can\'t be empty'
                                            },
                                            stringLength: {
                                                min: 6,
                                                max: 70,
                                                message: 'The card holder name must be more than 6 and less than 70 characters long'
                                            }
                                        }
                                    },
                                    cardnumber: {
                                        selector: '#cardnumber',
                                        validators: {
                                            notEmpty: {
                                                message: 'The credit card number is required and can\'t be empty'
                                            },
                                            creditCard: {
                                                    message: 'The credit card number is invalid'
                                            }
                                        }
                                    },
                                    expMonth: {
                                        selector: '[data-stripe="exp-month"]',
                                        validators: {
                                            notEmpty: {
                                                message: 'The expiration month is required'
                                            },
                                            digits: {
                                                message: 'The expiration month can contain digits only'
                                            },
                                            callback: {
                                                message: 'Expired',
                                                callback: function(value, validator) {
                                                    value = parseInt(value, 10);
                                                    var year         = validator.getFieldElements('expYear').val(),
                                                        currentMonth = new Date().getMonth() + 1,
                                                        currentYear  = new Date().getFullYear();
                                                    if (value < 0 || value > 12) {
                                                        return false;
                                                    }
                                                    if (year == '') {
                                                        return true;
                                                    }
                                                    year = parseInt(year, 10);
                                                    if (year > currentYear || (year == currentYear && value > currentMonth)) {
                                                        validator.updateStatus('expYear', 'VALID');
                                                        return true;
                                                    } else {
                                                        return false;
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    expYear: {
                                        selector: '[data-stripe="exp-year"]',
                                        validators: {
                                            notEmpty: {
                                                message: 'The expiration year is required'
                                            },
                                            digits: {
                                                message: 'The expiration year can contain digits only'
                                            },
                                            callback: {
                                                message: 'Expired',
                                                callback: function(value, validator) {
                                                    value = parseInt(value, 10);
                                                    var month        = validator.getFieldElements('expMonth').val(),
                                                        currentMonth = new Date().getMonth() + 1,
                                                        currentYear  = new Date().getFullYear();
                                                    if (value < currentYear || value > currentYear + 100) {
                                                        return false;
                                                    }
                                                    if (month == '') {
                                                        return false;
                                                    }
                                                    month = parseInt(month, 10);
                                                    if (value > currentYear || (value == currentYear && month > currentMonth)) {
                                                        validator.updateStatus('expMonth', 'VALID');
                                                        return true;
                                                    } else {
                                                        return false;
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    cvv: {
                                        selector: '#cvv',
                                        validators: {
                                            notEmpty: {
                                                message: 'The cvv is required and can\'t be empty'
                                            },
                                            cvv: {
                                                message: 'The value is not a valid CVV',
                                                creditCardField: 'cardnumber'
                                                }
                                        }
                                    }
                                }
                            });
                        });
                    </script>
                </div>
                <?php echo $formCobro->closeForm();?>
            </div>
            <div class="clear"></div>
            <div class="col-md-12">
                <p><?php echo $_translator->_getTranslation('Agregar pago')?></p>
                <hr class='m-t-0'/>
                    <?php 
                    if($_listFormasPago!== null){
                        $arrayBtnClass = array(      
							'3'=>'btn-success',						
                            '4'=>'btn-warning',
                            '5'=>'btn-warning',
                            '6'=>'btn-warning',
                            '8'=>'btn-primary',
                            '9'=>'btn-default',
							'10'=>'btn-danger',
                        );
                        
                        foreach($_listFormasPago as $key => $_formaPago){
                            if(!empty($_formaPago['fa_icon']) && !is_null($_formaPago['fa_icon'])){
                                $isFromFile = strpos($_formaPago['fa_icon'], ":");
                                
                                if($isFromFile ===  false){
                                    $icon = "fa fa-{$_formaPago['fa_icon']}"; ?> 
                                    <span class='btn <?php echo $arrayBtnClass[$_formaPago['id']] ?>' onclick="setFormaPago(<?php echo $key ?>,this);" data-paymentmethod='<?php echo $_formaPago['descripcion']; ?>' data-toggle='modal' data-target='#modalPagoDetalle'><i class="<?php echo $icon ?>"></i> <?php echo $_formaPago['descripcion_corta'];?></span><?php
                                }
                                else{
                                    $icon = explode(":", $_formaPago['fa_icon']);
                                    $icon = "<img src='".PATH_IMG."/icons/{$icon[1]}' width='100%' height='100%' />";?>
                                    <span class='btn btn-default' onclick="setFormaPago(<?php echo $key ?>,this);" data-paymentmethod='<?php echo $_formaPago['descripcion']; ?>' data-toggle='modal' data-target='#modalPagoDetalle'><?php echo $icon;?></span><?php
                                }
                            }                                
                        }
                    } ?>
            </div>
            <div class="clear"></div>
        </div>
        <div class="modal-footer">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <input type="checkbox" id='is_drive_thru' value='0'  /> <label style='margin-left: 7px;margin-right: 25px'><?php echo $_translator->_getTranslation('Venta por Drive thru')?></label>
                <div class="pull-left"><?php $element = $form->getElement('terminar');echo $form->createOnlyElement($element); /* Save venta */?></div>                
                <?php $element = $form->getElement('cerrarPago');echo $form->createOnlyElement($element);?>
            </div>
        </div>
        </div>
    </div>           
    </div>
<script>
    $('#is_drive_thru').on('change',function(){
        if($(this).prop('checked') === true){$(this).val('1');}else{$(this).val('0');}
    });
</script>