<?php
use App\Modules\PlayerAffairs\Models\Player;
use App\Modules\PlayerAffairs\Models\PlayerMedicalRecord;
use App\Modules\PlayerAffairs\Models\AcademyEnrollment;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?><?= e($player->full_name_ar) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php if (can('sa.player.manage')): ?>
<a href="/players/<?= (int) $player->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="/players" 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
$cardStatus = $player->card_status ?? 'inactive';
$medicalStatus = $player->medical_status ?? 'pending';
$cardColor = Player::getCardStatusColor($cardStatus);
$cardLabel = Player::getCardStatusLabel($cardStatus);
$medicalColor = Player::getMedicalStatusColor($medicalStatus);
$medicalLabel = Player::getMedicalStatusLabel($medicalStatus);
$playerType = $player->player_type ?? '';
$typeLabel = ($playerTypes[$playerType] ?? $playerType);
$typeColor = $playerType === 'member' ? '#0284C7' : '#7C3AED';
$age = $player->getAge();
$recordTypes = PlayerMedicalRecord::getRecordTypes();
$certTypes = PlayerMedicalRecord::getCertificateTypes();
$approvalStatuses = PlayerMedicalRecord::getApprovalStatuses();
$resultTypes = PlayerMedicalRecord::getResults();
$enrollmentStatuses = AcademyEnrollment::getStatuses();
?>

<!-- Header Card -->
<div class="card" style="margin-bottom:20px;padding:25px;">
    <div style="display:flex;justify-content:space-between;align-items:start;">
        <div style="display:flex;gap:20px;align-items:start;">
            <div style="width:80px;height:80px;border-radius:50%;background:#F3F4F6;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:3px solid <?= $cardColor ?>;">
                <?php if (!empty($player->photo_path)): ?>
                <img src="/<?= e($player->photo_path) ?>" style="width:100%;height:100%;object-fit:cover;">
                <?php else: ?>
                <i data-lucide="user" style="width:32px;height:32px;color:#9CA3AF;"></i>
                <?php endif; ?>
            </div>
            <div>
            <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($player->full_name_ar) ?></h2>
                <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $typeColor ?>15;color:<?= $typeColor ?>;"><?= e($typeLabel) ?></span>
                <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $cardColor ?>15;color:<?= $cardColor ?>;"><?= e($cardLabel) ?></span>
            </div>
            <?php if ($player->full_name_en): ?>
            <div style="font-size:14px;color:#6B7280;margin-bottom:8px;"><?= e($player->full_name_en) ?></div>
            <?php endif; ?>
            <div style="display:flex;gap:15px;flex-wrap:wrap;font-size:13px;color:#6B7280;margin-top:10px;">
                <?php if ($player->registration_serial): ?>
                <span style="display:inline-flex;align-items:center;gap:4px;">
                    <i data-lucide="hash" style="width:14px;height:14px;"></i>
                    <code style="font-size:12px;background:#F3F4F6;padding:2px 8px;border-radius:4px;color:#0D7377;font-weight:600;"><?= e($player->registration_serial) ?></code>
                </span>
                <?php endif; ?>
                <?php if ($player->activity_id_number): ?>
                <span style="display:inline-flex;align-items:center;gap:4px;">
                    <i data-lucide="id-card" style="width:14px;height:14px;"></i>
                    رقم النشاط: <strong style="color:#374151;"><?= e($player->activity_id_number) ?></strong>
                </span>
                <?php endif; ?>
            </div>
        </div>
        </div>
        <div style="text-align:left;">
            <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $medicalColor ?>15;color:<?= $medicalColor ?>;"><?= e($medicalLabel) ?></span>
            <?php if ($player->medical_expiry_date): ?>
            <div style="margin-top:6px;font-size:11px;color:#9CA3AF;">انتهاء: <?= e($player->medical_expiry_date) ?></div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Stats 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;"><?= $age !== null ? $age : '—' ?></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:14px;font-weight:700;color:<?= $cardColor ?>;"><?= e($cardLabel) ?></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;"><?= count($disciplines) ?></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:#0284C7;"><?= count($enrollments) ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">التسجيلات</div>
    </div>
</div>

