@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('inventory.items.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 text-black rounded-lg hover:bg-gray-300 transition">
                    <i class="fas fa-arrow-right ml-2"></i>
                    <span>العودة</span>
                </a>
            </div>
        </div>

        <!-- رسائل التنبيه -->
        @if ($errors->any())
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                    </div>
                    <div class="mr-3">
                        <h3 class="text-red-700 font-bold mb-2">حدثت أخطاء:</h3>
                        <ul class="text-red-600 text-sm space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>• {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <!-- المحتوى الرئيسي -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- الجانب الأيسر - التعليمات -->
            <div class="lg:col-span-1">
                <!-- بطاقة التعليمات -->
                <div class="bg-white rounded-xl shadow-lg p-6 sticky top-8">
                    <h3 class="text-lg font-bold text-black mb-4 flex items-center">
                        <i class="fas fa-info-circle text-blue-600 ml-2"></i>
                        <span>خطوات الاستيراد</span>
                    </h3>

                    <div class="space-y-4">
                        <!-- خطوة 1 -->
                        <div class="flex gap-3">
                            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">
                                1
                            </div>
                            <div>
                                <h4 class="font-semibold text-black mb-1">تحميل القالب</h4>
                                <p class="text-sm text-black">انقر على زر "تحميل القالب" لتنزيل ملف Excel بالصيغة الصحيحة</p>
                            </div>
                        </div>

                        <!-- خطوة 2 -->
                        <div class="flex gap-3">
                            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">
                                2
                            </div>
                            <div>
                                <h4 class="font-semibold text-black mb-1">ملء البيانات</h4>
                                <p class="text-sm text-black">أضف الأصناف في الصفوف أسفل رأس الجدول. اتبع نفس الترتيب والتنسيق</p>
                            </div>
                        </div>

                        <!-- خطوة 3 -->
                        <div class="flex gap-3">
                            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">
                                3
                            </div>
                            <div>
                                <h4 class="font-semibold text-black mb-1">اختيار الملف</h4>
                                <p class="text-sm text-black">حدد الملف من جهازك واضغط على زر "استعراض البيانات"</p>
                            </div>
                        </div>

                        <!-- خطوة 4 -->
                        <div class="flex gap-3">
                            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">
                                4
                            </div>
                            <div>
                                <h4 class="font-semibold text-black mb-1">تأكيد الاستيراد</h4>
                                <p class="text-sm text-black">تحقق من البيانات ثم اضغط على "استيراد" لحفظ الأصناف</p>
                            </div>
                        </div>
                    </div>

                    <!-- قائمة بالنقاط المهمة -->
                    <div class="mt-6 pt-6 border-t border-gray-200">
                        <h4 class="font-semibold text-black mb-3 flex items-center">
                            <i class="fas fa-lightbulb text-yellow-500 ml-2"></i>
                            <span>ملاحظات مهمة</span>
                        </h4>
                        <ul class="text-sm text-black space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 ml-2 mt-0.5 flex-shrink-0"></i>
                                <span>تجنب ترك الأعمدة المميزة بـ * فارغة</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 ml-2 mt-0.5 flex-shrink-0"></i>
                                <span>تأكد من تطابق أسماء التصنيفات والوحدات</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 ml-2 mt-0.5 flex-shrink-0"></i>
                                <span>الأسعار والكميات يجب أن تكون أرقام</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 ml-2 mt-0.5 flex-shrink-0"></i>
                                <span>يمكن استيراد حد أقصى 1000 صنف في الملف</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- الجانب الأيمن - نموذج الاستيراد -->
            <div class="lg:col-span-2">
                <!-- بطاقة زر تحميل القالب -->
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 border-2 border-blue-300 rounded-xl p-8 mb-6">
                    <div class="text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 bg-white rounded-full mb-4">
                            <i class="fas fa-download text-blue-600 text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-black mb-2">ابدأ من هنا</h3>
                        <p class="text-black mb-4">انقر على الزر أدناه لتحميل قالب الاستيراد</p>
                        <a href="{{ route('inventory.items.import.download-template') }}" class="inline-flex items-center px-6 py-3 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-file-excel ml-2"></i>
                            <span>تحميل قالب Excel</span>
                        </a>
                    </div>
                </div>

                <!-- نموذج الاستيراد -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <form id="importForm" action="{{ route('inventory.items.import.store') }}" method="POST" enctype="multipart/form-data" novalidate>
                        @csrf

                        <!-- حقل رفع الملف -->
                        <div class="mb-6">
                            <label for="file" class="block text-sm font-semibold text-black mb-3">
                                <i class="fas fa-file-upload ml-1"></i>
                                <span>اختر ملف Excel</span>
                            </label>

                            <div class="relative">
                                <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all" id="dropZone">
                                    <input type="file" id="file" name="file" accept=".xlsx,.xls,.csv" class="hidden" required>
                                    
                                    <div id="filePreview" class="hidden">
                                        <i class="fas fa-check-circle text-green-600 text-4xl mb-2"></i>
                                        <p class="text-green-600 font-semibold" id="fileName"></p>
                                        <p class="text-sm text-black mt-2">
                                            <button type="button" class="text-blue-600 hover:underline" onclick="document.getElementById('file').click()">اختر ملف آخر</button>
                                        </p>
                                    </div>

                                    <div id="fileEmpty">
                                        <i class="fas fa-cloud-upload-alt text-4xl text-black mb-3"></i>
                                        <p class="text-black font-semibold mb-1">اسحب الملف هنا أو انقر لاختياره</p>
                                        <p class="text-sm text-black">صيغ مقبولة: Excel (.xlsx, .xls) أو CSV</p>
                                        <p class="text-xs text-black mt-2">الحد الأقصى: 10 ميجابايت</p>
                                    </div>
                                </div>
                            </div>

                            @error('file')
                                <p class="mt-2 text-sm text-red-600 flex items-center">
                                    <i class="fas fa-exclamation-triangle ml-1"></i>
                                    <span>{{ $message }}</span>
                                </p>
                            @enderror
                        </div>

                        <!-- خيارات متقدمة -->
                        <details class="mb-6">
                            <summary class="cursor-pointer font-semibold text-black hover:text-blue-600 transition flex items-center">
                                <i class="fas fa-cog ml-2"></i>
                                <span>خيارات متقدمة</span>
                                <i class="fas fa-chevron-down text-xs ml-1"></i>
                            </summary>
                            
                            <div class="mt-4 p-4 bg-gray-50 rounded-lg space-y-4">
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="checkbox" name="create_categories" id="create_categories" checked class="w-4 h-4">
                                    <span class="text-sm text-black">إنشاء التصنيفات الجديدة تلقائياً</span>
                                </label>

                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="checkbox" name="skip_duplicates" id="skip_duplicates" class="w-4 h-4">
                                    <span class="text-sm text-black">تجاهل الأصناف المكررة</span>
                                </label>

                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="checkbox" name="activate_all" id="activate_all" checked class="w-4 h-4">
                                    <span class="text-sm text-black">تفعيل جميع الأصناف المستوردة</span>
                                </label>
                            </div>
                        </details>

                        <!-- منطقة المعاينة -->
                        <div id="previewSection" class="mb-6 hidden">
                            <h3 class="font-semibold text-black mb-3 flex items-center">
                                <i class="fas fa-eye text-blue-600 ml-2"></i>
                                <span>معاينة البيانات</span>
                            </h3>

                            <div class="bg-gray-50 rounded-lg p-4 max-h-96 overflow-y-auto">
                                <div id="previewContent"></div>
                            </div>

                            <div id="previewStats" class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700">
                                <i class="fas fa-info-circle ml-1"></i>
                                <span id="previewStatsText"></span>
                            </div>
                        </div>

                        <!-- الأزرار -->
                        <div class="flex gap-3">
                            <button type="button" id="previewBtn" class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gray-200 text-black font-semibold rounded-lg hover:bg-gray-300 transition-all duration-200" onclick="previewFile()">
                                <i class="fas fa-search ml-2"></i>
                                <span>استعراض البيانات</span>
                            </button>

                            <button type="submit" class="flex-1 inline-flex items-center justify-center px-6 py-3 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" id="submitBtn">
                                <i class="fas fa-upload ml-2"></i>
                                <span>استيراد الأصناف</span>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- بطاقة معلومات -->
                <div class="mt-6 bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
                    <h4 class="font-semibold text-blue-900 mb-2 flex items-center">
                        <i class="fas fa-question-circle text-blue-600 ml-2"></i>
                        <span>هل تواجه مشكلة؟</span>
                    </h4>
                    <p class="text-sm text-blue-800">تأكد من أن الملف يتبع نفس تنسيق القالب المحمل. إذا استمرت المشكلة، يمكنك الاتصال بفريق الدعم.</p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dropZone = document.getElementById('dropZone');
        const fileInput = document.getElementById('file');
        const fileEmpty = document.getElementById('fileEmpty');
        const filePreview = document.getElementById('filePreview');
        const fileName = document.getElementById('fileName');

        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('border-blue-500', 'bg-blue-50');
        });

        dropZone.addEventListener('dragleave', () => {
            dropZone.classList.remove('border-blue-500', 'bg-blue-50');
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('border-blue-500', 'bg-blue-50');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                fileInput.files = files;
                updateFileDisplay();
            }
        });

        dropZone.addEventListener('click', () => {
            fileInput.click();
        });

        fileInput.addEventListener('change', updateFileDisplay);

        function updateFileDisplay() {
            const file = fileInput.files[0];
            if (file) {
                fileName.textContent = file.name;
                fileEmpty.classList.add('hidden');
                filePreview.classList.remove('hidden');
            } else {
                fileEmpty.classList.remove('hidden');
                filePreview.classList.add('hidden');
            }
        }
    });

    function previewFile() {
        const file = document.getElementById('file').files[0];
        if (!file) {
            alert('يرجى اختيار ملف أولاً');
            return;
        }

        const formData = new FormData();
        formData.append('file', file);

        fetch('{{ route("inventory.items.import.preview") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showPreview(data.preview, data.stats);
            } else {
                alert('خطأ في معالجة الملف: ' + data.message);
            }
        })
        .catch(error => console.error('Error:', error));
    }

    function showPreview(preview, stats) {
        const previewSection = document.getElementById('previewSection');
        const previewContent = document.getElementById('previewContent');
        const previewStats = document.getElementById('previewStatsText');

        previewContent.innerHTML = preview;
        previewStats.innerHTML = `تم العثور على ${stats.rows} صف و ${stats.columns} عمود`;
        previewSection.classList.remove('hidden');
    }
</script>
@endpush

@endsection