@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('healthcare.settings.services') }}" 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-red-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-red-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-red-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-red-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>
                    </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>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- الجانب الأيمن - نموذج الاستيراد -->
            <div class="lg:col-span-2">
                <!-- بطاقة زر تحميل القالب -->
                <div class="bg-gradient-to-br from-red-50 to-red-100 border-2 border-red-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-red-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('healthcare.settings.services.import.download-template') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-red-600 to-red-700 text-white font-semibold rounded-lg hover:from-red-700 hover:to-red-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('healthcare.settings.services.import.store') }}" method="POST" enctype="multipart/form-data">
                        @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-red-500 hover:bg-red-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-red-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>

                        <!-- الأزرار -->
                        <div class="flex gap-3">
                            <button type="submit" class="w-full 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 disabled:opacity-50" id="submitBtn">
                                <i class="fas fa-upload ml-2"></i>
                                <span>بدء استيراد الخدمات</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- مودال التقدم (Progress Modal) -->
    <div id="progressModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
        <div class="relative bg-white rounded-xl shadow-2xl p-8 max-w-sm w-full mx-4">
            <div class="text-center">
                <div class="mb-4 inline-flex items-center justify-center w-16 h-16 bg-red-50 rounded-full">
                    <i class="fas fa-spinner fa-spin text-red-600 text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-black mb-2">جاري استيراد البيانات...</h3>
                <p class="text-black mb-6">يرجى الانتظار، قد تستغرق هذه العملية بضع دقائق حسب حجم البيانات.</p>
                
                <!-- شريط التقدم (بسيط) -->
                <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
                    <div class="bg-red-600 h-2.5 rounded-full animate-pulse" style="width: 100%"></div>
                </div>
                
                <p class="text-xs text-black italic">لا تقم بإغلاق الصفحة أو تحديثها</p>
            </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');
        const importForm = document.getElementById('importForm');
        const progressModal = document.getElementById('progressModal');
        const submitBtn = document.getElementById('submitBtn');

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

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

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('border-red-500', 'bg-red-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');
            }
        }

        // التعامل مع تقديم النموذج
        importForm.addEventListener('submit', function(e) {
            if (fileInput.files.length > 0) {
                progressModal.classList.remove('hidden');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin ml-2"></i> جاري الرفع...';
            }
        });
    });
</script>
@endpush
@endsection