<!-- Personal Info -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="user" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;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:40%;">الرقم القومي</td><td style="padding:6px 0;direction:ltr;text-align:right;font-weight:600;"><?= e($player->national_id ?? '—') ?></td></tr>
                <tr><td style="padding:6px 0;color:#6B7280;">رقم جواز السفر</td><td style="padding:6px 0;direction:ltr;text-align:right;"><?= e($player->passport_number ?? '—') ?></td></tr>
                <tr><td style="padding:6px 0;color:#6B7280;">تاريخ الميلاد</td><td style="padding:6px 0;"><?= e($player->date_of_birth ?? '—') ?></td></tr>
                <tr><td style="padding:6px 0;color:#6B7280;">النوع</td><td style="padding:6px 0;"><?= e($genders[$player->gender] ?? $player->gender ?? '—') ?></td></tr>
            </table>
        </div>
    </div>
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="phone" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;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:40%;">الهاتف</td><td style="padding:6px 0;direction:ltr;text-align:right;"><?= e($player->phone ?? '—') ?></td></tr>
                <tr><td style="padding:6px 0;color:#6B7280;">البريد الإلكتروني</td><td style="padding:6px 0;direction:ltr;text-align:right;"><?= e($player->email ?? '—') ?></td></tr>
                <tr><td style="padding:6px 0;color:#6B7280;">العنوان</td><td style="padding:6px 0;"><?= e($player->address ?? '—') ?></td></tr>
            </table>
        </div>
    </div>
</div>

<!-- Guardian Info (if exists) -->
<?php if (!empty($player->guardian_name)): ?>
<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="shield" style="width:18px;height:18px;color:#D97706;"></i>
        <h3 style="margin:0;color:#D97706;font-size:15px;">بيانات ولي الأمر</h3>
    </div>
    <div style="padding:15px 20px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <table style="width:100%;font-size:13px;">
                <tr><td style="padding:6px 0;color:#6B7280;width:40%;">اسم ولي الأمر</td><td style="padding:6px 0;font-weight:600;"><?= e($player->guardian_name) ?></td></tr>
                <tr><td style="padding:6px 0;color:#6B7280;">هاتف ولي الأمر</td><td style="padding:6px 0;direction:ltr;text-align:right;"><?= e($player->guardian_phone ?? '—') ?></td></tr>
            </table>
            <table style="width:100%;font-size:13px;">
                <tr><td style="padding:6px 0;color:#6B7280;width:40%;">الرقم القومي</td><td style="padding:6px 0;direction:ltr;text-align:right;"><?= e($player->guardian_national_id ?? '—') ?></td></tr>
                <tr><td style="padding:6px 0;color:#6B7280;">صلة القرابة</td><td style="padding:6px 0;">
                    <?php
                    $guardianRelationships = Player::getGuardianRelationships();
                    echo e($guardianRelationships[$player->guardian_relationship] ?? $player->guardian_relationship ?? '—');
                    ?>
                </td></tr>
            </table>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Education Info (if exists) -->
<?php if (!empty($player->school_name)): ?>
<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="graduation-cap" style="width:18px;height:18px;color:#0284C7;"></i>
        <h3 style="margin:0;color:#0284C7;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:25%;">اسم المدرسة</td><td style="padding:6px 0;font-weight:600;"><?= e($player->school_name) ?></td></tr>
            <?php if ($player->school_grade): ?>
            <tr><td style="padding:6px 0;color:#6B7280;">الصف الدراسي</td><td style="padding:6px 0;"><?= e($player->school_grade) ?></td></tr>
            <?php endif; ?>
        </table>
    </div>
</div>
<?php endif; ?>

<!-- Notes -->
<?php if (!empty($player->notes)): ?>
<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="file-text" style="width:18px;height:18px;color:#6B7280;"></i>
        <h3 style="margin:0;color:#6B7280;font-size:15px;">ملاحظات</h3>
    </div>
    <div style="padding:15px 20px;font-size:14px;color:#374151;line-height:1.7;"><?= e($player->notes) ?></div>
</div>
<?php endif; ?>

