@extends('crudbooster::admin_template')
@section('content')

<style>

.sweet-alert .dropdown button {
    color: black !important;
	border: 1px solid #d0d0d0 !important;
	margin-top: 5px !important;
}

.datepicker {
    z-index: 99999999999 !important;
}

.sweet-alert textarea{
border-radius: 2px;
resize: none;
height: 100px;
margin: 5px 0px;
display: block;
   width: 100%;
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.42857143;
   color: #555;
   background-color: #fff;
   background-image: none;
   border: 1px solid #ccc;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
   -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.metodoPago {
    min-height: 50px;
    color: black;
    font-weight: bold;
	cursor: pointer;
}

.sweet-alert h2 {
    color: #575757;
    font-size: 24px !important;
    text-align: center;
    font-weight: 600;
    text-transform: none;
    position: relative;
    margin: 0px 0 !important;
    padding: 0;
    line-height: 40px;
    display: block;
}

.metodoPagoSuscripcion {
    min-height: 50px;
    color: black;
    font-weight: bold;
	cursor: pointer;
}

ul.typeahead {
	top: 41px;
    left: 15px;
    display: block;
    margin-top: 12px !important;
}

.nav-tabs .nav-link {

    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
	color: #8c8a8a;

	border: 1px solid #f0f0f0 !important;
    padding-bottom: 5px;
    margin-top: 9px;
    font-size: 12px;
}

.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
	border-color: #dee2e6 #dee2e6 #fff;
    padding-bottom: 10px;
    margin-top: 0px;
	font-size: 15px;
	border-bottom: 1px solid #fff !important;
}

@media (min-width: 768px)
{
	.modal-dialog {
		width: 800px;
		margin: 30px auto;
	}
}


.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.nav-tabs .nav-item {
    margin-bottom: -1px;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
}

.metodoPago.seleccionado {
    background-color: #f0f0f0
}

.metodoPagoSuscripcion.seleccionado {
    background-color: #f0f0f0
}

.no_editable input {
	border: none;
    pointer-events: none;
}

.no_editable .input-group-addon{
	display: none;
}

.no_editable input[name=referido_chk],.no_editable input[name=referido]
{
	border: 1px solid #ccc !important;
    pointer-events: initial !important;
}

.no_editable .input-group {
	width: 100%;
}

.no_editable input#cellphone, .no_editable input#phone, .no_editable input#new-tag, .no_editable input#new-pref, .no_editable input#new-image, .no_editable input#new-document {
	border: 1px solid #d2d6de;
    pointer-events: initial !important;
}

.no_editable .btn-success {
	pointer-events: initial !important;
	width: auto !important;
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  position: fixed;
    height: 100vh;
    background: #ffffff;
    width: 100vw;
    z-index: 9999;
    top: 0;
    left: 0;
    padding-left: calc(50% - 32px);
    padding-top: 10%;
	display: none;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.sweet-alert {
    width: 800px !important;
    margin-left: -400px !important;
}

</style>
<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

@php
	$aMeses = array('Ene.', 'Feb.', 'Mar.', 'Abr.', 'May.', 'Jun.', 'Jul.', 'Ago.', 'Sep.', 'Oct.', 'Nov.', 'Dic.');
@endphp

<style>

select {
	border-color: #dfdfdf;
}

#modal-add-event select{
-webkit-appearance: none;
height: 27px;
padding: 0 5px;
border-radius: 0;
background: white;
}

.btn-primary {
    background-color: #555;
    border-color: #313131;
}

.nav-tabs-custom>.nav-tabs>li.active {
border-bottom: 2px solid black;
}
.nav-tabs-custom>.nav-tabs>li {
border-top: 0 !important;
border-bottom: 2px solid transparent;
}

.profile-status{
margin-bottom: 20px;
display: table;
width: 100%;
}

.profile-status > div{
padding: 5px 10px;
float: left;
height: 55px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
border-left: 0px !important;
position: relative;
margin: 0 4px;
font-size: 14px;
}

.profile-status > div::after {
z-index: 2;
content: '';
position: absolute;
top: 0px;
right: -10px;
height: 55px;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
border-left-width: 10px;
border-left-color: white;
border-left-style: solid;
}

