<?= $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>
    .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;
    }

    thead {
        background-color: #2d5a86;
        color: white;
    }

    thead th, tbody td {
        text-align: center;
        vertical-align: middle;
    }

    .btn-buscar, .btn-crear {
        background-color: #2d5a86;
        color: white;
    }

    .btn-buscar:hover, .btn-crear:hover {
        background-color: #16A6BA;
        color: white;
    }

    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; font-size: 1.9rem;">
        Listado de Válvulas
    </h2>

    <!-- Filtros -->
    <form class="row g-3 mb-4" method="get" action="<?= base_url('valvulas') ?>">
        <div class="col-md-3">
            <label class="form-label fw-bold text-sm">ID Válvula</label>
            <input type="text" name="id_valvula" class="form-control form-control-sm" value="<?= esc($search['id_valvula'] ?? '') ?>">
        </div>

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

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

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

        <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 válvulas
            </button>
            <a href="<?= base_url('valvulas') ?>" class="btn btn-secondary">
                <i class="bi bi-x-circle me-1"></i> Limpiar
            </a>
        </div>
    </form>

    <!-- Botón crear -->
    <div class="text-end mb-3">
        <a href="<?= base_url('valvulas/create') ?>" class="btn btn-crear">
            <i class="bi bi-plus-circle"></i> Nueva Válvula
        </a>
    </div>

    <!-- Tabla -->
    <div class="table-responsive">
        <table class="table table-sm table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Acciones</th>
                    <th>ID</th>
                    <th>ID Válvula</th>
                    <th>Diámetro</th>
                    <th>Tipo</th>
                    <th>Función</th>
                    <th>Estado</th>
                    <th>Tapa</th>
                    <th>Ubicación</th>
                    <th>OTB</th>
                    <th>Distrito</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($items)): ?>
                    <tr>
                        <td colspan="11" 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('valvulas/view/' . $item['gid']) ?>" title="Ver"><i class="bi bi-eye"></i></a>
                                <a href="<?= base_url('valvulas/edit/' . $item['gid']) ?>" title="Editar"><i class="bi bi-pencil-square"></i></a>
                                <a href="<?= base_url('valvulas/delete/' . $item['gid']) ?>" title="Eliminar" class="eliminar" onclick="return confirm('¿Eliminar esta válvula?');"><i class="bi bi-trash"></i></a>
                            </td>
                            <td><?= esc($item['gid']) ?></td>
                            <td><?= esc($item['id_valvula']) ?></td>
                            <td><?= esc($item['diametro']) ?></td>
                            <td><?= esc($item['tipo']) ?></td>
                            <td><?= esc($item['funcion']) ?></td>
                            <td><?= esc($item['estado']) ?></td>
                            <td><?= esc($item['tapa']) ?></td>
                            <td><?= esc($item['ubicacion']) ?></td>
                            <td><?= esc($item['otb']) ?></td>
                            <td><?= esc($item['distrito']) ?></td>
                        </tr>
                    <?php endforeach ?>
                <?php endif ?>
            </tbody>
        </table>
    </div>

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

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






