<?php
use App\Modules\Facilities\Models\Facility;
use App\Modules\Facilities\Models\FacilityTimeSlot;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?><?= e($facility->name_ar) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php if (can('facility.manage')): ?>
<a href="/facilities/<?= (int) $facility->id ?>/edit" class="btn btn-outline"><i data-lucide="edit-3" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تعديل</a>
<?php endif; ?>
<a href="/facilities" 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
$fType = $facility->facility_type ?? 'pitch';
$fLocation = $facility->location ?? 'indoor';
$typeColor = Facility::getTypeColor($fType);
$typeLabel = Facility::getTypeLabel($fType);
$locLabel = Facility::getLocationLabel($fLocation);
$isActive = (int) $facility->is_active;

$typeIcons = [
    'pitch'  => 'goal',
    'court'  => 'rectangle-horizontal',
    'hall'   => 'building',
    'lane'   => 'arrow-right-circle',
    'table'  => 'table',
    'device' => 'gamepad-2',
    'track'  => 'timer',
    'pool'   => 'waves',
];
$icon = $typeIcons[$fType] ?? 'building';

$dayLabels = FacilityTimeSlot::getDayLabels();
$slotTypes = FacilityTimeSlot::getSlotTypes();

$slotTypeColors = [
    'available'        => ['bg' => '#ECFDF5', 'color' => '#059669'],
    'maintenance'      => ['bg' => '#FEF3C7', 'color' => '#D97706'],
    'academy_reserved' => ['bg' => '#DBEAFE', 'color' => '#2563EB'],
    'blocked'          => ['bg' => '#FEE2E2', 'color' => '#DC2626'],
];
?>

<!-- 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, <?= $typeColor ?>15, <?= $typeColor ?>30);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i data-lucide="<?= e($icon) ?>" style="width:36px;height:36px;color:<?= $typeColor ?>;"></i>
        </div>
        <div style="flex:1;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;">
                <h2 style="margin:0;font-size:22px;font-weight:700;color:#1A1A2E;"><?= e($facility->name_ar) ?></h2>
                <?php if ($isActive): ?>
                <span class="badge" style="background:#ECFDF5;color:#059669;font-size:12px;padding:4px 12px;border-radius:12px;font-weight:600;">فعّال</span>
                <?php else: ?>
                <span class="badge" style="background:#FEE2E2;color:#DC2626;font-size:12px;padding:4px 12px;border-radius:12px;font-weight:600;">معطّل</span>
                <?php endif; ?>
            </div>
            <?php if ($facility->name_en): ?>
            <div style="font-size:14px;color:#6B7280;margin-bottom:8px;"><?= e($facility->name_en) ?></div>
            <?php endif; ?>
            <div style="display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:#6B7280;">
                <span style="display:inline-flex;align-items:center;gap:4px;">
                    <i data-lucide="tag" style="width:14px;height:14px;"></i>
                    <code style="font-size:11px;background:#F3F4F6;padding:1px 6px;border-radius:4px;"><?= e($facility->code) ?></code>
                </span>
                <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $typeColor ?>15;color:<?= $typeColor ?>;">
                    <?= e($typeLabel) ?>
                </span>
                <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $fLocation === 'indoor' ? '#DBEAFE' : '#FEF3C7' ?>;color:<?= $fLocation === 'indoor' ? '#0284C7' : '#D97706' ?>;">
                    <i data-lucide="<?= $fLocation === 'indoor' ? 'home' : 'sun' ?>" style="width:12px;height:12px;"></i>
                    <?= e($locLabel) ?>
                </span>
                <?php if ((int) $facility->capacity > 0): ?>
                <span style="display:inline-flex;align-items:center;gap:4px;">
                    <i data-lucide="users" style="width:14px;height:14px;"></i>
                    السعة: <?= (int) $facility->capacity ?>
                </span>
                <?php endif; ?>
            </div>
            <?php if ($facility->description ?? ''): ?>
            <p style="margin:12px 0 0;font-size:14px;color:#4B5563;line-height:1.7;"><?= e($facility->description) ?></p>
            <?php endif; ?>
        </div>
        <div style="flex-shrink:0;">
            <form method="POST" action="/facilities/<?= (int) $facility->id ?>/toggle" style="display:inline;">
                <?= csrf_field() ?>
                <?php if ($isActive): ?>
                <button type="submit" class="btn btn-outline" style="color:#DC2626;border-color:#DC2626;" onclick="return confirm('هل أنت متأكد من إيقاف هذا المرفق؟')">
                    <i data-lucide="pause-circle" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> إيقاف
                </button>
                <?php else: ?>
                <button type="submit" class="btn btn-primary" onclick="return confirm('هل أنت متأكد من تفعيل هذا المرفق؟')">
                    <i data-lucide="play-circle" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تفعيل
                </button>
                <?php endif; ?>
            </form>
        </div>
    </div>
</div>

