<html>

<div class="modal fade" id="Crear" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h1 class="modal-title fs-5" id="exampleModalLabel">Registrar Datos Cliente / Proveedor</h1>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">

      <style>
        /* Inicialmente ocultar los formularios hasta seleccionar un radio button*/
        #campos-cliente, #campos-proveedor {
          display: none;
        }
        .Mayusc{
          text-transform: capitalize;
        }
      </style>

      <div class="form-group">
        <label for="recipient-name" class="col-form-label">Seleccione Tipo:</label>
        <br>
        <div class="custom-control custom-radio custom-control-inline">
          <input class="form-check-input mt-0" id="TipoC" name="tipo" type="radio" value="2" aria-label="Radio button for following text input" required>
          <label class="custom-control-label" for="TipoCliente">Cliente</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
          <input class="form-check-input mt-0" id="TipoP" name="tipo" type="radio" value="1" aria-label="Radio button for following text input" required>
          <label class="custom-control-label"  for="TipoProveedor">Proveedor</label>
        </div>
      </div>

      <div id="campos-cliente" style="display: none;">

        <form method="POST" action="./controladores/DatosP/register_datosp.php">

        <h4 style="text-align: center;">Tipo Cliente</h4>

        <input type="hidden" id="TipoC" name="tipo" value="2" class="form-control">

      <div class="form-group row">
    <label for="recipient-name" class="col-form-label col-md-4">Cedula del cliente</label>
    <div class="col-md-6 input-group">
        <div class="input-group-prepend">
            <select class="form-select" aria-label="Default select example" name="tipoDocumento">
                <option value="V">V</option>
                <option value="E">E</option>
                <option value="P">P</option>
                <option value="J">J</option>
                <option value="G">G</option>
                <option value="M">M</option>
                <option value="C">C</option>
            </select>
        </div>
        <input type="number" name="cedula" id="cedula" class="form-control" required="true" maxlength="12" title="El campo debe tener 12 dígitos max" onblur="validarCedula(this.value)" oninput="if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength)">
    </div>
</div>
<span id="messagec" class="cedula-message"></span>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Nombre</label>
          <input type="text" name="nombre" class="form-control Mayusc" required="true" maxlength="20">
        </div>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Apellido</label>
          <input type="text" name="apellido" class="form-control Mayusc"  required="true" maxlength="20">
        </div>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Direccion</label>
          <input type="text" name="direccion" class="form-control Mayusc"  required="true" maxlength="50">
        </div>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Telefono</label>
          <input type="tel" name="telefono" class="form-control" required="true" maxlength="12">
        </div>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Correo</label>
          <input type="email" name="correo" class="form-control" required="true" maxlength="20">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary" id="btn1" name="btn1">Guardar Cliente</button>
        </div>
      </form>
      </div>

      <div id="campos-proveedor" style="display: none;">

        <form method="POST" action="./controladores/DatosP/register_datosp.php">

        <h4 style="text-align: center;">Tipo Proveedor</h4>

        <input type="hidden" id="TipoP" name="tipo" value="1" class="form-control">


<!--Datos de la empresa-->
 <div class="form-group row">
    <label for="recipient-name" class="col-form-label col-md-4">Rif de la Empresa</label>
    <div class="col-md-6 input-group">
        <div class="input-group-prepend">
            <select class="form-select" aria-label="Default select example" name="tipoRif">
              
                <option value="J">J</option>
                <option value="P">P</option>
                <option value="G">G</option>
                <option value="M">M</option>
                <option value="C">C</option>
            </select>
        </div>
        <input type="number" name="rif_empresa" id="rif_empresa" class="form-control" required="true" maxlength="12" oninput="if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength)" title="El campo debe tener 12 digitos max" onblur="validarRif(this.value)"
>
    </div>
</div>
  <span id="messager" class="cedula-message"></span>
        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Nombre de la Empresa</label>
          <input type="text" name="nombre_empresa" class="form-control">
        </div>
      
        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Producto a Proveer</label>
          <select class="form-select" aria-label="Default select example" name="producto_provee" id="producto_provee">
            <?php
            include '../../Clases/db.php';
            $conn= new conn();
            $conex= $conn->crearconn();
            $consulta = "SELECT * FROM categoria where Estado = 1";
            $ejecutar=mysqli_query($conex,$consulta) or die (mysqli_error($conex)); 
            ?>
            <option value="">Seleccione Categoria</option>

            <?php  foreach($ejecutar as $opciones){  ?>

             <option value="<?php echo $opciones['ID'] ?>" ><?php echo $opciones['Nombre'] ?></option>
           <?php } ?>
         </select>
       </div>
<input class="form-check-input" type="checkbox" id="checkCategoria">
  <label class="form-check-label" for="checkCategoria">
    Agregar nueva categoría
  </label>
  <div class="form-grup" id="otro">
    
  </div>

        <div class="form-group row">
    <label for="recipient-name" class="col-form-label col-md-4">Cedula</label>
    <div class="col-md-6 input-group">
        <div class="input-group-prepend">
            <select class="form-select" aria-label="Default select example" name="tipoDocumentoProve">
              <option value="V">V</option>
                <option value="E">E</option>
                <option value="P">P</option>
                <option value="J">J</option>
                <option value="G">G</option>
                <option value="M">M</option>
                <option value="C">C</option>
            </select>
        </div>
        <input type="number" id= "cedulaP" name="cedulaP" class="form-control" required="true" maxlength="12" title="El campo debe tener 12 digitos max" onblur="validarCedula(this.value)"
       oninput="if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength)" >
    
    </div>
</div>
        <span id="message" class="cedula-message"></span>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Nombre</label>
          <input type="text" name="nombreP" class="form-control Mayusc" required="true" maxlength="20">
        </div>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Apellido</label>
          <input type="text" name="apellidoP" class="form-control Mayusc" required="true" maxlength="20">
        </div>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Direccion</label>
          <input type="text" name="direccionP" class="form-control Mayusc" required="true" maxlength="50">
        </div>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Telefono</label>
          <input type="tel" name="telefonoP" class="form-control" required="true" maxlength="12">
        </div>

        <div class="form-group">
          <label for="recipient-name" class="col-form-label">Correo</label>
          <input type="email" name="correoP" class="form-control" required="true" maxlength="20">
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary" id="btn2" name="btn2">Guardar Proveedor</button>
        </div>
        </form>
     </div>
</div>
</div>
</div>
</div>


<script>
  const tipoCliente = document.getElementById('TipoC');
  const tipoProveedor = document.getElementById('TipoP');
  const camposCliente = document.getElementById('campos-cliente');
  const camposProveedor = document.getElementById('campos-proveedor');

  tipoCliente.addEventListener('change', function() {
    if (tipoCliente.checked) {
      camposCliente.style.display = 'block';
      camposProveedor.style.display = 'none';
    }
  });

  tipoProveedor.addEventListener('change', function() {
    if (tipoProveedor.checked) {
      camposProveedor.style.display = 'block';
      camposCliente.style.display = 'none';
    }
  });
</script>





</html>