<?php
use App\Modules\Reservations\Models\Reservation;
$__template->layout('Layout.main');

$status = $reservation->status ?? 'pending';
$statusColor = Reservation::getStatusColor($status);
$statusLabel = Reservation::getStatusLabel($status);
$bookerTypeLabel = Reservation::getBookerTypeLabel($reservation->booker_type ?? '');
?>
<?php $__template->section('title'); ?><?= e($reservation->reservation_number) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/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'); ?>

<!-- Header Card -->
<div class="card" style="margin-bottom:20px;overflow:hidden;">
    <div style="padding:25px;display:flex;align-items:start;gap:20px;">
        <div style="width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg, #0D737715, #0D737730);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i data-lucide="calendar-check" style="width:36px;height:36px;color:#0D7377;"></i>
        </div>
        <div style="flex:1;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;">
                <code style="font-size:14px;background:#F0F9FF;color:#0284C7;padding:4px 12px;border-radius:6px;font-weight:700;"><?= e($reservation->reservation_number) ?></code>
                <span class="badge" style="background:<?= $statusColor ?>15;color:<?= $statusColor ?>;font-size:12px;padding:4px 12px;border-radius:10px;font-weight:600;">
                    <?= e($statusLabel) ?>
                </span>
            </div>
            <div style="display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:#4B5563;margin-top:10px;">
                <span style="display:inline-flex;align-items:center;gap:6px;">
                    <i data-lucide="building" style="width:15px;height:15px;color:#6B7280;"></i>
                    <?= e($facility->name_ar ?? '---') ?>
                </span>
                <span style="display:inline-flex;align-items:center;gap:6px;">
                    <i data-lucide="calendar" style="width:15px;height:15px;color:#6B7280;"></i>
                    <?= e($reservation->reservation_date) ?>
                </span>
                <span style="display:inline-flex;align-items:center;gap:6px;">
                    <i data-lucide="clock" style="width:15px;height:15px;color:#6B7280;"></i>
                    <?= e(substr($reservation->start_time ?? '', 0, 5)) ?> - <?= e(substr($reservation->end_time ?? '', 0, 5)) ?>
                </span>
            </div>
        </div>
    </div>
</div>

<!-- Info Grid -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">

    <!-- Booker Info -->
    <div class="card" style="padding:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:15px;">
            <i data-lucide="user" style="width:18px;height:18px;color:#0D7377;"></i>
            <h4 style="margin:0;color:#0D7377;font-size:15px;">بيانات الحاجز</h4>
        </div>
        <table style="width:100%;font-size:14px;">
            <tr>
                <td style="padding:6px 0;color:#6B7280;width:40%;">الاسم</td>
                <td style="padding:6px 0;font-weight:600;"><?= e($reservation->booker_name ?? '---') ?></td>
            </tr>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">الهاتف</td>
                <td style="padding:6px 0;direction:ltr;text-align:right;"><?= e($reservation->booker_phone ?: '---') ?></td>
            </tr>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">النوع</td>
                <td style="padding:6px 0;"><?= e($bookerTypeLabel) ?></td>
            </tr>
            <?php if ($reservation->member_id): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">رقم العضوية</td>
                <td style="padding:6px 0;"><a href="/members/<?= (int) $reservation->member_id ?>" style="color:#0D7377;font-weight:600;">#<?= (int) $reservation->member_id ?></a></td>
            </tr>
            <?php endif; ?>
            <?php if ($reservation->player_id): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">رقم اللاعب</td>
                <td style="padding:6px 0;">#<?= (int) $reservation->player_id ?></td>
            </tr>
            <?php endif; ?>
        </table>
    </div>

    <!-- Financial Info -->
    <div class="card" style="padding:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:15px;">
            <i data-lucide="banknote" style="width:18px;height:18px;color:#059669;"></i>
            <h4 style="margin:0;color:#059669;font-size:15px;">البيانات المالية</h4>
        </div>
        <table style="width:100%;font-size:14px;">
            <tr>
                <td style="padding:6px 0;color:#6B7280;width:40%;">سعر الساعة</td>
                <td style="padding:6px 0;font-weight:600;"><?= money($reservation->unit_rate ?? 0) ?></td>
            </tr>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">المدة (ساعات)</td>
                <td style="padding:6px 0;font-weight:600;"><?= e($reservation->duration_hours ?? '---') ?></td>
            </tr>
            <tr>
                <td style="padding:8px 0;color:#6B7280;font-size:15px;font-weight:600;">الإجمالي</td>
                <td style="padding:8px 0;font-weight:700;font-size:20px;color:#0D7377;"><?= money($reservation->total_amount ?? 0) ?></td>
            </tr>
        </table>
    </div>
</div>

