<div class="row g-3 mb-4">
    <?php foreach ($pools as $pool): ?>
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between">
                <h6 class="mb-0"><?= e($pool['facility_name_en']) ?> <small class="text-muted">(<?= e($pool['facility_code']) ?>)</small></h6>
                <span class="badge bg-<?= $pool['is_active'] ? 'success' : 'danger' ?>"><?= $pool['is_active'] ? 'Active' : 'Inactive' ?></span>
            </div>
            <div class="card-body">
                <div class="row g-2 mb-3">
                    <div class="col-6"><strong>Type:</strong> <?= e(ucfirst(str_replace('_', ' ', $pool['pool_type']))) ?></div>
                    <div class="col-6"><strong>Max Capacity:</strong> <?= $pool['max_capacity'] ?></div>
                    <div class="col-6"><strong>Size:</strong> <?= $pool['length_m'] ?>m × <?= $pool['width_m'] ?>m</div>
                    <div class="col-6"><strong>Depth:</strong> <?= $pool['depth_min_m'] ?>m - <?= $pool['depth_max_m'] ?>m</div>
                    <div class="col-6"><strong>Lanes:</strong> <?= $pool['lanes'] ?? '-' ?></div>
                    <div class="col-6"><strong>Heated:</strong> <?= $pool['heated'] ? 'Yes' : 'No' ?></div>
                    <div class="col-6"><strong>Water:</strong> <?= e(ucfirst($pool['water_type'])) ?></div>
                    <div class="col-6"><strong>Temp:</strong> <?= $pool['temperature_celsius'] ? $pool['temperature_celsius'] . '°C' : '-' ?></div>
                </div>

                <h6>Recent Readings</h6>
                <div class="table-responsive">
                    <table id="pool-readings-<?= $pool['id'] ?>" class="table table-sm table-striped w-100"
                           data-url="/api/facilities/pools/readings/<?= $pool['id'] ?>"
                           data-columns='<?= json_encode([
                               ["data"=>"date","title"=>"Date"],
                               ["data"=>"time","title"=>"Time"],
                               ["data"=>"ph","title"=>"pH"],
                               ["data"=>"chlorine","title"=>"Cl₂"],
                               ["data"=>"temperature","title"=>"Temp"],
                               ["data"=>"compliant","title"=>"Status"],
                           ]) ?>'>
                        <thead><tr><th>Date</th><th>Time</th><th>pH</th><th>Cl₂</th><th>Temp</th><th>Status</th></tr></thead>
                    </table>
                </div>
                <?php if (auth_can('facilities.manage')): ?>
                <button class="btn btn-sm btn-outline-primary mt-2 btn-add-reading" data-pool-id="<?= $pool['id'] ?>" data-pool-name="<?= e($pool['facility_name_en']) ?>">
                    <i class="fas fa-plus me-1"></i>Add Reading
                </button>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<!-- Add Reading Modal -->
<div class="modal fade" id="readingModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">Add Pool Reading: <span id="reading-pool-name"></span></h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form method="POST" action="/facilities/pools/readings" data-ajax="true" id="reading-form">
            <?= csrf_field() ?>
            <input type="hidden" name="pool_id" id="reading-pool-id">
            <div class="row g-3">
                <div class="col-6"><label class="form-label">Date <span class="text-danger">*</span></label><input type="date" name="reading_date" class="form-control" value="<?= date('Y-m-d') ?>" required></div>
                <div class="col-6"><label class="form-label">Time <span class="text-danger">*</span></label><input type="time" name="reading_time" class="form-control" value="<?= date('H:i') ?>" required></div>
                <div class="col-6"><label class="form-label">pH Level (7.2-7.8)</label><input type="number" name="ph_level" class="form-control" step="0.01" min="0" max="14"></div>
                <div class="col-6"><label class="form-label">Chlorine (1.0-3.0 ppm)</label><input type="number" name="chlorine_level" class="form-control" step="0.001" min="0"></div>
                <div class="col-6"><label class="form-label">Temperature (°C)</label><input type="number" name="temperature_celsius" class="form-control" step="0.1" min="0"></div>
                <div class="col-6"><label class="form-label">Turbidity (NTU)</label><input type="number" name="turbidity" class="form-control" step="0.01" min="0"></div>
                <div class="col-12"><label class="form-label">Action Taken</label><textarea name="action_taken" class="form-control" rows="2"></textarea></div>
            </div>
            <div class="mt-3"><button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>Save Reading</button></div>
        </form>
    </div>
</div></div></div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    <?php foreach ($pools as $pool): ?>
    DataTableHelper.init('pool-readings-<?= $pool['id'] ?>', { pageLength: 5, ordering: false, searching: false, info: false });
    <?php endforeach; ?>

    document.querySelectorAll('.btn-add-reading').forEach(btn => {
        btn.addEventListener('click', function() {
            document.getElementById('reading-pool-id').value = this.dataset.poolId;
            document.getElementById('reading-pool-name').textContent = this.dataset.poolName;
            new bootstrap.Modal(document.getElementById('readingModal')).show();
        });
    });
});
</script>
<?php $__view->endPush() ?>