@extends('layouts.app')

@section('title', 'لوحة التحكم - نظام إدارة الأصول')

@section('content')
<div class="mb-4">
    <h1 class="page-title">
        <i class="fas fa-home me-2"></i>
        لوحة التحكم
    </h1>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active">الرئيسية</li>
        </ol>
    </nav>
</div>

<!-- رسالة إيقاف الباركودات -->
@if(isset($barcodeDisabled) && $barcodeDisabled)
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="fas fa-exclamation-triangle me-2"></i>
    <strong>تنبيه:</strong> {{ $barcodeMessage ?? 'لا يمكن تنفيذ هذا الأمر لأن فترة التجربة قد انتهت. يحتاج إلى ترقية المساحة أو شراء مساحة جديدة.' }}
</div>
@endif

<!-- Statistics Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-primary-gradient text-white">
                <i class="fas fa-building"></i>
            </div>
            <div class="stat-value">{{ $stats['organizations'] ?? 0 }}</div>
            <div class="stat-label">الهيئات والمنظمات</div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-success-gradient text-white">
                <i class="fas fa-boxes"></i>
            </div>
            <div class="stat-value">{{ $stats['items'] ?? 0 }}</div>
            <div class="stat-label">المواد والأصول</div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-warning-gradient text-white">
                <i class="fas fa-computer"></i>
            </div>
            <div class="stat-value">{{ $stats['devices'] ?? 0 }}</div>
            <div class="stat-label">الأجهزة</div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-danger-gradient text-white">
                <i class="fas fa-barcode"></i>
            </div>
            <div class="stat-value">{{ $stats['barcodes'] ?? 0 }}</div>
            <div class="stat-label">الباركودات</div>
        </div>
    </div>
</div>

<!-- Charts and Tables -->
<div class="row g-4">
    <!-- Recent Items -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="mb-0">
                    <i class="fas fa-clock me-2 text-primary"></i>
                    أحدث المواد المضافة
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>الاسم</th>
                                <th>النوع</th>
                                <th>الكمية</th>
                                <th>التاريخ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentItems ?? [] as $item)
                            <tr>
                                <td>
                                    <strong>{{ $item->name }}</strong><br>
                                    <small class="text-muted">{{ $item->code }}</small>
                                </td>
                                <td>
                                    <span class="badge bg-primary">{{ $item->item_type ?? '-' }}</span>
                                </td>
                                <td>{{ $item->quantity }}</td>
                                <td>
                                    <small>{{ $item->created_at->diffForHumans() }}</small>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    <i class="fas fa-inbox fa-2x mb-2"></i><br>
                                    لا توجد مواد حالياً
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Maintenance Due -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="mb-0">
                    <i class="fas fa-wrench me-2 text-warning"></i>
                    الأجهزة المستحقة للصيانة
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>الجهاز</th>
                                <th>الحالة</th>
                                <th>الصيانة القادمة</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($maintenanceDue ?? [] as $device)
                            <tr>
                                <td>
                                    <strong>{{ $device->name }}</strong><br>
                                    <small class="text-muted">{{ $device->code }}</small>
                                </td>
                                <td>
                                    <span class="badge 
                                        @if($device->status == 'active') bg-success
                                        @elseif($device->status == 'under_maintenance') bg-warning
                                        @else bg-danger
                                        @endif">
                                        {{ $device->status }}
                                    </span>
                                </td>
                                <td>
                                    <small class="text-danger">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        {{ $device->next_maintenance_date ?? 'غير محدد' }}
                                    </small>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="text-center text-muted py-4">
                                    <i class="fas fa-check-circle fa-2x mb-2 text-success"></i><br>
                                    لا توجد أجهزة تحتاج صيانة حالياً
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row g-4 mt-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="mb-0">
                    <i class="fas fa-bolt me-2 text-primary"></i>
                    إجراءات سريعة
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <a href="{{ route('items.create') }}" class="btn btn-outline-primary w-100 py-3">
                            <i class="fas fa-plus-circle fa-2x d-block mb-2"></i>
                            <strong>إضافة مادة جديدة</strong>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('barcodes.generate') }}" class="btn btn-outline-success w-100 py-3">
                            <i class="fas fa-barcode fa-2x d-block mb-2"></i>
                            <strong>توليد باركودات</strong>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('devices.create') }}" class="btn btn-outline-warning w-100 py-3">
                            <i class="fas fa-computer fa-2x d-block mb-2"></i>
                            <strong>تسجيل جهاز</strong>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('reports.index') }}" class="btn btn-outline-info w-100 py-3">
                            <i class="fas fa-chart-line fa-2x d-block mb-2"></i>
                            <strong>عرض التقارير</strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // يمكنك إضافة JavaScript إضافي هنا
    console.log('Dashboard loaded successfully');
</script>
@endpush