<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>حجز <?= e($reservation['reservation_number']) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/swimming/pool-reservations" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> رجوع</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<?php
    $r = $reservation;
    $typeLabels = ['lane_50m' => 'إيجار حارة 50م', 'lane_25m' => 'إيجار حارة 25م', 'lane_mix' => 'إيجار حارة ميكس', 'cards' => 'كروت حصص'];
    $statusColors = ['active' => '#059669', 'completed' => '#6B7280', 'cancelled' => '#DC2626', 'expired' => '#D97706'];
    $statusLabels = ['active' => 'نشط', 'completed' => 'مكتمل', 'cancelled' => 'ملغي', 'expired' => 'منتهي'];
    $payColors = ['paid' => '#059669', 'pending' => '#D97706', 'unpaid' => '#DC2626', 'partial' => '#2563EB'];
    $payLabels = ['paid' => 'مدفوع', 'pending' => 'معلق', 'unpaid' => 'غير مدفوع', 'partial' => 'جزئي'];
    $sessionsUsed = (int) $r['sessions_used'];
    $sessionsTotal = (int) $r['sessions_total'];
    $sessionsRemaining = $sessionsTotal - $sessionsUsed;
    $progress = $sessionsTotal > 0 ? round(($sessionsUsed / $sessionsTotal) * 100) : 0;
?>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
    <!-- Info Card -->
    <div class="card" style="padding:20px;">
        <h4 style="margin:0 0 16px;font-size:15px;font-weight:700;color:#1A1A2E;">بيانات الحجز</h4>
        <table style="width:100%;font-size:13px;">
            <tr><td style="padding:8px 0;color:#6B7280;width:120px;">رقم الحجز</td><td style="padding:8px 0;font-weight:600;"><?= e($r['reservation_number']) ?></td></tr>
            <tr><td style="padding:8px 0;color:#6B7280;">الحاجز</td><td style="padding:8px 0;font-weight:600;"><?= e($r['booker_name']) ?></td></tr>
            <?php if ($r['booker_phone']): ?><tr><td style="padding:8px 0;color:#6B7280;">التليفون</td><td style="padding:8px 0;"><?= e($r['booker_phone']) ?></td></tr><?php endif; ?>
            <tr><td style="padding:8px 0;color:#6B7280;">النوع</td><td style="padding:8px 0;font-weight:600;"><?= $typeLabels[$r['reservation_type']] ?? $r['reservation_type'] ?></td></tr>
            <tr><td style="padding:8px 0;color:#6B7280;">المشاركين</td><td style="padding:8px 0;"><?= (int) $r['participant_count'] ?></td></tr>
            <tr><td style="padding:8px 0;color:#6B7280;">من</td><td style="padding:8px 0;"><?= e($r['start_date']) ?></td></tr>
            <tr><td style="padding:8px 0;color:#6B7280;">حتى</td><td style="padding:8px 0;"><?= e($r['expiry_date'] ?? '—') ?></td></tr>
            <tr><td style="padding:8px 0;color:#6B7280;">الحالة</td><td style="padding:8px 0;"><span style="padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600;background:<?= $statusColors[$r['status']] ?? '#6B7280' ?>15;color:<?= $statusColors[$r['status']] ?? '#6B7280' ?>;"><?= $statusLabels[$r['status']] ?? $r['status'] ?></span></td></tr>
            <tr><td style="padding:8px 0;color:#6B7280;">الدفع</td><td style="padding:8px 0;"><span style="padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600;background:<?= $payColors[$r['payment_status']] ?? '#6B7280' ?>15;color:<?= $payColors[$r['payment_status']] ?? '#6B7280' ?>;"><?= $payLabels[$r['payment_status']] ?? $r['payment_status'] ?></span></td></tr>
            <tr><td style="padding:8px 0;color:#6B7280;">المبلغ</td><td style="padding:8px 0;font-weight:800;font-size:16px;color:#059669;"><?= number_format((float) $r['total_amount'], 0) ?> ج.م</td></tr>
            <?php if ($r['notes']): ?><tr><td style="padding:8px 0;color:#6B7280;">ملاحظات</td><td style="padding:8px 0;"><?= e($r['notes']) ?></td></tr><?php endif; ?>
            <tr><td style="padding:8px 0;color:#6B7280;">المجموعة</td><td style="padding:8px 0;"><a href="/sa/groups" style="color:#2563EB;text-decoration:none;"><?= e($r['group_name'] ?? $r['group_code'] ?? '—') ?></a></td></tr>
        </table>
    </div>

    <!-- Sessions Progress Card -->
    <div class="card" style="padding:20px;">
        <h4 style="margin:0 0 16px;font-size:15px;font-weight:700;color:#1A1A2E;">استهلاك الحصص</h4>
        <div style="text-align:center;margin-bottom:20px;">
            <div style="font-size:48px;font-weight:800;color:#2563EB;"><?= $sessionsRemaining ?></div>
            <div style="font-size:13px;color:#6B7280;">حصة متبقية من <?= $sessionsTotal ?></div>
        </div>
        <div style="background:#E5E7EB;border-radius:8px;height:12px;overflow:hidden;margin-bottom:8px;">
            <div style="background:#2563EB;height:100%;width:<?= $progress ?>%;border-radius:8px;transition:width .3s;"></div>
        </div>
        <div style="display:flex;justify-content:space-between;font-size:12px;color:#6B7280;">
            <span>مستخدم: <?= $sessionsUsed ?></span>
            <span><?= $progress ?>%</span>
        </div>

        <?php if ($r['status'] === 'active'): ?>
        <div style="margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;">
            <form method="post" action="/sa/swimming/pool-reservations/<?= (int) $r['id'] ?>/use-session" style="display:inline;">
                <?= \App\Core\CSRF::field() ?>
                <button type="submit" class="btn btn-primary" style="padding:10px 20px;font-size:13px;border-radius:8px;" onclick="return confirm('تسجيل حصة مستخدمة؟')">
                    <i data-lucide="minus-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> تسجيل حصة
                </button>
            </form>
            <form method="post" action="/sa/swimming/pool-reservations/<?= (int) $r['id'] ?>/cancel" style="display:inline;">
                <?= \App\Core\CSRF::field() ?>
                <button type="submit" class="btn btn-outline" style="padding:10px 20px;font-size:13px;border-radius:8px;color:#DC2626;border-color:#DC2626;" onclick="return confirm('هل أنت متأكد من إلغاء هذا الحجز؟')">
                    <i data-lucide="x-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إلغاء الحجز
                </button>
            </form>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Scheduled Sessions -->
