@extends('user.layouts.app')

@section('title', 'معلومات نظام سجلات الدخول')

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/login-logs.css') }}">
@endsection

@section('content')
    <div class="content-wrapper login-logs-page" x-data="welcomeManager()">

        {{-- Page Header --}}
        <div class="page-header">
            <x-lucide-shield-check width="28" height="28" />
            <h1>نظام تسجيل دخول المستخدمين والأجهزة</h1>
        </div>

        {{-- Success Alert --}}
        <div class="alert-box success">
            <div class="alert-icon">
                <x-lucide-check-circle width="24" height="24" />
            </div>
            <div class="alert-content">
                <h4>تم تفعيل نظام الحماية والمراقبة!</h4>
                <p>يتم الآن تتبع جميع عمليات تسجيل الدخول والخروج والأجهزة المتصلة بحسابك تلقائياً.</p>
            </div>
        </div>

        {{-- Info Cards --}}
        <div class="info-cards-grid">
            {{-- Tracked Info Card --}}
            <div class="info-card">
                <div class="card-icon primary">
                    <x-lucide-list-checks width="24" height="24" />
                </div>
                <h3>المعلومات المتتبعة</h3>
                <p>نقوم بتتبع المعلومات التالية لحماية حسابك</p>
                <ul class="feature-list">
                    <li>
                        <x-lucide-smartphone width="16" height="16" />
                        نوع الجهاز (كمبيوتر، هاتف، تابلت)
                    </li>
                    <li>
                        <x-lucide-monitor width="16" height="16" />
                        نظام التشغيل والمتصفح
                    </li>
                    <li>
                        <x-lucide-map-pin width="16" height="16" />
                        الموقع الجغرافي التقريبي
                    </li>
                    <li>
                        <x-lucide-clock width="16" height="16" />
                        أوقات الدخول والخروج
                    </li>
                    <li>
                        <x-lucide-network width="16" height="16" />
                        عنوان IP الخاص بالاتصال
                    </li>
                </ul>
            </div>

            {{-- Features Card --}}
            <div class="info-card">
                <div class="card-icon success">
                    <x-lucide-sparkles width="24" height="24" />
                </div>
                <h3>الميزات المتاحة</h3>
                <p>استفد من هذه الميزات لتعزيز أمان حسابك</p>
                <ul class="feature-list">
                    <li>
                        <x-lucide-eye width="16" height="16" />
                        مراقبة الجلسات النشطة
                    </li>
                    <li>
                        <x-lucide-log-out width="16" height="16" />
                        إخراج أجهزة معينة عن بُعد
                    </li>
                    <li>
                        <x-lucide-shield-check width="16" height="16" />
                        حماية من الوصول غير المصرح
                    </li>
                    <li>
                        <x-lucide-bar-chart-3 width="16" height="16" />
                        إحصائيات تفصيلية للنشاط
                    </li>
                    <li>
                        <x-lucide-download width="16" height="16" />
                        تصدير السجلات والتقارير
                    </li>
                </ul>
            </div>
        </div>

        {{-- Quick Access Cards --}}
        <div class="quick-access-section">
            <h3 class="section-title-sm">
                <x-lucide-zap width="18" height="18" />
                الوصول السريع
            </h3>
            <div class="quick-access-grid">
                {{-- View Logs Card --}}
                <a href="{{ route('security.logs.index') }}" class="quick-access-card logs-card">
                    <div class="card-icon">
                        <x-lucide-list width="24" height="24" />
                    </div>
                    <div class="card-content">
                        <h4>عرض السجلات</h4>
                        <p>تصفح جميع سجلات تسجيل الدخول والخروج</p>
                    </div>
                    <div class="card-arrow">
                        <x-lucide-arrow-left width="18" height="18" />
                    </div>
                </a>

                {{-- Active Sessions Card --}}
                <div class="quick-access-card sessions-card" @click="toggleSessions()">
                    <div class="card-icon">
                        <x-lucide-radio width="24" height="24" />
                    </div>
                    <div class="card-content">
                        <h4>الجلسات النشطة</h4>
                        <p>مراقبة الأجهزة المتصلة حالياً بحسابك</p>
                    </div>
                    <div class="card-arrow" :class="{ 'rotated': showSessions }">
                        <x-lucide-chevron-down width="18" height="18" />
                    </div>
                </div>
            </div>
        </div>

        {{-- Active Sessions Container --}}
        <div class="active-sessions" x-show="showSessions" x-cloak x-transition>
            <div class="section-header">
                <x-lucide-radio width="20" height="20" />
                <h3>الجلسات النشطة الآن</h3>
            </div>
            <div class="sessions-grid" id="activeSessionsContent">
                <template x-if="sessionsLoading">
                    <div class="empty-state">
                        <div class="empty-icon">
                            <x-lucide-loader-2 width="24" height="24" class="animate-spin" />
                        </div>
                        <h3>جاري التحميل...</h3>
                    </div>
                </template>
                <template x-if="!sessionsLoading && sessions.length === 0">
                    <div class="empty-state">
                        <div class="empty-icon">
                            <x-lucide-info width="24" height="24" />
                        </div>
                        <h3>لا توجد جلسات نشطة</h3>
                    </div>
                </template>
                <template x-for="session in sessions" :key="session.id">
                    <div class="session-card" :class="{ 'current': session.is_current }">
                        <div class="device-icon">
                            <i :class="'bi bi-' + (session.device_type === 'mobile' ? 'phone' : (session.device_type === 'tablet' ? 'tablet' : 'display'))"></i>
                        </div>
                        <div class="session-info">
                            <div class="device-name">
                                <span x-text="session.device_name"></span>
                                <span class="badge current" x-show="session.is_current">الجهاز الحالي</span>
                            </div>
                            <div class="session-details">
                                <div><strong>المتصفح:</strong> <span x-text="session.browser"></span></div>
                                <div><strong>النظام:</strong> <span x-text="session.operating_system"></span></div>
                                <div><strong>IP:</strong> <span x-text="session.ip_address"></span></div>
                                <div x-show="session.location"><strong>الموقع:</strong> <span x-text="session.location"></span></div>
                                <div><strong>آخر نشاط:</strong> <span x-text="session.last_activity_at"></span></div>
                            </div>
                        </div>
                        <div class="session-actions" x-show="!session.is_current">
                            <button class="action-btn danger sm" @click="forceLogout(session.id)">
                                <x-lucide-log-out width="16" height="16" />
                                إخراج
                            </button>
                        </div>
                    </div>
                </template>
            </div>
            <div class="text-center p-3" x-show="sessions.length > 1">
                <button class="action-btn warning" @click="logoutAllOthers()">
                    <x-lucide-log-out width="16" height="16" />
                    إخراج جميع الأجهزة الأخرى
                </button>
            </div>
        </div>

        {{-- Security Tips --}}
        <div class="tips-section">
            <div class="section-title">
                <x-lucide-lightbulb width="18" height="18" />
                نصائح أمنية مهمة
            </div>
            <div class="tips-grid">
                <div>
                    <h4>حماية حسابك:</h4>
                    <ul>
                        <li>راجع السجلات بانتظام للتأكد من عدم وجود نشاط مشبوه</li>
                        <li>اخرج من الأجهزة التي لا تستخدمها</li>
                        <li>لا تترك حسابك مفتوحاً على أجهزة عامة</li>
                        <li>استخدم كلمات مرور قوية ومختلفة</li>
                    </ul>
                </div>
                <div>
                    <h4>في حالة الاشتباه:</h4>
                    <ul>
                        <li>اخرج فوراً من جميع الأجهزة الأخرى</li>
                        <li>غير كلمة المرور فوراً</li>
                        <li>فعل المصادقة الثنائية</li>
                        <li>تواصل مع الدعم الفني</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script>
