@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;
}

.yellow {
  background-color:  #E3FF00 !important;
}

.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;
    }
</style>
@php
	$aMeses = array('Ene.', 'Feb.', 'Mar.', 'Abr.', 'May.', 'Jun.', 'Jul.', 'Ago.', 'Sep.', 'Oct.', 'Nov.', 'Dic.');
@endphp

<div class="row" style="margin-top: 30px;margin-bottom: 20px;">
    <div class="col-md-3">
        <div class="info-box bg-aqua">
            <span class="info-box-icon" style="font-size: 20px; line-height: 27px;padding-top: 18px;">
                 {{ $aMeses[date('m') -1] }}<br>
                <small style="font-size: 22px"> {{ date('Y') }}</small>
            </span>

            <div class="info-box-content">
                <span class="info-box-text">Última Facturada</span>
                <span class="info-box-number"><span id="cabecera-cuota-mes">$ {{number_format($last->cuota, 2, ',', '.')}}</span></span>

                <div class="progress">
                    <div class="progress-bar" id="cabecera-cuota-progress" style=""></div>
                </div>
                <span class="progress-description">
                    {{ $moneda->nombre }}
                </span>
            </div>
            <!-- /.info-box-content -->
        </div>
    </div>

    <div class="col-md-3">
        <div class="info-box bg-green">
            <span class="info-box-icon" data-toggle="tooltip" style="font-size: 20px; line-height: 27px;padding-top: 18px;" title="Moneda">
              Moneda <br/>{{ $moneda->nombre }}
            </span>

            <div class="info-box-content">
                <span class="info-box-text">País</span>
                <span class="info-box-number"><span id="cabecera-total-pagos">{{$pais->nombre}}</span></span>

                <div class="progress">
                    <div class="progress-bar" id="cabecera-cuota-progress" style=""></div>
                </div>
                <span class="progress-description">
                  {{$metodo->nombre}}
                </span>
            </div>
            <!-- /.info-box-content -->
        </div>
    </div>

    <div class="col-md-3">
        <div class="info-box bg-yellow">
            <span class="info-box-icon" style="font-size: 30px; line-height: 27px;padding-top: 18px;"><br>
                <small style="font-size: 16px">Dólar BASE</small>
            </span>

            <div class="info-box-content">
                <span class="info-box-text" style="font-size:12px">D&oacute;lar <br><i class="fa fa-arrow-up pull-right" style="border-radius: 50%;padding: 2px 2px 2px 3px;background: white;color: #00a65a"></i>

                <span class="info-box-number">145</span>

                <div class="progress">
                    <div class="progress-bar" id="cabecera-cuota-progress" style=""></div>
                </div>

                <span class="progress-description">
                    <span >D&oacute;lar HOY: </span>
                </span>
            </div>
            <!-- /.info-box-content -->
        </div>
    </div>

    <div class="col-md-3">
        <div class="info-box bg-yellow" style="background-color: #9C27B0 !important">

            <div class="info-box-content" style="margin: 0">
                <span class="info-box-text">DOCUMENTOS <small style="cursor: pointer; float: right" onclick="location.href='http://softland.devuocloud.com/admin/upload_files'"><b><i class="fa fa-files-o"></i> Ver Todos</b></small></span>
                <span id="cabecera-inicio-plan"><i class="fa fa-refresh fa-spin"></i></span>

                <div class="progress">
                    <div class="progress-bar"  style=""></div>
                </div>

                <span class="progress-description">
                    <span id="cabecera-total-"></span>
                </span>
            </div>
            <!-- /.info-box-content -->
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        Datos de Proyecto
    </div>
    <div class="panel-body">
        <form method="post" action="{{ route('editarProyecto') }}" id="formProyecto">
            <input type="hidden" name="_token" value="{{csrf_token()}}" />
            <input type="hidden" name="proyecto_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->nombre}}" required />
                      </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">
                       <select style="width:100%" class="form-control select2-hidden-accessible" id="cliente_id" required="" name="cliente_id" tabindex="-1" aria-hidden="true">
                        <option value="">** Selecciona un Cliente</option>
                        @foreach($clientes as $c)
                            @if ($cliente->id == $c->id)
                                <option value="{{$c->id}}" SELECTED>{{$c->nombre}}</option>
                            @else
                                <option value="{{$c->id}}">{{$c->nombre}}</option>
                            @endif
                        @endforeach
                       </select>
                    </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">
                         <select style="width:100%" class="form-control select2-hidden-accessible" id="pais" required="" name="pais" tabindex="-1" aria-hidden="true">
                            <option value="">** Selecciona un Pais</option>
                          @foreach($paises as $p)
                            @if($pais->id == $p->id)
                              <option value="{{$p->id}}" SELECTED>{{$p->nombre}}</option>
                            @else
                              <option value="{{$p->id}}">{{$p->nombre}}</option>
                            @endif
                          @endforeach
                          </select>
                      </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">
                        <select style="width:100%" class="form-control select2-hidden-accessible" id="moneda" required="" name="moneda" tabindex="-1" aria-hidden="true">
                          <option value="">** Selecciona una Moneda</option>
                          @foreach($monedas as $m)
                            @if($moneda->id == $m->id)
                              <option value="{{$m->id}}" SELECTED>{{$m->nombre}}</option>
                            @else
                              <option value="{{$m->id}}">{{$m->nombre}}</option>
                            @endif
                          @endforeach
                        </select>
                    </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">
                        <select style="width:100%" class="form-control select2-hidden-accessible" id="metodo_pago" required="" name="metodo_pago" tabindex="-1" aria-hidden="true">
                          <option value="">** Selecciona un Metodo</option>
                          @foreach($metodos as $m)
                            @if($metodo->id == $m->id)
                              <option value="{{$m->id}}" SELECTED>{{$m->nombre}}</option>
                            @else
                              <option value="{{$m->id}}">{{$m->nombre}}</option>
                            @endif
                          @endforeach
                        </select>
                    </div>
                  </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        Plan de cuotas
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <table class="table" id="plan">
                    <thead>
                    <tr>
                        <th scope="col">Fecha de facturación</th>
                        <th scope="col">Concepto</th>
                        <th scope="col">Servicio</th>
                        <th scope="col">Plazo</th>
                        <th scope="col">Importe</th>
					    <th scope="col">Subtotal</th>
                        <th></th>
                    </tr>
                    </thead>
                    @php
                        $subtotal = 0;
                    @endphp
                    @foreach($historial as $cuota)
                        @php
                            $subtotal += $cuota->importe;
                        @endphp
                    @endforeach
                    <tfoot>
                    <tr>
                        <th>Total importe:</th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>{{ '$' . number_format($subtotal, 2, ',', '.')}}</th>
                        <th></th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        Agregar Archivos
    </div>
    <div class="panel-body">
        <form id="Form-id-cuotas" method="post" action="{{ route('guardarArchivo') }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type='hidden' name='return_url' value='{{ @$return_url }}'/>
            <input type='hidden' name='ref_mainpath' value='{{ CRUDBooster::mainpath() }}'/>
            <input type='hidden' name='ref_parameter' value='{{urldecode(http_build_query(@$_GET))}}'/>
            <input type='hidden' name='project_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">Nombre de archivo</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" name="archivo" style="width: 100%"  id="archivo">
                      </div>
                    </div>
                  </div>
                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Archivo</label>
                    <div class="col-sm-9">
                        <input type="file" name="file" class="form-control" id="file" style="width: 100%">
                    </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>
