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

<?php $__template->section('page_actions'); ?>
<?php if ($booking['status'] === 'confirmed'): ?>
<form method="POST" action="/pool/bookings/<?= (int) $booking['id'] ?>/checkin" style="display:inline;">
    <?= csrf_field() ?>
    <button type="submit" class="btn btn-primary"><i data-lucide="log-in" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تسجيل دخول</button>
</form>
<?php endif; ?>
<?php if (in_array($booking['status'], ['confirmed', 'in_progress'])): ?>
<form method="POST" action="/pool/bookings/<?= (int) $booking['id'] ?>/cancel" style="display:inline;">
    <?= csrf_field() ?>
    <button type="submit" class="btn btn-outline" style="color:#DC2626;border-color:#DC2626;" onclick="return confirm('هل أنت متأكد من إلغاء الحجز؟')">
        <i data-lucide="x" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> إلغاء الحجز
    </button>
</form>
<?php endif; ?>
<a href="/pool/bookings" 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
    $statusColors = ['confirmed' => '#3B82F6', 'in_progress' => '#F59E0B', 'completed' => '#10B981', 'cancelled' => '#EF4444'];
    $statusLabels = ['confirmed' => 'مؤكد', 'in_progress' => 'جاري', 'completed' => 'مكتمل', 'cancelled' => 'ملغى'];
    $typeLabels = ['lap_swimming' => 'سباحة حرة', 'lessons' => 'دروس', 'free_swim' => 'ترفيهي', 'academy_session' => 'أكاديمية', 'competition' => 'مسابقة', 'maintenance' => 'صيانة'];
    $sc = $statusColors[$booking['status']] ?? '#6B7280';
    $sl = $statusLabels[$booking['status']] ?? $booking['status'];
    $lanes = json_decode($booking['lanes_json'] ?? '[]', true);
?>

<!-- Header Card -->
<div class="card" style="margin-bottom:20px;border-top:4px solid <?= $sc ?>;">
    <div style="padding:20px;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;">
            <div>
                <h2 style="margin:0;font-size:20px;color:#1A1A2E;"><?= e($booking['booking_code']) ?></h2>
                <div style="font-size:13px;color:#6B7280;margin-top:4px;"><?= e($poolName ?? '') ?></div>
            </div>
            <span style="font-size:13px;padding:4px 14px;border-radius:12px;background:<?= $sc ?>15;color:<?= $sc ?>;font-weight:600;"><?= $sl ?></span>
        </div>

        <div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;">
            <div style="padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:11px;color:#6B7280;">التاريخ</div>
                <div style="font-size:14px;font-weight:600;color:#1A1A2E;margin-top:4px;"><?= e($booking['booking_date']) ?></div>
            </div>
            <div style="padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:11px;color:#6B7280;">الوقت</div>
                <div style="font-size:14px;font-weight:600;color:#1A1A2E;margin-top:4px;direction:ltr;text-align:right;">
                    <?= e(substr($booking['start_time'], 0, 5)) ?> — <?= e(substr($booking['end_time'], 0, 5)) ?>
                </div>
            </div>
            <div style="padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:11px;color:#6B7280;">نوع الحجز</div>
                <div style="font-size:14px;font-weight:600;color:#1A1A2E;margin-top:4px;"><?= $typeLabels[$booking['booking_type']] ?? $booking['booking_type'] ?></div>
            </div>
            <div style="padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:11px;color:#6B7280;">وضع الاختيار</div>
                <div style="font-size:14px;font-weight:600;color:#1A1A2E;margin-top:4px;">
                    <?php
                    $modeLabels = ['full_pool' => 'الحمام كاملاً', 'lane' => 'حارة', 'multi_lane' => 'حارات متعددة', 'cell' => 'خلية'];
                    echo $modeLabels[$booking['selection_mode']] ?? $booking['selection_mode'];
                    ?>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Lanes & Swimmers -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">
    <div class="card" style="padding:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
            <i data-lucide="waves" style="width:18px;height:18px;color:#0369A1;"></i>
            <h3 style="margin:0;color:#0369A1;font-size:15px;">الحارات المحجوزة</h3>
        </div>
        <?php if (!empty($lanes)): ?>
        <div style="display:flex;gap:8px;flex-wrap:wrap;">
            <?php foreach ($lanes as $lane): ?>
            <div style="width:42px;height:42px;border-radius:8px;background:#DBEAFE;border:2px solid #3B82F6;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1E40AF;font-size:14px;">
                <?= (int) $lane ?>
            </div>
            <?php endforeach; ?>
        </div>
        <div style="font-size:12px;color:#6B7280;margin-top:8px;"><?= count($lanes) ?> حارة محجوزة</div>
        <?php else: ?>
        <div style="color:#9CA3AF;font-size:13px;">الحمام بالكامل</div>
        <?php endif; ?>
    </div>

    <div class="card" style="padding:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
            <i data-lucide="users" style="width:18px;height:18px;color:#059669;"></i>
            <h3 style="margin:0;color:#059669;font-size:15px;">معلومات إضافية</h3>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
            <div>
                <div style="font-size:11px;color:#6B7280;">عدد السبّاحين المتوقع</div>
                <div style="font-size:16px;font-weight:600;color:#1A1A2E;margin-top:2px;"><?= (int) ($booking['expected_swimmers'] ?? 0) ?></div>
            </div>
            <div>
                <div style="font-size:11px;color:#6B7280;">نوع الحاجز</div>
                <div style="font-size:14px;font-weight:600;color:#1A1A2E;margin-top:2px;">
                    <?php
                    $bookerLabels = ['player' => 'لاعب', 'academy' => 'أكاديمية', 'corporate' => 'مؤسسة', 'walkin' => 'حضور مباشر'];
                    echo $bookerLabels[$booking['booker_type']] ?? $booking['booker_type'];
                    ?>
                </div>
            </div>
            <?php if (!empty($booking['rate_per_lane'])): ?>
            <div>
                <div style="font-size:11px;color:#6B7280;">السعر/حارة</div>
                <div style="font-size:14px;font-weight:600;color:#059669;margin-top:2px;"><?= number_format((float) $booking['rate_per_lane'], 0) ?> ج.م</div>
            </div>
            <?php endif; ?>
            <?php if (!empty($booking['total_amount'])): ?>
            <div>
                <div style="font-size:11px;color:#6B7280;">الإجمالي</div>
                <div style="font-size:14px;font-weight:600;color:#059669;margin-top:2px;"><?= number_format((float) $booking['total_amount'], 0) ?> ج.م</div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php if (!empty($booking['notes'])): ?>
<div class="card" style="margin-bottom:20px;padding:15px 20px;">
    <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">ملاحظات</div>
    <div style="font-size:13px;color:#1A1A2E;"><?= e($booking['notes']) ?></div>
</div>
<?php endif; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>

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