function welcomeManager() {
    return {
        showSessions: false,
        sessionsLoading: false,
        sessions: [],

        toggleSessions() {
            if (!this.showSessions) {
                this.loadActiveSessions();
            } else {
                this.showSessions = false;
            }
        },

        loadActiveSessions() {
            this.showSessions = true;
            this.sessionsLoading = true;

            fetch('{{ route('security.logs.active-sessions') }}')
                .then(response => response.json())
                .then(data => {
                    this.sessionsLoading = false;
                    if (data.ok) {
                        this.sessions = data.data || [];
                    } else {
                        this.showToast('error', 'حدث خطأ أثناء تحميل الجلسات النشطة');
                    }
                })
                .catch(error => {
                    this.sessionsLoading = false;
                    console.error('Error loading active sessions:', error);
                    this.showToast('error', 'حدث خطأ أثناء تحميل الجلسات النشطة');
                });
        },

        forceLogout(sessionId) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'تأكيد الإخراج',
                    text: 'هل أنت متأكد من إخراج هذا الجهاز؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، إخراج',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.doForceLogout(sessionId);
                    }
                });
            } else if (confirm('هل أنت متأكد من إخراج هذا الجهاز؟')) {
                this.doForceLogout(sessionId);
            }
        },

        doForceLogout(sessionId) {
            fetch(`{{ url('/security/login-logs') }}/${sessionId}/force-logout`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.showToast('success', 'تم إخراج الجهاز بنجاح');
                    this.loadActiveSessions();
                } else {
                    this.showToast('error', 'حدث خطأ: ' + data.message);
                }
            })
            .catch(error => {
                this.showToast('error', 'حدث خطأ أثناء محاولة إخراج الجهاز');
            });
        },

        logoutAllOthers() {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'تأكيد الإخراج',
                    text: 'هل أنت متأكد من إخراج جميع الأجهزة الأخرى؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، إخراج الكل',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.doLogoutAllOthers();
                    }
                });
            } else if (confirm('هل أنت متأكد من إخراج جميع الأجهزة الأخرى؟')) {
                this.doLogoutAllOthers();
            }
        },

        doLogoutAllOthers() {
            fetch('{{ route('security.logs.force-logout-all-others') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.showToast('success', 'تم إخراج جميع الأجهزة الأخرى بنجاح');
                    this.loadActiveSessions();
                } else {
                    this.showToast('error', 'حدث خطأ: ' + data.message);
                }
            })
            .catch(error => {
                this.showToast('error', 'حدث خطأ أثناء محاولة إخراج الأجهزة');
            });
        },

        showToast(type, message) {
            if (typeof Swal !== 'undefined') {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true
                });
                Toast.fire({
                    icon: type,
                    title: message
                });
            }
        }
    }
}
</script>
<style>
    [x-cloak] { display: none !important; }
    .spin { animation: spin 1s linear infinite; }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .text-center { text-align: center; }
    .p-3 { padding: 1rem; }
</style>
@endsection