<?php 
session_start();
?>
<?php 
include("header.php"); 
include("conexion.php"); 


if(!isset($_GET['id']) || $_GET['id']==""){
    header("Location: index.php");
    exit;
}

$id = intval($_GET['id']);

// Obtener área con datos del titular
$stmt_area = $conexion->prepare("SELECT * FROM areas WHERE id = ?");
$stmt_area->bind_param("i", $id);
$stmt_area->execute();
$result_area = $stmt_area->get_result();

if($result_area->num_rows == 0){
    echo "<h2 style='text-align:center;margin-top:50px'>Área no encontrada</h2>";
    include("footer.php");
    exit;
}

$area = $result_area->fetch_assoc();
$stmt_area->close();
?>

<?php
$breadcrumbs = [
    ['nombre' => 'Inicio', 'url' => 'index.php'],
    ['nombre' => htmlspecialchars($area['nombre'])]
];
include("breadcrumbs.php");
?>

<div class="area-wrapper">

<h1 class="area-title"><?php echo htmlspecialchars($area['nombre']); ?></h1>

<div class="inspectores-grid">

<?php
$stmt_insp = $conexion->prepare("SELECT * FROM inspectores WHERE area_id = ?");
$stmt_insp->bind_param("i", $id);
$stmt_insp->execute();
$consulta = $stmt_insp->get_result();

if($consulta->num_rows > 0){
while($row = $consulta->fetch_assoc()){
?>

<div class="inspector-card">
    <div class="inspector-card-name">
        <?php echo htmlspecialchars($row['nombre']); ?>
    </div>
    <div class="inspector-card-body">
        <div class="inspector-card-foto">
            <img src="fotos/<?php echo $row['foto']; ?>" alt="<?php echo htmlspecialchars($row['nombre']); ?>">
        </div>
        <div class="inspector-card-info">
            <?php if(!empty($row['numero_trabajador'])): ?>
                <p class="inspector-card-numtrab"><i class="bi bi-hash"></i> <?php echo htmlspecialchars($row['numero_trabajador']); ?></p>
            <?php endif; ?>
            <p class="inspector-card-puesto"><?php echo htmlspecialchars($row['puesto']); ?></p>
            <button class="btn-detalles-formal"
                data-nombre="<?php echo htmlspecialchars($row['nombre']); ?>"
                data-puesto="<?php echo htmlspecialchars($row['puesto']); ?>"
                data-foto="fotos/<?php echo $row['foto']; ?>"
                data-numtrabajador="<?php echo htmlspecialchars($row['numero_trabajador'] ?? ''); ?>"
                data-credencial="<?php echo htmlspecialchars($row['numero_credencial'] ?? ''); ?>"
                data-telefono="<?php echo htmlspecialchars($row['telefono'] ?? ''); ?>"
                data-inicio="<?php echo $row['fecha_inicio'] ? date('d/m/Y', strtotime($row['fecha_inicio'])) : 'No registrada'; ?>"
                data-fin="<?php echo $row['fecha_fin'] ? date('d/m/Y', strtotime($row['fecha_fin'])) : 'No registrada'; ?>"
                data-estatus="<?php echo $row['estatus']; ?>"
                data-area="<?php echo htmlspecialchars($area['nombre']); ?>"
                data-titular="<?php echo htmlspecialchars($area['titular_nombre'] ?? ''); ?>"
                data-titularcargo="<?php echo htmlspecialchars($area['titular_cargo'] ?? ''); ?>"
                data-tipoinspeccion="<?php echo htmlspecialchars($row['tipo_inspeccion'] ?? ''); ?>"
                data-fundamentojuridico="<?php echo htmlspecialchars($row['fundamento_juridico'] ?? ''); ?>"
                data-id="<?php echo $row['id']; ?>"
            ><i class="bi bi-eye"></i> Detalles</button>
        </div>
    </div>
</div>

<?php 
}
}else{
echo "<div class='text-center py-5'><p class='text-muted fs-5'>No hay inspectores registrados en esta área.</p></div>";
}
$stmt_insp->close();
?>

</div>
</div>

