<?php
session_start();
require_once('../conexion.php');
require_once('../include/sesiones.php');
$clie_id = $_SESSION['clie_id'];
?>



<!-- Asegúrate de que jQuery y Bootstrap estén cargados -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



<div class="tabbable">

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#detalle">Detalle Cuenta</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#cambio_con">Cambiar contraseña</a>
        </li>
    </ul>


    <div id="resultados_modi"></div>
    <div class="tab-content">
        <div class="col-md-8 tab-pane active" id="detalle">
            <div class="table-responsive">
                <div class="login_form_container">
                    <div class="account_login_form">
                        <form name="form_modificar_datos" id="form_modificar_datos" method="post">
                            <?php

                            $sql1 = mysqli_query($con, "SELECT * FROM cliente where clie_id='$clie_id' and empresa='$emp_id' ") or die(mysqli_error($con));
                            $mar = mysqli_fetch_array($sql1);

                            $documento = $mar['clie_cc'];
                            $nombre = $mar['clie_nombre'];
                            $telefono = $mar['clie_telefono'];
                            $departamento = $mar['clie_departamento'];
                            $ciudad = $mar['clie_ciudad'];
                            $direccion = $mar['clie_direccion'];
                            $correo = $mar['clie_correo'];
                            ?>
                            <label>Documento</label>
                            <input class="form-control" type="number" value="<?php echo $documento; ?>" id="documento" name="documento" required>
                            <label>Nombre</label>
                            <input class="form-control" value="<?php echo $nombre; ?>" id="nombre" name="nombre" required>
                            <label>Email</label>
                            <input class="form-control" value="<?php echo $correo; ?>" id="correo" name="correo" required>
                            <label>Telefono</label>
                            <input class="form-control" type="number" value="<?php echo $telefono; ?>" id="telefono" name="telefono" required>
                            <label>Departamento</label>
                            <select class="form-control" id="departamento" name="departamento" required onchange="recargarLista()">
                                <?php
                                $dat = mysqli_query($api, "SELECT * FROM departments where id='$departamento'") or die(mysqli_error($api));
                                $fila12 = mysqli_fetch_array($dat);
                                echo '<option value="' . $fila12['id'] . '"selected>' . utf8_encode($fila12['name']) . '</option>';

                                $datosa = mysqli_query($api, "SELECT * FROM departments") or die(mysqli_error($api));
                                while ($fila1 = mysqli_fetch_array($datosa)) {
                                    echo '<option value="' . $fila1['id'] . '">' . utf8_encode($fila1['name']) . '</option>';
                                }
                                ?>
                            </select>
                            <label>Ciudad</label>
                            <select id="ciudad" name="ciudad" class="form-control" required>
                                <?php
                                $dat = mysqli_query($api, "SELECT * FROM municipalities where id='$ciudad'") or die(mysqli_error($api));
                                $fila = mysqli_fetch_array($dat);
                                echo '<option value="' . $fila['id'] . '"selected>' . utf8_encode($fila['name']) . '</option>';
                                ?>
                            </select>
                            <label>Dirección</label>
                            <input value="<?php echo $direccion; ?>" id="direccion" name="direccion" required>
                            <div class="login_submit">
                                <button id="btn_modificar" name="btn_modificar" type="submit">Guardar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-md-8 tab-pane" id="cambio_con">
            <div class="table-responsive">
                <div class="login_form_container">
                    <div class="account_login_form">
                        <form name="cambio_contraseña" id="form_contraseña" method="post">
                            <h3>Contraseña Actual</h3>

                            <div class="form_group" style="flex: 1;">
                                <input type="password" id="principal" name="principal" placeholder="Contraseña" style="width: 100%; padding: 10px; box-sizing: border-box;" required>
                                <span class="fa fa-eye-slash icon_3" onclick="mostrarPassword_5()"></span>
                            </div>

                            <h3>contraseña nueva</h3>

                            <div style="display: flex; gap: 10px;">
                                <div class="form_group" style="flex: 1;">
                                    <input type="password" id="password_cuen_3" name="password_cuen_3" placeholder="Contraseña" style="width: 100%; padding: 10px; box-sizing: border-box;" required>
                                    <span class="fa fa-eye-slash icon_1" onclick="mostrarPassword_3()"></span>
                                </div>
                                <div class="form_group" style="flex: 1;">
                                    <input type="password" id="password_cuen_4" name="password_cuen_4" placeholder="Confirmar Contraseña" style="width: 100%; padding: 10px; box-sizing: border-box;" required>
                                    <span class="fa fa-eye-slash icon_2" onclick="mostrarPassword_4()"></span>
                                </div>
                            </div>

                            <div id="resultados_contraseña"></div>

                            <div class="login_submit">
                                <button type="submit" id="cambiar_contra">Guardar</button>
                            </div>

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




<script type="text/javascript">
    //mostrar password 1
    {
        function mostrarPassword_3() {
            var cambio = document.getElementById("password_cuen_3");
            if (cambio.type == "password") {
                cambio.type = "text";
                $('.icon_1').removeClass(' fa-eye-slash').addClass('fa fa-eye');
            } else {
                cambio.type = "password";
                $('.icon_1').removeClass(' fa-eye').addClass('fa fa-eye-slash');
            }
        }
        $(document).ready(function() {
            $('#ShowPassword').click(function() {
                $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
            });
        });

        //mostrar password 2
        function mostrarPassword_4() {
            var cambio = document.getElementById("password_cuen_4");
            if (cambio.type == "password") {
                cambio.type = "text";
                $('.icon_2').removeClass(' fa-eye-slash').addClass('fa fa-eye');
            } else {
                cambio.type = "password";
                $('.icon_2').removeClass(' fa-eye').addClass('fa fa-eye-slash');
            }
        }
        $(document).ready(function() {
            $('#ShowPassword').click(function() {
                $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
            });
        });

        //mostrar password 2
        function mostrarPassword_5() {
            var cambio = document.getElementById("principal");
            if (cambio.type == "password") {
                cambio.type = "text";
                $('.icon_3').removeClass(' fa-eye-slash').addClass('fa fa-eye');
            } else {
                cambio.type = "password";
                $('.icon_3').removeClass(' fa-eye').addClass('fa fa-eye-slash');
            }
        }
        $(document).ready(function() {
            $('#ShowPassword').click(function() {
                $('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
            });
        });
    }
</script>


<script>
    $("#form_contraseña").submit(function(event) {
        $('#cambiar_contra').attr("disabled", true);
        var parametros = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "php_cuenta/cambiar_contraseña.php",
            data: parametros,
            beforeSend: function() {
                $('#resultados_contraseña').show().html('<img src="img/ajax-loader.gif" alt="" height="15px" />');
                // Ocultar después de 3 segundos (3000ms)
                setTimeout(function() {
                    $('#resultados_contraseña').fadeOut();
                }, 3000);
            },
            success: function(datos) {
                $("#resultados_contraseña").html(datos);
                $('#cambiar_contra').attr("disabled", false);
                load(1);

            }
        });
        event.preventDefault();
    })
</script>

<script type="text/javascript">
    $("#form_modificar_datos").submit(function(event) {
        $('#btn_modificar').attr("disabled", true);
        var parametros = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "./php_cuenta/modificar.php",
            data: parametros,
            beforeSend: function(objeto) {
                $('#resultados_modi').html('<center><img src="./img/ajax-loader.gif"> CARGANDO...</center>');
            },
            success: function(datos) {
                $("#resultados_modi").html(datos);
                $('#btn_modificar').attr("disabled", false);
                load(1);
            }
        });
        event.preventDefault();
    })
</script>