<?php
session_start();
if (!isset($_SESSION['rol']) || !in_array($_SESSION['rol'], ['contabilidad', 'adminTi'])) {
    header('Location: ../../index.php');
    exit();
}

require_once(__DIR__ . '/../../backend/db/conexion.php');

// Consulta todos los centros de costos
$query = "SELECT id, punto_de_venta, centro_de_costos, activo FROM centros_costos ORDER BY punto_de_venta ASC";
$result = $conn->query($query);
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Centros de Costos</title>
    <!-- Bootstrap + FontAwesome + DataTables -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
    <link href="../assets/css/recruiter.css" rel="stylesheet" />
</head>
<body class="bg-light">

<div class="bg-light">
    <?php include '../includes/sidebar.php'; ?>
    <div class="main-content flex-grow-1 px-4 py-4">
        <?php include '../includes/topbar.php'; ?>

        <div class="container mt-5">
            <h3 class="mb-4">Catálogo de Centros de Costos</h3>
            
            <!-- Mensaje de confirmación -->
            <?php if (isset($_SESSION['mensaje'])): ?>
              <div class="alert alert-info alert-dismissible fade show" role="alert">
                <?= $_SESSION['mensaje']; unset($_SESSION['mensaje']); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
              </div>
            <?php endif; ?>
            
            <div class="card shadow">
                <div class="card-body">
                    <table id="tablaCentrosCostos" class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Punto de Venta</th>
                                <th>Centro de Costos</th>
                                <th>Estatus</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $i=1; while ($row = $result->fetch_assoc()): ?>
                            <tr>
                                <td><?= $i++ ?></td>
                                <td><?= htmlspecialchars($row['punto_de_venta']) ?></td>
                                <td>
                                    <?= (!isset($row['centro_de_costos']) || trim($row['centro_de_costos']) === '') 
                                        ? '<span class="fw-bold text-dark">Por definir</span>' 
                                        : htmlspecialchars($row['centro_de_costos']) ?>
                                </td>
                                <td>
                                    <?php if ($row['activo'] == 0): ?>
                                        <span class="badge bg-success">Activo</span>
                                    <?php else: ?>
                                        <span class="badge bg-danger">Inactivo</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-primary editarCentro"
                                            data-id="<?= $row['id'] ?>"
                                            data-centro="<?= htmlspecialchars($row['centro_de_costos']) ?>"
                                            data-pdv="<?= htmlspecialchars($row['punto_de_venta']) ?>">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </td>
                            </tr>
                            <?php endwhile; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal para editar centro de costos -->
        <div class="modal fade" id="modalEditarCentro" tabindex="-1" aria-labelledby="modalEditarCentroLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="formEditarCentro" method="POST" action="actualizar_centro_costo.php">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalEditarCentroLabel">Editar Centro de Costos</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="id" id="editId">
                            <div class="mb-3">
                                <label class="form-label">Punto de Venta</label>
                                <input type="text" class="form-control" id="editPdv" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Centro de Costos</label>
                                <input type="text" class="form-control" name="centro_de_costos" id="editCentro" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Guardar</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

<!-- JS Bootstrap + DataTables -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
    $('#tablaCentrosCostos').DataTable({
        "language": {
            "url": "../assets/i18n/es-ES.json"
        }
    });

    // Modal edición
    $(document).on('click', '.editarCentro', function() {
        $('#editId').val($(this).data('id'));
        $('#editPdv').val($(this).data('pdv'));
        $('#editCentro').val($(this).data('centro'));
        var modal = new bootstrap.Modal(document.getElementById('modalEditarCentro'));
        modal.show();
    });
});
</script>
</body>
</html>
