<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>إيجار: <?= e($rental['rental_number'] ?? '') ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php
$rst = $rental['status'] ?? '';
?>
<?php if (in_array($rst, ['active', 'grace_period']) && can('sa.locker_rental.create')): ?>
<a href="/sa/locker-rentals/<?= (int) $rental['id'] ?>/renew" class="btn btn-primary"><i data-lucide="refresh-cw" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تجديد</a>
<?php endif; ?>
<?php if (in_array($rst, ['grace_period', 'pending_eviction']) && can('sa.locker_rental.evict')): ?>
<a href="/sa/locker-rentals/<?= (int) $rental['id'] ?>/evict" class="btn btn-outline" style="color:#DC2626;border-color:#DC2626;"><i data-lucide="user-x" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> محضر فض</a>
<?php endif; ?>
<a href="/sa/locker-rentals" 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
$rstColors = ['active' => '#059669', 'grace_period' => '#D97706', 'pending_eviction' => '#DC2626', 'evicted' => '#6B7280', 'completed' => '#2563EB', 'cancelled' => '#6B7280'];
$rstBg = ['active' => '#D1FAE5', 'grace_period' => '#FEF3C7', 'pending_eviction' => '#FEE2E2', 'evicted' => '#F3F4F6', 'completed' => '#DBEAFE', 'cancelled' => '#F3F4F6'];
?>

<!-- Status Badge -->
<div style="margin-bottom:20px;">
    <span style="display:inline-block;padding:5px 14px;border-radius:10px;font-size:13px;font-weight:600;background:<?= $rstBg[$rst] ?? '#F3F4F6' ?>;color:<?= $rstColors[$rst] ?? '#6B7280' ?>;"><?= e($statusOptions[$rst] ?? '-') ?></span>
</div>