<!-- Stats Cards Row -->
<div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:28px;font-weight:700;color:#0D7377;"><?= (int) $facility->capacity ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">السعة</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:28px;font-weight:700;color:#059669;"><?= money((float) $facility->hourly_rate_member) ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">سعر الأعضاء صباحي</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:28px;font-weight:700;color:#D97706;"><?= money((float) $facility->hourly_rate_nonmember) ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">سعر غير الأعضاء صباحي</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:28px;font-weight:700;color:#7C3AED;"><?= money((float) $facility->hourly_rate_member_pm) ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">سعر الأعضاء مسائي</div>
    </div>
</div>

<!-- Rates Card -->
<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="banknote" style="width:18px;height:18px;color:#059669;"></i>
        <h3 style="margin:0;color:#059669;font-size:15px;">الأسعار بالساعة</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>الفترة</th>
                    <th>سعر الأعضاء</th>
                    <th>سعر غير الأعضاء</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="font-weight:600;">
                        <span style="display:inline-flex;align-items:center;gap:4px;">
                            <i data-lucide="sun" style="width:14px;height:14px;color:#D97706;"></i>
                            صباحي (AM)
                        </span>
                    </td>
                    <td><?= money((float) $facility->hourly_rate_member) ?></td>
                    <td><?= money((float) $facility->hourly_rate_nonmember) ?></td>
                </tr>
                <tr>
                    <td style="font-weight:600;">
                        <span style="display:inline-flex;align-items:center;gap:4px;">
                            <i data-lucide="moon" style="width:14px;height:14px;color:#7C3AED;"></i>
                            مسائي (PM)
                        </span>
                    </td>
                    <td><?= money((float) $facility->hourly_rate_member_pm) ?></td>
                    <td><?= money((float) $facility->hourly_rate_nonmember_pm) ?></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Linked Discipline Card -->
<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="activity" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">النشاط المرتبط</h3>
    </div>
    <div style="padding:20px;">
        <?php if ($linkedDiscipline): ?>
        <div style="display:flex;align-items:center;gap:15px;">
            <div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg, #0D737715, #0D737730);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i data-lucide="<?= e($linkedDiscipline->icon ?? 'activity') ?>" style="width:24px;height:24px;color:#0D7377;"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:16px;font-weight:700;color:#1A1A2E;margin-bottom:4px;"><?= e($linkedDiscipline->name_ar ?? '') ?></div>
                <?php if (!empty($linkedDiscipline->category)): ?>
                <span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;background:#F3F4F6;color:#6B7280;"><?= e($linkedDiscipline->category) ?></span>
                <?php endif; ?>
            </div>
            <a href="/disciplines/<?= (int) $linkedDiscipline->id ?>" class="btn btn-sm btn-outline" style="font-size:12px;">
                <i data-lucide="eye" style="width:13px;height:13px;vertical-align:middle;margin-left:4px;"></i> عرض النشاط
            </a>
        </div>
        <?php else: ?>
        <div style="text-align:center;color:#9CA3AF;font-size:14px;padding:15px;">
            <i data-lucide="unlink" style="width:20px;height:20px;margin-bottom:8px;"></i>
            <div>غير مرتبط بنشاط</div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Time Slots Section -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;">
        <div style="display:flex;align-items:center;gap:8px;">
            <i data-lucide="clock" style="width:18px;height:18px;color:#7C3AED;"></i>
            <h3 style="margin:0;color:#7C3AED;font-size:15px;">الفترات الزمنية</h3>
        </div>
        <a href="/facilities/<?= (int) $facility->id ?>/timeslots/create" class="btn btn-sm btn-outline">
            <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;"></i> إضافة فترة
        </a>
    </div>
    <?php if (!empty($timeSlots)): ?>
    <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 ($timeSlots as $slot): ?>
                <tr>
                    <td style="font-weight:600;"><?= e($dayLabels[(int) ($slot['day_of_week'] ?? 0)] ?? '') ?></td>
                    <td style="direction:ltr;text-align:center;"><?= e($slot['start_time'] ?? '') ?></td>
                    <td style="direction:ltr;text-align:center;"><?= e($slot['end_time'] ?? '') ?></td>
                    <td>
                        <?php
                        $st = $slot['slot_type'] ?? 'available';
                        $stColors = $slotTypeColors[$st] ?? ['bg' => '#F3F4F6', 'color' => '#6B7280'];
                        ?>
                        <span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;background:<?= $stColors['bg'] ?>;color:<?= $stColors['color'] ?>;">
                            <?= e($slotTypes[$st] ?? $st) ?>
                        </span>
                    </td>
                    <td>
                        <?php if (!empty($slot['linked_academy_id'])): ?>
                        <code style="font-size:11px;background:#F3F4F6;padding:1px 6px;border-radius:4px;">#<?= (int) $slot['linked_academy_id'] ?></code>
                        <?php else: ?>
                        <span style="color:#9CA3AF;">-</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:14px;">
        <i data-lucide="info" style="width:20px;height:20px;margin-bottom:8px;"></i>
        <div>لم يتم تحديد فترات زمنية</div>
    </div>
    <?php endif; ?>