</div>

<div class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <table class="table table-hover table-striped table-bordered">
              <thead>
                <tr class="active">
                    <th with="30%">Nombre Archivo</th>
                    <th width="50%">Archivo</th>
                    <th></th>
                <tr>
              </thead>
              <tbody>
                @if ($files)
                    @foreach($files as $f)
                        <tr>
                            <td>{{$f->name}}</td>
                            <td>{{$f->name}}</td>
                            <td>
                                <div class="button_action" style="text-align:right"><a class="btn btn-xs btn-warning" title="Borrar" target="_self"><i class="fa fa-trash"></i> </a>

                                </div>
                            </td>
                        </tr>
                    @endforeach
                @else
                   <tr>
                    <td>No hay archivos cargados</td>
                    <td></td>
                    <td></td>
                   <tr>
                @endif
              </tbody>
            </table>
        </div>
    </div>
</div>


<!-- Edit Modal -->
<div class="modal fade" id="edit_modal" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Detalles de cuota</h5>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form action="{{ route('saveCuota') }}" method="POST" id="edit-author-frm" >
                        <input type="hidden" name="id">
                        <input type="hidden" name="referer" value="{{ url()->full() }}">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="form-group">
                            <label for="fecha" class="control-label">Fecha de facturación</label>
                            <input type="date" class="form-control rounded-0" id="fecha" name="fecha" required>
                        </div>
                        <div class="form-group">
                            <label for="concepto" class="control-label">Concepto</label>
                            <input type="text" name="concepto" Maxlength="60" required class="form-control rounded-0" id="concepto">
                        </div>
                        <div class="form-group">
                            <label for="servicio" class="control-label">Servicio</label>
                            <select style="width:100%" class="form-control select2-hidden-accessible" name="servicio" id="servicio" required>
                                <option value="">[Seleccione un servicio...]</option>
                                @foreach($servicios as $servicio)
                                    <option value="{{$servicio->id}}">{{$servicio->nombre}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="importe" class="control-label">Importe</label>
                            <input type="text" class="form-control rounded-0" id="importem" name="importe" required>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" form="edit-author-frm">Guardar</button>
                <button type="button" class="btn btn-secondary" onclick="$('#edit_modal').modal('hide');" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- /Edit Modal -->

<div class="modal" id="modal_commitment" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title">Plan Aprobado</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top: -21px;" onclick="$('#modal_commitment').modal('hide'); ">
                <span aria-hidden="true"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
            </button>
            </div>
            <div class="modal-body">
              <form method="POST" action="{{ route('guardarCuota') }}" id="formCuota">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <input type="hidden" name="project_id" value="{{$row->id}}">
                <input type="hidden" name="periodo" value="{{$row->periodo}}">
                <input type="hidden" name="concepto" value="{{$row->concepto}}">
                <div class="row">
                </div>
                <div class="row" style="padding-top: 30px;">
                  <div class="col-md-12" id="taula">
                  <table class="table table-striped" id="table_detail">
                    <thead>
                      <tr style="background-color: #f9f9f9">
                        <th scope="col" style="padding-left: 30px">Fecha de facturación</th>
                        <th scope="col" style="padding-left: 30px">Concepto</th>
                        <th scope="col" style="padding-left: 30px">Servicio</th>
                        <th scope="col" style="padding-left: 30px">Importe</th>
                      </tr>
                      @php
                        $i=1;
                      @endphp
                      @foreach($historico as $cuota)
                            <tr style="background-color: #f9f9f9">
                                <td style="padding-left: 30px">
                                    <input type="date" class="form-control"  name="fecha[]" id="fecha" readonly value="{{$cuota->fecha}}" required>
                                </td>
                                <td>
                                    <select style="width:100%" class="form-control" id="concepto" disabled name="concepto" tabindex="-1" aria-hidden="true">
                                        <option value="">** Selecciona un concepto</option>
                                        @foreach($conceptos as $concepto)
                                          @if($cuota->concepto == $concepto->id)
                                            <option value="{{$concepto->id}}" SELECTED>{{$concepto->nombre}}</option>
                                          @else
                                            <option value="{{$concepto->id}}">{{$concepto->nombre}}</option>
                                          @endif
                                        @endforeach
                                    </select>
                                </td>
                                <td style="padding-left: 30px">
                                <select style="width:100%;" class="form-control"  name="servicios[]" id="servicios" disabled>
                                    <option value="">[Seleccione un servicio...]</option>
                                    @foreach($servicios as $servicio)
                                        @if($servicio->id == $cuota->servicio)
                                            <option value="{{$servicio->id}}" SELECTED>{{$servicio->nombre}}</option>
                                        @else
                                            <option value="{{$servicio->id}}">{{$servicio->nombre}}</option>
                                        @endif
                                    @endforeach
                                </select>
                                </td>
                                <td style="padding-left: 30px">
                                <input type="text" class="form-control"  name="importes[]" id="importes" readonly min="1" value="{{$cuota->importe}}" required>
                                </td>
                            </tr>
                      @endforeach
                    </thead>
                  </table>
                </div>

                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div style="color: red; text-align: center;" id="error_ahorro_commitment"></div>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>

<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 = {{($row->aprobado) ? 1:0}};
 var editor;

 $(document).ready(function(){


    $("#importe").on({
    "focus": function (event) {
        $(event.target).select();
    },
    "keyup": function (event) {
        $(event.target).val(function (index, value ) {
            return value.replace(/\D/g, "")
                        .replace(/([0-9])([0-9]{2})$/, '$1,$2')
                        .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".");
        });
    }
    });

    $("#importem").on({
    "focus": function (event) {
        $(event.target).select();
    },
    "keyup": function (event) {
        $(event.target).val(function (index, value ) {
            return value.replace(/\D/g, "")
                        .replace(/([0-9])([0-9]{2})$/, '$1,$2')
                        .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".");
        });
    }
    });

   var table = $('#plan').DataTable({
		 processing: true,
		 serverSide: false,
		 "bDestroy": true,
         searching: false,
		 paging: true,
		 lengthChange: true,
		 'language': {"paginate": {
             "previous": "Anterior",
             "next": "Siguiente",
             },
		     "search": "Buscar",
		     "zeroRecords": "No hay registros",
	         "info": "Mostrando pagina _PAGE_ de _PAGES_",
	         "infoEmpty": "No hay registros diponibles",
         },
		 ajax: {
				url: url + "/list/" + id
		 },
		 scrollY:        "500px",
	     scrollX:        true,
	     scrollCollapse: true,
		 "columnDefs": [
			    { "width": "200", "targets": 0 }
	     ],
	     fixedColumns: true,
         "createdRow": function( row, data, dataIndex ) {
             if ( data.aprobado == 0) {
               $(row).addClass('yellow');
         }},
		 columns: [
            {"data": "fecha", "title": "Fecha de facturación", "render": function(data, type) {
                return type === 'sort' ? data : moment(data).format('DD/MM/YYYY');
            }},
		    { "data": "concepto"},
            { "data": "servicio", orderable: false},
            { "data": "plazo"},
            { "data": "importe", render: $.fn.dataTable.render.number( '.', ',', 2, '$' ) },
            { "data": "subtotal", render: $.fn.dataTable.render.number( '.', ',', 2, '$' ) },
            {
                "data": "aprobado",
                orderable: false,
                className: 'text-center py-0 px-1',
                render: function(data, type, row, meta) {
                    if(data == 2 || data == 1)
                    {

                        return '';

                    }
                    else {
                        return '';
                    }
                }
            }
		  ],
          drawCallback: function(settings) {
                $('.edit_data').click(function() {
                    $.ajax({
                        url: url + '/edit',
                        data: { id: $(this).attr('data-id') },
                        method: 'POST',
                        dataType: 'json',
                        error: err => {
                            alert("Ocurrió un error al obtener datos únicos")
                        },
                        success: function(resp) {
                            if (!!resp.success) {
                                Object.keys(resp.data).map(k => {
                                    if ($('#edit_modal').find('input[name="' + k + '"]').length > 0) {
                                        $('#edit_modal').find('input[name="' + k + '"]').val(resp.data[k])
                                    }
                                    else {
                                            if ($('#edit_modal').find('select[name="' + k + '"]').length > 0)
                                                $('#edit_modal').find('select[name="' + k + '"]').val(resp.data[k])
                                    }
                                })
                                $('#edit_modal').modal('show')
                            } else {
                                alert("Ocurrió un error al obtener datos únicos")
                            }
                        }
                    })
                })
                $('.delete_data').click(function() {
                    $.ajax({
                        url: url + '/delete',
                        data: { id: $(this).attr('data-id') },
                        method: 'POST',
                        dataType: 'json',
                        error: err => {
                            alert("Ocurrió un error al obtener datos únicos")
                        },
                        success: function(resp) {
                            if (!!resp.success) {
                                $('#delete_modal').find('input[name="id"]').val(resp.data['id'])
                                $('#delete_modal').modal('show');
                                $('#plan').DataTable().ajax.reload();
                            } else {
                                alert("Ocurrió un error al obtener datos únicos")
                            }
                        }
                    })
                })
                $('.payed_data').click(function() {
                    $.ajax({
                        url: url + '/payed',
                        data: { id: $(this).attr('data-id') },
                        method: 'POST',
                        dataType: 'json',
                        error: err => {
                            alert("Ocurrió un error al obtener datos únicos")
                        },
                        success: function(resp) {
                            if (!!resp.success) {
                                $('#payed_modal').find('input[name="id"]').val(resp.data['id'])
                                $('#payed_modal').modal('show');
                                $('#plan').DataTable().ajax.reload();
                            } else {
                                alert("Ocurrió un error al obtener datos únicos")
                            }
                        }
                    })
                })
            },

   });

});

