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

<?php
// Decorative only — cycles a small icon/color palette by row position so
// the list doesn't read as a flat wall of text, same as the mockup's
// per-plan icons. Not tied to any real column; a plan's actual identity
// is its name/dates/adjustment, all of which come straight from the DB.
$iconPalette = [
    ['bi-star-fill', 'primary'],
    ['bi-calendar2-week-fill', 'success'],
    ['bi-briefcase-fill', 'warning'],
    ['bi-flag-fill', 'info'],
    ['bi-percent', 'danger'],
];

$statusMeta = [
    'active'    => ['label' => 'Active', 'bg' => 'success-subtle', 'text' => 'success-emphasis'],
    'scheduled' => ['label' => 'Scheduled', 'bg' => 'warning-subtle', 'text' => 'warning-emphasis'],
    'inactive'  => ['label' => 'Inactive', 'bg' => 'secondary-subtle', 'text' => 'secondary-emphasis'],
];
?>

<div class="d-flex justify-content-between align-items-start mb-3">
    <div>
        <h1 class="h3 mb-1">Rate Plans</h1>
        <p class="text-muted mb-0">Date-range pricing rules applied on top of each room type's base rate.</p>
    </div>
    <a href="<?= site_url('rate-plans/new') ?>" class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i>New Rate Plan</a>
</div>

<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body d-flex align-items-center gap-3">
            <div class="rounded-3 bg-primary-subtle text-primary d-flex align-items-center justify-content-center flex-shrink-0" style="width: 44px; height: 44px;"><i class="bi bi-tags-fill fs-5"></i></div>
            <div>
                <div class="text-muted small">Total Rate Plans</div>
                <div class="fs-4 fw-bold"><?= $stats['total'] ?></div>
                <div class="text-muted small">All rate plans</div>
            </div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body d-flex align-items-center gap-3">
            <div class="rounded-3 bg-success-subtle text-success d-flex align-items-center justify-content-center flex-shrink-0" style="width: 44px; height: 44px;"><i class="bi bi-check-circle-fill fs-5"></i></div>
            <div>
                <div class="text-muted small">Active Plans</div>
                <div class="fs-4 fw-bold"><?= $stats['active'] ?></div>
                <div class="text-muted small">Currently active</div>
            </div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body d-flex align-items-center gap-3">
            <div class="rounded-3 bg-warning-subtle text-warning d-flex align-items-center justify-content-center flex-shrink-0" style="width: 44px; height: 44px;"><i class="bi bi-calendar-event-fill fs-5"></i></div>
            <div>
                <div class="text-muted small">Scheduled</div>
                <div class="fs-4 fw-bold"><?= $stats['scheduled'] ?></div>
                <div class="text-muted small">Upcoming plans</div>
            </div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body d-flex align-items-center gap-3">
            <div class="rounded-3 bg-danger-subtle text-danger d-flex align-items-center justify-content-center flex-shrink-0" style="width: 44px; height: 44px;"><i class="bi bi-pause-circle-fill fs-5"></i></div>
            <div>
                <div class="text-muted small">Inactive Plans</div>
                <div class="fs-4 fw-bold"><?= $stats['inactive'] ?></div>
                <div class="text-muted small">Not active</div>
            </div>
        </div></div>
    </div>
</div>

