
               
    <div class="conatiner-fluid content-inner pb-0">
        <div class="row">
            <div class="row">
              <div class="col-sm-12">
                 <div class="card">
                    <div class="card-header d-flex justify-content-between">
                       <div class="header-title">
                          <h4 class="card-title">Clientes</h4>
                          <a href="#" class=" text-center btn btn-primary btn-icon mt-lg-0 mt-md-0 mt-3" data-bs-toggle="modal" data-bs-target="#nuevoCliente">
                                <i class="btn-inner">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                    </svg>
                                </i>
                                <span></span>
                            </a>
                       </div>
                    </div>
                    <div class="card-body">
                       <div class="table-responsive">
                          <table id="productos" class="table table-striped" data-toggle="data-table">
                             <thead>
                                <tr>
                                   <th>Nombres</th>
                                   <th>Hijos</th>
                                   <th>Celular</th>
                                   <th>Ciudad</th>
                                   <th>Fecha primera compra</th>
                                   <th>Fecha última compra</th>
                                   <th>Contacto</th>
                                   <th>Tipo cliente</th>
                                   <th>Precio especial</th>
                                   <th>Observación</th>
                                </tr>
                             </thead>
                             <tbody>
                                <?php foreach($clientes as $c){ ?>
                                <tr>
                                   <td onclick="editCliente(
                                        <?php echo $c['Cli_Id']; ?>,
                                        '<?php echo addslashes($c['Cli_Nombre']); ?>',
                                        '<?php echo addslashes($c['Cli_Celular']); ?>',
                                        '<?php echo addslashes($c['Ciu_Id']); ?>',
                                        '<?php echo addslashes($c['Cli_Observacion']); ?>',
                                        '<?php echo addslashes($c['Cli_Contacto']); ?>',
                                        '<?php echo addslashes($c['Cli_Embajador']); ?>',
                                        '<?php echo addslashes($c['Cli_PrecioEspecial']); ?>'
                                    )"><?php echo $c['Cli_Nombre']; ?></td>
                                   <td onclick="verHijos(<?php echo $c['Cli_Id']; ?>)"><?php if($c['hijos']!=''){echo $c['hijos'];}else{echo '-';}?></td>
                                   <td><?php echo $c['Cli_Celular']; ?></td>
                                   <td><?php echo $c['Ciu_Ciudad'];?></td>
                                   <td>-</td>
                                   <td>-</td>
                                   <td><?php echo $c['Cli_Contacto'];?></td>
                                   <td><?php echo $c['Cli_Embajador'];?></td>
                                   <td align="right"><?php if($c['Cli_PrecioEspecial']!=0){echo '$'.number_format($c['Cli_PrecioEspecial'], 2, ',', '.');}else{echo '-';}?></td>
                                   <td><?php echo $c['Cli_Observacion'];?></td>
                                </tr>  
                                <?php }?>
                            </tbody>
                             <tfoot>
                                <tr>
                                   <th>Nombres</th>
                                   <th>Hijos</th>
                                   <th>Celular</th>
                                   <th>Ciudad</th>
                                   <th>Fecha primera compra</th>
                                   <th>Fecha última compra</th>
                                   <th>Contacto</th>
                                   <th>Tipo cliente</th>
                                   <th>Precio especial</th>
                                   <th>Observación</th>
                                </tr>
                             </tfoot>
                          </table>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
    </div>
    <div class="modal fade" id="nuevoCliente" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <form action="clientes/create" method="post"><div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Nuevo cliente</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="nombre" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="nombre" name="nombre" aria-describedby="email" placeholder="" required>
                    </div>
                    <div class="form-group">
                        <label for="celular" class="form-label">Celular</label>
                        <input type="text" class="form-control" id="celular" name="celular" aria-describedby="email" placeholder="" required>
                    </div>
                    <div class="form-group">
                        <label for="ciudad" class="form-label">Ciudad</label>
                        <select class="form-control" id="ciudad" name="ciudad" required>
                            <option value="0">Seleccionar</option>
                            <?php foreach($ciudades as $c){ ?>
                            <option value="<?php echo $c['Ciu_Id']; ?>"><?php echo $c['Ciu_Ciudad']; ?></option>
                            <?php }?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="contacto" class="form-label">Cómo nos contactó?</label>
                        <select class="form-control" id="contacto" name="contacto" required>
                            <option value="0">Seleccionar</option>
                            <option value="Instagram">Instagram</option>
                            <option value="Whatsapp">Whatsapp</option>
                            <option value="Referido">Referido</option>
                            <option value="Otro">Otro</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="tipo" class="form-label">Tipo de cliente</label>
                        <select class="form-control" id="tipo" name="tipo" required>
                            <option value="0">Seleccionar</option>
                            <option value="Normal">Normal</option>
                            <option value="Cliente frecuente">Cliente frecuente</option>
                            <option value="Embajador">Embajador</option>
                            <option value="Otro">Otro</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="precioespecial" name="precioespecial" onchange="togglePrecio()">
                            <label class="form-check-label" for="precioespecial">Precio especial</label>
                            <input type="number" class="form-control" id="precio" name="precio" placeholder="" style="display: none;" step="0.01">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="observacion" class="form-label">Observación</label>
                        <input type="text" class="form-control" id="observacion" name="observacion" aria-describedby="email" placeholder="">
                    </div>
                    <div class="text-start">
                        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Guardar</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" >Cancelar</button>
                    </div>
                </div>
            </div>
        </div></form>
    </div>
    <div class="modal fade" id="editCliente" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <form action="clientes/edit" method="post"><div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modificar cliente</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="editnombre" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="editnombre" name="editnombre" aria-describedby="email" placeholder="" required> 
                    </div>
                    <div class="form-group">
                        <label for="editcelular" class="form-label">Celular</label>
                        <input type="text" class="form-control" id="editcelular" name="editcelular" aria-describedby="email" placeholder="" required>
                    </div>
                    <div class="form-group">
                        <label for="editciudad" class="form-label">Ciudad</label>
                        <select class="form-control" id="editciudad" name="editciudad" required>
                            <?php foreach($ciudades as $c){ ?>
                            <option value="<?php echo $c['Ciu_Id']; ?>"><?php echo $c['Ciu_Ciudad']; ?></option>
                            <?php }?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editcontacto" class="form-label">Cómo nos contactó?</label>
                        <select class="form-control" id="editcontacto" name="editcontacto" required>
                            <option value="0">Seleccionar</option>
                            <option value="Instagram">Instagram</option>
                            <option value="Whatsapp">Whatsapp</option>
                            <option value="Referido">Referido</option>
                            <option value="Otro">Otro</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edittipo" class="form-label">Tipo de cliente</label>
                        <select class="form-control" id="edittipo" name="edittipo" required>
                            <option value="0">Seleccionar</option>
                            <option value="Normal">Normal</option>
                            <option value="Cliente frecuente">Cliente frecuente</option>
                            <option value="Embajador">Embajador</option>
                            <option value="Otro">Otro</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="editprecioespecial" name="editprecioespecial" onchange="togglePrecioEdit()">
                            <label class="form-check-label" for="editprecioespecial">Precio especial</label>
                            <input type="number" class="form-control" id="editprecio" name="editprecio" placeholder="" style="display: none;" step="0.01">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="editobservacion" class="form-label">Observación</label>
                        <input type="text" class="form-control" id="editobservacion" name="editobservacion" aria-describedby="email" placeholder="">
                    </div>
                    <input type="hidden" class="form-control" id="editid" name="editid" aria-describedby="email" placeholder="">
                    <div class="text-start">
                        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Guardar</button>
                    </div>
                </div>
            </div>
        </div></form>
    </div>
    
    <div class="modal fade" id="verHijos" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <form action="clientes/create" method="post"><div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Hijos</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <a href="#" class="text-center btn btn-primary btn-icon mt-lg-0 mt-md-0 mt-3" data-bs-toggle="modal" onclick="createHijos()">
                    <i class="btn-inner">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                    </i>
                    <span class="ms-2">Agregar Hijo</span> <!-- Texto agregado aquí -->
                </a>

                <div class="modal-body">
                    <table id="clientes" class="table table-striped" data-toggle="data-table" style="margin: 0 auto;">
                        <thead>
                            <tr>
                                <td>Nombres</td>
                                <td>Género</td>
                                <td>Fecha de nacimiento</td>
                                <td>Observaciones</td>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                    <div class="text-start">
                    </div>
                </div>
            </div>
        </div></form>
    </div>
    <div class="modal fade" id="nuevoHijo" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <form action="clientes/createhijo" method="post">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Nuevo hijo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="nombrehijo" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="nombrehijo" name="nombrehijo" placeholder="" required>
                    </div>
                    <div class="form-group">
                        <label for="fecha" class="form-label">Fecha de nacimiento</label>
                        <input type="date" class="form-control" id="fecha" name="fecha" placeholder="" required>
                    </div>
                    <div class="form-group">
                        <label for="genero" class="form-label">Género</label>
                        <select class="form-control" id="genero" name="genero" required>
                            <option value="0">Seleccionar</option>
                            <option value="1">Femenino</option>
                            <option value="2">Masculino</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="observacionhijo" class="form-label">Observación</label>
                        <input type="text" class="form-control" id="observacionhijo" name="observacionhijo" placeholder="">
                    </div>
                    <input type="hidden" class="form-control" id="cliid" name="cliid" placeholder="">
                    <div class="text-start">
                        <button type="submit" class="btn btn-primary">Guardar</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
    
    <div class="modal fade" id="editHijo" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <form action="clientes/edithijo" method="post"><div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Nuevo hijo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="editnombrehijo" class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="editnombrehijo" name="editnombrehijo" aria-describedby="email" placeholder="" required>
                    </div>
                    <div class="form-group">
                        <label for="editfecha" class="form-label">Fecha de nacimiento</label>
                        <input type="date" class="form-control" id="editfecha" name="editfecha" aria-describedby="email" placeholder="" required>
                    </div>
                    <div class="form-group">
                        <label for="editgenero" class="form-label">Género</label>
                        <select class="form-control" id="editgenero" name="editgenero" required>
                            <option value="0">Seleccionar</option>
                            <option value="1">Femenino</option>
                            <option value="2">Masculino</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editobservacionhijo" class="form-label">Observación</label>
                        <input type="text" class="form-control" id="editobservacionhijo" name="editobservacionhijo" aria-describedby="email" placeholder="">
                    </div>
                    <input type="hidden" class="form-control" id="editidhijo" name="editidhijo" aria-describedby="email" placeholder="">
                    <div class="text-start">
                        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Guardar</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" >Cancelar</button>
                    </div>
                </div>
            </div>
        </div></form>
    </div>
    <style>
        .modal-open .container-fluid,
.modal-open .container {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}
    </style>