<!-- Card Management -->
<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="credit-card" 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:flex;align-items:center;gap:15px;margin-bottom:15px;">
            <span style="font-size:14px;color:#6B7280;">الحالة الحالية:</span>
            <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $cardColor ?>15;color:<?= $cardColor ?>;"><?= e($cardLabel) ?></span>
        </div>

        <div style="display:flex;gap:10px;flex-wrap:wrap;">
            <?php if (in_array($cardStatus, ['inactive', 'suspended', 'revoked'])): ?>
            <form method="POST" action="/players/<?= (int) $player->id ?>/card/activate" style="display:inline;">
                <?= csrf_field() ?>
                <button type="submit" class="btn btn-primary" style="font-size:13px;" onclick="return confirm('هل أنت متأكد من تفعيل الكارنيه؟')">
                    <i data-lucide="check-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> تفعيل الكارنيه
                </button>
            </form>
            <?php endif; ?>

            <?php if ($cardStatus === 'active'): ?>
            <button type="button" class="btn btn-outline" style="font-size:13px;color:#D97706;border-color:#D97706;" onclick="document.getElementById('suspendCardForm').style.display = document.getElementById('suspendCardForm').style.display === 'none' ? 'block' : 'none';">
                <i data-lucide="pause-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إيقاف الكارنيه
            </button>
            <form method="POST" action="/players/<?= (int) $player->id ?>/card/revoke" style="display:inline;">
                <?= csrf_field() ?>
                <button type="submit" class="btn btn-danger" style="font-size:13px;" onclick="return confirm('هل أنت متأكد من إلغاء الكارنيه؟ هذا الإجراء خطير.')">
                    <i data-lucide="x-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إلغاء الكارنيه
                </button>
            </form>
            <?php endif; ?>
        </div>

        <?php if ($cardStatus === 'active'): ?>
        <div id="suspendCardForm" style="display:none;margin-top:15px;padding:15px;background:#FFF7ED;border:1px solid #FDE68A;border-radius:8px;">
            <form method="POST" action="/players/<?= (int) $player->id ?>/card/suspend">
                <?= csrf_field() ?>
                <div class="form-group" style="margin-bottom:10px;">
                    <label class="form-label" style="font-size:12px;">سبب الإيقاف</label>
                    <textarea name="reason" class="form-input" rows="2" placeholder="أدخل سبب إيقاف الكارنيه..."></textarea>
                </div>
                <button type="submit" class="btn btn-outline" style="font-size:13px;color:#D97706;border-color:#D97706;" onclick="return confirm('هل أنت متأكد من إيقاف الكارنيه؟')">
                    <i data-lucide="check" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> تأكيد الإيقاف
                </button>
            </form>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Disciplines Table -->
<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:#7C3AED;"></i>
        <h3 style="margin:0;color:#7C3AED;font-size:15px;">الألعاب الرياضية</h3>
    </div>
    <?php if (!empty($disciplines)): ?>
    <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:14px;">
            <thead>
                <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">اللعبة</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">الأكاديمية</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">الموسم</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">الحالة</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($disciplines as $disc):
                    $dStatus = $disc['status'] ?? 'active';
                    $dStatusColor = $dStatus === 'active' ? '#059669' : '#D97706';
                    $dStatusLabel = $dStatus === 'active' ? 'نشط' : ($dStatus === 'suspended' ? 'موقف' : $dStatus);
                ?>
                <tr style="border-bottom:1px solid #F3F4F6;">
                    <td style="padding:12px 15px;font-weight:600;"><?= e($disc['discipline_name'] ?? '—') ?></td>
                    <td style="padding:12px 15px;"><?= e($disc['academy_name'] ?? '—') ?></td>
                    <td style="padding:12px 15px;direction:ltr;text-align:right;"><?= e($disc['season'] ?? '—') ?></td>
                    <td style="padding:12px 15px;">
                        <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $dStatusColor ?>15;color:<?= $dStatusColor ?>;"><?= e($dStatusLabel) ?></span>
                    </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>