.profile-status > div::before {
z-index: 1;
content: '';
position: absolute;
top: 0px;
left: 0px;
height: 55px;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
border-left-width: 10px;
border-left-color: #ffffff;
border-left-style: solid;
}

.profile-status > div.active{
height: 65px;
margin-top: -5px;
font-weight: bold;
}

.profile-status > div.active::before, .profile-status > div.active::after {
  height: 65px;
  border-bottom: 33px solid transparent;
  border-top: 33px solid transparent;
}

.action-links{
  text-align: left;
}

.action-links a,
.action-links button, .action-links2 button{
  width: 31px;
  height: 31px;
  font-size: 15px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  margin: 0 7px;
  color: #FFFFFF !important;
}

.action-links a.phone{
  background-color: #ab6abb !important;
}

.action-links a.email,
.action-links button.email{
  background-color: #f39c12 !important;
}

.action-links2 a.email,
.action-links2 button.email{
  background-color: #f39c12 !important;
}

.action-links a.whatsapp,
.action-links button.whatsapp{
  font-size: 17px;
  background-color: #25d366 !important;
}

.action-links a.facebook{
  background-color: #4267b2 !important;
}

.action-links a.calendar{
  background-color: #00adff !important;
}

.action-links a.pago{
  background-color: #ff0000 !important;
}

.action-links.init-contact a,
.action-links.init-contact button{
  height: 46px;
  width: 46px;
  padding: 6px 2px;
  font-size: 26px !important;
  transition: all 0.2s ease;
  box-shadow: 1px 1px 6px #33333360;
}

.action-links.init-contact a.whatsapp,
.action-links.init-contact button.whatsapp{
  font-size: 32px !important;
}

.action-links.init-contact a:hover,
.action-links.init-contact button:hover{
  box-shadow: 1px 1px 6px #00000087;
}

.modal hr{
  width: 60%;
}

@media(max-width: 800px){
.profile-status > div{
  width: 100%;
  float: none;
  height: 40px !important;
}

.profile-status > div::after, .profile-status > div::before{
  border: 0;
}

.profile-status > div:not(.active){
  display: none;
}
}

.contacto-whatsapp .mensaje {
	display: none;
}

.contacto-whatsapp h3 {
	transition: all 0.2s ease;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.contacto-whatsapp.iniciado .mensaje {
	display: block;
}

.contacto-whatsapp.iniciado .whatsapp {
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	margin-top: -20px;
	margin-bottom: -16px;
}

.contacto-whatsapp.iniciado h3 {
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	margin-top: -10px;
}

.contacto-whatsapp.iniciado .tiene_conversacion {
	display: none;
}

.contacto-whatsapp .tituloEntrante {
	display: none;
}

.contacto-whatsapp #link_whatsapp {
	display: inline-block;
}

.contacto-whatsapp #link_whatsapp2 {
	display: none;
}

.contacto-whatsapp .tituloSaliente {
	display: block;
}

.contacto-whatsapp.saliente .tituloEntrante {
	display: block;
}

.contacto-whatsapp.saliente .tituloSaliente {
	display: none;
}

.contacto-whatsapp.iniciado .estados {
	display: none;
}

.contacto-whatsapp.saliente .estados {
	display: block;
}

.contacto-whatsapp.saliente #link_whatsapp {
	display: none;
}

.contacto-whatsapp.saliente #link_whatsapp2 {
	display: inline-block;
}

.contacto-phone .mensaje {
	display: none;
}

.contacto-phone h3 {
	transition: all 0.2s ease;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.contacto-phone.iniciado .mensaje {
	display: block;
}

.contacto-phone.iniciado .whatsapp {
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	margin-top: -20px;
	margin-bottom: -16px;
}

.contacto-phone.iniciado h3 {
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	margin-top: -10px;
}

.contacto-phone.iniciado .tiene_conversacion {
	display: none;
}

.contacto-phone .tituloEntrante {
	display: none;
}

.contacto-phone #link_phone {
	display: inline-block;
}

.contacto-phone #link_phone2 {
	display: none;
}

.contacto-phone .tituloSaliente {
	display: block;
}

.contacto-phone.saliente .tituloEntrante {
	display: block;
}

