@extends('layouts.app')

@section('title', 'استيراد التأشيرات')

@push('styles')
<style>
    .page-header {
        background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
        border-radius: 1rem;
        padding: 1.5rem 2rem;
        margin-bottom: 1.5rem;
        color: white;
    }
    .upload-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        border: none;
    }
    .upload-zone {
        border: 2px dashed #FF9800;
        border-radius: 1rem;
        padding: 3rem;
        text-align: center;
        background: rgba(255, 152, 0, 0.03);
        transition: all 0.3s;
        cursor: pointer;
    }
    .upload-zone:hover {
        background: rgba(255, 152, 0, 0.08);
        border-color: #F57C00;
    }
    .upload-zone.dragover {
        background: rgba(255, 152, 0, 0.15);
        border-color: #F57C00;
    }
    .upload-icon {
        font-size: 4rem;
        color: #FF9800;
        margin-bottom: 1rem;
    }
    .btn-primary {
        background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
        border: none;
    }
    .btn-primary:hover {
        background: linear-gradient(135deg, #F57C00 0%, #FF9800 100%);
    }
    .info-card {
        background: rgba(255, 152, 0, 0.05);
        border: 1px solid rgba(255, 152, 0, 0.1);
        border-radius: 0.75rem;
    }
    .info-card h6 {
        color: #FF9800;
    }
    .column-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .column-list li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
    }
    .column-list li:last-child {
        border-bottom: none;
    }
    .column-name {
        font-weight: 600;
        color: #FF9800;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h4><i class='bx bx-import'></i> استيراد التأشيرات</h4>
                <p class="mb-0">استيراد بيانات التأشيرات من ملف Excel</p>
            </div>
            <a href="{{ route('visas.index') }}" class="btn btn-light">
                <i class='bx bx-arrow-back'></i> العودة
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card upload-card">
                <div class="card-body p-4">
                    @if(session('error'))
                        <div class="alert alert-danger mb-4">
                            <i class='bx bx-error-circle'></i> {{ session('error') }}
                        </div>
                    @endif

                    <form action="{{ route('visas.import.store') }}" method="POST" enctype="multipart/form-data" id="importForm">
                        @csrf

                        <div class="upload-zone" id="uploadZone" onclick="document.getElementById('fileInput').click()">
                            <i class='bx bx-cloud-upload upload-icon'></i>
                            <h5>اسحب الملف هنا أو انقر للاختيار</h5>
                            <p class="text-muted mb-0">يدعم ملفات Excel (.xlsx, .xls) بحد أقصى 10MB</p>
                            <input type="file" name="file" id="fileInput" accept=".xlsx,.xls" class="d-none" required>
                            <div id="fileName" class="mt-3 text-success fw-bold" style="display: none;"></div>
                        </div>

                        <div class="mt-4 d-flex gap-3 justify-content-center">
                            <button type="submit" class="btn btn-primary px-5" id="submitBtn" disabled>
                                <i class='bx bx-upload'></i> استيراد
                            </button>
                            <a href="{{ route('visas.index') }}" class="btn btn-outline-secondary px-4">
                                <i class='bx bx-x'></i> إلغاء
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card info-card">
                <div class="card-body">
                    <h6><i class='bx bx-info-circle'></i> تنسيق الملف المطلوب</h6>
                    <p class="text-muted small">يجب أن يحتوي ملف Excel على الأعمدة التالية:</p>
                    <ul class="column-list">
                        <li>
                            <span class="column-name">رقم الصادر</span>
                            <span class="text-muted">مطلوب</span>
                        </li>
                        <li>
                            <span class="column-name">الرقم الموحد</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">رقم السجل</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">نوع التأشيرة</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">جهة القدوم</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">الشركة</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">المهنة</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">السمسار</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">الكمية</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">التاريخ</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">الحساب البنكي</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                        <li>
                            <span class="column-name">ملاحظات</span>
                            <span class="text-muted">اختياري</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card info-card mt-3">
                <div class="card-body">
                    <h6><i class='bx bx-bulb'></i> نصائح</h6>
                    <ul class="mb-0 ps-3 small text-muted">
                        <li class="mb-2">تأكد أن الصف الأول يحتوي على عناوين الأعمدة</li>
                        <li class="mb-2">رقم الصادر يجب أن يكون فريداً لكل سجل</li>
                        <li class="mb-2">في حالة تكرار رقم الصادر سيتم تحديث البيانات</li>
                        <li>صيغ التاريخ المدعومة: dd/mm/yyyy أو yyyy-mm-dd</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('fileInput');
    const fileName = document.getElementById('fileName');
    const submitBtn = document.getElementById('submitBtn');

    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            fileName.textContent = this.files[0].name;
            fileName.style.display = 'block';
            submitBtn.disabled = false;
        }
    });

    uploadZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('dragover');
    });

    uploadZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');
    });

    uploadZone.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');
        if (e.dataTransfer.files.length > 0) {
            fileInput.files = e.dataTransfer.files;
            fileName.textContent = e.dataTransfer.files[0].name;
            fileName.style.display = 'block';
            submitBtn.disabled = false;
        }
    });
</script>
@endpush
@endsection