<!-- Enrollments Table -->
<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="book-open" style="width:18px;height:18px;color:#0284C7;"></i>
            <h3 style="margin:0;color:#0284C7;font-size:15px;">التسجيلات في الأكاديميات</h3>
        </div>
        <button type="button" class="btn btn-sm btn-outline" onclick="toggleEnrollForm()">
            <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;"></i> تسجيل جديد
        </button>
    </div>

    <!-- Enrollment Inline Form (hidden by default) -->
    <div id="enrollForm" style="display:none;padding:20px;background:#F9FAFB;border-bottom:1px solid #E5E7EB;">
        <form method="POST" action="/players/<?= (int) $player->id ?>/enroll">
            <?= csrf_field() ?>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الأكاديمية <span style="color:#DC2626;">*</span></label>
                    <select name="academy_id" id="enrollAcademy" class="form-input" required>
                        <option value="">-- اختر الأكاديمية --</option>
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">المستوى <span style="color:#DC2626;">*</span></label>
                    <select name="level_id" id="enrollLevel" class="form-input" required>
                        <option value="">-- اختر الأكاديمية أولاً --</option>
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الجدول / الموعد</label>
                    <select name="schedule_id" id="enrollSchedule" class="form-input">
                        <option value="">-- اختياري --</option>
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الموسم</label>
                    <input type="text" name="season" class="form-input" value="<?= date('Y') . '-' . (date('Y') + 1) ?>" style="direction:ltr;text-align:left;">
                </div>
            </div>
            <div style="margin-top:15px;display:flex;gap:8px;">
                <button type="submit" class="btn btn-primary" style="font-size:13px;padding:8px 20px;">
                    <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;padding:8px 20px;" onclick="toggleEnrollForm()">إلغاء</button>
            </div>
        </form>
    </div>

    <?php if (!empty($enrollments)): ?>
    <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:14px;">
            <thead>
                <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">الأكاديمية</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">المستوى</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">الموسم</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">تاريخ التسجيل</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">الحالة</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($enrollments as $enroll):
                    $eStatus = $enroll['status'] ?? 'active';
                    $eStatusLabel = AcademyEnrollment::getStatusLabel($eStatus);
                    $eStatusColor = AcademyEnrollment::getStatusColor($eStatus);
                ?>
                <tr style="border-bottom:1px solid #F3F4F6;">
                    <td style="padding:12px 15px;font-weight:600;"><?= e($enroll['academy_name'] ?? '—') ?></td>
                    <td style="padding:12px 15px;"><?= e($enroll['level_name'] ?? '—') ?></td>
                    <td style="padding:12px 15px;direction:ltr;text-align:right;"><?= e($enroll['season'] ?? '—') ?></td>
                    <td style="padding:12px 15px;"><?= e($enroll['enrolled_at'] ?? '—') ?></td>
                    <td style="padding:12px 15px;">
                        <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $eStatusColor ?>15;color:<?= $eStatusColor ?>;"><?= e($eStatusLabel) ?></span>
                    </td>
                    <td style="padding:12px 15px;">
                        <?php if ($eStatus === 'active'): ?>
                        <button type="button" class="btn btn-sm" style="color:#DC2626;padding:4px 10px;border:1px solid #FCA5A5;border-radius:6px;background:#FEF2F2;cursor:pointer;font-size:12px;" onclick="toggleDropForm(<?= (int) ($enroll['id'] ?? 0) ?>)">
                            <i data-lucide="log-out" style="width:13px;height:13px;vertical-align:middle;"></i> انسحاب
                        </button>
                        <div id="dropForm-<?= (int) ($enroll['id'] ?? 0) ?>" style="display:none;margin-top:8px;">
                            <form method="POST" action="/players/<?= (int) $player->id ?>/enroll/drop">
                                <?= csrf_field() ?>
                                <input type="hidden" name="enrollment_id" value="<?= (int) ($enroll['id'] ?? 0) ?>">
                                <textarea name="dropped_reason" class="form-input" rows="2" placeholder="سبب الانسحاب..." style="font-size:12px;margin-bottom:6px;"></textarea>
                                <button type="submit" class="btn btn-sm btn-danger" style="font-size:11px;" onclick="return confirm('تأكيد الانسحاب من الأكاديمية؟')">تأكيد الانسحاب</button>
                            </form>
                        </div>
                        <?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>