<div class="card shadow-sm mb-3">
    <div class="card-body">
        <form action="<?= site_url('rate-plans') ?>" method="get" class="row g-2 align-items-center">
            <div class="col-md-5">
                <div class="position-relative">
                    <i class="bi bi-search position-absolute" style="left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af;"></i>
                    <input type="text" class="form-control ps-4" name="q" placeholder="Search rate plans by name..." value="<?= esc($filters['q']) ?>">
                </div>
            </div>
            <div class="col-md-3">
                <select class="form-select" name="status">
                    <option value="">All Status</option>
                    <?php foreach ($statusMeta as $key => $meta): ?>
                        <option value="<?= esc($key) ?>" <?= $filters['status'] === $key ? 'selected' : '' ?>><?= esc($meta['label']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" name="room_type_id">
                    <option value="">All Room Types</option>
                    <?php foreach ($roomTypes as $type): ?>
                        <option value="<?= $type->id ?>" <?= (int) $filters['room_type_id'] === $type->id ? 'selected' : '' ?>><?= esc($type->name) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-primary w-100"><i class="bi bi-funnel me-1"></i>Filter</button>
            </div>
        </form>
    </div>
</div>

<div class="card shadow-sm">
    <div class="table-scroll">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Rate Plan Name</th>
                    <th>Dates</th>
                    <th>Room Types</th>
                    <th>Adjustment</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($plans)): ?>
                    <tr><td colspan="6" class="text-center text-muted py-4">No rate plans match this search/filter.</td></tr>
                <?php endif; ?>
                <?php foreach ($plans as $i => $plan):
                    [$icon, $color] = $iconPalette[$i % count($iconPalette)];
                    $status = $statusMeta[$plan->computed_status];
                    $shownTypes = array_slice($plan->room_type_names, 0, 2);
                    $extraTypes = count($plan->room_type_names) - count($shownTypes);
                ?>
                    <tr>
                        <td style="min-width: 220px;">
                            <div class="d-flex align-items-start gap-2">
                                <div class="rounded-circle bg-<?= $color ?>-subtle text-<?= $color ?> d-flex align-items-center justify-content-center flex-shrink-0" style="width: 38px; height: 38px;"><i class="bi <?= $icon ?>"></i></div>
                                <div>
                                    <div class="fw-semibold"><?= esc($plan->name) ?></div>
                                    <?php if ($plan->description): ?>
                                        <div class="text-muted small"><?= esc($plan->description) ?></div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </td>
                        <td class="small" style="min-width: 170px;">
                            <div><i class="bi bi-calendar3 text-muted me-1"></i><?= esc(date('M d, Y', strtotime($plan->date_start))) ?> <i class="bi bi-arrow-right text-muted"></i> <?= esc(date('M d, Y', strtotime($plan->date_end))) ?></div>
                            <div class="text-muted"><?= $plan->nights ?> night<?= $plan->nights === 1 ? '' : 's' ?></div>
                        </td>
                        <td class="small" style="min-width: 160px;">
                            <i class="bi bi-door-closed text-muted me-1"></i><?= esc(implode(', ', $shownTypes) ?: '—') ?>
                            <?php if ($extraTypes > 0): ?>
                                <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">+<?= $extraTypes ?></span>
                            <?php endif; ?>
                        </td>
                        <td class="small">
                            <?php if ($plan->adjustment_type === 'flat'): ?>
                                <div class="fw-semibold"><?= format_money($plan->adjustment_value) ?></div>
                                <div class="text-muted">Flat Rate</div>
                            <?php else:
                                $value = (float) $plan->adjustment_value;
                            ?>
                                <div class="fw-semibold <?= $value > 0 ? 'text-success' : ($value < 0 ? 'text-danger' : 'text-muted') ?>"><?= $value >= 0 ? '+' : '' ?><?= number_format($value, 2) ?>%</div>
                                <div class="text-muted"><?= $value > 0 ? 'Above Base Rate' : ($value < 0 ? 'Below Base Rate' : 'No Change') ?></div>
                            <?php endif; ?>
                        </td>
                        <td><span class="badge bg-<?= $status['bg'] ?> text-<?= $status['text'] ?> rounded-pill">&bull; <?= esc($status['label']) ?></span></td>
                        <td class="text-end">
                            <div class="d-flex justify-content-end gap-1">
                                <a href="<?= site_url('rate-plans/' . $plan->id . '/edit') ?>" class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil me-1"></i>Edit</a>
                                <div class="dropdown d-inline-block">
                                    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <form action="<?= site_url('rate-plans/' . $plan->id . '/delete') ?>" method="post" onsubmit="return confirm('Delete this rate plan?');">
                                                <?= csrf_field() ?>
                                                <button type="submit" class="dropdown-item text-danger">Delete</button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php if (! empty($plans)): ?>
    <?php
        $first = ($page - 1) * $perPage + 1;
        $last  = min($page * $perPage, $total);
        $qs    = ['q' => $filters['q'], 'status' => $filters['status'], 'room_type_id' => $filters['room_type_id'], 'per_page' => $perPage];
    ?>
    <div class="card-footer bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span class="text-muted small">Showing <?= $first ?> to <?= $last ?> of <?= $total ?> rate plans</span>
        <div class="d-flex align-items-center gap-2">
            <nav>
                <ul class="pagination pagination-sm mb-0">
                    <li class="page-item <?= $page <= 1 ? 'disabled' : '' ?>">
                        <a class="page-link" href="<?= site_url('rate-plans?' . http_build_query(array_merge($qs, ['page' => $page - 1]))) ?>"><i class="bi bi-chevron-left"></i></a>
                    </li>
                    <?php for ($p = 1; $p <= $totalPages; $p++): ?>
                        <li class="page-item <?= $p === $page ? 'active' : '' ?>">
                            <a class="page-link" href="<?= site_url('rate-plans?' . http_build_query(array_merge($qs, ['page' => $p]))) ?>"><?= $p ?></a>
                        </li>
                    <?php endfor; ?>
                    <li class="page-item <?= $page >= $totalPages ? 'disabled' : '' ?>">
                        <a class="page-link" href="<?= site_url('rate-plans?' . http_build_query(array_merge($qs, ['page' => $page + 1]))) ?>"><i class="bi bi-chevron-right"></i></a>
                    </li>
                </ul>
            </nav>
            <form action="<?= site_url('rate-plans') ?>" method="get" id="perPageForm">
                <input type="hidden" name="q" value="<?= esc($filters['q']) ?>">
                <input type="hidden" name="status" value="<?= esc($filters['status']) ?>">
                <input type="hidden" name="room_type_id" value="<?= esc($filters['room_type_id']) ?>">
                <select class="form-select form-select-sm" name="per_page" onchange="document.getElementById('perPageForm').submit();" style="width: auto;">
                    <option value="10" <?= $perPage === 10 ? 'selected' : '' ?>>10 per page</option>
                    <option value="25" <?= $perPage === 25 ? 'selected' : '' ?>>25 per page</option>
                    <option value="50" <?= $perPage === 50 ? 'selected' : '' ?>>50 per page</option>
                </select>
            </form>
        </div>
    </div>
    <?php endif; ?>
</div>

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