@extends('layouts.app')

@section('title', 'استيراد العمالة المنزلية')

@push('styles')
<style>
    .import-header {
        background: linear-gradient(135deg, #9C27B0 0%, #E040FB 100%);
        border-radius: 1rem;
        padding: 2rem;
        color: white;
        margin-bottom: 1.5rem;
    }
    .import-header h4 {
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    .import-card {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    }
    .import-card .card-body {
        padding: 2rem;
    }
    .drag-drop-zone {
        border: 2px dashed #9C27B0;
        border-radius: 1rem;
        padding: 3rem;
        text-align: center;
        background: rgba(156, 39, 176, 0.03);
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
    }
    .drag-drop-zone:hover,
    .drag-drop-zone.drag-over {
        background: rgba(156, 39, 176, 0.08);
        border-color: #E040FB;
    }
    .drag-drop-zone i {
        font-size: 4rem;
        color: #9C27B0;
        margin-bottom: 1rem;
    }
    .drag-drop-zone h5 {
        color: #333;
        font-weight: 600;
    }
    .drag-drop-zone p {
        color: #697a8d;
        font-size: 0.9rem;
    }
    .drag-drop-zone input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    .file-selected {
        background: rgba(156, 39, 176, 0.1);
        border: 1px solid rgba(156, 39, 176, 0.3);
        padding: 1rem;
        border-radius: 0.75rem;
        margin-top: 1rem;
        display: none;
    }
    .file-selected.show {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .file-selected i {
        font-size: 2rem;
        color: #9C27B0;
    }
    .file-info {
        flex: 1;
    }
    .file-name {
        font-weight: 600;
        color: #333;
    }
    .file-size {
        font-size: 0.8rem;
        color: #697a8d;
    }
    .instructions-card {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    }
    .instructions-card .card-header {
        background: white;
        border-bottom: 1px solid #e9ecef;
        padding: 1rem 1.5rem;
    }
    .instructions-card .card-header h6 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-weight: 600;
    }
    .instructions-card .card-header h6 i {
        color: #9C27B0;
    }
    .instructions-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .instructions-list li {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .instructions-list li:last-child {
        border-bottom: none;
    }
    .instructions-list li i {
        color: #9C27B0;
        margin-top: 0.2rem;
    }
    .column-table {
        font-size: 0.85rem;
    }
    .column-table th {
        background: rgba(156, 39, 176, 0.1);
        color: #9C27B0;
        font-weight: 600;
    }
    .column-table td {
        vertical-align: middle;
    }
    .column-required {
        color: #ff3e1d;
    }
    .column-optional {
        color: #697a8d;
    }
    .submit-btn {
        background: linear-gradient(135deg, #9C27B0 0%, #E040FB 100%);
        border: none;
        padding: 0.875rem 2rem;
        font-weight: 600;
        border-radius: 0.75rem;
        transition: all 0.3s ease;
    }
    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
    }
    .submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }
</style>
@endpush

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

    <div class="row">
        <!-- Upload Form -->
        <div class="col-lg-7 mb-4">
            <div class="card import-card">
                <div class="card-body">
                    <form action="{{ route('domestic-workers.import.store') }}" method="POST" enctype="multipart/form-data" id="importForm">
                        @csrf

                        <div class="drag-drop-zone" id="dropZone">
                            <i class='bx bx-cloud-upload'></i>
                            <h5>اسحب ملف Excel هنا</h5>
                            <p>أو انقر لاختيار ملف من جهازك</p>
                            <p class="text-muted small">الصيغ المدعومة: .xlsx, .xls</p>
                            <input type="file" name="file" id="fileInput" accept=".xlsx,.xls" required>
                        </div>

                        <div class="file-selected" id="fileSelected">
                            <i class='bx bxs-file-doc'></i>
                            <div class="file-info">
                                <div class="file-name" id="fileName"></div>
                                <div class="file-size" id="fileSize"></div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-danger" id="removeFile">
                                <i class='bx bx-x'></i>
                            </button>
                        </div>

                        @error('file')
                        <div class="alert alert-danger mt-3">
                            <i class='bx bx-error-circle'></i> {{ $message }}
                        </div>
                        @enderror

                        <div class="d-flex gap-3 mt-4">
                            <button type="submit" class="btn btn-primary submit-btn flex-grow-1" id="submitBtn" disabled>
                                <i class='bx bx-import'></i> استيراد البيانات
                            </button>
                            <a href="{{ route('domestic-workers.template') }}" class="btn btn-outline-success">
                                <i class='bx bx-download'></i> تحميل نموذج Excel
                            </a>
                            <a href="{{ route('domestic-workers.index') }}" class="btn btn-outline-secondary">
                                <i class='bx bx-x'></i> إلغاء
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Instructions -->
        <div class="col-lg-5">
            <div class="card instructions-card mb-4">
                <div class="card-header">
                    <h6><i class='bx bx-info-circle'></i> تعليمات الاستيراد</h6>
                </div>
                <div class="card-body">
                    <ul class="instructions-list">
                        <li>
                            <i class='bx bx-check-circle'></i>
                            <span>تأكد من أن ملف Excel يحتوي على رؤوس الأعمدة في الصف الأول</span>
                        </li>
                        <li>
                            <i class='bx bx-check-circle'></i>
                            <span>رقم الإقامة يجب أن يكون فريداً لكل عامل</span>
                        </li>
                        <li>
                            <i class='bx bx-check-circle'></i>
                            <span>صيغة التاريخ: يوم/شهر/سنة هجري (مثال: 15/06/1446)</span>
                        </li>
                        <li>
                            <i class='bx bx-check-circle'></i>
                            <span>السجلات الموجودة سيتم تحديثها بناءً على رقم الإقامة</span>
                        </li>
                        <li>
                            <i class='bx bx-check-circle'></i>
                            <span>الحد الأقصى لحجم الملف: 10 ميجابايت</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card instructions-card">
                <div class="card-header">
                    <h6><i class='bx bx-table'></i> أعمدة الملف المطلوبة</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table column-table mb-0">
                            <thead>
                                <tr>
                                    <th>اسم العمود</th>
                                    <th>الحالة</th>
                                    <th>مثال</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>اسم العامل</td>
                                    <td><span class="column-required">مطلوب</span></td>
                                    <td>أحمد محمد</td>
                                </tr>
                                <tr>
                                    <td>الجنسية</td>
                                    <td><span class="column-optional">اختياري</span></td>
                                    <td>فلبيني</td>
                                </tr>
                                <tr>
                                    <td>صاحب العمل</td>
                                    <td><span class="column-required">مطلوب</span></td>
                                    <td>محمد أحمد</td>
                                </tr>
                                <tr>
                                    <td>السمسار</td>
                                    <td><span class="column-optional">اختياري</span></td>
                                    <td>خالد</td>
                                </tr>
                                <tr>
                                    <td>رقم الإقامة</td>
                                    <td><span class="column-required">مطلوب</span></td>
                                    <td>2123456789</td>
                                </tr>
                                <tr>
                                    <td>المهنة</td>
                                    <td><span class="column-optional">اختياري</span></td>
                                    <td>سائق خاص</td>
                                </tr>
                                <tr>
                                    <td>تاريخ انتهاء الاقامة</td>
                                    <td><span class="column-optional">اختياري</span></td>
                                    <td>15/06/1446</td>
                                </tr>
                                <tr>
                                    <td>ملاحظات</td>
                                    <td><span class="column-optional">اختياري</span></td>
                                    <td>ملاحظة...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const fileSelected = document.getElementById('fileSelected');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const removeFile = document.getElementById('removeFile');
    const submitBtn = document.getElementById('submitBtn');
    const importForm = document.getElementById('importForm');

    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    function handleFile(file) {
        if (file) {
            const validTypes = [
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'application/vnd.ms-excel'
            ];

            if (!validTypes.includes(file.type) && !file.name.match(/\.(xlsx|xls)$/i)) {
                Swal.fire({
                    icon: 'error',
                    title: 'نوع ملف غير مدعوم',
                    text: 'يرجى اختيار ملف Excel بصيغة .xlsx أو .xls',
                    confirmButtonColor: '#9C27B0'
                });
                return;
            }

            if (file.size > 10 * 1024 * 1024) {
                Swal.fire({
                    icon: 'error',
                    title: 'حجم الملف كبير',
                    text: 'الحد الأقصى لحجم الملف هو 10 ميجابايت',
                    confirmButtonColor: '#9C27B0'
                });
                return;
            }

            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileSelected.classList.add('show');
            submitBtn.disabled = false;
        }
    }

    fileInput.addEventListener('change', function() {
        handleFile(this.files[0]);
    });

    dropZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });

    dropZone.addEventListener('dragleave', function() {
        dropZone.classList.remove('drag-over');
    });

    dropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        dropZone.classList.remove('drag-over');

        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFile(files[0]);
        }
    });

    removeFile.addEventListener('click', function() {
        fileInput.value = '';
        fileSelected.classList.remove('show');
        submitBtn.disabled = true;
    });

    importForm.addEventListener('submit', function() {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> جاري الاستيراد...';
    });
});
</script>
@endpush