.contacto-phone.saliente .tituloSaliente {
	display: none;
}

.contacto-phone.iniciado .estados {
	display: none;
}

.contacto-phone.saliente .estados {
	display: block;
}

.contacto-phone.saliente #link_phone {
	display: none;
}

.contacto-phone.saliente #link_phone2 {
	display: inline-block;
}

.contacto-facebook .mensaje {
	display: none;
}

.contacto-facebook h3 {
	transition: all 0.2s ease;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.contacto-facebook.iniciado .mensaje {
	display: block;
}

.contacto-facebook.iniciado .facebook {
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	margin-top: -20px;
	margin-bottom: -16px;
}

.contacto-facebook.iniciado h3 {
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	margin-top: -10px;
}

.contacto-facebook.iniciado .tiene_conversacion {
	display: none;
}

.contacto-facebook .tituloEntrante {
	display: none;
}

.contacto-facebook #link_facebook {
	display: inline-block;
}

.contacto-facebook #link_facebook2 {
	display: none;
}

.contacto-facebook .tituloSaliente {
	display: block;
}

.contacto-facebook.saliente .tituloEntrante {
	display: block;
}

.contacto-facebook.saliente .tituloSaliente {
	display: none;
}

.contacto-facebook.iniciado .estados {
	display: none;
}

.contacto-facebook.saliente .estados {
	display: block;
}

.contacto-facebook.saliente #link_facebook {
	display: none;
}

.contacto-facebook.saliente #link_facebook2 {
	display: inline-block;
}

.subestados > div {
	display: inline-block;
	padding: 5px;
	font-size: 12px;
	margin: 5px;
	cursor: pointer;
}

.estados > div {
	display: inline-block;
	padding: 5px;
	font-size: 12px;
	margin: 5px;
	cursor: pointer;
}

.subestados > div.activo {
	border: 2px solid black;
}

.estados > div.activo {
	border: 2px solid black;
}

a.btn-secondary {
	background: #93959a;
	color: white !important;
	margin-top: 20px;
}

a.btn-danger {
	margin-top: 20px;
}

.contacto-mail .mensaje {
	display: none;
}

.contacto-mail.iniciado .mensaje {
	display: block;
}

.contacto-mail.iniciado .saliente {
	display: none;
}

.contacto-mail.iniciado .email {
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	margin-top: -20px;
	margin-bottom: -16px;
}

.contacto-mail.iniciado h3 {
	-ms-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	margin-top: -10px;
}

.contacto-mail.iniciado .action-links {
	display: none;
}

.contacto-mail .action-links2 {
	display: none;
}

.contacto-mail.iniciado .action-links2 {
	display: block;
}

.div_medio:first-child {
	border-radius: 35px 35px 0px 0px;
}

.div_medio:last-child {
	border-radius: 0px 0px 50px 50px;
}

.div_medio:only-child {
	border-radius: 50px 50px 50px 50px;
}

.medio-canal-anuncio {
	display: inline-block; text-align: center; padding: 5px;
}

.medio-canal-anuncio span {
	font-weight: bold;
    font-size: 14px;
}

.medio-canal-anuncio small {
	font-size: 11px;
}

.subestados {
	display: none;
}

  .profile-status{
    margin-bottom: 20px;
    display: table;
    width: 100%;
  }

  .profile-status > div{
    padding: 5px 10px;
    float: left;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    border-left: 0px !important;
    position: relative;
    margin: 0 4px;
    font-size: 14px;
  }

  .profile-status > div::after {
    z-index: 2;
    content: '';
    position: absolute;
    top: 0px;
    right: -10px;
    height: 55px;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    border-left-width: 10px;
    border-left-color: white;
    border-left-style: solid;
  }

  .profile-status > div::before {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 55px;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    border-left-width: 10px;
    border-left-color: #ffffff;
    border-left-style: solid;
  }

  .profile-status > div.active{
    height: 65px;
    margin-top: -5px;
  }

  .profile-status > div.active::before, .profile-status > div.active::after {
    height: 65px;
    border-bottom: 33px solid transparent;
    border-top: 33px solid transparent;
  }

  .action-links{
  text-align: center;
}

#table_detail tr {
  background-color:  #f9f9f9;
}

