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

<?php $__template->section('page_actions'); ?>
<a href="/sa/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 = ['pending' => '#D97706', 'confirmed' => '#2563EB', 'checked_in' => '#059669', 'completed' => '#6B7280', 'cancelled' => '#DC2626', 'no_show' => '#9CA3AF'];
$statusBgs = ['pending' => '#FEF3C7', 'confirmed' => '#EFF6FF', 'checked_in' => '#ECFDF5', 'completed' => '#F3F4F6', 'cancelled' => '#FEE2E2', 'no_show' => '#F3F4F6'];
$bs = $booking['status'] ?? '';
?>

<!-- Status Banner -->
<div style="background:<?= $statusBgs[$bs] ?? '#F3F4F6' ?>;border-radius:8px;padding:12px 20px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;">
    <div style="display:flex;align-items:center;gap:10px;">
        <span style="color:<?= $statusColors[$bs] ?? '#6B7280' ?>;font-weight:700;font-size:15px;">
            <?= e($statuses[$bs] ?? $bs) ?>
        </span>
        <span style="color:#6B7280;font-size:13px;">—</span>
        <span style="color:#6B7280;font-size:13px;"><?= e($bookingTypes[$booking['booking_type'] ?? ''] ?? '') ?></span>
    </div>
    <div style="display:flex;gap:8px;">
        <?php if (in_array($bs, ['confirmed']) && can('sa.booking.manage')): ?>
        <form method="POST" action="/sa/bookings/<?= (int) $booking['id'] ?>/checkin" style="display:inline;">
            <?= csrf_field() ?>
            <button type="submit" class="btn btn-sm btn-primary" style="background:#059669;border-color:#059669;">
                <i data-lucide="log-in" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> تسجيل حضور
            </button>
        </form>
        <?php endif; ?>
        <?php if (in_array($bs, ['confirmed', 'checked_in']) && can('sa.booking.manage')): ?>
        <form method="POST" action="/sa/bookings/<?= (int) $booking['id'] ?>/checkout" style="display:inline;">
            <?= csrf_field() ?>
            <button type="submit" class="btn btn-sm btn-primary" style="background:#2563EB;border-color:#2563EB;">
                <i data-lucide="log-out" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إتمام
            </button>
        </form>
        <?php endif; ?>
        <?php if (!in_array($bs, ['cancelled', 'completed', 'no_show']) && can('sa.booking.manage')): ?>
        <button type="button" class="btn btn-sm btn-outline" style="color:#D97706;border-color:#D97706;" onclick="document.getElementById('postponeSection').style.display = document.getElementById('postponeSection').style.display === 'none' ? 'block' : 'none';">
            <i data-lucide="calendar-clock" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> تأجيل
            <?php if ((int) ($booking['postponed_count'] ?? 0) > 0): ?>
            <span style="font-size:10px;background:#FEF3C7;color:#D97706;padding:1px 5px;border-radius:8px;margin-right:4px;"><?= (int) $booking['postponed_count'] ?>/3</span>
            <?php endif; ?>
        </button>
        <form method="POST" action="/sa/bookings/<?= (int) $booking['id'] ?>/cancel" style="display:inline;" onsubmit="return confirm('هل تريد إلغاء هذا الحجز؟');">
            <?= csrf_field() ?>
            <input type="hidden" name="reason" value="">
            <button type="submit" class="btn btn-sm btn-outline" style="color:#DC2626;border-color:#DC2626;">
                <i data-lucide="x-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إلغاء الحجز
            </button>
        </form>
        <?php endif; ?>
    </div>
</div>

