<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>اللوكر: <?= e($locker['name_ar'] ?? '') ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php if (can('sa.locker.manage')): ?>
<a href="/sa/lockers/<?= (int) $locker['id'] ?>/edit" class="btn btn-primary"><i data-lucide="edit-3" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تعديل</a>
<form method="POST" action="/sa/lockers/<?= (int) $locker['id'] ?>/toggle" style="display:inline;">
    <?= csrf_field() ?>
    <button type="submit" class="btn btn-outline" onclick="return confirm('<?= (int) $locker['is_active'] ? 'هل أنت متأكد من تعطيل هذا اللوكر؟' : 'هل أنت متأكد من تفعيل هذا اللوكر؟' ?>');">
        <i data-lucide="<?= (int) $locker['is_active'] ? 'toggle-right' : 'toggle-left' ?>" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i>
        <?= (int) $locker['is_active'] ? 'تعطيل' : 'تفعيل' ?>
    </button>
</form>
<?php endif; ?>
<a href="/sa/lockers" 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
$isActive = (int) ($locker['is_active'] ?? 0);
$isOccupied = !empty($currentRental);
?>

<!-- Status Badge -->
<div style="margin-bottom:20px;">
    <?php if ($isOccupied): ?>
    <span style="display:inline-block;padding:5px 14px;border-radius:10px;font-size:13px;font-weight:600;background:#FEE2E2;color:#DC2626;">مشغول</span>
    <?php elseif ($isActive): ?>
    <span style="display:inline-block;padding:5px 14px;border-radius:10px;font-size:13px;font-weight:600;background:#D1FAE5;color:#059669;">متاح</span>
    <?php else: ?>
    <span style="display:inline-block;padding:5px 14px;border-radius:10px;font-size:13px;font-weight:600;background:#F3F4F6;color:#6B7280;">معطّل</span>
    <?php endif; ?>
</div>

<!-- Locker 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="lock" 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;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($locker['code'] ?? '-') ?></code></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الاسم بالعربي</div>
                <div style="font-weight:600;"><?= e($locker['name_ar'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الاسم بالإنجليزي</div>
                <div style="font-weight:600;"><?= e($locker['name_en'] ?? '-') ?></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><?= e($locker['facility_name'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">اللعبة</div>
                <div><?= e($locker['discipline_name'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">النوع</div>
                <div><?= e($typeOptions[$locker['locker_type'] ?? ''] ?? '-') ?></div>
            </div>
        </div>
        <?php if (!empty($locker['location_note'])): ?>
        <div style="margin-top:20px;">
            <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">ملاحظات الموقع</div>
            <div style="white-space:pre-wrap;"><?= e($locker['location_note']) ?></div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Current Rental -->
<?php if ($currentRental): ?>
<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:#D97706;"></i>
        <h3 style="margin:0;color:#D97706;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;">
                    <a href="/sa/locker-rentals/<?= (int) $currentRental['id'] ?>" style="color:#0D7377;text-decoration:none;">
                        <?= e($currentRental['rental_number'] ?? '-') ?>
                    </a>
                </div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">اللاعب</div>
                <div style="font-weight:600;"><?= e($currentRental['player_name'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">نوع الإيجار</div>
                <div><?= e($rentalTypeOptions[$currentRental['rental_type'] ?? ''] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">الحالة</div>
                <?php
                $st = $currentRental['status'] ?? '';
                $stColors = ['active' => '#059669', 'grace_period' => '#D97706', 'pending_eviction' => '#DC2626'];
                $stBg = ['active' => '#D1FAE5', 'grace_period' => '#FEF3C7', 'pending_eviction' => '#FEE2E2'];
                ?>
                <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;background:<?= $stBg[$st] ?? '#F3F4F6' ?>;color:<?= $stColors[$st] ?? '#6B7280' ?>;"><?= e($statusOptions[$st] ?? '-') ?></span>
            </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:15px;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">من</div>
                <div><?= e($currentRental['start_date'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">إلى</div>
                <div><?= e($currentRental['end_date'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">المبلغ</div>
                <div style="font-weight:600;"><?= number_format((float) ($currentRental['amount'] ?? 0), 2) ?> ج.م</div>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Rental History -->
<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="history" style="width:18px;height:18px;color:#6B7280;"></i>
        <h3 style="margin:0;color:#6B7280;font-size:15px;">سجل الإيجارات</h3>
    </div>
    <div style="padding:20px;">
        <?php if (!empty($rentalHistory)): ?>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>رقم الإيجار</th>
                        <th>اللاعب</th>
                        <th>النوع</th>
                        <th>من</th>
                        <th>إلى</th>
                        <th>المبلغ</th>
                        <th>الحالة</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($rentalHistory as $rental): ?>
                    <?php
                    $rst = $rental['status'] ?? '';
                    $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'];
                    ?>
                    <tr>
                        <td>
                            <a href="/sa/locker-rentals/<?= (int) $rental['id'] ?>" style="color:#0D7377;text-decoration:none;font-weight:600;">
                                <?= e($rental['rental_number'] ?? '-') ?>
                            </a>
                        </td>
                        <td><?= e($rental['player_name'] ?? '-') ?></td>
                        <td><?= e($rentalTypeOptions[$rental['rental_type'] ?? ''] ?? '-') ?></td>
                        <td><?= e($rental['start_date'] ?? '-') ?></td>
                        <td><?= e($rental['end_date'] ?? '-') ?></td>
                        <td><?= number_format((float) ($rental['amount'] ?? 0), 2) ?> ج.م</td>
                        <td>
                            <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;background:<?= $rstBg[$rst] ?? '#F3F4F6' ?>;color:<?= $rstColors[$rst] ?? '#6B7280' ?>;"><?= e($statusOptions[$rst] ?? '-') ?></span>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php else: ?>
        <div style="text-align:center;padding:20px;color:#9CA3AF;font-size:14px;">
            لا توجد إيجارات سابقة لهذا اللوكر.
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- 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($locker['created_at'] ?? '-') ?></div>
            </div>
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">آخر تحديث</div>
                <div style="font-size:13px;"><?= e($locker['updated_at'] ?? '-') ?></div>
            </div>
        </div>
    </div>
</div>

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