<style>
.identity-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 0; color: white; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); }
.identity-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%); pointer-events: none; }
.operator-rank { color: #fed7aa; font-family: 'Courier New', monospace; letter-spacing: 2px; text-transform: uppercase; background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2);}
.glitch-effect:hover { animation: pulse 0.5s ease infinite alternate; color: #38bdf8 !important; }
@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
</style>

<div class="row fade-in mb-4 pb-2 border-bottom">
    <div class="col-md-8">
        <h1 class="h2 fw-bold text-dark mb-1"><i class="fa-solid fa-id-card text-primary me-2"></i> الهوية الذكية للتشغيل</h1>
        <p class="text-secondary mb-0">نظرة عامة على الأمان، المستوى، وسلوكك داخل النظام.</p>
    </div>
</div>

<?= display_flash_message('system') ?>

<div class="row g-4 fade-in">
    <!-- IDENTITY CARD -->
    <div class="col-12">
        <div class="identity-card p-5 d-flex align-items-center flex-column flex-md-row gap-5">
            <div class="text-center">
                <i class="fa-solid fa-user-astronaut display-1 mb-3 text-secondary glitch-effect" style="transition:0.3s;"></i>
                <h3 class="fw-bold m-0" style="letter-spacing: 1px;"><?= htmlspecialchars(is_object($user) ? $user->username : 'OPERATOR') ?></h3>
                <div class="mt-3">
                    <span class="operator-rank fs-6 fw-bold shadow-sm d-inline-block"><?= $rank ?></span>
                </div>
            </div>
            
            <div class="border-start border-secondary opacity-25 d-none d-md-block" style="min-height: 140px;"></div>
            
            <div class="flex-grow-1">
                <div class="row w-100 g-4">
                    <div class="col-sm-6">
                        <small class="text-secondary fw-bold">مؤشر الانضباط (Discipline)</small>
                        <div class="d-flex align-items-end gap-2 mt-1">
                            <h1 class="m-0 fw-bold <?= $score >= 80 ? 'text-success' : ($score >= 50 ? 'text-warning' : 'text-danger') ?>"><?= $score ?></h1>
                            <span class="text-secondary mb-2">/ 100</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <small class="text-secondary fw-bold">التحليل الشامل (Intelligence)</small>
                        <p class="mb-0 mt-2 fw-semibold" style="color: #cbd5e1; font-size: 1.1rem;"><?= htmlspecialchars($identity) ?></p>
                    </div>
                    <div class="col-12 mt-4 pt-4 border-top border-secondary border-opacity-25">
                        <small class="text-secondary fw-bold">تاريخ الالتحاق بالنظام</small>
                        <p class="m-0 mt-1" style="font-family: monospace; color: #94a3b8; font-size: 1.05rem;">
                            <?= date('Y-m-d H:i:s', strtotime(is_object($user) ? $user->created_at : 'now')) ?> | <span class="text-success">ACCESS-GRANTED</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- IDENTIFICATION UPDATE -->
    <div class="col-lg-6 mt-5">
        <div class="card h-100 p-4 border-0 shadow-sm rounded-4" style="background: #f8fafc; border-top: 4px solid #3b82f6 !important;">
            <div class="card-body">
                <h5 class="fw-bold text-dark mb-4 border-bottom pb-3"><i class="fa-solid fa-terminal text-primary me-2"></i> Update Callsign (Username)</h5>
                <form action="<?= BASE_URL ?>/system/updateProfile" method="POST">
                    <?= csrf_field() ?>
                    <div class="mb-4">
                        <label class="form-label text-muted fw-bold">Callsign</label>
                        <input type="text" name="username" class="form-control form-control-lg fw-bold bg-white shadow-sm border-0" value="<?= htmlspecialchars(is_object($user) ? $user->username : '') ?>" required>
                    </div>
                    <button type="submit" class="btn btn-primary d-block w-100 fw-bold shadow-sm py-3 rounded-3"><i class="fa-solid fa-save me-2"></i> UPDATE CALLSIGN PROTOCOL</button>
                </form>
            </div>
        </div>
    </div>

    <!-- SECURITY PROTOCOLS -->
    <div class="col-lg-6 mt-5">
        <div class="card h-100 p-4 border-0 shadow-sm rounded-4" style="background: #fef2f2; border-top: 4px solid #ef4444 !important;">
            <div class="card-body">
                <h5 class="fw-bold text-danger mb-4 border-bottom pb-3 border-danger border-opacity-25"><i class="fa-solid fa-shield-halved text-danger me-2"></i> Access Credentials</h5>
                <form action="<?= BASE_URL ?>/system/changePassword" method="POST">
                    <?= csrf_field() ?>
                    <div class="mb-3">
                        <label class="form-label text-muted fw-bold">Current Encryption Key</label>
                        <input type="password" name="current_password" class="form-control bg-white border-0 shadow-sm" placeholder="••••••••" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-dark fw-bold">New Encryption Key</label>
                        <input type="password" name="new_password" class="form-control bg-white border-0 shadow-sm border-start border-3 border-danger" placeholder="••••••••" required>
                    </div>
                    <div class="mb-4">
                        <label class="form-label text-dark fw-bold">Verify New Key</label>
                        <input type="password" name="confirm_password" class="form-control bg-white border-0 shadow-sm border-start border-3 border-danger" placeholder="••••••••" required>
                    </div>
                    <button type="submit" class="btn btn-danger d-block w-100 fw-bold shadow-sm py-3 rounded-3"><i class="fa-solid fa-key me-2"></i> MODIFY CREDENTIALS</button>
                </form>
            </div>
        </div>
    </div>
</div>