.action-links a,
.action-links button, .action-links2 button{
  width: 31px;
  height: 31px;
  font-size: 15px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  margin: 0 7px;
  color: #FFFFFF !important;
}

.action-links a.phone{
  background-color: #ab6abb !important;
}

.action-links a.email,
.action-links button.email{
  background-color: #f39c12 !important;
}

.action-links2 a.email,
.action-links2 button.email{
  background-color: #f39c12 !important;
}

.action-links a.whatsapp,
.action-links button.whatsapp{
  font-size: 17px;
  background-color: #25d366 !important;
}

.action-links a.facebook{
  background-color: #4267b2 !important;
}

.action-links a.calendar{
  background-color: #00adff !important;
}

.action-links a.pago{
  background-color: #ff0000 !important;
}

.action-links.init-contact a,
.action-links.init-contact button{
  height: 46px;
  width: 46px;
  padding: 6px 2px;
  font-size: 26px !important;
  transition: all 0.2s ease;
  box-shadow: 1px 1px 6px #33333360;
}

.action-links.init-contact a.whatsapp,
.action-links.init-contact button.whatsapp{
  font-size: 32px !important;
}

.action-links.init-contact a:hover,
.action-links.init-contact button:hover{
  box-shadow: 1px 1px 6px #00000087;
}


  @media(max-width: 800px){
    .profile-status > div{
      width: 100%;
      float: none;
      height: 40px;
    }

    .profile-status > div::after, .profile-status > div::before{
      border: 0;
    }
  }

  .panel {
        margin-bottom: 20px;
        background-color: transparent;
        border: none;
        border-radius: 0;
        padding: 10px;
        box-shadow: none;
    }

    #taula {
        height: 200px !important;
        overflow: auto;
    }

.d-flex{
  display: flex;
} 

.justify-content-end
{
  justify-content: end;
}

.loader {
  width: 20px;
  height: 20px;
  border: 2px solid #FFF;
  border-bottom-color: #919191;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
} 
</style>