<!-- Medical Records -->
<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="heart-pulse" style="width:18px;height:18px;color:#059669;"></i>
            <h3 style="margin:0;color:#059669;font-size:15px;">السجلات الطبية</h3>
        </div>
        <button type="button" class="btn btn-sm btn-outline" onclick="toggleMedicalForm()">
            <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;"></i> إضافة سجل طبي
        </button>
    </div>

    <!-- Add Medical Record Inline Form (hidden by default) -->
    <div id="addMedicalForm" style="display:none;padding:20px;background:#F9FAFB;border-bottom:1px solid #E5E7EB;">
        <form method="POST" action="/players/<?= (int) $player->id ?>/medical" enctype="multipart/form-data">
            <?= csrf_field() ?>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">نوع السجل <span style="color:#DC2626;">*</span></label>
                    <select name="record_type" class="form-input" required>
                        <option value="">-- اختر --</option>
                        <?php foreach ($recordTypes as $rtKey => $rtLabel): ?>
                        <option value="<?= e($rtKey) ?>"><?= e($rtLabel) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">نوع الشهادة <span style="color:#DC2626;">*</span></label>
                    <select name="certificate_type" class="form-input" required>
                        <?php foreach ($certTypes as $ctKey => $ctLabel): ?>
                        <option value="<?= e($ctKey) ?>"><?= e($ctLabel) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <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="exam_date" class="form-input" required>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">تاريخ الانتهاء</label>
                    <input type="date" name="expiry_date" class="form-input">
                    <span style="font-size:10px;color:#9CA3AF;">يحسب تلقائياً إذا تُرك فارغاً</span>
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:15px;margin-top:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">اسم الطبيب</label>
                    <input type="text" name="doctor_name" class="form-input" placeholder="اسم الطبيب">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">اسم العيادة/المستشفى</label>
                    <input type="text" name="clinic_name" class="form-input" placeholder="اسم المكان">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">جهة الإصدار</label>
                    <input type="text" name="issuing_authority" class="form-input" placeholder="جهة إصدار الشهادة">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">رقم الشهادة</label>
                    <input type="text" name="cert_number" class="form-input" placeholder="رقم الشهادة" style="direction:ltr;text-align:left;">
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">قيود/شروط</label>
                    <textarea name="restrictions" class="form-input" rows="2" placeholder="أي قيود أو شروط طبية..."></textarea>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">ملاحظات</label>
                    <textarea name="notes" class="form-input" rows="2" placeholder="ملاحظات إضافية..."></textarea>
                </div>
            </div>
            <div style="margin-top:15px;padding:12px;background:#FEF3C7;border:1px solid #FDE68A;border-radius:8px;">
                <span style="font-size:12px;color:#92400E;"><i data-lucide="info" style="width:13px;height:13px;vertical-align:middle;margin-left:4px;"></i> بعد الرفع سيتم إرسال السجل لمجلس الأمناء للاعتماد</span>
            </div>
            <div style="margin-top:15px;display:flex;gap:8px;">
                <button type="submit" class="btn btn-primary" style="font-size:13px;padding:8px 20px;">
                    <i data-lucide="upload" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> رفع السجل الطبي
                </button>
                <button type="button" class="btn btn-outline" style="font-size:13px;padding:8px 20px;" onclick="toggleMedicalForm()">إلغاء</button>
            </div>
        </form>
    </div>

    <?php if (!empty($medicalRecords)): ?>
    <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:14px;">
            <thead>
                <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">نوع السجل</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">نوع الشهادة</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">تاريخ الفحص</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">تاريخ الانتهاء</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">حالة الاعتماد</th>
                    <th style="padding:12px 15px;text-align:right;font-weight:600;color:#374151;">الطبيب</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($medicalRecords as $rec):
                    $recType = $rec['record_type'] ?? '';
                    $recCertType = $rec['certificate_type'] ?? 'recreational';
                    $recApproval = $rec['approval_status'] ?? 'pending';
                    $approvalColorMap = ['pending' => '#D97706', 'approved' => '#059669', 'rejected' => '#DC2626'];
                    $approvalColor = $approvalColorMap[$recApproval] ?? '#6B7280';
                ?>
                <tr style="border-bottom:1px solid #F3F4F6;">
                    <td style="padding:12px 15px;font-weight:600;"><?= e($recordTypes[$recType] ?? $recType) ?></td>
                    <td style="padding:12px 15px;"><?= e($certTypes[$recCertType] ?? $recCertType) ?></td>
                    <td style="padding:12px 15px;"><?= e($rec['exam_date'] ?? '—') ?></td>
                    <td style="padding:12px 15px;"><?= e($rec['expiry_date'] ?? '—') ?></td>
                    <td style="padding:12px 15px;">
                        <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $approvalColor ?>15;color:<?= $approvalColor ?>;"><?= e($approvalStatuses[$recApproval] ?? $recApproval) ?></span>
                        <?php if ($recApproval === 'rejected' && !empty($rec['rejection_reason'])): ?>
                        <div style="font-size:11px;color:#DC2626;margin-top:4px;"><?= e($rec['rejection_reason']) ?></div>
                        <?php endif; ?>
                    </td>
                    <td style="padding:12px 15px;"><?= e($rec['doctor_name'] ?? '—') ?></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>

