@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="logDetailsManager()">

        {{-- Page Header --}}
        <div class="page-header">
            <x-lucide-file-text width="28" height="28" />
            <h1>تفاصيل سجل الدخول</h1>
            <div class="header-actions">
                <a href="{{ route('user-logs.index') }}" class="action-btn secondary">
                    <x-lucide-arrow-right width="16" height="16" />
                    العودة للسجلات
                </a>
            </div>
        </div>

        {{-- Status Banner --}}
        <div class="status-banner {{ $log->is_active ? 'active' : ($log->force_logout ? 'forced' : 'ended') }}">
            <div class="status-icon">
                @if($log->is_active)
                    <x-lucide-radio width="24" height="24" />
                @elseif($log->force_logout)
                    <x-lucide-triangle-alert width="24" height="24" />
                @else
                    <x-lucide-check-circle width="24" height="24" />
                @endif
            </div>
            <div class="status-content">
                <h4>
                    @if($log->is_active)
                        جلسة نشطة
                        @if($log->session_id === session('user_log_session_id'))
                            <span class="badge current">الجلسة الحالية</span>
                        @endif
                    @elseif($log->force_logout)
                        تم إنهاء الجلسة قسرياً
                    @else
                        جلسة منتهية
                    @endif
                </h4>
                <p>
                    @if($log->is_active)
                        هذه الجلسة نشطة حالياً منذ {{ $log->login_at->diffForHumans() }}
                    @elseif($log->logout_reason)
                        {{ $log->logout_reason }}
                    @else
                        انتهت الجلسة {{ $log->logout_at?->diffForHumans() }}
                    @endif
                </p>
            </div>
            @if($log->is_active && $log->session_id !== session('user_log_session_id'))
                <button class="action-btn danger" @click="forceLogout()">
                    <x-lucide-log-out width="16" height="16" />
                    إنهاء الجلسة
                </button>
            @endif
        </div>

        {{-- Details Grid --}}
        <div class="details-grid">
            {{-- Device Info --}}
            <div class="detail-card">
                <div class="card-header">
                    <div class="header-icon">
                        @svg('lucide-' . ($log->device_type === 'mobile' ? 'smartphone' : ($log->device_type === 'tablet' ? 'tablet' : 'monitor')), ['width' => 24, 'height' => 24])
                    </div>
                    <h3>معلومات الجهاز</h3>
                </div>
                <div class="card-body">
                    <div class="detail-row">
                        <span class="label">نوع الجهاز</span>
                        <span class="value">
                            @svg('lucide-' . ($log->device_type === 'mobile' ? 'smartphone' : ($log->device_type === 'tablet' ? 'tablet' : 'monitor')), ['width' => 16, 'height' => 16])
                            {{ ucfirst($log->device_type ?: 'Desktop') }}
                        </span>
                    </div>
                    <div class="detail-row">
                        <span class="label">اسم الجهاز</span>
                        <span class="value">{{ $log->device_name ?: 'غير محدد' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">المتصفح</span>
                        <span class="value">
                            @if($log->browser)
                                {{ $log->browser }}
                                @if($log->browser_version)
                                    <small>v{{ $log->browser_version }}</small>
                                @endif
                            @else
                                غير محدد
                            @endif
                        </span>
                    </div>
                    <div class="detail-row">
                        <span class="label">نظام التشغيل</span>
                        <span class="value">
                            @if($log->operating_system)
                                {{ $log->operating_system }}
                                @if($log->os_version)
                                    <small>{{ $log->os_version }}</small>
                                @endif
                            @else
                                غير محدد
                            @endif
                        </span>
                    </div>
                </div>
            </div>

            {{-- Network Info --}}
            <div class="detail-card">
                <div class="card-header">
                    <div class="header-icon network">
                        <x-lucide-globe width="24" height="24" />
                    </div>
                    <h3>معلومات الشبكة والموقع</h3>
                </div>
                <div class="card-body">
                    <div class="detail-row">
                        <span class="label">عنوان IP</span>
                        <span class="value"><code class="ip-code">{{ $log->ip_address }}</code></span>
                    </div>
                    <div class="detail-row">
                        <span class="label">الدولة</span>
                        <span class="value">{{ $log->country ?: 'غير محدد' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">المدينة</span>
                        <span class="value">{{ $log->city ?: 'غير محدد' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">المنطقة</span>
                        <span class="value">{{ $log->region ?: 'غير محدد' }}</span>
                    </div>
                    @if($log->latitude && $log->longitude)
                        <div class="detail-row">
                            <span class="label">الموقع</span>
                            <span class="value">
                                <a href="https://www.google.com/maps?q={{ $log->latitude }},{{ $log->longitude }}" 
                                   target="_blank" 
                                   class="map-link">
                                    <x-lucide-map-pin width="14" height="14" />
                                    عرض على الخريطة
                                </a>
                            </span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Session Info --}}
        <div class="detail-card full-width">
            <div class="card-header">
                <div class="header-icon session">
                    <x-lucide-clock width="24" height="24" />
                </div>
                <h3>معلومات الجلسة</h3>
            </div>
            <div class="card-body">
                <div class="session-details-grid">
                    <div class="detail-row">
                        <span class="label">معرف الجلسة</span>
                        <span class="value"><code class="session-code">{{ $log->session_id }}</code></span>
                    </div>
                    <div class="detail-row">
                        <span class="label">وقت الدخول</span>
                        <span class="value">
                            {{ $log->login_at->format('Y-m-d H:i:s') }}
                            <small>{{ $log->login_at->diffForHumans() }}</small>
                        </span>
                    </div>
                    <div class="detail-row">
                        <span class="label">وقت الخروج</span>
                        <span class="value">
                            @if($log->logout_at)
                                {{ $log->logout_at->format('Y-m-d H:i:s') }}
                                <small>{{ $log->logout_at->diffForHumans() }}</small>
                            @else
                                <span class="status-badge active">لا يزال نشط</span>
                            @endif
                        </span>
                    </div>
                    <div class="detail-row">
                        <span class="label">آخر نشاط</span>
                        <span class="value">
                            @if($log->last_activity_at)
                                {{ $log->last_activity_at->format('Y-m-d H:i:s') }}
                                <small>{{ $log->last_activity_at->diffForHumans() }}</small>
                            @else
                                غير محدد
                            @endif
                        </span>
                    </div>
                    @if($log->logout_at)
                        <div class="detail-row">
                            <span class="label">مدة الجلسة</span>
                            <span class="value">
                                @php
                                    $duration = $log->login_at->diffInMinutes($log->logout_at);
                                    $hours = floor($duration / 60);
                                    $minutes = $duration % 60;
                                @endphp
                                @if($hours > 0)
                                    {{ $hours }} ساعة و {{ $minutes }} دقيقة
                                @else
                                    {{ $minutes }} دقيقة
                                @endif
                            </span>
                        </div>
                    @endif
                    @if($log->logout_reason)
                        <div class="detail-row">
                            <span class="label">سبب الخروج</span>
                            <span class="value">{{ $log->logout_reason }}</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- User Agent --}}
        @if($log->user_agent)
            <div class="detail-card full-width user-agent-card">
                <div class="card-header">
                    <div class="header-icon">
                        <x-lucide-code width="24" height="24" />
                    </div>
                    <h3>User Agent</h3>
                </div>
                <div class="card-body">
                    <code class="user-agent-code">{{ $log->user_agent }}</code>
                </div>
            </div>
        @endif

    </div>
@endsection

@section('js')
<script>
function logDetailsManager() {
    return {
        forceLogout() {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'تأكيد إنهاء الجلسة',
                    text: 'هل أنت متأكد من إنهاء هذه الجلسة قسرياً؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، إنهاء',
                    cancelButtonText: 'إلغاء',
                    confirmButtonColor: '#ef4444'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.doForceLogout();
                    }
                });
            } else if (confirm('هل أنت متأكد من إنهاء هذه الجلسة قسرياً؟')) {
                this.doForceLogout();
            }
        },

        doForceLogout() {
            fetch('{{ route("user-logs.force-logout", $log->id) }}', {
                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', data.message || 'تم إنهاء الجلسة بنجاح');
                    setTimeout(() => location.reload(), 1500);
                } 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>
@endsection