function pasarAprobacion(id){
        swal({
            title: 'Pasaje a Aprobación',
            text: "Desea enviar el proyecto a Finanzas?",
            html: true,
            showCancelButton: true,
            confirmButtonColor: '#89be4f',
            confirmButtonText: 'Confirmar',
            closeOnConfirm: true
        },
        function(){
                $.ajax({
                type: "POST",
                url: "{{ route('pasarAprobacion') }}",
                data: {item_id: id},
                dataType: "json",
                cache: false,
                timeout: 600000,
                success: function (data) {
                    swal({
                        title: 'Operación Exitosa',
                        text: 'Se paso a Finanzas',
                        html: true,
                        type: 'success',
                        showCancelButton: false,
                        confirmButtonColor: '#666666',
                        confirmButtonText: 'Cerrar',
                        closeOnConfirm: true
                    },
                    function(){
                        location.reload();
                    });
                }})
        });
 }

 function editarPlanAprobado(id){
        swal({
            title: 'Volver a editar plan',
            text: "Desea regresar a editar el plan?",
            html: true,
            showCancelButton: true,
            confirmButtonColor: '#89be4f',
            confirmButtonText: 'Confirmar',
            closeOnConfirm: true
        },
        function(){
                $.ajax({
                type: "POST",
                url: "{{ route('editarPlanAprobado') }}",
                data: {item_id: id},
                dataType: "json",
                cache: false,
                timeout: 600000,
                success: function (data) {
                    swal({
                        title: 'Operación Exitosa',
                        text: 'Estas habilitado a editar el plan',
                        html: true,
                        type: 'success',
                        showCancelButton: false,
                        confirmButtonColor: '#666666',
                        confirmButtonText: 'Cerrar',
                        closeOnConfirm: true
                    },
                    function(){
                        location.reload();
                    });
                }})
        });
 }
</script>


@endsection