<!-- Player History Timeline -->
<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:#1A1A2E;"></i>
        <h3 style="margin:0;color:#1A1A2E;font-size:15px;">السجل التاريخي</h3>
    </div>
    <?php if (!empty($history)): ?>
    <div style="padding:20px;">
        <div style="position:relative;padding-right:25px;">
            <div style="position:absolute;right:8px;top:0;bottom:0;width:2px;background:#E5E7EB;"></div>
            <?php foreach ($history as $event): ?>
            <div style="position:relative;margin-bottom:20px;padding-right:30px;">
                <div style="position:absolute;right:0;top:2px;width:18px;height:18px;border-radius:50%;background:<?= $event['color'] ?>15;display:flex;align-items:center;justify-content:center;border:2px solid <?= $event['color'] ?>;">
                    <i data-lucide="<?= e($event['icon']) ?>" style="width:10px;height:10px;color:<?= $event['color'] ?>;"></i>
                </div>
                <div>
                    <div style="font-size:13px;font-weight:600;color:#374151;margin-bottom:2px;"><?= e($event['title']) ?></div>
                    <?php if (!empty($event['desc'])): ?>
                    <div style="font-size:12px;color:#6B7280;"><?= e($event['desc']) ?></div>
                    <?php endif; ?>
                    <div style="font-size:11px;color:#9CA3AF;margin-top:3px;"><?= e(substr($event['date'], 0, 10)) ?></div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();

    // Load academies data for cascading dropdowns
    var academyData = null;
    var enrollAcademy = document.getElementById('enrollAcademy');
    var enrollLevel = document.getElementById('enrollLevel');
    var enrollSchedule = document.getElementById('enrollSchedule');

    var dayNames = {0:'الأحد',1:'الإثنين',2:'الثلاثاء',3:'الأربعاء',4:'الخميس',5:'الجمعة',6:'السبت'};

    fetch('/api/players/academies')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            academyData = data;
            enrollAcademy.innerHTML = '<option value="">-- اختر الأكاديمية --</option>';
            data.academies.forEach(function(a) {
                enrollAcademy.innerHTML += '<option value="' + a.id + '">' + a.discipline_name + ' — ' + a.name_ar + '</option>';
            });
        });

    enrollAcademy.addEventListener('change', function() {
        var aid = parseInt(this.value);
        enrollLevel.innerHTML = '<option value="">-- اختر المستوى --</option>';
        enrollSchedule.innerHTML = '<option value="">-- اختياري --</option>';
        if (!aid || !academyData) return;

        academyData.levels.filter(function(l) { return l.academy_id == aid; }).forEach(function(l) {
            enrollLevel.innerHTML += '<option value="' + l.id + '">' + l.name_ar + '</option>';
        });
        academyData.schedules.filter(function(s) { return s.academy_id == aid; }).forEach(function(s) {
            var label = (dayNames[s.day_of_week] || '') + ' ' + s.start_time + '-' + s.end_time + (s.facility_name ? ' (' + s.facility_name + ')' : '');
            enrollSchedule.innerHTML += '<option value="' + s.id + '">' + label + '</option>';
        });
    });

    enrollLevel.addEventListener('change', function() {
        var lid = parseInt(this.value);
        var aid = parseInt(enrollAcademy.value);
        enrollSchedule.innerHTML = '<option value="">-- اختياري --</option>';
        if (!academyData) return;

        academyData.schedules.filter(function(s) {
            return s.academy_id == aid && (!s.level_id || s.level_id == lid);
        }).forEach(function(s) {
            var label = (dayNames[s.day_of_week] || '') + ' ' + s.start_time + '-' + s.end_time + (s.facility_name ? ' (' + s.facility_name + ')' : '');
            enrollSchedule.innerHTML += '<option value="' + s.id + '">' + label + '</option>';
        });
    });
});

function toggleEnrollForm() {
    var form = document.getElementById('enrollForm');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}

function toggleMedicalForm() {
    var form = document.getElementById('addMedicalForm');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}

function toggleDropForm(enrollmentId) {
    var form = document.getElementById('dropForm-' + enrollmentId);
    if (form) {
        form.style.display = form.style.display === 'none' ? 'block' : 'none';
    }
}
</script>
<?php $__template->endSection(); ?>
