<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>لوحة تحكم - <?= e($data['playground']['playground_name_ar'] ?? 'ملعب') ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/playgrounds/<?= $playground_id ?>/dashboard/export?filter=<?= e($filter) ?>&from=<?= e($data['period']['from'] ?? '') ?>&to=<?= e($data['period']['to'] ?? '') ?>"
   class="btn btn-outline-success" target="_blank">تصدير التقرير</a>
<a href="/playgrounds/<?= $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" class="row g-3 align-items-end">
            <div class="col-auto">
                <label class="form-label">الفترة</label>
                <select name="filter" class="form-select" onchange="toggleCustomDates(this)">
                    <option value="daily" <?= $filter === 'daily' ? 'selected' : '' ?>>يومي</option>
                    <option value="weekly" <?= $filter === 'weekly' ? 'selected' : '' ?>>أسبوعي</option>
                    <option value="monthly" <?= $filter === 'monthly' ? 'selected' : '' ?>>شهري</option>
                    <option value="yearly" <?= $filter === 'yearly' ? 'selected' : '' ?>>سنوي</option>
                    <option value="3years" <?= $filter === '3years' ? 'selected' : '' ?>>3 سنوات</option>
                    <option value="5years" <?= $filter === '5years' ? 'selected' : '' ?>>5 سنوات</option>
                    <option value="custom" <?= $filter === 'custom' ? 'selected' : '' ?>>تحديد تاريخ</option>
                </select>
            </div>
            <div class="col-auto custom-dates" style="<?= $filter !== 'custom' ? 'display:none' : '' ?>">
                <label class="form-label">من</label>
                <input type="date" name="from" class="form-control" value="<?= e($data['period']['from'] ?? '') ?>">
            </div>
            <div class="col-auto custom-dates" style="<?= $filter !== 'custom' ? 'display:none' : '' ?>">
                <label class="form-label">إلى</label>
                <input type="date" name="to" class="form-control" value="<?= e($data['period']['to'] ?? '') ?>">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">عرض</button>
            </div>
        </form>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body text-center">
                <h6>إجمالي الإيرادات</h6>
                <h3><?= number_format($data['total_revenue'] ?? 0, 2) ?> ج.م</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body text-center">
                <h6>عدد الحجوزات</h6>
                <h3><?= $data['total_bookings'] ?? 0 ?></h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body text-center">
                <h6>المستخدمين الفريدين</h6>
                <h3><?= $data['unique_users'] ?? 0 ?></h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-dark">
            <div class="card-body text-center">
                <h6>نسبة الحضور</h6>
                <h3><?= $data['attendance']['rate'] ?? 0 ?>%</h3>
            </div>
        </div>
    </div>
</div>

<script>
function toggleCustomDates(el) {
    document.querySelectorAll('.custom-dates').forEach(d => {
        d.style.display = el.value === 'custom' ? '' : 'none';
    });
}
</script>
<?php $__template->endSection(); ?>
