<?php
use App\Modules\FacilityGrids\Models\FacilityZoneSchedule;
$__template->layout('Layout.main');
$dayNames = FacilityZoneSchedule::getDayNames();
?>
<?php $__template->section('title'); ?>لوحة تحكم المرافق<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<!-- Filters -->
<div class="card" style="padding:16px;margin-bottom:20px;">
    <form method="GET" action="/facility-grids/dashboard" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
        <div>
            <select name="grid_id" style="padding:8px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                <option value="">كل المرافق</option>
                <?php foreach ($grids as $g): ?>
                <option value="<?= (int) $g['id'] ?>" <?= $selectedGrid === (int) $g['id'] ? 'selected' : '' ?>><?= e($g['name_ar']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>

        <div style="display:flex;gap:0;border:1px solid #D1D5DB;border-radius:8px;overflow:hidden;">
            <?php foreach (['day' => 'اليوم', 'week' => 'الأسبوع', 'month' => 'الشهر', 'year' => 'السنة', 'custom' => 'مخصص'] as $fKey => $fLabel): ?>
            <button type="submit" name="filter" value="<?= $fKey ?>"
                    style="padding:8px 14px;font-size:12px;font-weight:600;border:none;cursor:pointer;background:<?= $filter === $fKey ? '#0D7377' : 'white' ?>;color:<?= $filter === $fKey ? 'white' : '#6B7280' ?>;">
                <?= $fLabel ?>
            </button>
            <?php endforeach; ?>
        </div>

        <?php if ($filter === 'custom'): ?>
        <div style="display:flex;align-items:center;gap:8px;">
            <input type="date" name="from" value="<?= e($from) ?>" style="padding:8px 10px;border:1px solid #D1D5DB;border-radius:8px;font-size:12px;">
            <span style="color:#9CA3AF;">إلى</span>
            <input type="date" name="to" value="<?= e($to) ?>" style="padding:8px 10px;border:1px solid #D1D5DB;border-radius:8px;font-size:12px;">
            <button type="submit" class="btn btn-primary" style="padding:8px 14px;font-size:12px;">تطبيق</button>
        </div>
        <?php endif; ?>

        <span style="font-size:12px;color:#9CA3AF;margin-right:auto;"><?= e($from) ?> → <?= e($to) ?></span>
    </form>
</div>

<!-- KPI Cards -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px;">
    <div class="card" style="padding:20px;">
        <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">إجمالي الجداول</div>
        <div style="font-size:28px;font-weight:800;color:#111;"><?= $stats['total_schedules'] ?></div>
    </div>
    <div class="card" style="padding:20px;">
        <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">المتدربين المسجلين</div>
        <div style="font-size:28px;font-weight:800;color:#0D7377;"><?= $stats['total_trainees'] ?></div>
    </div>
    <div class="card" style="padding:20px;">
        <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">إجمالي المناطق</div>
        <div style="font-size:28px;font-weight:800;color:#111;"><?= $stats['total_zones'] ?></div>
    </div>
    <div class="card" style="padding:20px;">
        <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">نسبة الإشغال</div>
        <div style="font-size:28px;font-weight:800;color:<?= $stats['total_zones'] > 0 ? '#059669' : '#9CA3AF' ?>;">
            <?= $stats['total_zones'] > 0 ? round(($stats['occupied_zones'] / $stats['total_zones']) * 100) : 0 ?>%
        </div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
    <!-- Schedules by Day -->
    <div class="card" style="padding:20px;">
        <h3 style="margin:0 0 16px;font-size:15px;font-weight:700;">توزيع الجداول حسب اليوم</h3>
        <?php
        $dayData = array_fill(0, 7, 0);
        foreach ($schedulesByDay as $sd) $dayData[(int) $sd['day_of_week']] = (int) $sd['cnt'];
        $maxDay = max($dayData) ?: 1;
        ?>
        <div style="display:flex;flex-direction:column;gap:8px;">
            <?php foreach ($dayNames as $d => $dName): ?>
            <div style="display:flex;align-items:center;gap:10px;">
                <span style="font-size:12px;font-weight:600;color:#374151;min-width:60px;"><?= e($dName) ?></span>
                <div style="flex:1;background:#F3F4F6;border-radius:4px;height:24px;position:relative;">
                    <div style="height:100%;background:#0D7377;border-radius:4px;width:<?= round(($dayData[$d] / $maxDay) * 100) ?>%;transition:width .3s;"></div>
                </div>
                <span style="font-size:12px;font-weight:700;color:#111;min-width:24px;text-align:left;"><?= $dayData[$d] ?></span>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- Occupancy by Hour -->
    <div class="card" style="padding:20px;">
        <h3 style="margin:0 0 16px;font-size:15px;font-weight:700;">الإشغال حسب الساعة</h3>
        <?php
        $hourData = array_fill(6, 16, 0);
        foreach ($occupancyByHour as $oh) $hourData[(int) $oh['hour']] = (int) $oh['cnt'];
        $maxHour = max($hourData) ?: 1;
        ?>
        <div style="display:flex;align-items:flex-end;gap:4px;height:160px;">
            <?php for ($h = 6; $h < 22; $h++): ?>
            <div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;">
                <div style="width:100%;background:<?= ($hourData[$h] / $maxHour) > 0.7 ? '#DC2626' : (($hourData[$h] / $maxHour) > 0.4 ? '#F59E0B' : '#10B981') ?>;border-radius:3px 3px 0 0;height:<?= round(($hourData[$h] / $maxHour) * 100) ?>%;min-height:<?= $hourData[$h] > 0 ? '4px' : '0' ?>;transition:height .3s;" title="<?= $hourData[$h] ?> جدول"></div>
                <span style="font-size:9px;color:#9CA3AF;margin-top:4px;"><?= $h ?></span>
            </div>
            <?php endfor; ?>
        </div>
        <div style="display:flex;gap:12px;margin-top:12px;font-size:10px;color:#6B7280;">
            <span><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:#10B981;margin-left:4px;"></span>منخفض</span>
            <span><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:#F59E0B;margin-left:4px;"></span>متوسط</span>
            <span><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:#DC2626;margin-left:4px;"></span>مرتفع</span>
        </div>
    </div>
</div>

<!-- Top Coaches -->
<?php if (!empty($topCoaches)): ?>
<div class="card" style="padding:20px;margin-top:20px;">
    <h3 style="margin:0 0 16px;font-size:15px;font-weight:700;">أكثر المدربين نشاطاً</h3>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;">
        <?php foreach ($topCoaches as $i => $coach): ?>
        <div style="display:flex;align-items:center;gap:10px;padding:10px;background:#F9FAFB;border-radius:8px;">
            <div style="width:28px;height:28px;border-radius:50%;background:#0D7377;color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;"><?= $i + 1 ?></div>
            <div>
                <div style="font-size:13px;font-weight:600;color:#111;"><?= e($coach['coach_name']) ?></div>
                <div style="font-size:11px;color:#6B7280;"><?= (int) $coach['sessions'] ?> حصة</div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>

<?php $__template->endSection(); ?>