<!-- Rental Information -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="key" style="width:18px;height:18px;color:#0D7377;"></i>
        <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="font-size:13px;background:#F3F4F6;padding:3px 8px;border-radius:4px;"><?= e($rental['rental_number'] ?? '-') ?></code></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">اللوكر</div>
                <div style="font-weight:600;">
                    <a href="/sa/lockers/<?= (int) ($rental['locker_id'] ?? 0) ?>" style="color:#0D7377;text-decoration:none;">
                        <?= e($rental['locker_code'] ?? '') ?> - <?= e($rental['locker_name'] ?? '') ?>
                    </a>
                </div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">اللاعب</div>
                <div style="font-weight:600;">
                    <a href="/sa/players/<?= (int) ($rental['player_id'] ?? 0) ?>" style="color:#0D7377;text-decoration:none;">
                        <?= e($rental['player_name'] ?? '-') ?>
                    </a>
                    <?php if (!empty($rental['player_code'])): ?>
                    <div style="font-size:11px;color:#9CA3AF;"><?= e($rental['player_code']) ?></div>
                    <?php endif; ?>
                </div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">نوع اللوكر</div>
                <div><?= e(\App\Modules\SportsActivity\Models\Locker::getTypeOptions()[$rental['locker_type'] ?? ''] ?? '-') ?></div>
            </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;margin-top:20px;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">نوع الإيجار</div>
                <div style="font-weight:600;"><?= e($rentalTypeOptions[$rental['rental_type'] ?? ''] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">من</div>
                <div><?= e($rental['start_date'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">إلى</div>
                <div><?= e($rental['end_date'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">المبلغ</div>
                <div style="font-weight:600;font-size:16px;color:#059669;"><?= number_format((float) ($rental['amount'] ?? 0), 2) ?> ج.م</div>
            </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:20px;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">حالة الدفع</div>
                <div>
                    <?php if (($rental['payment_status'] ?? '') === 'paid'): ?>
                    <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;background:#D1FAE5;color:#059669;">مدفوع</span>
                    <?php else: ?>
                    <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;background:#FEF3C7;color:#D97706;">غير مدفوع</span>
                    <?php endif; ?>
                </div>
            </div>
            <?php if (!empty($rental['receipt_number'])): ?>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">رقم الإيصال</div>
                <div><?= e($rental['receipt_number']) ?></div>
            </div>
            <?php endif; ?>
            <?php if (!empty($rental['notes'])): ?>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">ملاحظات</div>
                <div><?= e($rental['notes']) ?></div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Eviction Info (if evicted) -->
<?php if ($rst === 'evicted'): ?>
<div class="card" style="margin-bottom:20px;border:1px solid #FCA5A5;">
    <div style="padding:15px 20px;border-bottom:1px solid #FCA5A5;display:flex;align-items:center;gap:8px;background:#FEF2F2;">
        <i data-lucide="alert-triangle" style="width:18px;height:18px;color:#DC2626;"></i>
        <h3 style="margin:0;color:#DC2626;font-size:15px;">محضر الفض</h3>
    </div>
    <div style="padding:20px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">تاريخ الإخلاء</div>
                <div><?= e($rental['evicted_at'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">بواسطة</div>
                <div><?= e($rental['eviction_by_name'] ?? '-') ?></div>
            </div>
        </div>
        <div style="margin-top:15px;">
            <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">سبب الإخلاء</div>
            <div style="white-space:pre-wrap;background:#FEF2F2;padding:10px;border-radius:6px;border:1px solid #FCA5A5;"><?= e($rental['eviction_reason'] ?? '-') ?></div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Grace Period Info -->
<?php if ($rst === 'grace_period' && !empty($rental['grace_started_at'])): ?>
<div class="card" style="margin-bottom:20px;border:1px solid #FCD34D;">
    <div style="padding:15px 20px;border-bottom:1px solid #FCD34D;display:flex;align-items:center;gap:8px;background:#FFFBEB;">
        <i data-lucide="clock" style="width:18px;height:18px;color:#D97706;"></i>
        <h3 style="margin:0;color:#D97706;font-size:15px;">فترة السماح</h3>
    </div>
    <div style="padding:20px;">
        <div>
            <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">بداية فترة السماح</div>
            <div><?= e($rental['grace_started_at']) ?></div>
        </div>
        <div style="margin-top:10px;font-size:13px;color:#D97706;">
            فترة السماح 3 أشهر. بعد انتهائها سيتم تحويل الحالة تلقائيا إلى "بانتظار الإخلاء".
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Timeline / Renewal History -->
<?php if (!empty($renewals) && count($renewals) > 1): ?>
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="git-branch" style="width:18px;height:18px;color:#7C3AED;"></i>
        <h3 style="margin:0;color:#7C3AED;font-size:15px;">سلسلة التجديدات</h3>
    </div>
    <div style="padding:20px;">
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>رقم الإيجار</th>
                        <th>من</th>
                        <th>إلى</th>
                        <th>الحالة</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($renewals as $r): ?>
                    <tr style="<?= (int) $r['id'] === (int) $rental['id'] ? 'background:#F0FDF4;' : '' ?>">
                        <td>
                            <a href="/sa/locker-rentals/<?= (int) $r['id'] ?>" style="color:#0D7377;text-decoration:none;font-weight:600;">
                                <?= e($r['rental_number'] ?? '-') ?>
                            </a>
                            <?php if ((int) $r['id'] === (int) $rental['id']): ?>
                            <span style="font-size:10px;color:#059669;margin-right:4px;">(الحالي)</span>
                            <?php endif; ?>
                        </td>
                        <td><?= e($r['start_date'] ?? '-') ?></td>
                        <td><?= e($r['end_date'] ?? '-') ?></td>
                        <td>
                            <?php $rs = $r['status'] ?? ''; ?>
                            <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;background:<?= $rstBg[$rs] ?? '#F3F4F6' ?>;color:<?= $rstColors[$rs] ?? '#6B7280' ?>;"><?= e($statusOptions[$rs] ?? '-') ?></span>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Metadata -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="clock" style="width:18px;height:18px;color:#9CA3AF;"></i>
        <h3 style="margin:0;color:#9CA3AF;font-size:15px;">معلومات النظام</h3>
    </div>
    <div style="padding:20px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">تاريخ الإنشاء</div>
                <div style="font-size:13px;"><?= e($rental['created_at'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">آخر تحديث</div>
                <div style="font-size:13px;"><?= e($rental['updated_at'] ?? '-') ?></div>
            </div>
        </div>
    </div>
</div>

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