<template>
  <div>

<form class="mt-4" role="form" data-toggle="validator" >
  
  <div class="my-3">
  
  
  <div class="row tipoComprobante">
  <div class="form-check col-4 ">
  <label class="form-check-label" >
    Tipo de Comprobante:
  </label>
</div>
<div class="form-check col-4">
  <input class="form-check-input" type="radio"  id="exampleRadios1" v-model="select" value="ticket">
  <label class="form-check-label" for="exampleRadios1">
    Ticket
  </label>
</div>
<div class="form-check col-4">
  <input class="form-check-input" type="radio"  id="exampleRadios2" v-model="select" value="factura">
  <label class="form-check-label" for="exampleRadios2">
   Factura
  </label>
</div>
</div>


<div class=" datosFactura" v-if="select == 'factura'">
    <h3 class="my-5">Direccion de Facturacion</h3>
    <div class="form-group">
    <label for="InputNombre1">RFC</label>
    <input type="text" class="form-control" id="InputRFC"   v-model="Facturacion.RFC">
  </div>

  <div class="form-group">
    <label for="InputApellido1">Nombres</label>
    <input type="text" class="form-control" id="InputNombres"   v-model="Facturacion.nombres">
  </div>

  <div class="form-group">
    <label for="InputCorreo1">Apellidos</label>
    <input type="email" class="form-control" id="InputApellidos"   v-model="Facturacion.apellidos">
  </div>

  <div class="form-group">
    <label for="InputNombre1">Empresa</label>
    <input type="text" class="form-control" id="InputEmpresa"   v-model="Facturacion.empresa">
  </div>

  <div class="form-group">
    <label for="InputApellido1">calle</label>
    <input type="text" class="form-control" id="InputCalle"   v-model="Facturacion.calle">
  </div>

  <div class="form-group">
    <label for="InputCorreo1">Numero Exterior</label>
    <input type="email" class="form-control" id="InputExterior"   v-model="Facturacion.exterior">
  </div>

  <div class="form-group">
    <label for="InputNombre1">Numero Interior</label>
    <input type="text" class="form-control" id="InputInterior"   v-model="Facturacion.interior">
  </div>

  <div class="form-group">
    <label for="InputApellido1">Colonia</label>
    <input type="text" class="form-control" id="InputColonia"   v-model="Facturacion.colonia">
  </div>

  <div class="form-group">
    <label for="InputCorreo1">Provincia o estado</label>
    <input type="email" class="form-control" id="InputEstado"   v-model="Facturacion.estado">
  </div>

  <div class="form-group">
    <label for="InputNombre1">Pais</label>
    <input type="text" class="form-control" id="InputPais"   v-model="Facturacion.pais">
  </div>

  <div class="form-group">
    <label for="InputApellido1">Telefono</label>
    <input type="text" class="form-control" id="InputTelefono"   v-model="Facturacion.telefono">
  </div>

  <div class="form-group">
    <label for="InputCorreo1">Correo</label>
    <input type="email" class="form-control" id="InputCorreo"   v-model="Facturacion.correo">
  </div>
</div>



<div class="row direccionIgual" v-if="select == 'factura'">
  <div class="form-check col-8 ">
  <label class="form-check-label" >
    ¿La direccion de facturacion es la misma a la de envio?
  </label>
</div>
<div class="form-check col-2">
  <input class="form-check-input" type="radio"  id="exampleRadios3" v-model="sameDirection" value="true">
  <label class="form-check-label" for="exampleRadios3">
    Si
  </label>
</div>
<div class="form-check col-2">
  <input class="form-check-input" type="radio"  id="exampleRadios4" v-model="sameDirection" value="false">
  <label class="form-check-label" for="exampleRadios4">
   No
  </label>
</div>
</div>



<div class=" datosEnvio" v-if="select == 'ticket' || (sameDirection == 'false' && select == 'factura')">
    <h3 class="my-5">Direccion de Envio</h3>
    

  <div class="form-group">
    <label for="InputApellido1">Nombres</label>
    <input type="text" class="form-control" id="InputNombres2"   v-model="Envio.nombres">
  </div>

  <div class="form-group">
    <label for="InputCorreo1">Apellidos</label>
    <input type="email" class="form-control" id="InputApellidos2"   v-model="Envio.apellidos">
  </div>

 <div class="form-group">
    <label for="InputCorreo1">Correo</label>
    <input type="email" class="form-control" id="InputCorreo2"   v-model="Envio.correo">
  </div>


  <div class="form-group">
    <label for="InputApellido1">calle</label>
    <input type="text" class="form-control" id="InputCalle2"   v-model="Envio.calle">
  </div>

  <div class="form-group">
    <label for="InputCorreo1">Numero Exterior</label>
    <input type="email" class="form-control" id="InputExterior2"   v-model="Envio.exterior">
  </div>

  <div class="form-group">
    <label for="InputNombre1">Numero Interior</label>
    <input type="text" class="form-control" id="InputInterior2"   v-model="Envio.interior">
  </div>

  <div class="form-group">
    <label for="InputApellido1">Colonia</label>
    <input type="text" class="form-control" id="InputColonia2"   v-model="Envio.colonia">
  </div>

<div class="form-group">
    <label for="InputApellido1">Codigo Postal</label>   
    <input type="text" class="form-control" id="InputPostal"   v-model="Envio.postal">
  </div>


  <div class="form-group">
    <label for="InputCorreo1">Provincia o estado</label>
    <input type="email" class="form-control" id="InputEstado2"   v-model="Envio.estado">
  </div>

  <div class="form-group">
    <label for="InputNombre1">Pais</label>
    <input type="text" class="form-control" id="InputPais2"   v-model="Envio.pais">
  </div>

  <div class="form-group">
    <label for="InputApellido1">Telefono</label>
    <input type="text" class="form-control" id="InputTelefono2"   v-model="Envio.telefono">
  </div>
  
</div>



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

</template>

<script>
export default {
    data(){
        return{
            sameDirection:'',
            select:'',

            Facturacion:
                {
                    RFC:'',
                    nombres:'',
                    apellidos:'',
                    empresa:'',
                    calle:'',
                    exterior:'',
                    interior:'',
                    colonia:'',
                    estado:'',
                    pais:'',
                    telefono:'',
                    correo:''

                },
            Envio:{
                RFC:'',
                    nombres:'',
                    apellidos:'',
                    postal:'',
                    calle:'',
                    exterior:'',
                    interior:'',
                    colonia:'',
                    estado:'',
                    pais:'',
                    telefono:'',
                    correo:''
            }    
            
        }
    }

}
</script>

<style>

</style>