@extends('layouts.app')
@section('title', 'أجهزة البصمة - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">أجهزة البصمة</h1>
        <p class="page-subtitle">إدارة أجهزة البصمة وتتبع المزامنة</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('biometric.import') }}" class="btn btn-success"><i class="fas fa-file-import"></i> استيراد بيانات</a>
        <button class="btn btn-primary" onclick="document.getElementById('addDeviceModal').style.display='flex'"><i class="fas fa-plus"></i> إضافة جهاز</button>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background:var(--primary-light);color:var(--primary)"><i class="fas fa-fingerprint"></i></div>
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-label">إجمالي الأجهزة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:var(--success-light);color:var(--success)"><i class="fas fa-check-circle"></i></div>
        <div class="stat-value">{{ $stats['active'] }}</div>
        <div class="stat-label">أجهزة نشطة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:var(--warning-light);color:var(--warning)"><i class="fas fa-database"></i></div>
        <div class="stat-value">{{ number_format($stats['total_logs']) }}</div>
        <div class="stat-label">إجمالي السجلات</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:var(--danger-light);color:var(--danger)"><i class="fas fa-sync-alt"></i></div>
        <div class="stat-value">{{ $stats['pending_sync'] }}</div>
        <div class="stat-label">بانتظار المزامنة</div>
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>كود الجهاز</th>
                    <th>اسم الجهاز</th>
                    <th>الماركة / الموديل</th>
                    <th>الموقع</th>
                    <th>الحالة</th>
                    <th>السجلات</th>
                    <th>آخر مزامنة</th>
                    <th>الإجراءات</th>
                </tr>
            </thead>
            <tbody>
                @forelse($devices as $device)
                <tr>
                    <td><span class="code-badge">{{ $device->device_code }}</span></td>
                    <td><strong>{{ $device->name }}</strong></td>
                    <td>{{ $device->brand }} {{ $device->model }}</td>
                    <td>{{ $device->location ?? '—' }}</td>
                    <td>
                        <span class="status-badge {{ $device->status === 'active' ? 'status-active' : ($device->status === 'maintenance' ? 'status-pending' : 'status-expired') }}">
                            {{ $device->status_label }}
                        </span>
                    </td>
                    <td>{{ number_format($device->logs_count) }}</td>
                    <td>{{ $device->last_sync_at ? $device->last_sync_at->format('Y/m/d H:i') : '—' }}</td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ route('biometric.device.show', $device) }}" class="action-btn" title="عرض"><i class="fas fa-eye"></i></a>
                            <form method="POST" action="{{ route('biometric.device.delete', $device) }}" style="display:inline" onsubmit="return confirm('هل أنت متأكد؟')">
                                @csrf @method('DELETE')
                                <button class="action-btn danger" title="حذف"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8">
                        <div class="empty-state">
                            <i class="fas fa-fingerprint"></i>
                            <h3>لا توجد أجهزة بصمة</h3>
                            <p>قم بإضافة أول جهاز بصمة</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($devices->hasPages())
        <div class="pagination-wrap">{{ $devices->withQueryString()->links() }}</div>
    @endif
</div>

{{-- Add Device Modal --}}
<div id="addDeviceModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center">
    <div class="card" style="width:600px;max-width:95%;max-height:90vh;overflow-y:auto">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center">
            <h3 class="card-title">إضافة جهاز بصمة</h3>
            <button onclick="document.getElementById('addDeviceModal').style.display='none'" style="background:none;border:none;font-size:20px;cursor:pointer">&times;</button>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('biometric.device.store') }}">
                @csrf
                <div class="form-grid cols-2">
                    <div class="form-group">
                        <label class="form-label required">اسم الجهاز</label>
                        <input type="text" name="name" class="form-input" required placeholder="مثال: جهاز البصمة - المدخل الرئيسي">
                    </div>
                    <div class="form-group">
                        <label class="form-label required">كود الجهاز</label>
                        <input type="text" name="device_code" class="form-input" required placeholder="مثال: BIO-001">
                    </div>
                    <div class="form-group">
                        <label class="form-label">الماركة</label>
                        <select name="brand" class="form-select">
                            <option value="">اختر الماركة</option>
                            <option value="ZKTeco">ZKTeco</option>
                            <option value="Hikvision">Hikvision</option>
                            <option value="Suprema">Suprema</option>
                            <option value="Anviz">Anviz</option>
                            <option value="FingerTec">FingerTec</option>
                            <option value="أخرى">أخرى</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">الموديل</label>
                        <input type="text" name="model" class="form-input" placeholder="مثال: K40">
                    </div>
                    <div class="form-group">
                        <label class="form-label">عنوان IP</label>
                        <input type="text" name="ip_address" class="form-input" placeholder="192.168.1.100">
                    </div>
                    <div class="form-group">
                        <label class="form-label">المنفذ</label>
                        <input type="number" name="port" class="form-input" placeholder="4370">
                    </div>
                    <div class="form-group">
                        <label class="form-label">الموقع</label>
                        <input type="text" name="location" class="form-input" placeholder="مثال: المدخل الرئيسي">
                    </div>
                    <div class="form-group">
                        <label class="form-label">القسم</label>
                        <select name="department_id" class="form-select">
                            <option value="">عام - كل الأقسام</option>
                            @foreach(\App\Models\Department::orderBy('name')->get() as $dept)
                                <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">ملاحظات</label>
                    <textarea name="notes" class="form-textarea" rows="2"></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> حفظ</button>
                    <button type="button" class="btn btn-ghost" onclick="document.getElementById('addDeviceModal').style.display='none'">إلغاء</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection