{% extends 'inc/base.html.twig' %}
{% block body %}
<div class="container-fluid mt-3">
<div class="row">
<div class="col">
<h4>Condominio:&nbsp;{{ edificios.nombre }}</h4>
<h5>Inmueble:&nbsp;{{ apto.inmueble }}-{{ apto.apellido }}&nbsp;{{ apto.nombre }}</h5>
</div>
<div class="col text-center">
<!--<a class="btn btn-info mt-2" href="{{ constant('URLROOT2') }}/edificios/nuevo">Realizar Pago</a>
<button type="button" class="btn btn-info btn-sm mb-3" data-toggle="modal" data-target="#Pagos">Ordinarios</button>
--><a class="btn btn-info mt-2" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#Pagos" href="#">Realizar Pago</a>
  <a href="{{ constant('URLROOT2') }}/propietarios/" class="btn btn-danger pull-right  mt-2"><i class="fa fa-backward"></i> Regresar</a>

</div>
</div>

  <table class="table table-striped table-hover table-sm">
  <thead class="thead-dark">
    <tr class="row">
      <th class="col-sm-4 text-center">No. Recibo</th>
      <th class="col-sm-4 text-center">Periodo</th>
      <th class="col-sm-4 text-center">Saldo</th>
    </tr>
  </thead>
  <tbody>

{% set sum = 0 %}
{% for dato in datos %}
    <tr class="row">
      <td class="col-sm-4 text-center">{{ dato.id_recibo }}</td>
      <td class="col-sm-4 text-center">{{ dato.mes }}/{{ dato.anho }}</td>
      <td class="col-sm-4 text-center">{{ dato.saldo|number_format(2, ',', '.') }}</td>
    </tr>
{% set sum = sum + dato.saldo %}
{% endfor %}
    <tr class="row">
      <td class="col-sm-4 text-center">&nbsp;</td>
      <td class="col-sm-4 text-center"><b>TOTALES:</b></td>
      <td class="col-sm-4 text-center"><b>{{ sum|number_format(2, ',', '.') }}</b></td>
    </tr>
    <tr class="row">
      <td class="col-sm-4 text-center">&nbsp;</td>
      <td class="col-sm-4 text-center"><b>NOTA DE CREDITO:</b></td>
      <td class="col-sm-4 text-center"><b>({{ apto.nota_credito|number_format(2, ',', '.') }})</b></td>
    </tr>
{% set monto = sum - apto.nota_credito %}
    <tr class="row">
      <td class="col-sm-4 text-center">&nbsp;</td>
      <td class="col-sm-4 text-center"><b>MONTO A PAGAR:</b></td>
      <td class="col-sm-4 text-center"><b>{{ monto|number_format(2, ',', '.') }}</b></td>
    </tr>
</tbody>
</table>
</div>

<div class="modal fade bd-example-modal-lg" id="Pagos" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">PROCESAR PAGO</h5>
      </div>
    <div class="modal-body">

<form method="post" id="add_form2"  enctype="multipart/form-data">
<div id='linea2' class="row">


</div>
    <button type="button" id='btn_sub1' class="btn btn-info" onclick="conf_pago();">CONFIRMAR ESTE PAGO</button>
    <button type="button" class="btn btn-danger" onclick="location.reload();">Cerrar</button>
</form>

<form method="post" id="add_form1"  enctype="multipart/form-data">
<div id='linea1' class="row">
<div class="col-sm-6">
<table class="table table-striped table-sm">
  <thead class="thead-dark">
    <tr class="row">
      <th class="col-sm-6 text-center">Periodo</th>
      <th class="col-sm-6 text-center">Saldo</th>
    </tr>
  </thead>
  <tbody>
{% set sum = 0 %}
{% for dato in datos %}
    <tr class="row">
      <td class="col-sm-6 text-center">{{ dato.mes }}/{{ dato.anho }}</td>
      <td class="col-sm-6 text-center">{{ dato.saldo|number_format(2, ',', '.') }}</td>
      <td class="col-sm-6 text-center">{{ dato.saldo }}</td>
    </tr>
    <input type="hidden" name="recid[]" value="{{ dato.id_recibo }}" />
    <input type="hidden" name="recxx[]" value="{{ dato.mes }}/{{ dato.anho }}" />
    <input type="text" name="mtoxx[]" value="{{ dato.saldo }}" />
{% set sum = sum + dato.saldo %}
{% endfor %}
    <tr class="row">
      <td class="col-sm-6 text-center"><b>TOTALES:</b></td>
      <td class="col-sm-6 text-center"><b>{{ sum|number_format(2, ',', '.') }}</b></td>
    </tr>
    <tr class="row">
      <td class="col-sm-6 text-center"><b>NOTA DE CREDITO:</b></td>
      <td class="col-sm-6 text-center"><b>({{ apto.nota_credito|number_format(2, ',', '.') }})</b></td>
    </tr>
{% set monto = sum - apto.nota_credito %}
    <tr class="row">
      <td class="col-sm-6 text-center"><b>TOTALES:</b></td>
      <td class="col-sm-6 text-center"><b>{{ monto|number_format(2, ',', '.') }}</b></td>
    </tr>
</tbody>
</table>

</div>
<div class="col-sm-6">
        <div class="form-group">
            <label for="message-text">Fechaxx Transacci&oacute;n:</label>
            <input class="form-control" type="date" id="fecha" name="fecha" required  />
        </div>
          <div class="form-group">
          <label for="name">Forma pago:</label><br>
          <select data-placeholder="Seleccione un Concepto..." class="form-control" tabindex="2" id="pago" name="pago" tabindex="1">
          <option value="TRANSFERENCIA">TRANSFERENCIA</option>
          <option value="DEPOSITO">DEPOSITO</option>
          <option value="EFECTIVO">EFECTIVO</option>
          <option value="PAGO MOVIL">PAGO MOVIL</option>
        </select>
        </div>
        <div class="form-group">
            <label for="message-text" class="col-form-label">Detalle:</label>
            <input class="form-control form-control-sm" tabindex="3" type="text" id="detalle" name="detalle" value="" />
        </div>
        <div class="form-group">
            <label for="message-text">No. Documento:</label>
            <input class="form-control form-control-sm" tabindex="4" type="text" id="documento" name="documento" value="" />
        </div>
        <div  class="form-group">
            <label for="message-text">Banco origen de la transacci&oacute;n:</label>
            <select data-placeholder="Seleccione un Banco..." class="form-control" id="banco" name="banco" >
            {% for banco in bancos %}
            <option value="{{ banco.codigo }}">{{ banco.banco }}</option>
            {% endfor %}
            </select>
        </div>
        <div  class="form-group">
            <label for="message-text">Banco/Cuenta destino:</label>
            <input class="form-control" tabindex="5" type="text" id="bancod" name="bancod" value="" />
        </div>
        <div class="form-group">
            <label for="message-text" class="col-form-label">Monto:</label>
            <input class="form-control" tabindex="6" type="text" id="monto" name="monto" value="" min="1" required/>
        </div>

    <input id="id_inmueble" type="hidden" name="id_inmueble" value="{{ apto.id }}">
    <input id="nt_cr" type="text" name="nt_cr" value="{{ apto.nota_credito }}">

    <div class="modal-footer pull-right">
    <button type="submit" tabindex="7" id='btn_sub0' class="btn btn-success" >Procesar Pago</button>
<!--    <button type="button" tabindex="7" id='btn_sub0' class="btn btn-success" onclick="listarxxx();">Procesar Pago</button>
-->
    <button type="button" class="btn btn-danger" onclick="location.reload();">Cerrar</button>
    </div>
</div>
</div>
</form>

    </div>
    </div>

  </div>
</div>

{% endblock %}
{% block javascripts %}
<script>
var fecha = new Date();
var anio = fecha.getFullYear();
var _dia = fecha.getDate();
var _mes = fecha.getMonth(); //viene con valores de 0 al 11
_mes = _mes + 1; //ahora lo tienes de 1 al 12

var dia =String(_dia).padStart(2, "0");
var mes =String(_mes).padStart(2, "0");

let fecha_minimo = anio + '-' + mes + '-' + dia; // Nueva variable
document.getElementById("fecha").max = fecha_minimo;

//$('body').removeClass('modal-open');
//$("#btn_sub0").show();
//$("#btn_sub1").hide();
//$("#add_form1").show();
$("#add_form2").hide();


$('#add_form1').submit(function(e){
e.preventDefault();

alert(e);

//function listarxxx(){
            var formData = new FormData($("#add_form1")[0]);
//            var ruta = "imagen.php";
//alert(formData);
            $.ajax({
                url: "{{ constant('URLROOT2') }}/propietarios/proajax",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function(){
                $('#linea2').html('<p class="alert alert-success">Procesando...</p>');
                },
                success: function(datos)
                {
                alert(datos);
                $("#linea2").html(datos);

/*              $("#pago").prop("disabled", true);
                $("#fecha").prop("disabled", true);
                $("#concepto").prop("disabled", true);
                $("#documento").prop("disabled", true);
                $("#detalle").prop("disabled", true);
                $("#banco").prop("disabled", true);
                $("#monto").prop("disabled", true);*/

       //         document.getElementById("myText").value;
        //        document.getElementById('btn_sub').innerHTML = 'CONFIRMAR ESTE PAGO';
       //         var v = document.getElementById("btn_sub");
       //         v.className += "btn btn-info";
             //   $("#btn_sub0").hide();
              //  $("#btn_sub1").show();

                $("#add_form1").hide();
                $("#add_form2").show();
                }
            });
//        };
});

function conf_pago(){
//    alert('hhhh');
            var formData = new FormData($("#add_form2")[0]);
            $.ajax({
                url: "{{ constant('URLROOT2') }}/propietarios/conf_pago",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function(){
                $('#response').html('<p class="alert alert-success">Procesando...</p>');
                },
                success: function(datos)
                {
                alert("---->"+datos);
                //location.href = "{{ constant('URLROOT2') }}/propietarios/recibo_imp/"+datos;
               //$("#linea2").html(datos);
/*                 $("#pago").prop("disabled", true);
                $("#fecha").prop("disabled", true);
                $("#concepto").prop("disabled", true);
                $("#documento").prop("disabled", true);
                $("#detalle").prop("disabled", true);
                $("#banco").prop("disabled", true);
                $("#monto").prop("disabled", true);

                $("#btn_sub0").hide();
                $("#btn_sub1").show(); */
                }
            });
        };
</script>
{% endblock %}



