<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>CRUD EMPLEADOS</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .table-actions button {
            margin-right: 5px;
        }
    </style>

</head>

<body>

    <div class="container mt-4">

        <div class="card">
            <div class="card-header bg-success text-white d-flex justify-content-between">
                <h5>EMPLEADOS</h5>
                <button class="btn btn-dark" id="btnNuevo">+ Nuevo</button>
            </div>

            <div class="card-body">

                <input type="text" id="buscar" class="form-control mb-3" placeholder="Buscar...">

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>DNI</th>
                            <th>Teléfono</th>
                            <th>Inicio</th>
                            <th>Cese</th>
                            <th>Banco</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>

                    <tbody id="tablaEmpleados"></tbody>

                </table>

            </div>
        </div>

    </div>

    <!-- MODAL -->
    <div class="modal fade" id="modalEmpleado">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <div class="modal-header">
                    <h5>Empleado</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#datos">Datos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#usuario">Usuario</a>
                        </li>
                    </ul>

                    <div class="tab-content mt-3">

                        <!-- DATOS COMPLETOS -->
                        <div class="tab-pane fade show active" id="datos">

                            <div class="row">

                                <div class="col-md-4"><input id="nombre" class="form-control mb-2"
                                        placeholder="Nombre"></div>
                                <div class="col-md-4"><input id="dni" class="form-control mb-2" placeholder="DNI">
                                </div>
                                <div class="col-md-4"><input id="telefono" class="form-control mb-2"
                                        placeholder="Teléfono"></div>

                                <div class="col-md-4"><input type="date" id="fecha_nacimiento"
                                        class="form-control mb-2"></div>
                                <div class="col-md-4"><input type="date" id="fecha_inicio" class="form-control mb-2">
                                </div>
                                <div class="col-md-4"><input type="date" id="fecha_cese" class="form-control mb-2">
                                </div>

                                <div class="col-md-6"><input id="direccion" class="form-control mb-2"
                                        placeholder="Dirección"></div>
                                <div class="col-md-6"><input id="banco" class="form-control mb-2"
                                        placeholder="Banco"></div>

                                <div class="col-md-6"><input id="numero_cuenta" class="form-control mb-2"
                                        placeholder="Número de cuenta"></div>
                                <div class="col-md-6"><input id="cci" class="form-control mb-2" placeholder="CCI">
                                </div>

                            </div>

                        </div>

                        <!-- USUARIO -->
                        <div class="tab-pane fade" id="usuario">

                            <div class="row">
                                <div class="col-md-4"><input id="username" class="form-control mb-2"
                                        placeholder="Username"></div>
                                <div class="col-md-4"><input id="password" type="password" class="form-control mb-2"
                                        placeholder="Password"></div>
                                <div class="col-md-4">
                                    <select id="rol_id" class="form-control">
                                        <option value="">Rol</option>
                                        <option value="1">Admin</option>
                                        <option value="2">Usuario</option>
                                    </select>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-success" id="guardarEmpleado">Guardar</button>
                </div>

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

    <div class="modal fade" id="modalPassword">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5>Cambiar contraseña</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="user_id">
                    <input type="password" id="new_password" class="form-control" placeholder="Nueva contraseña">
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success" id="guardarPassword">Guardar</button>
                </div>

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


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        let modal = new bootstrap.Modal(document.getElementById('modalEmpleado'));

        // ABRIR MODAL
        $('#btnNuevo').click(function() {
            limpiar();
            modal.show();
        });

        // LIMPIAR
        function limpiar() {
            $('input').val('');
        }

        // GUARDAR
        $('#guardarEmpleado').click(function() {

            let datos = {
                nombre: $('#nombre').val(),
                dni: $('#dni').val(),
                telefono: $('#telefono').val(),
                fecha_nacimiento: $('#fecha_nacimiento').val(),
                fecha_inicio: $('#fecha_inicio').val(),
                fecha_cese: $('#fecha_cese').val(),
                direccion: $('#direccion').val(),
                banco: $('#banco').val(),
                numero_cuenta: $('#numero_cuenta').val(),
                cci: $('#cci').val(),
                username: $('#username').val(),
                password: $('#password').val(),
                rol_id: $('#rol_id').val()
            };

            $.post('<?php echo e(url('empleados/store')); ?>', {
                _token: '<?php echo e(csrf_token()); ?>',
                datos: datos
            }, function() {
                cargar();
                modal.hide();
            });

        });

        // CARGAR TABLA
        function cargar() {

            $.get('<?php echo e(url('empleados/list')); ?>', function(data) {

                let html = '';

                data.forEach(e => {

                    html += `
            <tr>
                <td>${e.id_empleado}</td>
                <td>${e.nombre}</td>
                <td>${e.dni}</td>
                <td>${e.telefono ?? ''}</td>
                <td>${e.fecha_inicio ?? ''}</td>
                <td>${e.fecha_cese ?? ''}</td>
                <td>${e.banco ?? ''}</td>
                <td >
                       <button class="btn btn-success btn-sm" onclick="ver(${e.id_empleado})">👁</button>
        <button class="btn btn-primary btn-sm" onclick="editar(${e.id_empleado})">✏</button>
        <button class="btn btn-warning btn-sm" onclick="password(${e.id_empleado})">🔐</button>
        <button class="btn btn-danger btn-sm" onclick="eliminar(${e.id_empleado})">🗑</button>
                </td>
            </tr>
            `;
                });

                $('#tablaEmpleados').html(html);

            });

        }

        // BUSCAR SIMPLE (CLIENTE)
        $('#buscar').on('keyup', function() {

            let valor = $(this).val().toLowerCase();

            $('#tablaEmpleados tr').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(valor) > -1)
            });

        });

        // ELIMINAR
        function eliminar(id) {
            if (confirm('Eliminar?')) {
                $.get('<?php echo e(url('empleados/delete')); ?>/' + id, function() {
                    cargar();
                });
            }
        }

        // INIT
        cargar();
    </script>
    <script>
        let modalPass = new bootstrap.Modal(document.getElementById('modalPassword'));

        // EDITAR
        function editar(id) {

            $.get('<?php echo e(url('empleados/get')); ?>/' + id, function(e) {

                $('#nombre').val(e.nombre);
                $('#dni').val(e.dni);
                $('#telefono').val(e.telefono);
                $('#fecha_inicio').val(e.fecha_inicio);
                $('#fecha_cese').val(e.fecha_cese);
                $('#direccion').val(e.direccion);
                $('#banco').val(e.banco);
                $('#numero_cuenta').val(e.numero_cuenta);
                $('#cci').val(e.cci);

                $('#modalEmpleado').data('id', e.id_empleado);

                modal.show();
            });

        }

        // GUARDAR (MODIFICA TU EXISTENTE)
        $('#guardarEmpleado').click(function() {

            let id = $('#modalEmpleado').data('id');

            let url = id ?
                '<?php echo e(url('empleados/update')); ?>/' + id :
                '<?php echo e(url('empleados/store')); ?>';

            let datos = {
                nombre: $('#nombre').val(),
                dni: $('#dni').val(),
                telefono: $('#telefono').val(),
                fecha_inicio: $('#fecha_inicio').val(),
                fecha_cese: $('#fecha_cese').val(),
                direccion: $('#direccion').val(),
                banco: $('#banco').val(),
                numero_cuenta: $('#numero_cuenta').val(),
                cci: $('#cci').val(),
                username: $('#username').val(),
                password: $('#password').val(),
                rol_id: $('#rol_id').val()
            };

            $.post(url, {
                _token: '<?php echo e(csrf_token()); ?>',
                datos: datos
            }, function() {
                cargar();
                modal.hide();
                limpiar();
    // 🔥 ESTA LÍNEA ES CLAVE
    $('#modalEmpleado').removeData('id');


            });

        });

        // PASSWORD
        function password(id) {
            $('#user_id').val(id);
            $('#new_password').val('');
            modalPass.show();
        }

        // GUARDAR PASSWORD
        $('#guardarPassword').click(function() {

            $.post('<?php echo e(url('users/password')); ?>', {
                _token: '<?php echo e(csrf_token()); ?>',
                id: $('#user_id').val(),
                password: $('#new_password').val()
            }, function() {
                alert('Contraseña actualizada');
                modalPass.hide();
            });

        });
$('#btnNuevo').click(function(){

    limpiar();

    // 🔥 MUY IMPORTANTE
    $('#modalEmpleado').removeData('id');

    modal.show();
});

    </script>
</body>

</html>
<?php /**PATH C:\xampp\htdocs\example-app - copia\resources\views/view_usuarios/view_empleado.blade.php ENDPATH**/ ?>