<?php
session_start();

if(!isset($_SESSION['admin'])){
    header("Location: login.php");
    exit;
}
?>
<?php include("header.php"); ?>
<?php include("conexion.php"); ?>

<?php
$breadcrumbs = [
    ['nombre' => 'Inicio', 'url' => 'index.php'],
    ['nombre' => 'Panel de Administración', 'url' => 'agregar_inspector.php'],
    ['nombre' => 'Registrar Inspector']
];
include("breadcrumbs.php");
?>

<div class="container mt-4 mb-5">

    <?php if(isset($_SESSION['mensaje'])): ?>
        <div class="alerta alerta-<?php echo $_SESSION['mensaje']['tipo']; ?>" id="alertaMsg">
            <?php if($_SESSION['mensaje']['tipo'] === 'exito'): ?>
                <i class="bi bi-check-circle-fill"></i>
            <?php else: ?>
                <i class="bi bi-exclamation-triangle-fill"></i>
            <?php endif; ?>
            <?php echo $_SESSION['mensaje']['texto']; ?>
        </div>
        <?php unset($_SESSION['mensaje']); ?>
    <?php endif; ?>

    <!-- FORMULARIO DE REGISTRO -->
    <div class="admin-card mb-4">
        <div class="admin-card-header">
            <h4 class="m-0"><i class="bi bi-person-plus"></i> Registrar Nuevo Inspector</h4>
        </div>
        <div class="admin-card-body">

            <form action="guardar_inspector.php" method="POST" enctype="multipart/form-data" id="formInspector">
                <input type="hidden" name="csrf_token" value="<?php echo generar_csrf(); ?>">

                <!-- SECCIÓN: Datos del Servidor Público -->
                <h6 class="form-seccion-titulo"><i class="bi bi-person-vcard"></i> Datos del Servidor Público</h6>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label-custom">Nombre Completo <span class="text-danger">*</span></label>
                        <input type="text" name="nombre" class="form-control" placeholder="Ej: Juan Pérez López" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Número de Trabajador</label>
                        <input type="text" name="numero_trabajador" class="form-control" placeholder="Ej: TRB-0042">
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Puesto / Cargo <span class="text-danger">*</span></label>
                        <input type="text" name="puesto" class="form-control" placeholder="Ej: Inspector de Campo" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Número de Credencial</label>
                        <input type="text" name="numero_credencial" class="form-control" placeholder="Ej: INS-2026-001">
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Área <span class="text-danger">*</span></label>
                        <select name="area_id" class="form-select" required>
                            <option value="">Seleccione un área</option>
                            <?php
                            $areas = mysqli_query($conexion, "SELECT * FROM areas ORDER BY id");
                            echo '<optgroup label="ORGANISMOS">';
                            while($a = mysqli_fetch_assoc($areas)){
                                if($a['id'] == 4){
                                    echo '</optgroup><optgroup label="UNIDADES ADMINISTRATIVAS">';
                                }
                                echo '<option value="'.$a['id'].'">'.htmlspecialchars($a['nombre']).'</option>';
                            }
                            echo '</optgroup>';
                            ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Teléfono</label>
                        <input type="tel" name="telefono" class="form-control" placeholder="Ej: 238 123 4567">
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Estatus <span class="text-danger">*</span></label>
                        <select name="estatus" class="form-select" required>
                            <option value="Activo">Activo</option>
                            <option value="Inactivo">Inactivo</option>
                        </select>
                    </div>
                </div>

                <!-- SECCIÓN: Vigencia -->
                <h6 class="form-seccion-titulo mt-4"><i class="bi bi-calendar-event"></i> Vigencia</h6>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label-custom">Fecha de Inicio</label>
                        <input type="date" name="fecha_inicio" class="form-control">
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Fecha de Vigencia</label>
                        <input type="date" name="fecha_fin" class="form-control">
                    </div>
                </div>

                <!-- SECCIÓN: Facultades de Inspección -->
                <h6 class="form-seccion-titulo mt-4"><i class="bi bi-clipboard-check"></i> Facultades de Inspección</h6>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label-custom">Tipo de Inspección</label>
                        <textarea name="tipo_inspeccion" class="form-control" rows="3" placeholder="Ej: Verificación, Inspección sanitaria, Visita domiciliaria..."></textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label-custom">Fundamento Jurídico</label>
                        <textarea name="fundamento_juridico" class="form-control" rows="3" placeholder="Ej: Art. 115 de la Constitución, Reglamento Municipal..."></textarea>
                    </div>
                </div>

                <!-- SECCIÓN: Fotografía -->
                <div class="mt-4">
                    <label class="form-label-custom">Fotografía del Inspector <span class="text-danger">*</span></label>
                    <div class="foto-upload-zone" id="dropZone">
                        <img id="previewImg" src="" alt="" class="foto-preview" style="display:none;">
                        <div id="uploadPlaceholder" class="upload-placeholder">
                            <i class="bi bi-camera upload-icon-formal"></i>
                            <span>Haga clic para seleccionar o arrastre una imagen</span>
                        </div>
                        <input type="file" name="foto" id="fotoInput" accept="image/*" required class="foto-input-hidden">
                    </div>
                </div>

                <div class="d-flex gap-2 mt-4 flex-wrap align-items-center">
                    <button type="submit" class="btn btn-danger btn-lg">
                        <i class="bi bi-floppy"></i> Guardar
                    </button>
                    <a href="index.php" class="btn btn-outline-secondary btn-lg">
                        <i class="bi bi-list-ul"></i> Ver Áreas
                    </a>
                    <?php if(($_SESSION['rol'] ?? '') === 'tics'): ?>
                    <a href="usuarios.php" class="btn btn-outline-primary btn-lg">
                        <i class="bi bi-people-fill"></i> Gestionar Usuarios
                    </a>
                    <?php endif; ?>
                </div>
            </form>
        </div>
    </div>

    <!-- TABLA DE INSPECTORES -->
    <div class="admin-card mb-4">
        <div class="admin-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
            <h4 class="m-0"><i class="bi bi-table"></i> Inspectores Registrados</h4>
            <input type="text" id="buscador" class="form-control buscador-tabla" placeholder="Buscar inspector...">
        </div>
        <div class="admin-card-body p-0">
            <div class="table-responsive">
                <table class="table table-admin" id="tablaInspectores">
                    <thead>
                        <tr>
                            <th>Foto</th>
                            <th>Nombre</th>
                            <th>Núm. Trabajador</th>
                            <th>Área</th>
                            <th>Puesto</th>
                            <th>Estatus</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $todos = mysqli_query($conexion, "SELECT i.*, a.nombre AS area_nombre FROM inspectores i JOIN areas a ON i.area_id = a.id ORDER BY i.id DESC");

                        if($todos && mysqli_num_rows($todos) > 0){
                            while($ins = mysqli_fetch_assoc($todos)){
                        ?>
                        <tr>
                            <td><img src="fotos/<?php echo $ins['foto']; ?>" class="tabla-foto" alt=""></td>
                            <td class="fw-bold"><?php echo htmlspecialchars($ins['nombre']); ?></td>
                            <td><?php echo htmlspecialchars($ins['numero_trabajador'] ?? '') ?: '—'; ?></td>
                            <td><?php echo htmlspecialchars($ins['area_nombre']); ?></td>
                            <td><?php echo htmlspecialchars($ins['puesto']); ?></td>
                            <td>
                                <span class="badge-estatus <?php echo ($ins['estatus']=='Activo') ? 'badge-activo' : 'badge-inactivo'; ?>">
                                    <?php echo $ins['estatus']; ?>
                                </span>
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    <a href="editar_inspector.php?id=<?php echo $ins['id']; ?>" class="btn btn-sm btn-warning" title="Editar">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                    <form action="eliminar_inspector.php" method="POST" style="display:inline" onsubmit="return confirm('¿Está seguro de eliminar a <?php echo htmlspecialchars($ins['nombre']); ?>?');">
                                        <input type="hidden" name="csrf_token" value="<?php echo generar_csrf(); ?>">
                                        <input type="hidden" name="id" value="<?php echo $ins['id']; ?>">
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                                            <i class="bi bi-trash3"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        <?php
                            }
                        } else {
                            echo '<tr><td colspan="7" class="text-center py-4 text-muted">No hay inspectores registrados.</td></tr>';
                        }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- GESTIÓN DE TITULARES DE ÁREA -->
    <div class="admin-card">
        <div class="admin-card-header">
            <h4 class="m-0"><i class="bi bi-building"></i> Titulares de Áreas</h4>
        </div>
        <div class="admin-card-body p-0">
            <div class="table-responsive">
                <table class="table table-admin" id="tablaTitulares">
                    <thead>
                        <tr>
                            <th>Área</th>
                            <th>Titular</th>
                            <th>Cargo del Titular</th>
                            <th style="width:100px;">Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $areas_titulares = mysqli_query($conexion, "SELECT * FROM areas ORDER BY id");
                        while($at = mysqli_fetch_assoc($areas_titulares)){
                        ?>
                        <tr>
                            <td class="fw-bold"><?php echo htmlspecialchars($at['nombre']); ?></td>
                            <td>
                                <input type="text" class="form-control form-control-sm titular-input"
                                       data-area-id="<?php echo $at['id']; ?>"
                                       data-field="titular_nombre"
                                       value="<?php echo htmlspecialchars($at['titular_nombre'] ?? ''); ?>"
                                       placeholder="Nombre del titular">
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm titular-input"
                                       data-area-id="<?php echo $at['id']; ?>"
                                       data-field="titular_cargo"
                                       value="<?php echo htmlspecialchars($at['titular_cargo'] ?? ''); ?>"
                                       placeholder="Cargo del titular">
                            </td>
                            <td>
                                <button class="btn btn-sm btn-danger btn-guardar-titular" data-area-id="<?php echo $at['id']; ?>">
                                    <i class="bi bi-floppy"></i> Guardar
                                </button>
                            </td>
                        </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<script>
var fotoInput = document.getElementById('fotoInput');
var dropZone = document.getElementById('dropZone');
var previewImg = document.getElementById('previewImg');
var placeholder = document.getElementById('uploadPlaceholder');

dropZone.addEventListener('click', function(){ fotoInput.click(); });
dropZone.addEventListener('dragover', function(e){ e.preventDefault(); dropZone.classList.add('drag-over'); });
dropZone.addEventListener('dragleave', function(){ dropZone.classList.remove('drag-over'); });
dropZone.addEventListener('drop', function(e){
    e.preventDefault(); dropZone.classList.remove('drag-over');
    if(e.dataTransfer.files.length){ fotoInput.files = e.dataTransfer.files; showPreview(e.dataTransfer.files[0]); }
});
fotoInput.addEventListener('change', function(){ if(this.files && this.files[0]) showPreview(this.files[0]); });

function showPreview(file){
    var reader = new FileReader();
    reader.onload = function(e){ previewImg.src = e.target.result; previewImg.style.display = 'block'; placeholder.style.display = 'none'; };
    reader.readAsDataURL(file);
}

document.getElementById('buscador').addEventListener('input', function(){
    var filtro = this.value.toLowerCase();
    document.querySelectorAll('#tablaInspectores tbody tr').forEach(function(fila){
        fila.style.display = fila.textContent.toLowerCase().includes(filtro) ? '' : 'none';
    });
});

var alerta = document.getElementById('alertaMsg');
if(alerta){ setTimeout(function(){ alerta.style.opacity = '0'; setTimeout(function(){ alerta.remove(); }, 500); }, 4000); }

// Guardar titular de área vía AJAX
document.querySelectorAll('.btn-guardar-titular').forEach(function(btn){
    btn.addEventListener('click', function(){
        var areaId = this.dataset.areaId;
        var row = this.closest('tr');
        var inputs = row.querySelectorAll('.titular-input');
        var data = new FormData();
        data.append('csrf_token', '<?php echo generar_csrf(); ?>');
        data.append('area_id', areaId);

        inputs.forEach(function(input){
            data.append(input.dataset.field, input.value);
        });

        var btnEl = this;
        btnEl.disabled = true;
        btnEl.innerHTML = '<i class="bi bi-hourglass-split"></i>';

        fetch('guardar_titular.php', {
            method: 'POST',
            body: data
        })
        .then(function(r){ return r.json(); })
        .then(function(resp){
            btnEl.disabled = false;
            if(resp.ok){
                btnEl.innerHTML = '<i class="bi bi-check-lg"></i> Listo';
                btnEl.classList.replace('btn-danger', 'btn-success');
                setTimeout(function(){
                    btnEl.innerHTML = '<i class="bi bi-floppy"></i> Guardar';
                    btnEl.classList.replace('btn-success', 'btn-danger');
                }, 2000);
            } else {
                btnEl.innerHTML = '<i class="bi bi-x-lg"></i> Error';
                setTimeout(function(){
                    btnEl.innerHTML = '<i class="bi bi-floppy"></i> Guardar';
                }, 2000);
            }
        })
        .catch(function(){
            btnEl.disabled = false;
            btnEl.innerHTML = '<i class="bi bi-floppy"></i> Guardar';
        });
    });
});
</script>

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