<!-- Dates Info -->
<div class="card" style="margin-bottom:20px;padding:20px;">
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:15px;">
        <i data-lucide="history" style="width:18px;height:18px;color:#6B7280;"></i>
        <h4 style="margin:0;color:#6B7280;font-size:15px;">التواريخ</h4>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;">
        <div>
            <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">تاريخ الإنشاء</div>
            <div style="font-size:14px;font-weight:600;color:#374151;"><?= e($reservation->created_at ?? '---') ?></div>
        </div>
        <?php if ($reservation->confirmed_at): ?>
        <div>
            <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">تاريخ التأكيد</div>
            <div style="font-size:14px;font-weight:600;color:#059669;"><?= e($reservation->confirmed_at) ?></div>
        </div>
        <?php endif; ?>
        <?php if ($reservation->cancelled_at): ?>
        <div>
            <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">تاريخ الإلغاء</div>
            <div style="font-size:14px;font-weight:600;color:#DC2626;"><?= e($reservation->cancelled_at) ?></div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Cancel Reason -->
<?php if (!empty($reservation->cancel_reason)): ?>
<div class="card" style="margin-bottom:20px;padding:20px;background:#FEF2F2;border:1px solid #FECACA;">
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
        <i data-lucide="alert-circle" style="width:18px;height:18px;color:#DC2626;"></i>
        <h4 style="margin:0;color:#DC2626;font-size:15px;">سبب الإلغاء</h4>
    </div>
    <p style="margin:0;font-size:14px;color:#374151;line-height:1.7;"><?= nl2br(e($reservation->cancel_reason)) ?></p>
</div>
<?php endif; ?>

<!-- Notes -->
<?php if (!empty($reservation->notes)): ?>
<div class="card" style="margin-bottom:20px;padding:20px;">
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
        <i data-lucide="file-text" style="width:18px;height:18px;color:#6B7280;"></i>
        <h4 style="margin:0;color:#6B7280;font-size:15px;">ملاحظات</h4>
    </div>
    <p style="margin:0;font-size:14px;color:#374151;line-height:1.7;"><?= nl2br(e($reservation->notes)) ?></p>
</div>
<?php endif; ?>

<!-- Action Buttons -->
<?php if ($status === 'pending'): ?>
<div class="card" style="margin-bottom:20px;padding:20px;">
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:15px;">
        <i data-lucide="settings" style="width:18px;height:18px;color:#0D7377;"></i>
        <h4 style="margin:0;color:#0D7377;font-size:15px;">الإجراءات</h4>
    </div>
    <div style="display:flex;gap:10px;margin-bottom:20px;">
        <form method="POST" action="/reservations/<?= (int) $reservation->id ?>/confirm" style="display:inline;">
            <?= csrf_field() ?>
            <button type="submit" class="btn btn-primary" onclick="return confirm('هل أنت متأكد من تأكيد هذا الحجز؟')">
                <i data-lucide="check-circle" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> تأكيد الحجز
            </button>
        </form>
    </div>
    <div style="border-top:1px solid #E5E7EB;padding-top:15px;">
        <form method="POST" action="/reservations/<?= (int) $reservation->id ?>/cancel">
            <?= csrf_field() ?>
            <div style="margin-bottom:10px;">
                <label class="form-label" style="color:#DC2626;">سبب الإلغاء</label>
                <textarea name="cancel_reason" class="form-input" rows="2" placeholder="يرجى توضيح سبب الإلغاء..."></textarea>
            </div>
            <button type="submit" class="btn btn-danger" onclick="return confirm('هل أنت متأكد من إلغاء هذا الحجز؟')">
                <i data-lucide="x-circle" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إلغاء الحجز
            </button>
        </form>
    </div>
</div>
<?php elseif ($status === 'confirmed'): ?>
<div class="card" style="margin-bottom:20px;padding:20px;">
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:15px;">
        <i data-lucide="settings" style="width:18px;height:18px;color:#0D7377;"></i>
        <h4 style="margin:0;color:#0D7377;font-size:15px;">الإجراءات</h4>
    </div>
    <div style="display:flex;gap:10px;margin-bottom:20px;">
        <form method="POST" action="/reservations/<?= (int) $reservation->id ?>/check-in" style="display:inline;">
            <?= csrf_field() ?>
            <button type="submit" class="btn btn-primary" onclick="return confirm('هل أنت متأكد من تسجيل الدخول؟')">
                <i data-lucide="log-in" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> تسجيل الدخول
            </button>
        </form>
    </div>
    <div style="border-top:1px solid #E5E7EB;padding-top:15px;">
        <form method="POST" action="/reservations/<?= (int) $reservation->id ?>/cancel">
            <?= csrf_field() ?>
            <div style="margin-bottom:10px;">
                <label class="form-label" style="color:#DC2626;">سبب الإلغاء</label>
                <textarea name="cancel_reason" class="form-input" rows="2" placeholder="يرجى توضيح سبب الإلغاء..."></textarea>
            </div>
            <button type="submit" class="btn btn-danger" onclick="return confirm('هل أنت متأكد من إلغاء هذا الحجز؟')">
                <i data-lucide="x-circle" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إلغاء الحجز
            </button>
        </form>
    </div>
</div>
<?php endif; ?>

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