@extends('layouts.app')
@section('title', 'استيراد بيانات البصمة - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">استيراد بيانات البصمة</h1>
        <p class="page-subtitle">رفع ملف CSV أو Excel من جهاز البصمة</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('biometric.devices') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">إعدادات الاستيراد</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('biometric.import.process') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">ملف البيانات</label>
                    <input type="file" name="file" class="form-input" accept=".csv,.txt,.xlsx,.xls" required>
                    <span class="form-hint">CSV, TXT, Excel — حد أقصى 10MB</span>
                </div>
                <div class="form-group">
                    <label class="form-label">الجهاز</label>
                    <select name="device_id" class="form-select">
                        <option value="">بدون ربط بجهاز</option>
                        @foreach($devices as $device)
                            <option value="{{ $device->id }}">{{ $device->name }} ({{ $device->device_code }})</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:16px 0">
                <h4 style="margin:0 0 12px;font-size:14px;color:var(--text)"><i class="fas fa-cog"></i> إعدادات تنسيق الملف</h4>
                <div class="form-grid cols-3">
                    <div class="form-group">
                        <label class="form-label required">الفاصل</label>
                        <select name="delimiter" class="form-select" required>
                            <option value=",">فاصلة (,)</option>
                            <option value=";">فاصلة منقوطة (;)</option>
                            <option value="tab">Tab</option>
                            <option value="|">خط عمودي (|)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">صيغة التاريخ</label>
                        <select name="date_format" class="form-select" required>
                            <option value="Y-m-d">2024-01-15 (Y-m-d)</option>
                            <option value="d/m/Y">15/01/2024 (d/m/Y)</option>
                            <option value="m/d/Y">01/15/2024 (m/d/Y)</option>
                            <option value="d-m-Y">15-01-2024 (d-m-Y)</option>
                            <option value="Y/m/d">2024/01/15 (Y/m/d)</option>
                        </select>
                    </div>
                    <div class="form-group" style="display:flex;align-items:end;gap:8px;padding-bottom:4px">
                        <label style="display:flex;align-items:center;gap:6px;cursor:pointer">
                            <input type="checkbox" name="skip_header" value="1" checked> تخطي السطر الأول (العناوين)
                        </label>
                    </div>
                </div>
                <div class="form-grid cols-4">
                    <div class="form-group">
                        <label class="form-label required">عمود رقم الموظف</label>
                        <input type="number" name="code_column" class="form-input" value="0" min="0" required>
                        <span class="form-hint">يبدأ من 0</span>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">عمود التاريخ</label>
                        <input type="number" name="date_column" class="form-input" value="1" min="0" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">عمود الوقت</label>
                        <input type="number" name="time_column" class="form-input" value="2" min="0" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">عمود النوع (حضور/انصراف)</label>
                        <input type="number" name="type_column" class="form-input" value="3" min="0">
                        <span class="form-hint">اتركه فارغاً إذا غير متوفر</span>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary"><i class="fas fa-upload"></i> استيراد البيانات</button>
                <a href="{{ route('biometric.devices') }}" class="btn btn-ghost">إلغاء</a>
            </div>
        </form>
    </div>
</div>

@if($recentBatches->isNotEmpty())
<div class="card" style="margin-top:20px">
    <div class="card-header">
        <h3 class="card-title">آخر عمليات الاستيراد</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr><th>رقم الدفعة</th><th>عدد السجلات</th><th>تاريخ الاستيراد</th><th>الإجراءات</th></tr>
            </thead>
            <tbody>
                @foreach($recentBatches as $batch)
                <tr>
                    <td><span class="code-badge">{{ $batch->import_batch }}</span></td>
                    <td>{{ number_format($batch->total) }}</td>
                    <td>{{ \Carbon\Carbon::parse($batch->imported_at)->format('Y/m/d H:i') }}</td>
                    <td>
                        <a href="{{ route('biometric.logs', ['batch' => $batch->import_batch]) }}" class="action-btn" title="عرض السجلات"><i class="fas fa-eye"></i></a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@endsection