<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>المرآة - <?= e($playground['playground_name_ar']) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/playgrounds/<?= (int) $playground['id'] ?>" class="btn btn-outline-secondary">رجوع للملعب</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<div class="card mb-3">
    <div class="card-body">
        <form method="get" action="/playgrounds/<?= (int) $playground['id'] ?>/mirror" class="row g-3 align-items-end">
            <div class="col-auto">
                <label class="form-label">التاريخ</label>
                <input type="date" name="date" id="mirrorDate" class="form-control" value="<?= e($date) ?>">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">عرض</button>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-outline-info" onclick="refreshMirror()">
                    <i data-lucide="refresh-cw" style="width:14px;height:14px;vertical-align:middle;"></i> تحديث
                </button>
            </div>
        </form>
    </div>
</div>

<div id="mirrorGrid">
<?php if (empty($state['hours'])): ?>
    <div class="card" style="padding:40px;text-align:center;">
        <p style="color:#6B7280;">لا توجد بيانات لهذا اليوم</p>
    </div>
<?php else: ?>
    <div class="card">
        <div class="card-body p-0">
            <table class="table table-bordered table-hover mb-0">
                <thead>
                    <tr>
                        <th style="width:80px;text-align:center;">الساعة</th>
                        <th>الحالة</th>
                        <th>التفاصيل</th>
                    </tr>
                </thead>
                <tbody>
                <?php foreach ($state['hours'] as $hourData): ?>
                <tr>
                    <td style="text-align:center;font-weight:700;vertical-align:middle;">
                        <?= e($hourData['hour']) ?>
                    </td>
                    <td style="vertical-align:middle;">
                        <?php if ($hourData['status'] === 'free'): ?>
                            <span class="badge bg-success">متاح</span>
                        <?php elseif ($hourData['status'] === 'booked'): ?>
                            <span class="badge bg-danger">محجوز</span>
                        <?php elseif ($hourData['status'] === 'training'): ?>
                            <span class="badge bg-warning text-dark">تدريب</span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <?php foreach ($hourData['reservations'] as $res): ?>
                        <div class="mb-1" style="font-size:13px;">
                            <i data-lucide="user" style="width:12px;height:12px;vertical-align:middle;"></i>
                            <?= e($res['booker_name'] ?? '-') ?>
                            <span style="color:#6B7280;"> (<?= e($res['start_time']) ?> - <?= e($res['end_time']) ?>)</span>
                            <span class="badge bg-light text-dark"><?= number_format((float) ($res['total_amount'] ?? 0), 2) ?> ج.م</span>
                        </div>
                        <?php endforeach; ?>

                        <?php foreach ($hourData['private_matches'] as $pm): ?>
                        <div class="mb-1" style="font-size:13px;">
                            <i data-lucide="swords" style="width:12px;height:12px;vertical-align:middle;"></i>
                            <?= e($pm['team_a_name'] ?? '') ?> ضد <?= e($pm['team_b_name'] ?? '') ?>
                            <span style="color:#6B7280;"> (<?= e($pm['match_type'] ?? '') ?>)</span>
                        </div>
                        <?php endforeach; ?>

                        <?php foreach ($hourData['training_slots'] as $slot): ?>
                        <div class="mb-1" style="font-size:13px;">
                            <i data-lucide="dumbbell" style="width:12px;height:12px;vertical-align:middle;"></i>
                            <?= e($slot['coach_name'] ?? '-') ?>
                            <?php if (!empty($slot['academy_name'])): ?>
                                - <?= e($slot['academy_name']) ?>
                            <?php endif; ?>
                            <?php if (!empty($slot['age_group_ar'])): ?>
                                <span style="color:#6B7280;">(<?= e($slot['age_group_ar']) ?>)</span>
                            <?php endif; ?>
                        </div>
                        <?php endforeach; ?>

                        <?php if ($hourData['status'] === 'free'): ?>
                        <span style="font-size:12px;color:#9CA3AF;">-</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
<?php endif; ?>
</div>

<script>
function refreshMirror() {
    const date = document.getElementById('mirrorDate').value;
    fetch('/playgrounds/<?= (int) $playground['id'] ?>/mirror/state?date=' + date)
        .then(r => r.json())
        .then(data => {
            if (data.hours && data.hours.length > 0) {
                location.href = '/playgrounds/<?= (int) $playground['id'] ?>/mirror/' + date;
            }
        });
}
</script>
<?php $__template->endSection(); ?>