<div class="card">
    <div style="padding:14px 20px;border-bottom:1px solid #E5E7EB;">
        <h4 style="margin:0;font-size:14px;font-weight:600;">الحصص المجدولة</h4>
    </div>
    <?php if (empty($bookings)): ?>
    <div style="padding:40px;text-align:center;color:#9CA3AF;">
        <i data-lucide="calendar-x" style="width:32px;height:32px;margin-bottom:8px;"></i>
        <div>لم يتم جدولة حصص بعد — اسحب المجموعة في المراية لتحديد المواعيد</div>
    </div>
    <?php else: ?>
    <div style="overflow-x:auto;">
        <table class="data-table" style="width:100%;">
            <thead><tr><th>التاريخ</th><th>الوقت</th><th>المرفق</th><th>الحالة</th></tr></thead>
            <tbody>
                <?php foreach ($bookings as $bk): ?>
                <tr>
                    <td><?= e($bk['booking_date']) ?></td>
                    <td><?= e(substr($bk['start_time'], 0, 5)) ?> – <?= e(substr($bk['end_time'], 0, 5)) ?></td>
                    <td><?= e($bk['unit_name'] ?? '—') ?></td>
                    <td><?php
                        $bsc = ['confirmed'=>'#2563EB','checked_in'=>'#059669','completed'=>'#6B7280','cancelled'=>'#DC2626','pending'=>'#D97706'];
                        $bsl = ['confirmed'=>'مؤكد','checked_in'=>'حاضر','completed'=>'مكتمل','cancelled'=>'ملغي','pending'=>'معلق'];
                        $bcc = $bsc[$bk['status']] ?? '#6B7280'; $bll = $bsl[$bk['status']] ?? $bk['status'];
                    ?><span style="padding:2px 6px;border-radius:4px;font-size:11px;background:<?= $bcc ?>15;color:<?= $bcc ?>;"><?= $bll ?></span></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php endif; ?>
</div>
<?php $__template->endSection(); ?>