<!-- Postpone Form (hidden by default) -->
<?php if (!in_array($bs, ['cancelled', 'completed', 'no_show']) && can('sa.booking.manage')): ?>
<div id="postponeSection" style="display:none;margin-bottom:20px;">
    <div class="card" style="border:2px solid #F59E0B;border-radius:8px;">
        <div style="padding:15px 20px;border-bottom:1px solid #FEF3C7;background:#FFFBEB;">
            <h3 style="margin:0;color:#D97706;font-size:14px;">تأجيل الحجز</h3>
        </div>
        <div style="padding:20px;">
            <form method="POST" action="/sa/bookings/<?= (int) $booking['id'] ?>/postpone">
                <?= csrf_field() ?>
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:15px;">
                    <div class="form-group" style="margin:0;">
                        <label class="form-label" style="font-size:12px;">التاريخ الجديد <span style="color:#DC2626;">*</span></label>
                        <input type="date" name="new_date" class="form-input" required min="<?= date('Y-m-d') ?>">
                    </div>
                    <div class="form-group" style="margin:0;">
                        <label class="form-label" style="font-size:12px;">وقت البداية <span style="color:#DC2626;">*</span></label>
                        <input type="time" name="new_start_time" class="form-input" required value="<?= e(substr($booking['start_time'], 0, 5)) ?>">
                    </div>
                    <div class="form-group" style="margin:0;">
                        <label class="form-label" style="font-size:12px;">وقت النهاية <span style="color:#DC2626;">*</span></label>
                        <input type="time" name="new_end_time" class="form-input" required value="<?= e(substr($booking['end_time'], 0, 5)) ?>">
                    </div>
                </div>
                <div class="form-group" style="margin:0 0 15px 0;">
                    <label class="form-label" style="font-size:12px;">سبب التأجيل</label>
                    <input type="text" name="reason" class="form-input" placeholder="سبب اختياري...">
                </div>
                <?php if ((int) ($booking['postponed_count'] ?? 0) >= 3): ?>
                <div style="padding:10px;background:#FEE2E2;border-radius:6px;font-size:12px;color:#DC2626;margin-bottom:15px;">تم الوصول للحد الأقصى للتأجيل (3 مرات)</div>
                <?php else: ?>
                <div style="display:flex;gap:10px;align-items:center;">
                    <button type="submit" class="btn btn-primary" style="font-size:13px;">تأكيد التأجيل</button>
                    <button type="button" class="btn btn-outline" style="font-size:13px;" onclick="document.getElementById('postponeSection').style.display='none';">إلغاء</button>
                    <span style="font-size:11px;color:#6B7280;">التأجيلات: <?= (int) ($booking['postponed_count'] ?? 0) ?>/3</span>
                </div>
                <?php endif; ?>
            </form>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Booking Details -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;color:#0D7377;font-size:15px;">بيانات الحجز</h3>
    </div>
    <div style="padding:20px;">
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">رقم الحجز</div>
                <div style="font-weight:600;"><code style="background:#F3F4F6;padding:2px 8px;border-radius:4px;"><?= e($booking['booking_number']) ?></code></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">المرفق</div>
                <div style="font-weight:600;"><?= e($booking['facility_name'] ?? '—') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الوحدة</div>
                <div style="font-weight:600;"><?= e($booking['unit_name'] ?? '—') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">النوع</div>
                <div style="font-weight:600;"><?= e($bookingTypes[$booking['booking_type'] ?? ''] ?? '—') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">التاريخ</div>
                <div style="font-weight:600;"><?= e($booking['booking_date']) ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الوقت</div>
                <div style="font-weight:600;direction:ltr;text-align:right;"><?= e(substr($booking['start_time'], 0, 5)) ?> - <?= e(substr($booking['end_time'], 0, 5)) ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">المبلغ</div>
                <div style="font-weight:700;color:#0D7377;font-size:16px;"><?= money((float) ($booking['total_amount'] ?? 0)) ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">عدد المشاركين</div>
                <div style="font-weight:600;"><?= (int) ($booking['participant_count'] ?? 0) ?></div>
            </div>
        </div>

        <!-- Booker & Group Info -->
        <div style="margin-top:20px;padding-top:15px;border-top:1px solid #F3F4F6;">
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;">
                <div>
                    <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الحاجز</div>
                    <div style="font-weight:600;"><?= e($booking['booker_name'] ?? '—') ?></div>
                </div>
                <div>
                    <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">نوع الحاجز</div>
                    <div style="font-weight:600;"><?= e($booking['booker_type'] ?? '—') ?></div>
                </div>
                <?php if (!empty($booking['group_name'])): ?>
                <div>
                    <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">المجموعة</div>
                    <div style="font-weight:600;"><?= e($booking['group_name']) ?></div>
                </div>
                <?php endif; ?>
                <?php if (!empty($booking['coach_name'])): ?>
                <div>
                    <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">المدرب</div>
                    <div style="font-weight:600;"><?= e($booking['coach_name']) ?></div>
                </div>
                <?php endif; ?>
            </div>
        </div>

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

        <?php if ($bs === 'cancelled' && !empty($booking['cancellation_reason'])): ?>
        <div style="margin-top:15px;padding:12px;background:#FEE2E2;border-radius:6px;">
            <div style="font-size:12px;color:#DC2626;font-weight:600;margin-bottom:4px;">سبب الإلغاء</div>
            <div style="color:#991B1B;"><?= e($booking['cancellation_reason']) ?></div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Participants -->
<?php if (!empty($participants)): ?>
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;color:#0D7377;font-size:15px;">المشاركون (<?= count($participants) ?>)</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الاسم</th>
                    <th>كود اللاعب</th>
                    <th>عضو</th>
                    <th>المبلغ</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($participants as $idx => $p): ?>
                <tr>
                    <td><?= $idx + 1 ?></td>
                    <td style="font-weight:600;"><?= e($p['player_name'] ?? $p['participant_name'] ?? '—') ?></td>
                    <td><code style="font-size:11px;background:#F3F4F6;padding:2px 6px;border-radius:4px;"><?= e($p['player_code'] ?? '—') ?></code></td>
                    <td>
                        <?php if ((int) ($p['is_member'] ?? 0)): ?>
                        <span style="background:#ECFDF5;color:#059669;padding:2px 8px;border-radius:4px;font-size:12px;">عضو</span>
                        <?php else: ?>
                        <span style="background:#F3F4F6;color:#6B7280;padding:2px 8px;border-radius:4px;font-size:12px;">زائر</span>
                        <?php endif; ?>
                    </td>
                    <td style="direction:ltr;text-align:right;"><?= money((float) ($p['price_charged'] ?? 0)) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>
<?php $__template->endSection(); ?>
