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



    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-body" >
                <img class="profile-user-img img-responsive img-circle" src="{{ $row->avatar_url ?: 'https://www.w3schools.com/w3images/avatar2.png' }}" alt="User profile picture">

                <h3 class="profile-username text-center">
                {{$row->cliente}}
                <i class="fa fa-exclamation-circle" aria-hidden="true" style="color: #ff2b57;" title="Cliente prioritario"></i>

                </h3>

                <div style="text-align: center;border-radius: 0px 0px 10px 10px; color: white; padding: 10px;font-size: 22px;/* text-shadow: 1px 1px #00000099; */margin-bottom: 10px;">
                    <i class="fa fa-trophy" aria-hidden="true"></i><i data-toggle="tooltip" class="fa fa-info-circle" aria-hidden="true"></i></small><br>
                    <div class="row">
                        <div class="col-md-12">
                        </div>
                    </div>
                </div>
                @php
                    switch ($row->estado)
                    {
                        case 1: $project = "Proyecto Activo";
                                break;
                        case 2: $project = "Proyecto Inactivo";
                                break;
                        case 3: $project = "Proyecto Finalizado";
                                break;
                        default: $project = "Proyecto Activo";
                                break;
                    }

                @endphp
                <div style="text-align: center;background: #C56439;border: 2px solid #C56439;border-radius: 0px 0px 10px 10px; color: white; padding: 10px;font-size: 22px;/* text-shadow: 1px 1px #00000099; */margin-bottom: 10px;">
                    <i class="fa fa-trophy" aria-hidden="true"></i> {{$project}} - <small>{{$row->nombre}}</small><br>
                        <small style="font-size: 70%;">Fecha Generación: {{date('d-m-Y', strtotime($row->fecha_generacion))}}</small>
                    <div class="row">

                    <div class="col-md-12">
                        <small style="    display: block;
								border: 1px solid #f0f0f033;
								background: #f0f0f033;
								padding: 5px 0px 5px 0px;
								margin: 10px 0px 10px 0px;
								font-size: 16px;
								border-radius: 5px;">
                                {{$row->pais_nombre}}
                            </small>
                    </div>
                    <div class="col-md-6">
                        {{$row->pais_nombre}} <small style="font-size: 70%;"><div>País de Origen</div></small>
                    </div>
                    <div class="col-md-6">
                            MESES
                            <small style="font-size: 70%;"><div>{{ date('d', strtotime($row->fecha_generacion)) }} {{ strtoupper(App\Helpers\CloudHelper::monthShortName(date('m', strtotime($row->fecha_generacion)))) }} {{ date('Y', strtotime($row->fecha_generacion)) }} </div></small>
                        </div>
                    </div>
                    <hr style="margin: 10px;">
                    <div class="row">
                        <div class="col-md-12">
                            Datos de Cuenta
                        </div>
                        <div class="col-md-4">
                                {{$row->moneda_nombre}}<small style="font-size: 70%;">
                                <div>Moneda</div></small>
                        </div>

                        <div class="col-md-4">
                                {{$row->metodo_nombre}}<small style="font-size: 70%;">
                                <div>Método de Pago</div> </small>
                        </div>
                        <div class="col-md-4">
                                {{$row->plazo_nombre}}<small style="font-size: 70%;">
                                <div>Plazo Pago</div> </small>
                        </div>
                    </div>
                </div>
                @if($row->aprobado != 1)
                <div style="background: #C5643911;padding: 10px;padding-top: 4px;border-radius: 10px;border: 1px solid #C5643950;">

                    <button style="font-size: 14px;margin-top: 7px;" onclick="$('#modal_plan').modal();return false;" class="btn btn-info"> Agregar Plan y Cuotas</button>
                    <button style="font-size: 14px;margin-top: 7px;" onclick="pasarAprobacion({{$row->id}});" class="btn btn-default"><i class="fa fa-history" aria-hidden="true"></i> Pasar a Finanzas</button>

                </div>
                @endif

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

    <div class="col-md-7">
        <div class="panel panel-default" style="padding:0px 0px 0px 0px">
            <div class="panel-body">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li><a href="#settings" data-toggle="tab">Datos del proyecto</a></li>
                        <li class="active"><a id="btn-historial" href="#historial" data-toggle="tab">Historial de cuenta</a></li>
                        <li><a id="btn-cuotas" href="#cuotas" data-toggle="tab">Editar cuotas</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="cuotas" style="height: calc(100vh - 250px);overflow-y: scroll;">
                            <div class="box-header with-border">
                                <h3 class="box-title">Editar Plan</h3>
                                <hr>
                                <div style="margin-top: 10px;">
                                    <form id="Form-id-cuotas" method="post" action="{{ route('editarPlan') }}">
                                        <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="col-sm-9">
                                        <label>
                                        Cuotas
                                        <span class="text-danger" title="Este campo es requerido">*</span>
                                        </label>
                                        <input type="number" name="cuotas" id="cuotas" class="form-control" value="{{$row->item}}" required />
                                        <div class="text-danger"></div>
                                        <p class="help-block"></p>
                                        </div>
                                        <div class="col-sm-9">
                                            <label>
                                            Período
                                            <span class="text-danger" title="Este campo es requerido">*</span>
                                            </label>

                                            <select style="width:100%" class="form-control" id="periodo" required="" name="periodo" tabindex="-1" aria-hidden="true">
                                                <option value="">** Selecciona un periodo</option>
                                                @foreach($periodos as $periodo)
                                                   @if($row->periodo == $periodo->id)
                                                        <option value="{{$periodo->id}}" SELECTED>{{$periodo->nombre}}</option>
                                                   @else
                                                        <option value="{{$periodo->id}}">{{$periodo->nombre}}</option>
                                                   @endif
                                                @endforeach
                                            </select>
                                            <div class="text-danger"></div>
                                            <p class="help-block"></p>
                                            </div>
                                        <div class="col-sm-9">
                                        <label>
                                        Fecha de primera cuota
                                        <span class="text-danger" title="Este campo es requerido">*</span>
                                        </label>

                                        <input type="date" name="fecha" id="fecha" class="form-control" value="{{$row->fecha}}" required />
                                        <div class="text-danger"></div>
                                        <p class="help-block"></p>
                                        </div>

                                        <div class="col-sm-9">
                                        <label>
                                        Concepto
                                        <span class="text-danger" title="Este campo es requerido">*</span>
                                        </label>

                                        <select style="width:100%" class="form-control" id="concepto" required="" name="concepto" tabindex="-1" aria-hidden="true">
                                            <option value="">** Selecciona un concepto</option>
                                            @foreach($conceptos as $concepto)
                                              @if($row->concepto == $concepto->id)
                                                <option value="{{$concepto->id}}" SELECTED>{{$concepto->nombre}}</option>
                                              @else
                                                <option value="{{$concepto->id}}">{{$concepto->nombre}}</option>
                                              @endif
                                            @endforeach
                                        </select>
                                        <div class="text-danger"></div>
                                        <p class="help-block"></p>
                                        </div>

                                        <div class="col-sm-10">
                                          <input type="submit" name="Save" class="btn btn-success" value="Guardar">
                                        </div>

                                    </form>
                                </div>

                            </div>
                        </div>

                        <div class="tab-pane active" id="historial" style="height: calc(100vh - 250px);overflow-y: scroll;">
                            <br>
                            <table class="table" id="example">
                                <thead>
                                <tr>
                                    <th scope="col">Cuota</th>
                                    <th scope="col">Fecha</th>
                                    <th scope="col">Concepto</th>
                                    <th scope="col">Servicio</th>
                                    <th scope="col">Importe</th>
                                    <th scope="col">Total</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php
                                   $subtotal = 0;
                                @endphp
                                @foreach($historial as $cuota)
                                <tr>
                                    @php
                                        $subtotal += $cuota->importe;
                                    @endphp
                                    <td>{{$cuota->periodo}}</td>
                                    <td>{{$cuota->fecha}}</td>
                                    <td>{{$cuota->concepto}}</td>
                                    <td>{{$cuota->servicio}}</td>
                                    <td>{{$cuota->importe}}</td>
                                    <td>{{$subtotal}}</td>

                                </tr>
                                @endforeach
                                <thead>
                                <tr>
                                    <th colspan="5">Total importe</th>
                                    <th>{{$subtotal}}</th>
                                </tr>
                                </thead>
                                </tbody>
                            </table>
                            <button style="font-size: 14px;margin-top: 7px;" onclick="$('#modal_commitment').modal();return false;" class="btn btn-success"> Editar Cuotas</button>
                        </div>

                        <div class="tab-pane" id="settings" style="height: calc(130vh - 250px);">
                            <!-- form init -->
                            <div class="box-header with-border">
                                <h3 class="box-title">{{ (Request::get('detail'))?str_replace(array("Add Data","Edit Data"),"Detail Data",$page_title):$page_title }}</h3>
                            </div>