</div>

<!-- Blackout Dates Section -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;">
        <div style="display:flex;align-items:center;gap:8px;">
            <i data-lucide="calendar-off" style="width:18px;height:18px;color:#DC2626;"></i>
            <h3 style="margin:0;color:#DC2626;font-size:15px;">تواريخ الحظر</h3>
        </div>
        <button type="button" class="btn btn-sm btn-outline" onclick="document.getElementById('blackoutForm').style.display = document.getElementById('blackoutForm').style.display === 'none' ? 'block' : 'none';">
            <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;"></i> إضافة حظر
        </button>
    </div>

    <!-- Add Blackout Inline Form (hidden by default) -->
    <div id="blackoutForm" style="display:none;padding:20px;border-bottom:1px solid #E5E7EB;background:#FEF2F2;">
        <form method="POST" action="/facilities/<?= (int) $facility->id ?>/blackout">
            <?= 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="blackout_date" class="form-input" required style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">من الساعة</label>
                    <input type="time" name="start_time" class="form-input" style="direction:ltr;text-align:left;">
                    <small style="color:#9CA3AF;font-size:11px;">اتركه فارغاً لحظر اليوم بالكامل</small>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">إلى الساعة</label>
                    <input type="time" name="end_time" class="form-input" style="direction:ltr;text-align:left;">
                </div>
            </div>
            <div class="form-group" style="margin:0 0 15px;">
                <label class="form-label" style="font-size:12px;">السبب</label>
                <textarea name="reason" class="form-input" rows="2" placeholder="سبب الحظر..."></textarea>
            </div>
            <div style="display:flex;gap:10px;">
                <button type="submit" class="btn btn-primary" style="font-size:13px;">
                    <i data-lucide="check" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> حفظ
                </button>
                <button type="button" class="btn btn-outline" style="font-size:13px;" onclick="document.getElementById('blackoutForm').style.display='none';">إلغاء</button>
            </div>
        </form>
    </div>

    <?php if (!empty($blackoutDates)): ?>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>التاريخ</th>
                    <th>الفترة</th>
                    <th>السبب</th>
                    <th style="width:80px;"></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($blackoutDates as $bo): ?>
                <tr>
                    <td style="font-weight:600;"><?= e($bo['blackout_date'] ?? '') ?></td>
                    <td>
                        <?php if (!empty($bo['start_time']) && !empty($bo['end_time'])): ?>
                        <span style="direction:ltr;display:inline-block;"><?= e($bo['start_time']) ?> - <?= e($bo['end_time']) ?></span>
                        <?php else: ?>
                        <span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;background:#FEE2E2;color:#DC2626;">اليوم بالكامل</span>
                        <?php endif; ?>
                    </td>
                    <td style="color:#4B5563;"><?= e($bo['reason'] ?? '-') ?></td>
                    <td>
                        <form method="POST" action="/facilities/<?= (int) $facility->id ?>/blackout/remove" style="display:inline;">
                            <?= csrf_field() ?>
                            <input type="hidden" name="blackout_id" value="<?= (int) $bo['id'] ?>">
                            <button type="submit" class="btn btn-sm" style="color:#DC2626;padding:4px 8px;border:1px solid #FCA5A5;border-radius:6px;background:#FEF2F2;cursor:pointer;" onclick="return confirm('هل أنت متأكد من حذف هذا الحظر؟')">
                                <i data-lucide="trash-2" style="width:13px;height:13px;"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:14px;">
        <i data-lucide="info" style="width:20px;height:20px;margin-bottom:8px;"></i>
        <div>لا توجد تواريخ حظر</div>
    </div>
    <?php endif; ?>
</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="info" style="width:18px;height:18px;color:#6B7280;"></i>
        <h3 style="margin:0;color:#6B7280;font-size:15px;">معلومات النظام</h3>
    </div>
    <div style="padding:15px 20px;">
        <table style="width:100%;font-size:13px;">
            <tr>
                <td style="padding:6px 0;color:#6B7280;width:30%;">رقم السجل</td>
                <td style="padding:6px 0;font-weight:600;">#<?= (int) $facility->id ?></td>
            </tr>
            <?php if ($facility->created_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">تاريخ الإنشاء</td>
                <td style="padding:6px 0;"><?= e($facility->created_at) ?></td>
            </tr>
            <?php endif; ?>
            <?php if ($facility->updated_at): ?>
            <tr>
                <td style="padding:6px 0;color:#6B7280;">آخر تحديث</td>
                <td style="padding:6px 0;"><?= e($facility->updated_at) ?></td>
            </tr>
            <?php endif; ?>
        </table>
    </div>
</div>

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