<!-- MODAL DE DETALLES -->
<div class="modal fade" id="modalDetalles" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content modal-inspector">

    <div class="modal-header-formal">
        <h5 class="modal-title">Detalles del Servidor Público</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
    </div>

    <div class="modal-body p-0">
        <div class="modal-detalle-top">
            <div class="modal-foto-container">
                <img id="modalFoto" src="" alt="Foto del inspector" class="modal-foto">
            </div>
            <div class="modal-ident">
                <span id="modalEstatus" class="badge-estatus badge-activo">Activo</span>
                <p class="modal-cargo-label">Nombre del servidor público:</p>
                <h4 class="modal-nombre" id="modalNombre">—</h4>
            </div>
        </div>

        <div class="modal-detalle-datos">
            <h6 class="modal-seccion-titulo"><i class="bi bi-person-vcard"></i> Datos del Servidor Público</h6>
            <table class="tabla-detalles">
                <tbody>
                    <tr>
                        <td class="td-label">Número de trabajador:</td>
                        <td class="td-valor" id="modalNumTrabajador">—</td>
                    </tr>
                    <tr>
                        <td class="td-label">Cargo o nombramiento:</td>
                        <td class="td-valor" id="modalPuesto">—</td>
                    </tr>
                    <tr>
                        <td class="td-label">Número de credencial:</td>
                        <td class="td-valor" id="modalCredencial">—</td>
                    </tr>
                    <tr>
                        <td class="td-label">Teléfono de contacto:</td>
                        <td class="td-valor" id="modalTelefono">—</td>
                    </tr>
                </tbody>
            </table>

            <h6 class="modal-seccion-titulo mt-3"><i class="bi bi-building"></i> Datos de la Unidad Administrativa</h6>
            <table class="tabla-detalles">
                <tbody>
                    <tr>
                        <td class="td-label">Área asignada:</td>
                        <td class="td-valor" id="modalArea">—</td>
                    </tr>
                    <tr>
                        <td class="td-label">Titular del área:</td>
                        <td class="td-valor" id="modalTitular">—</td>
                    </tr>
                    <tr>
                        <td class="td-label">Cargo del titular:</td>
                        <td class="td-valor" id="modalTitularCargo">—</td>
                    </tr>
                </tbody>
            </table>

            <h6 class="modal-seccion-titulo mt-3"><i class="bi bi-clipboard-check"></i> Facultades de Inspección</h6>
            <table class="tabla-detalles">
                <tbody>
                    <tr>
                        <td class="td-label">Tipo de inspección:</td>
                        <td class="td-valor" id="modalTipoInspeccion">—</td>
                    </tr>
                    <tr>
                        <td class="td-label">Fundamento jurídico:</td>
                        <td class="td-valor" id="modalFundamentoJuridico">—</td>
                    </tr>
                </tbody>
            </table>

            <h6 class="modal-seccion-titulo mt-3"><i class="bi bi-calendar-event"></i> Vigencia</h6>
            <table class="tabla-detalles">
                <tbody>
                    <tr>
                        <td class="td-label">Fecha de inicio:</td>
                        <td class="td-valor" id="modalInicio">—</td>
                    </tr>
                    <tr>
                        <td class="td-label">Fecha de término:</td>
                        <td class="td-valor" id="modalFin">—</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <?php if(isset($_SESSION['admin'])): ?>
        <div class="modal-admin-bar">
            <span class="text-muted" style="font-size:13px;">Administre inspectores desde el <a href="agregar_inspector.php">Panel de Administración</a></span>
        </div>
        <?php endif; ?>
    </div>

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

<script>
document.querySelectorAll('.btn-detalles-formal').forEach(function(btn){
    btn.addEventListener('click', function(){
        document.getElementById('modalNombre').textContent = this.dataset.nombre;
        document.getElementById('modalPuesto').textContent = this.dataset.puesto || '—';
        document.getElementById('modalFoto').src = this.dataset.foto;
        document.getElementById('modalNumTrabajador').textContent = this.dataset.numtrabajador || '—';
        document.getElementById('modalCredencial').textContent = this.dataset.credencial || '—';
        document.getElementById('modalTelefono').textContent = this.dataset.telefono || '—';
        document.getElementById('modalInicio').textContent = this.dataset.inicio;
        document.getElementById('modalFin').textContent = this.dataset.fin;
        document.getElementById('modalArea').textContent = this.dataset.area;
        document.getElementById('modalTitular').textContent = this.dataset.titular || '—';
        document.getElementById('modalTitularCargo').textContent = this.dataset.titularcargo || '—';
        document.getElementById('modalTipoInspeccion').textContent = this.dataset.tipoinspeccion || '—';
        document.getElementById('modalFundamentoJuridico').textContent = this.dataset.fundamentojuridico || '—';

        var estatusBadge = document.getElementById('modalEstatus');
        estatusBadge.textContent = this.dataset.estatus;
        estatusBadge.className = 'badge-estatus ' + (this.dataset.estatus === 'Activo' ? 'badge-activo' : 'badge-inactivo');

        var editBtn = document.getElementById('modalEditarBtn');
        if(editBtn) editBtn.href = 'editar_inspector.php?id=' + this.dataset.id;

        var delInput = document.getElementById('modalEliminarId');
        if(delInput) delInput.value = this.dataset.id;

        var modal = new bootstrap.Modal(document.getElementById('modalDetalles'));
        modal.show();
    });
});
</script>

<?php include("footer.php"); ?>