<?php
/**
 * @var array $grouped
 */
?>
<div class="page-title mb-4">
    <h5><i class="fas fa-clipboard-list me-2 text-gold"></i>Reception Board</h5>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <span class="text-muted"><?= date('l, d M Y') ?></span>
    </div>
    <div class="d-flex gap-2">
        <a href="<?= url('appointments') ?>" class="btn btn-sm btn-outline-gold">
            <i class="fas fa-list me-1"></i>List View
        </a>
        <a href="<?= url('appointments/calendar') ?>" class="btn btn-sm btn-outline-gold">
            <i class="fas fa-calendar me-1"></i>Calendar
        </a>
        <button type="button" class="btn btn-sm btn-outline-gold" onclick="location.reload()">
            <i class="fas fa-sync-alt me-1"></i>Refresh
        </button>
        <?php if (can('appointments_create')): ?>
            <a href="<?= url('appointments/create') ?>" class="btn btn-sm btn-gold">
                <i class="fas fa-plus me-1"></i>Walk In
            </a>
        <?php endif; ?>
    </div>
</div>

<div class="reception-board row g-3 flex-nowrap overflow-auto" style="min-height:70vh;">
    <?php
    $columns = [
        'pending' => ['label' => 'Pending', 'color' => 'warning', 'icon' => 'fa-clock'],
        'confirmed' => ['label' => 'Confirmed', 'color' => 'info', 'icon' => 'fa-check-circle'],
        'checked_in' => ['label' => 'Checked In', 'color' => 'success', 'icon' => 'fa-user-check'],
        'in_progress' => ['label' => 'In Progress', 'color' => 'primary', 'icon' => 'fa-spinner'],
        'completed' => ['label' => 'Completed', 'color' => 'secondary', 'icon' => 'fa-check-double'],
    ];
    ?>

    <?php foreach ($columns as $statusKey => $col): ?>
        <div class="col reception-column">
            <div class="glass-card p-0 h-100">
                <div class="card-header py-2 bg-<?= $col['color'] ?>-subtle border-<?= $col['color'] ?>">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas <?= $col['icon'] ?> me-1 text-<?= $col['color'] ?>"></i>
                            <strong class="text-<?= $col['color'] ?>"><?= e($col['label']) ?></strong>
                        </div>
                        <span class="badge bg-<?= $col['color'] ?>">
                            <?= count($grouped[$statusKey] ?? []) ?>
                        </span>
                    </div>
                </div>
                <div class="card-body p-2" style="overflow-y:auto;max-height:calc(100vh - 280px);">
                    <?php if (empty($grouped[$statusKey])): ?>
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-inbox fa-2x mb-2"></i>
                            <p class="small mb-0">No appointments</p>
                        </div>
                    <?php else: ?>
                        <?php foreach ($grouped[$statusKey] as $apt): ?>
                            <div class="glass-card p-3 mb-2 appointment-card"
                                 data-id="<?= $apt->id ?>"
                                 data-status="<?= $apt->status ?>">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <strong class="text-gold" style="font-size:0.95rem;">
                                            <?= date(TIME_FORMAT, strtotime($apt->start_time)) ?>
                                        </strong>
                                        <?php if (!empty($apt->end_time)): ?>
                                            <?php
                                            $mins = (strtotime($apt->end_time) - strtotime($apt->start_time)) / 60;
                                            ?>
                                            <span class="badge bg-dark-subtle text-muted ms-1" style="font-size:0.7rem;">
                                                <i class="far fa-clock me-1"></i><?= $mins ?> min
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                    <div class="btn-group btn-group-xs">
                                        <?php if (can('appointments_edit')): ?>
                                            <a href="<?= url('appointments/edit/' . $apt->id) ?>" class="btn btn-xs btn-outline-gold px-1 py-0" title="Edit">
                                                <i class="fas fa-edit" style="font-size:10px;"></i>
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <div class="mb-1">
                                    <a href="<?= url('customers/show/' . $apt->customer_id) ?>" class="text-decoration-none">
                                        <i class="fas fa-user me-1 text-muted" style="font-size:12px;"></i>
                                        <strong><?= e($apt->customer_first_name . ' ' . $apt->customer_last_name) ?></strong>
                                    </a>
                                </div>

                                <div class="small text-muted mb-1">
                                    <i class="fas fa-cut me-1" style="font-size:11px;"></i>
                                    <?= e(truncate($apt->service_names ?? 'N/A', 50)) ?>
                                </div>

                                <?php if (!empty($apt->employee_names)): ?>
                                    <div class="small text-muted">
                                        <i class="fas fa-user-tie me-1" style="font-size:11px;"></i>
                                        <?= e(truncate($apt->employee_names, 40)) ?>
                                    </div>
                                <?php endif; ?>

                                <div class="mt-2 pt-2 border-top border-secondary">
                                    <div class="d-flex gap-1 flex-wrap">
                                        <?php if ($statusKey === 'pending'): ?>
                                            <form method="POST" action="<?= url('appointments/status/' . $apt->id) ?>" class="d-inline">
                                                <?= csrf_field() ?>
                                                <input type="hidden" name="status" value="confirmed">
                                                <button type="submit" class="btn btn-xs btn-outline-info" title="Confirm">
                                                    <i class="fas fa-check"></i> Confirm
                                                </button>
                                            </form>
                                        <?php elseif ($statusKey === 'confirmed'): ?>
                                            <form method="POST" action="<?= url('appointments/checkin/' . $apt->id) ?>" class="d-inline">
                                                <?= csrf_field() ?>
                                                <button type="submit" class="btn btn-xs btn-outline-success" title="Check In">
                                                    <i class="fas fa-user-check"></i> Check In
                                                </button>
                                            </form>
                                        <?php elseif ($statusKey === 'checked_in'): ?>
                                            <form method="POST" action="<?= url('appointments/status/' . $apt->id) ?>" class="d-inline">
                                                <?= csrf_field() ?>
                                                <input type="hidden" name="status" value="in_progress">
                                                <button type="submit" class="btn btn-xs btn-outline-primary" title="Start">
                                                    <i class="fas fa-play"></i> Start
                                                </button>
                                            </form>
                                        <?php elseif ($statusKey === 'in_progress'): ?>
                                            <form method="POST" action="<?= url('appointments/status/' . $apt->id) ?>" class="d-inline">
                                                <?= csrf_field() ?>
                                                <input type="hidden" name="status" value="completed">
                                                <button type="submit" class="btn btn-xs btn-outline-secondary" title="Complete">
                                                    <i class="fas fa-check-double"></i> Complete
                                                </button>
                                            </form>
                                        <?php endif; ?>
                                        <?php if (in_array($statusKey, ['pending', 'confirmed', 'checked_in', 'in_progress'])): ?>
                                            <form method="POST" action="<?= url('appointments/status/' . $apt->id) ?>" class="d-inline"
                                                  onsubmit="return confirm('Cancel this appointment?')">
                                                <?= csrf_field() ?>
                                                <input type="hidden" name="status" value="cancelled">
                                                <button type="submit" class="btn btn-xs btn-outline-danger" title="Cancel">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </form>
                                        <?php endif; ?>
                                        <?php if (in_array($statusKey, ['checked_in', 'in_progress', 'completed'])): ?>
                                            <?php if (isset($invoiceMap[$apt->id])): ?>
                                                <a href="<?= url('invoices/' . $invoiceMap[$apt->id]->id) ?>" class="btn btn-xs btn-outline-info" title="View Invoice">
                                                    <i class="fas fa-file-invoice"></i>
                                                </a>
                                            <?php else: ?>
                                                <a href="<?= url('pos?appointment_id=' . $apt->id) ?>" class="btn btn-xs btn-outline-gold" title="Go to POS">
                                                    <i class="fas fa-cash-register"></i>
                                                </a>
                                            <?php endif; ?>
                                        <?php endif; ?>
                                        <a href="<?= url('appointments/show/' . $apt->id) ?>" class="btn btn-xs btn-outline-light" title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<style>
.reception-board .reception-column {
    min-width: 260px;
    max-width: 260px;
}
.reception-board .appointment-card {
    cursor: default;
    transition: all 0.2s ease;
}
.reception-board .appointment-card:hover {
    border-color: var(--gold) !important;
}
.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}
</style>

<?php $inlineScripts = <<<'EOS'
// Auto-refresh every 60 seconds
let refreshInterval = setInterval(function() {
    location.reload();
}, 60000);

$(document).on('submit', '.reception-board form', function() {
    const form = $(this);
    const action = form.attr('action');
    const data = form.serialize();

    $.post(action, data, function(res) {
        if (res.success) {
            location.reload();
        } else {
            alert(res.message || 'Operation failed');
        }
    }, 'json').fail(function(xhr) {
        const msg = xhr.responseJSON ? xhr.responseJSON.message : 'Operation failed';
        alert(msg);
    });

    return false;
});
EOS;
?>
