@extends('dashboard.partials.master')

@section('title')
    Upload Resume
@endsection

@section('css')
    <style>
        .drag-area {
            border: 2px dashed #4CAF50;
            padding: 30px;
            border-radius: 5px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .drag-area.active {
            border-color: #2196F3;
            background-color: #E3F2FD;
        }

        .tag-item {
            background: #e9ecef;
            border-radius: 15px;
            padding: 5px 10px;
            margin: 5px;
            display: inline-block;
        }

        .tag-item .remove {
            margin-left: 5px;
            cursor: pointer;
            color: #dc3545;
        }

        .analysis-preview {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
        }

        .skills-cloud span {
            background: #f8f9fa;
            padding: 3px 8px;
            margin: 2px;
            border-radius: 3px;
            display: inline-block;
        }
    </style>
@endsection

@section('content')
    <main class="container hr-section mt-5 mb-5">
        <!-- start breadcrumb -->
        <nav aria-label="breadcrumb mb-5">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Home</a></li>
                <li><a href="{{ route('hr.index') }}">HR AI</a></li>
                <li class="active" aria-current="page">Upload Resume</li>
            </ol>
        </nav>
        <!-- end breadcrumb -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h4>رفع السيرة الذاتية</h4>
                    </div>
                    <div class="card-body">
                        <form id="resumeUploadForm" enctype="multipart/form-data">
                            @csrf
                            <div class="drag-area mb-4">
                                <i class="fas fa-cloud-upload-alt fa-3x mb-3"></i>
                                <h5>اسحب وأفلت الملف هنا أو اضغط للاختيار</h5>
                                <p class="text-muted">PDF فقط، الحد الأقصى 5 ميجابايت</p>
                                <input type="file" name="resume" id="resumeFile" hidden accept=".pdf">
                            </div>

                            <div class="form-group">
                                <label>التصنيفات</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="tagInput" placeholder="أضف تصنيفات...">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-primary" id="addTag">إضافة</button>
                                    </div>
                                </div>
                                <div id="tagsContainer" class="mt-2"></div>
                            </div>

                            <button type="submit" class="btn btn-success mt-3">
                                <i class="fas fa-upload"></i> رفع وتحليل
                            </button>
                        </form>

                        <div id="uploadProgress" class="progress mt-3" style="display: none;">
                            <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Preview Section -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h4>معاينة التحليل</h4>
                    </div>
                    <div class="card-body">
                        <div id="analysisPreview" class="analysis-preview">
                            <div class="text-center text-muted">
                                <i class="fas fa-file-alt fa-3x mb-2"></i>
                                <p>سيظهر هنا تحليل السيرة الذاتية بعد الرفع</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('js')
    <script>
        // assets/js/resume-management.js

        // Initialize components
        $(document).ready(function() {
            initializeDragDrop();
            initializeTagsInput();
            initializeSearch();
            initializeModals();
        });

        // Drag and Drop functionality
        function initializeDragDrop() {
            const dragArea = document.querySelector('.drag-area');
            const input = document.querySelector('#resumeFile');

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

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

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

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

            function highlight(e) {
                dragArea.classList.add('active');
            }

            function unhighlight(e) {
                dragArea.classList.remove('active');
            }

            dragArea.addEventListener('drop', handleDrop);
            dragArea.addEventListener('click', () => input.click());

            function handleDrop(e) {
                const dt = e.dataTransfer;
                const file = dt.files[0];
                handleFile(file);
            }

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

            function handleFile(file) {
                if (file && file.type === 'application/pdf') {
                    // Update UI to show selected file
                    dragArea.innerHTML = `
                <i class="fas fa-file-pdf fa-3x mb-3"></i>
                <h5>${file.name}</h5>
                <p class="text-muted">${(file.size / (1024 * 1024)).toFixed(2)} MB</p>
            `;
                } else {
                    alert('الرجاء اختيار ملف PDF فقط');
                }
            }
        }

        // Form submission and analysis
        $('#resumeUploadForm').on('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const progressBar = $('#uploadProgress');
            const analysisPreview = $('#analysisPreview');

            $.ajax({
                url: '/api/resume/process',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                xhr: function() {
                    const xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            const percent = (e.loaded / e.total) * 100;
                            progressBar.show().find('.progress-bar')
                                .css('width', percent + '%')
                                .text(percent.toFixed(0) + '%');
                        }
                    });
                    return xhr;
                },
                success: function(response) {
                    if (response.success) {
                        showAnalysisPreview(response.data.analysis);
                        toastr.success('تم تحليل السيرة الذاتية بنجاح');
                    }
                },
                error: function(xhr) {
                    toastr.error('حدث خطأ أثناء معالجة الملف');
                }
            });
        });

        function showAnalysisPreview(analysis) {
            $('#analysisPreview').html(`
        <div class="mb-3">
            <h5>${analysis.name}</h5>
            <p class="mb-1">
                <i class="fas fa-envelope"></i> ${analysis.email}<br>
                <i class="fas fa-phone"></i> ${analysis.phone}
            </p>
        </div>

        <div class="mb-3">
            <h6>المهارات</h6>
            <div class="skills-cloud">
                ${analysis.skills.map(skill => `<span>${skill}</span>`).join('')}
            </div>
        </div>

        <div class="mb-3">
            <h6>الخبرات</h6>
            <ul class="list-unstyled">
                ${analysis.experience.map(exp => `
                        <li class="mb-2">
                            <strong>${exp.title}</strong><br>
                            ${exp.company} | ${exp.period}
                        </li>
                    `).join('')}
            </ul>
        </div>

        <div>
            <h6>التعليم</h6>
            <ul class="list-unstyled">
                ${analysis.education.map(edu => `
                        <li>${edu.degree} - ${edu.institution} (${edu.year})</li>
                    `).join('')}
            </ul>
        </div>
    `);
        }

        // Search and filter functionality
        function initializeSearch() {
            const searchForm = $('#searchForm');
            const resultsList = $('#resumesList');

            // Initialize Select2 for better dropdown experience
            $('.select2').select2({
                dir: 'rtl',
                placeholder: 'اختر...',
                allowClear: true
            });

            // Debounced search function
            const performSearch = _.debounce(function() {
                const formData = searchForm.serialize();

                $.get('/api/resume/search?' + formData, function(response) {
                    resultsList.html(response.html);
                    window.history.pushState({}, '', '/hr/resumes?' + formData);
                });
            }, 500);

            // Trigger search on form changes
            searchForm.find('input, select').on('change keyup', performSearch);
        }

        // Modal functionality
        // Modal functionality continued...
        function initializeModals() {
            $('#resumeModal').on('show.bs.modal', function(e) {
                const button = $(e.relatedTarget);
                const resumeId = button.data('resume-id');
                const modal = $(this);

                // Show loading state
                modal.find('.modal-body').html(`
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">جاري التحميل...</span>
                </div>
            </div>
        `);

                // Fetch resume details
                $.get(`/api/resume/${resumeId}`, function(response) {
                    if (response.success) {
                        const resume = response.data;

                        modal.find('.modal-body').html(`
                    <div class="resume-details">
                        <!-- Personal Information -->
                        <div class="card mb-4">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h4>${resume.candidate.name}</h4>
                                        <p class="mb-1">
                                            <i class="fas fa-envelope"></i> ${resume.candidate.email}<br>
                                            <i class="fas fa-phone"></i> ${resume.candidate.phone}
                                        </p>
                                    </div>
                                    <div>
                                        <button class="btn btn-sm btn-outline-primary"
                                                onclick="downloadResume(${resumeId})">
                                            <i class="fas fa-download"></i> تحميل PDF
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Skills Section -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">المهارات</h5>
                            </div>
                            <div class="card-body">
                                <div class="skills-cloud">
                                    ${resume.candidate.skills.map(skill => `
                                            <span class="badge badge-light mr-2 mb-2">${skill}</span>
                                        `).join('')}
                                </div>
                            </div>
                        </div>

                        <!-- Experience Section -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">الخبرات المهنية</h5>
                            </div>
                            <div class="card-body">
                                <div class="timeline">
                                    ${resume.candidate.experience.map(exp => `
                                            <div class="timeline-item">
                                                <div class="timeline-marker"></div>
                                                <div class="timeline-content">
                                                    <h6 class="mb-1">${exp.title}</h6>
                                                    <p class="mb-1">${exp.company}</p>
                                                    <small class="text-muted">${exp.period}</small>
                                                    <p class="mt-2">${exp.description || ''}</p>
                                                </div>
                                            </div>
                                        `).join('')}
                                </div>
                            </div>
                        </div>

                        <!-- Education Section -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">التعليم</h5>
                            </div>
                            <div class="card-body">
                                ${resume.candidate.education.map(edu => `
                                        <div class="mb-3">
                                            <h6 class="mb-1">${edu.degree}</h6>
                                            <p class="mb-1">${edu.institution}</p>
                                            <small class="text-muted">${edu.year}</small>
                                        </div>
                                    `).join('')}
                            </div>
                        </div>

                        <!-- Tags Section -->
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">التصنيفات</h5>
                                <button class="btn btn-sm btn-outline-primary"
                                        onclick="editTags(${resumeId})">
                                    <i class="fas fa-edit"></i> تعديل
                                </button>
                            </div>
                            <div class="card-body">
                                <div id="tagsContainer-${resumeId}">
                                    ${resume.tags.map(tag => `
                                            <span class="badge badge-primary mr-2">${tag}</span>
                                        `).join('')}
                                </div>
                            </div>
                        </div>

                        <!-- Analysis Results -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">نتائج التحليل الذكي</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>المهارات الرئيسية</h6>
                                        <ul class="list-unstyled">
                                            ${resume.analysis.key_skills.map(skill => `
                                                    <li>
                                                        <i class="fas fa-check text-success"></i> ${skill}
                                                    </li>
                                                `).join('')}
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>التوصيات</h6>
                                        <ul class="list-unstyled">
                                            ${resume.analysis.recommendations.map(rec => `
                                                    <li>
                                                        <i class="fas fa-info-circle text-info"></i> ${rec}
                                                    </li>
                                                `).join('')}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `);

                        // Initialize any tooltips or popovers
                        $('[data-toggle="tooltip"]').tooltip();
                        $('[data-toggle="popover"]').popover();
                    }
                });
            });
        }

        // Download resume function
        function downloadResume(resumeId) {
            window.location.href = `/api/resume/${resumeId}/download`;
        }

        // Edit tags function
        function editTags(resumeId) {
            const container = $(`#tagsContainer-${resumeId}`);
            const currentTags = container.find('.badge').map(function() {
                return $(this).text();
            }).get();

            // Show edit form
            container.html(`
        <div class="input-group mb-3">
            <input type="text" class="form-control" id="newTag-${resumeId}"
                   placeholder="أضف تصنيفاً جديداً">
            <div class="input-group-append">
                <button class="btn btn-outline-primary" type="button"
                        onclick="addNewTag(${resumeId})">
                    إضافة
                </button>
            </div>
        </div>
        <div id="currentTags-${resumeId}">
            ${currentTags.map(tag => `
                    <span class="badge badge-primary mr-2 mb-2">
                        ${tag}
                        <i class="fas fa-times ml-1" style="cursor: pointer"
                           onclick="removeTag(${resumeId}, '${tag}')"></i>
                    </span>
                `).join('')}
        </div>
    `);
        }

        // Add new tag
        function addNewTag(resumeId) {
            const input = $(`#newTag-${resumeId}`);
            const tag = input.val().trim();

            if (tag) {
                $.post(`/api/resume/${resumeId}/tags`, {
                        tag: tag,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    })
                    .done(function(response) {
                        if (response.success) {
                            const tagsContainer = $(`#currentTags-${resumeId}`);
                            tagsContainer.append(`
                    <span class="badge badge-primary mr-2 mb-2">
                        ${tag}
                        <i class="fas fa-times ml-1" style="cursor: pointer"
                           onclick="removeTag(${resumeId}, '${tag}')"></i>
                    </span>
                `);
                            input.val('');
                        }
                    });
            }
        }

        // Remove tag
        function removeTag(resumeId, tag) {
            $.ajax({
                url: `/api/resume/${resumeId}/tags`,
                type: 'DELETE',
                data: {
                    tag: tag,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        $(`#currentTags-${resumeId} .badge:contains('${tag}')`).remove();
                    }
                }
            });
        }

        // Initialize tags input
        function initializeTagsInput() {
            const tagInput = $('#tagInput');
            const tagsContainer = $('#tagsContainer');
            let tags = [];

            $('#addTag').click(function() {
                const tag = tagInput.val().trim();
                if (tag && !tags.includes(tag)) {
                    tags.push(tag);
                    updateTagsDisplay();
                    tagInput.val('');
                }
            });

            function updateTagsDisplay() {
                tagsContainer.html(tags.map(tag => `
            <span class="tag-item">
                ${tag}
                <span class="remove" onclick="removeTagFromList('${tag}')">&times;</span>
            </span>
        `).join(''));
            }

            window.removeTagFromList = function(tag) {
                tags = tags.filter(t => t !== tag);
                updateTagsDisplay();
            };
        }

        // Export to CSV functionality
        function exportToCSV() {
            const filters = $('#searchForm').serialize();
            window.location.href = `/api/resume/export?${filters}`;
        }
    </script>
@endpush