<div class="row">
    <div class="col-md-5">
        <!--div class="box box-solid box-primary" style="text-align:center;">
            <div class="box-header">
                <h2 class="box-title" style="font-weight: bold;">
                    Datos de la empresa:
                </h2>
            </div>
            <div class="box-body">  
                <address>
                    <strong>CAMARA DE COMERCIO DE SANTA MARTA PARA EL MAGDALENA</strong><br>
                     891780160 -9<br>
                    Av Libertador # 13-94
                </address>
            </div>
        </div-->
        {% if CotizacionEditar %}	
        <div class="box box-solid box-primary" style="text-align:center;">
            <div class="box-header">
                <h2 class="box-title" style="font-weight: bold;">
                    Datos de factura:
                </h2>
            </div>
            <div class="box-body"> 
                <b>Cotización de venta N°</b><br><h5 class="consecutivonNUM">{{CotizacionEditar.cotizacionCONSECUTIVO}}</h5>
                <input type="hidden" name="consecutivo" id="consecutivoNUMERO" value="{{CotizacionEditar.cotizacionCONSECUTIVO}}"/>
                <b>Fecha de factura:</b>
                <h5 id="fechaFactura">
                    {% if CotizacionEditar.cotizacionFCHMODIFICA is null %}	
                        {{CotizacionEditar.cotizacionFCHCREADO}}
             		{% else %} 
             		    {{CotizacionEditar.cotizacionFCHMODIFICA}}
             		{% endif %} 
                </h5>
                <b>Fecha de Vencimiento:</b>
                <h5 id="fchVencimiento" style="font-size: 12px;">
                    {{CotizacionEditar.cotizacionFCHVENCIMIENTO}}
                </h5>
            </div>
        </div>
        {% endif %} 
    </div>
    <div {% if CotizacionEditar %} class="col-md-7" {% else %} class="col-md-12" {% endif %}>
        <div class="box box-solid box-primary" style="font-weight: bold;">
            <div class="box-header">
                <h2 class="box-title"  style="font-weight: bold;">
                    Datos del cliente:
                </h2>
            </div>
            <div class="box-body">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="tipoDocumento">Seleccione un Tipo de Documento:</label>
                        <select id="tipoDocumento" name="tipoDocumento" class="js-example-basic-single form-control" required style="height: 35px !important; width: 100% !important;">
                            <optgroup label="Tipos de Documento">
                                {% for TiposIdentificacion in TiposIdentificacion %}
                                {% if CotizacionEditar.Persona.tipoIdentificacionID == TiposIdentificacion.tipoIdentificacionID %}
                                    <option value="{{ TiposIdentificacion.tipoIdentificacionID }}" selected >{{ TiposIdentificacion.tipoIdentificacionTITULO }}</option>    
                                {% else %}
                                    <option value="{{ TiposIdentificacion.tipoIdentificacionID }}" >{{ TiposIdentificacion.tipoIdentificacionTITULO }}</option>
                                {% endif %}
                                {% endfor %}
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="cedulaCliente">Documento del cliente:</label>
                        <div class="input-group">
                            <input type="number" class="form-control" name="cedulaCliente" id="cedulaCliente" placeholder="Documento del cliente" value="{{CotizacionEditar.Persona.personaIDENTIFICACION}}" required style="height: 35px !important;">
                            <span class="input-group-btn">
                                <button class="btn btn-default" id="btnCedulaCliente" type="button" onclick="buscarDatosPersona($('#frm-cotizaciones-{{ hash_vista }}'))" style="height: 35px !important;"><i class="fa fa-search" aria-hidden="true"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="nombreCliente">Nombre del Cliente:</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" class="form-control" id="nombreCliente" name="nombreCliente" placeholder="Nombre del Cliente" {% if CotizacionEditar %} value="{{CotizacionEditar.Persona.personaNOMBRES}} {{CotizacionEditar.Persona.personaAPELLIDOS}}" {% endif %} required style="height: 35px !important;">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="direccionCliente">Dirección del Cliente:</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-home"></i></span>
                            <input type="text" class="form-control" id="direccionCliente" name="direccionCliente" placeholder="Dirección del Cliente" value="{{CotizacionEditar.Persona.direccionCOMERCIAL}}" required style="height: 35px !important;">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="ciudadCliente">Seleccione Ciudad de Residencia del Cliente:</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-globe" aria-hidden="true"></i></span>
                            <select id="ciudadCliente" name="ciudadCliente" class="js-example-basic-single form-control" required style="height: 35px !important; width: 100% !important;">
                                <optgroup label="Ciudades">
                                    {% for Municipios in Municipios %}
                                    {% if CotizacionEditar.Persona.ciudadRESIDENCIA == Municipios.municipioID %}
                                        <option value="{{ Municipios.municipioID }}" selected >{{ Municipios.municipioTITULO }}</option>    
                                    {% else %}
                                       <option value="{{ Municipios.municipioID }}" >{{ Municipios.municipioTITULO }}</option>
                                    {% endif %}
                                    {% endfor %}
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="telefonoCliente">Teléfono del Cliente:</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                            <input type="number" class="form-control" id="telefonoCliente" name="telefonoCliente" placeholder="Teléfono del Cliente"  value="{{CotizacionEditar.Persona.telefonoFIJO}}" style="height: 35px !important;">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="correoCliente">Correo del Cliente:</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                            <input type="email" class="form-control" id="correoCliente" name="correoCliente" placeholder="Correo del Cliente"  value="{{CotizacionEditar.Persona.personasCorreoPRINCIPAL}}" style="height: 35px !important;">
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var vista = "";

    function buscarDatosPersona(form) {
        verificarIdentificacionCliente( form.find("#cedulaCliente").val(),  form.find("#tipoDocumento").val(), actualizarDatosCliente);
        form.find("#nombreCliente").attr("placeholder","NO SE ENCONTRÓ PERSONA CON LA IDENTIFICACIÓN DIGITADA."); 
        form.find("#nombreCliente").val("");
        form.find("#direccionCliente").val("");
        form.find("#ciudadCliente").val(0);
        form.find("#telefonoCliente").val("");
        form.find("#correoCliente").val("");
        
        vista = form;
    }
 
 
    
    /*function activarBoton() {
        $("#cotizacion-{{ hash_vista }} #btnCedulaCliente").removeAttr("disabled");
    }*/
    
    function actualizarDatosCliente(datos) {
        var Persona = datos.Persona;
        vista.find("#cedulaCliente").val(Persona.personaIDENTIFICACION);
        vista.find("#nombreCliente").val(Persona.personaNOMBRES + " " + Persona.personaAPELLIDOS);
        vista.find("#direccionCliente").val(Persona.direccionCOMERCIAL);
        vista.find("#ciudadCliente").val(Persona.ciudadRESIDENCIA);
        vista.find("#telefonoCliente").val(Persona.telefonoFIJO);
        vista.find("#correoCliente").val(Persona.personasCorreoPRINCIPAL);
    }
                
    
    
</script>