<div class="panel panel-default">
    <div class="panel-heading">
        Datos de Proyectos
    </div>
    <div class="panel-body">
        <form method="post" action="{{ route('guardarFactura') }}" id="formCuota">
            <input type="hidden" name="_token" value="{{csrf_token()}}" />
            <input type="hidden" name="cuota_id" id="cuota_id" value="{{$row->id}}" />
            <input type="hidden" name="referer" value="{{ url()->full() }}">
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group row">
                      <label class="col-sm-3 col-form-label">Proyecto</label>
                      <div class="col-sm-9">
                        <input type="text" name="nombre" id="nombre" class="form-control" value="{{$row->proyecto}}" readonly/>
                      </div>
                    </div>
                  </div>
                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Cliente</label>
                    <div class="col-sm-9">
                        <input type="text" name="nombre" id="cliente" class="form-control" value="{{$row->cliente}}" readonly/>
                    </div>
                   </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group row">
                      <label class="col-sm-3 col-form-label">Pais</label>
                      <div class="col-sm-9">
                        <input type="text" name="nombre" id="pais" class="form-control" value="{{$row->pais}}" readonly/>
                      </div>
                    </div>
                  </div>
                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Moneda</label>
                    <div class="col-sm-9">
                        <input type="text" name="nombre" id="moneda" class="form-control" value="{{$row->moneda}}" readonly/>
                    </div>
                  </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Método Pago</label>
                    <div class="col-sm-9">
                        <input type="text" name="nombre" id="metodo" class="form-control" value="{{$row->metodo}}" readonly/>
                    </div>
                  </div>
                </div>
                
                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Plazo de pago</label>
                    <div class="col-sm-9">
                        <input type="text" name="nombre" id="plazo" class="form-control" value="{{$row->plazo}}" readonly/>
                    </div>
                  </div>
                </div>
                
                @if ($cuentas)
                <div class="col-md-6">
                    <div class="form-group row">
                      <label class="col-sm-3 col-form-label">Importe</label>
                      <div class="col-sm-9">
                          <input type="text" disabled name="importe" id="importe" class="form-control" value="{{number_format($row->importe, 2, ',', '.')}}" required/>
                      </div>
                    </div>
                </div>
                @else 
                <div class="col-md-6">
                    <div class="form-group row">
                      <label class="col-sm-3 col-form-label">Importe</label>
                      <div class="col-sm-9">
                          <input type="text" name="importe" id="importe" class="form-control" value="{{number_format($row->importe, 2, ',', '.')}}" required/>
                      </div>
                    </div>
                </div>
                @endif
                <div class="col-md-6">
                    <div class="form-group row">
                      <label class="col-sm-3 col-form-label">Factura</label>
                      <div class="col-sm-9">
                          <input type="text" name="factura" id="factura" class="form-control" value="{{$row->factura}}" required/>
                      </div>
                    </div>
                </div>

                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="fecha_factura">Fecha de factura</label>
                    <div class="col-sm-9">
                        <input type="date" name="fecha_factura" id="fecha_factura" class="form-control" value="{{$row->fecha_factura}}" required/>
                    </div>
                  </div>
              </div>

                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="comments">Comentarios: </label>
                    <div class="col-sm-9">
                        <textarea type="text" 
                          name="nombre" id="comments" 
                          name="comments" class="form-control"
                          maxlength="1000">{{$row->comments}}</textarea>
                    </div>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="comments">Comentarios del proyecto: </label>
                    <div class="col-sm-9">
                        <textarea type="text" 
                          name="nombre" id="comments" 
                          name="comments" class="form-control"
                          maxlength="1000">{{$row->proyecto_comments}}</textarea>
                    </div>
                  </div>
                </div>

                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="comments">Archivo adjunto: </label>
                    <div class="col-sm-9">
                      @if($row->archivo)
                        <a href="{{ url('download') . '/' . $row->id }}" class="btn btn-success">Descargar adjunto</a>
                      @else
                        <p>No se encontró archivo adjunto</p>
                      @endif
                    </div>
                  </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <input type="submit" name="submit" value="Guardar" class="btn btn-success">
                </div>
                <div class="col-md-6">

                </div>
            </div>
        </form>

        <div class="row d-flex justify-content-center">
          <div class="col-md-6">
            <strong id="httpResultRow"></strong>
          </div>
        </div>

        <div class="row d-flex justify-content-end">
          <div class="col-md-3">
            <button class="btn btn-danger" id="undoValidationBtn">Deshacer validación</button>
          </div>
        </div>
    </div>
</div>

<script>

const cuota = document.getElementById("cuota_id").value;
const btnValidUndo = document.getElementById("undoValidationBtn");
const resultP = document.getElementById("httpResultRow");

btnValidUndo.addEventListener("click", deshacerValidacion);

function deshacerValidacion()
{
  btnValidUndo.innerHTML = `<span class="loader"></span>`;
  //btnValidUndo.disabled = true;

  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      cuota_id: cuota,
    }),
  };

fetch(`/api/undoValidation`, options)
  .then((response) => response.json())
  .then(
      async (result) => {
        console.log(result);
        resultP.innerText = "Se ha guardado correctamente el estado de la cuota.";
        btnValidUndo.innerHTML = "Deshacer validación";
      },
      (error) => {
          console.log(error);
      }
  );
}

</script>

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" scr="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.3/sorting/datetime-moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/date-1.1.1/r-2.2.9/datatables.min.js"></script>
<script>
 var url = "{{url('api/v1/cuotas') }}";
 var id = {{$row->id}};
 var verified = {{(CRUDBooster::myPrivilegeId() == config('softland.privilege.superadmin') || CRUDBooster::myPrivilegeId() == config('softland.privilege.comercial')) ? 1:0}};
 var editor;

 $(document).ready(function(){
    $("#importe, #importem").on({
        "focus": function (event) {
            $(event.target).select();
        },
        "keyup": function (event) {
            $(event.target).val(function (index, value ) {
                return value
                    // 1️⃣ Permitir el guion sólo al inicio
                    .replace(/(?!^-)[^\d]/g, "") // elimina todo menos dígitos y primer guion
                    .replace(/^(-?)(\d+)/, "$1$2") // asegura que el guion quede al principio
                    // 2️⃣ Formatea el número
                    .replace(/([0-9])([0-9]{2})$/, '$1,$2')
                    .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".");
            });
        }
    });
});

</script>


@endsection