@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-4xl mx-auto">
        <!-- رأس الصفحة -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">استيراد شجرة الحسابات</h1>
                    <p class="text-black">قم باستيراد شجرة الحسابات من ملف Excel</p>
                </div>
                <a href="{{ route('accounting.chart-of-accounts.tree') }}" class="inline-flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white font-semibold rounded-lg transition-colors duration-200">
                    <i class="fas fa-arrow-right ml-2"></i>
                    رجوع
                </a>
            </div>
        </div>

        <!-- عرض رسائل الخطأ -->
        @if ($errors->any())
        <div class="bg-red-50 border-l-4 border-red-500 p-6 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-times-circle text-red-500 text-2xl"></i>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-lg font-bold text-red-800 mb-3">❌ حدثت أخطاء أثناء الاستيراد</h3>
                    <div class="max-h-96 overflow-y-auto">
                        <ul class="list-none text-sm text-red-700 space-y-2">
                            @foreach ($errors->all() as $error)
                                <li class="flex items-start">
                                    <span class="inline-block w-2 h-2 bg-red-500 rounded-full mt-2 ml-3 flex-shrink-0"></span>
                                    <span>{{ $error }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- عرض أخطاء الاستيراد المتعددة -->
        @if (session('import_error'))
        <div class="bg-red-50 border-l-4 border-red-500 p-6 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-lg font-bold text-red-800 mb-3">⚠️ فشل الاستيراد</h3>
                    <div class="bg-red-100 border border-red-300 rounded-lg p-4 max-h-96 overflow-y-auto">
                        <pre class="text-sm text-red-700 whitespace-pre-wrap font-mono">{{ session('import_error') }}</pre>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- عرض قائمة بالأخطاء المفصلة -->
        @if (session('import_errors'))
        <div class="bg-red-50 border-l-4 border-red-500 p-6 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-list text-red-500 text-2xl"></i>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-lg font-bold text-red-800 mb-3">📋 تفاصيل الأخطاء ({{ session('error_count', 0) }} خطأ)</h3>
                    <div class="max-h-96 overflow-y-auto">
                        <ul class="list-none text-sm text-red-700 space-y-2">
                            @foreach (session('import_errors', []) as $error)
                                <li class="flex items-start bg-white p-3 rounded border-l-2 border-red-500">
                                    <i class="fas fa-arrow-left text-red-500 mt-1 ml-3 flex-shrink-0"></i>
                                    <span>{{ $error }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- رسالة النجاح -->
        @if (session('success'))
        <div class="bg-green-50 border-l-4 border-green-500 p-6 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-500 text-2xl"></i>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-lg font-bold text-green-800">{{ session('success') }}</h3>
                </div>
            </div>
        </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- نموذج الاستيراد -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
                    <h2 class="text-xl font-semibold text-black mb-6">اختر ملف Excel</h2>

                    <form action="{{ route('accounting.chart-of-accounts.import') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                        @csrf

                        <!-- حقل الملف -->
                        <div>
                            <label for="file" class="block text-sm font-medium text-black mb-2">
                                <i class="fas fa-file-excel text-green-500 ml-1"></i>
                                ملف Excel
                            </label>
                            <div class="relative border-2 border-dashed border-gray-300 rounded-lg p-8 hover:border-blue-400 transition-colors duration-200">
                                <input type="file" name="file" id="file" accept=".xlsx,.xls,.csv" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" required onchange="updateFileName(this)">
                                <div class="text-center">
                                    <i class="fas fa-cloud-upload-alt text-4xl text-black mb-2"></i>
                                    <p class="text-black font-medium">اسحب الملف هنا أو انقر لاختياره</p>
                                    <p class="text-sm text-black mt-1">الملفات المدعومة: Excel (.xlsx, .xls) و CSV</p>
                                </div>
                            </div>
                            <div id="file-name" class="mt-2 text-sm text-black hidden">
                                الملف المختار: <span id="name" class="font-medium"></span>
                            </div>
                            @error('file')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- أزرار الإجراءات -->
                        <!-- زر تحميل القالب -->
<div class="mb-6">
    <a href="{{ route('accounting.chart-of-accounts.template') }}" class="inline-flex items-center px-6 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl">
        <i class="fas fa-download ml-2"></i>
        تحميل قالب الاستيراد
    </a>
</div>

                        <div class="flex gap-3 justify-end">
                            <a href="{{ route('accounting.chart-of-accounts.tree') }}" class="px-6 py-2 border border-gray-300 text-black font-semibold rounded-lg hover:bg-gray-50 transition-colors duration-200">
                                إلغاء
                            </a>
                            <button type="submit" class="px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl">
                                <i class="fas fa-upload ml-2"></i>
                                استيراد
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- معلومات مساعدة -->
            <div>
                <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg mb-6">
                    <h3 class="text-lg font-semibold text-blue-900 mb-4">
                        <i class="fas fa-info-circle ml-2"></i>
                        معلومات الاستيراد
                    </h3>
                    <ul class="space-y-3 text-sm text-blue-800">
                        <li>
                            <strong>✓ تنسيق الملف:</strong><br>
                            يجب أن يحتوي الملف على الأعمدة التالية:
                            <ul class="mt-2 space-y-1 text-blue-700 ml-4">
                                <li>• الرمز (مطلوب)</li>
                                <li>• الاسم (مطلوب)</li>
                                <li>• الحساب الأب (الرمز)</li>
                                <li>• نوع الحساب</li>
                                <li>• نوع الرصيد</li>
                                <li>• حساب رئيسي؟</li>
                                <li>• الفئة</li>
                                <li>• الوصف</li>
                                <li>• الحالة</li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg mb-6">
                    <h3 class="text-lg font-semibold text-amber-900 mb-4">
                        <i class="fas fa-exclamation-triangle ml-2"></i>
                        تنويهات مهمة
                    </h3>
                    <ul class="space-y-2 text-sm text-amber-800">
                        <li>• يجب أن تكون الحسابات الأب موجودة في النظام أولاً</li>
                        <li>• رموز الحسابات يجب أن تكون فريدة</li>
                        <li>• تأكد من صحة البيانات قبل الاستيراد</li>
                        <li>• يتم التحقق من جميع البيانات تلقائياً</li>
                    </ul>
                </div>

                <div class="bg-green-50 border-l-4 border-green-500 p-6 rounded-r-lg">
                    <h3 class="text-lg font-semibold text-green-900 mb-4">
                        <i class="fas fa-download ml-2"></i>
                        تحميل نموذج
                    </h3>
                    <p class="text-sm text-green-800 mb-4">
                        يمكنك تحميل نموذج مثال لفهم صيغة الملف المطلوبة
                    </p>
                    <a href="{{ route('accounting.chart-of-accounts.export') }}" class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors duration-200">
                        <i class="fas fa-download ml-2"></i>
                        تصدير كنموذج
                    </a>
                </div>
            </div>
        </div>

        <!-- جدول مثال على البيانات -->
        <div class="mt-8 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
            <div class="p-6 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-black">
                    <i class="fas fa-table ml-2"></i>
                    مثال على البيانات المطلوبة
                </h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-right font-semibold text-sm text-black">الرمز</th>
                            <th class="px-4 py-3 text-right font-semibold text-sm text-black">الاسم</th>
                            <th class="px-4 py-3 text-right font-semibold text-sm text-black">الحساب الأب</th>
                            <th class="px-4 py-3 text-right font-semibold text-sm text-black">نوع الحساب</th>
                            <th class="px-4 py-3 text-right font-semibold text-sm text-black">نوع الرصيد</th>
                            <th class="px-4 py-3 text-right font-semibold text-sm text-black">الحالة</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm">1</td>
                            <td class="px-4 py-3 text-sm">الأصول</td>
                            <td class="px-4 py-3 text-sm">-</td>
                            <td class="px-4 py-3 text-sm">أصول</td>
                            <td class="px-4 py-3 text-sm">مدين</td>
                            <td class="px-4 py-3 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">نشط</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm">101</td>
                            <td class="px-4 py-3 text-sm">البنك</td>
                            <td class="px-4 py-3 text-sm">1</td>
                            <td class="px-4 py-3 text-sm">أصول</td>
                            <td class="px-4 py-3 text-sm">مدين</td>
                            <td class="px-4 py-3 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">نشط</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm">2</td>
                            <td class="px-4 py-3 text-sm">الخصوم</td>
                            <td class="px-4 py-3 text-sm">-</td>
                            <td class="px-4 py-3 text-sm">خصوم</td>
                            <td class="px-4 py-3 text-sm">دائن</td>
                            <td class="px-4 py-3 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">نشط</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
function updateFileName(input) {
    const fileNameDiv = document.getElementById('file-name');
    const fileNameSpan = document.getElementById('name');

    if (input.files && input.files[0]) {
        fileNameSpan.textContent = input.files[0].name;
        fileNameDiv.classList.remove('hidden');
    } else {
        fileNameDiv.classList.add('hidden');
    }
}

// دعم السحب والإفلات
const fileInput = document.getElementById('file');
const dropZone = fileInput.parentElement;

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, highlight, false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, unhighlight, false);
});

function highlight(e) {
    dropZone.classList.add('border-blue-400', 'bg-blue-50');
}

function unhighlight(e) {
    dropZone.classList.remove('border-blue-400', 'bg-blue-50');
}

dropZone.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    fileInput.files = files;
    updateFileName(fileInput);
}
</script>
@endsection