<?= $this->extend('layout/main') ?>
<?= $this->section('content') ?>

<section class="content">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<style>
    /* Botones de acción */
    .acciones a {
        color: #2d5a86;
        margin-right: 10px;
        font-size: 1.1rem;
        transition: color 0.3s ease, background-color 0.3s ease;
        padding: 6px;
        border-radius: 5px;
        text-decoration: none;
    }
    .acciones a:hover {
        background-color: rgba(77, 130, 188, 0.1);
        color: #16A6BA;
    }
    .acciones a.eliminar:hover {
        background-color: rgba(255, 0, 0, 0.1);
        color: darkred;
    }

    /* Cabecera de la tabla */
    thead {
        background-color: #2d5a86;
        color: white;
    }
    thead th {
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* Celdas del cuerpo */
    tbody td {
        text-align: center;
        vertical-align: middle;
    }
    tbody td.acciones {
        text-align: left;
    }

    /* Botones */
    .btn-buscar,
    .btn-crear {
        background-color: #2d5a86;
        color: white;
    }
    .btn-buscar:hover,
    .btn-crear:hover {
        background-color: #16A6BA;
        color: white;
    }

    /* Inputs al enfocar */
    input.form-control:focus {
        border: 2px solid #16A6BA;
        box-shadow: 0 0 6px rgba(22, 166, 186, 0.5);
        outline: none;
    }
</style>

<div class="container-fluid mt-4">
    <h2 class="fw-bolder text-center mb-4" style="color: #2d5a86;">Listado de Medidores</h2>

    <!-- Formulario de filtros -->
        <form class="row g-3 mb-4" method="get" action="<?= base_url('medidores') ?>">
    
        <!-- Campos de búsqueda con etiquetas -->
        <div class="col-md-3">
            <label class="form-label fw-bold text-sm">Código</label>
            <input type="text" name="cod_fijo" class="form-control form-control-sm" value="<?= esc($search['cod_fijo'] ?? '') ?>">
        </div>
    
        <div class="col-md-3">
            <label class="form-label fw-bold text-sm">Código Usuario</label>
            <input type="text" name="cod_usuario" class="form-control form-control-sm" value="<?= esc($search['cod_usuario'] ?? '') ?>">
        </div>
    
        <div class="col-md-3">
            <label class="form-label fw-bold text-sm">Nombres</label>
            <input type="text" name="nombres" class="form-control form-control-sm" value="<?= esc($search['nombres'] ?? '') ?>">
        </div>
    
        <div class="col-md-3">
            <label class="form-label fw-bold text-sm">Apellidos</label>
            <input type="text" name="apellidos" class="form-control form-control-sm" value="<?= esc($search['apellidos'] ?? '') ?>">
        </div>

        <div class="col-md-3">
            <label class="form-label fw-bold text-sm">Dirección</label>
            <input type="text" name="direccion" class="form-control form-control-sm" value="<?= esc($search['direccion'] ?? '') ?>">
        </div>

        <div class="col-md-3">
            <label class="form-label fw-bold text-sm">NIT/CI</label>
            <input type="text" name="nit_ci" class="form-control form-control-sm" value="<?= esc($search['nit_ci'] ?? '') ?>">
        </div>
        
         <div class="col-md-3">
            <label class="form-label fw-bold text-sm">Número Medidor</label>
            <input type="text" name="numero_medidor" class="form-control form-control-sm" value="<?= esc($search['numero_medidor'] ?? '') ?>">
        </div>


        <!-- Botones -->
        <div class="col-12 d-flex justify-content-end gap-2">
            <button type="submit" class="btn btn-buscar">
                <i class="bi bi-search me-1"></i> Buscar medidores
            </button>
            <a href="<?= base_url('medidores') ?>" class="btn btn-secondary">
                <i class="bi bi-x-circle me-1"></i> Limpiar búsqueda
            </a>
        </div>
    </form>

    <!-- Botón Crear -->
    <div class="text-end mb-3">
        <a href="<?= base_url('medidores/create') ?>" class="btn btn-crear">
            <i class="bi bi-plus-circle"></i> Nuevo Medidor
        </a>
    </div>

    <!-- Tabla de resultados -->
    <div class="table-responsive">
        <table class="table table-sm table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Acciones</th>
                    <th>Id</th>
                    <th>Código Fijo</th>
                    <th>Código Usuario</th>
                    <th>Nombres</th>
                    <th>Apellidos</th>
                    <th>Dirección</th>
                    <th>NIT/CI</th>
                    <th>Número Medidor</th>
                    <th>Distrito</th>
                    <th>OTB</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($items)): ?>
                    <tr>
                        <td colspan="20" class="text-center text-muted">No se encontraron resultados.</td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($items as $item): ?>
                        <tr>
                            <td class="acciones">
                                <a href="<?= base_url('medidores/view/' . $item['gid']) ?>" title="Ver"><i class="bi bi-eye"></i></a>
                                <a href="<?= base_url('medidores/edit/' . $item['gid']) ?>" title="Editar"><i class="bi bi-pencil-square"></i></a>
                                <a href="<?= base_url('medidores/delete/' . $item['gid']) ?>" title="Eliminar" class="eliminar" onclick="return confirm('¿Eliminar este registro?');"><i class="bi bi-trash"></i></a>
   
                            </td>
                            <td><?= esc($item['gid']) ?></td>
                            <td><?= esc($item['cod_fijo']) ?></td>
                            <td><?= esc($item['cod_usuario']) ?></td>
                            <td><?= esc($item['nombres']) ?></td>
                            <td><?= esc($item['apellidos']) ?></td>
                            <td><?= esc($item['direccion']) ?></td>
                            <td><?= esc($item['nit_ci']) ?></td>
                            <td><?= esc($item['numero_medidor']) ?></td>
                            <td><?= esc($item['distrito']) ?></td>
                            <td><?= esc($item['otb']) ?></td>
                        </tr>
                    <?php endforeach ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-end mt-3">
        <?= $pager->links() ?>
    </div>
</div>

<?= $this->endSection(); ?>

