@auth
@if(auth()->user()->isProjectOwner())
<div class="modal" id="sendProjectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 520px;">
        <div class="modal-content">
            <style>
                /* Keep Select2 usable inside Bootstrap modal */
                #sendProjectModal .select2-container { width: 100% !important; }
                #sendProjectModal .select2-dropdown { z-index: 1060; }
                #sendProjectModal .select2-results__options { max-height: 260px; overflow-y: auto; }
                #sendProjectModal .modal-content { overflow: visible; }

                /* RTL + alignment fixes so dropdown isn't "skewed" */
                #sendProjectModal .select2-container,
                #sendProjectModal .select2-dropdown { direction: rtl; text-align: right; }

                #sendProjectModal .select2-container--default .select2-selection--single {
                    height: 44px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #d8d8d8;
                    border-radius: 6px;
                }
                #sendProjectModal .select2-container--default .select2-selection--single .select2-selection__rendered {
                    width: 100%;
                    padding-right: 12px;
                    padding-left: 34px; /* space for arrow on the left in RTL */
                    line-height: 1.2;
                    color: #444;
                }
                #sendProjectModal .select2-container--default .select2-selection--single .select2-selection__arrow {
                    left: 10px;
                    right: auto;
                    top: 50%;
                    transform: translateY(-50%);
                }
                #sendProjectModal .select2-container--default .select2-search--dropdown .select2-search__field {
                    direction: rtl;
                    text-align: right;
                }
            </style>
            <div class="modal-header" style="justify-content: space-between; align-items: center; padding: 16px 20px;">
                <h5 class="modal-title" style="display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; margin: 0;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#60d049" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink: 0;">
                        <line x1="22" y1="2" x2="11" y2="13"></line>
                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                    </svg>
                    <span id="sendProjectModalTitle">دعوة للعمل</span>
                </h5>
                <button type="button" class="close" data-dismiss="modal"
                        style="background: none; border: none; font-size: 1.8rem; line-height: 1; opacity: 0.5; cursor: pointer; padding: 15px;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body" style="padding: 20px; max-height: 70vh; overflow-y: auto;">

                {{-- Loading State --}}
                <div id="spm-loading" style="text-align: center; padding: 30px 0;">
                    <div class="spinner-border" role="status" style="color: #60d049; width: 2rem; height: 2rem;">
                        <span class="sr-only">جارٍ التحميل...</span>
                    </div>
                    <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">جارٍ التحقق من مشاريعك...</p>
                </div>

                {{-- Content (shown after load) --}}
                <div id="spm-content" style="display: none;">
                    {{-- Active projects --}}
                    <div id="spm-invite-section">
                        <p style="font-size: 0.92rem; color: #444; margin-bottom: 12px;">
                            اختر مشروعًا نشطًا لإرسال الدعوة إليه:
                        </p>
                        <div style="margin-bottom: 10px;">
                            <select id="spm-project-select" style="width: 100%;"></select>
                        </div>
                        <div style="text-align: center; margin-top: 12px;">
                            <button id="spm-invite-btn" type="button" class="head-btn head-btn-primary"
                                    style="display:flex; width:100%; justify-content:center; align-items:center; gap:6px; border:none; cursor:pointer;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="22" y1="2" x2="11" y2="13"></line>
                                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                                </svg>
                                إرسال الدعوة
                            </button>
                        </div>
                        <div id="spm-invite-feedback" style="margin-top: 8px; font-size: 0.85rem; display: none;"></div>
                    </div>

                    <div id="spm-divider" style="display: flex; align-items: center; gap: 12px; margin: 18px 0;">
                        <hr style="flex: 1; margin: 0; border-color: #eee;">
                        <span style="color: #aaa; font-size: 0.85rem;">أو</span>
                        <hr style="flex: 1; margin: 0; border-color: #eee;">
                    </div>

                    {{-- New private project --}}
                    <div id="spm-new-project-section" style="text-align:center;">
                        <a id="spm-new-project-link" href="#"
                           class="head-btn head-btn-primary"
                           style="display:flex; width:100%; justify-content:center; align-items:center; gap:6px; text-decoration:none;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 5v14"></path>
                                <path d="M5 12h14"></path>
                            </svg>
                            <span id="spm-new-project-btn-label">إنشاء مشروع جديد خاص</span>
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    var currentUsername = null;
    var currentFirstName = null;
    var currentActionLabel = 'دعوة للعمل';
    var activeProjectsCache = null;
    var activeProjectsUrl = '{{ route("user.active-projects") }}';
    var inviteUrl = '{{ route("user.invite-to-project") }}';
    var csrfToken = '{{ csrf_token() }}';

    function openSendProjectModal(username, firstName, actionLabel) {
        currentUsername = username;
        currentFirstName = firstName;
        currentActionLabel = actionLabel || 'دعوة للعمل';

        $('#sendProjectModalTitle').text(currentActionLabel + ' لـ ' + firstName);
        $('#spm-loading').show();
        $('#spm-content').hide();
        $('#spm-invite-feedback').hide().text('');
        $('#sendProjectModal').modal('show');

        // Update "new private project" button label immediately
        if (currentFirstName) {
            $('#spm-new-project-btn-label').text('إنشاء مشروع جديد خاص ل ' + currentFirstName);
        } else {
            $('#spm-new-project-btn-label').text('إنشاء مشروع جديد خاص');
        }

        if (activeProjectsCache !== null) {
            renderProjects(activeProjectsCache, username);
            return;
        }

        $.ajax({
            url: activeProjectsUrl,
            method: 'GET',
            success: function (res) {
                if (res.success) {
                    activeProjectsCache = res.projects;
                    renderProjects(res.projects, username);
                }
            },
            error: function () {
                window.location.href = '{{ route("user.project.create") }}?target_uuid=' + encodeURIComponent(username);
            }
        });
    }

    function renderProjects(projects, username) {
        $('#spm-loading').hide();

        var hasActiveProjects = projects && projects.length > 0;

        var select = $('#spm-project-select');
        var $modal = $('#sendProjectModal');
        var $modalBody = $modal.find('.modal-body');

        // Destroy existing Select2 instance if any
        if (select.hasClass('select2-hidden-accessible')) {
            select.select2('destroy');
        }

        select.empty();
        if (hasActiveProjects) {
            select.append($('<option>', { value: '', text: 'حدد مشروع من مشاريعك النشطة' }));
            $.each(projects, function (i, p) {
                select.append($('<option>', { value: p.uuid, text: p.title }));
            });
        } else {
            select.append($('<option>', { value: '', text: 'لا توجد مشاريع نشطة حالياً' }));
        }

        // Initialize Select2 (dropdownParent inside modal-content to keep dropdown within popup)
        var $dropdownParent = $modal.find('.modal-content');
        select.select2({
            dropdownParent: $dropdownParent.length ? $dropdownParent : $modal,
            width: '100%',
            closeOnSelect: true,
            language: {
                noResults: function () { return 'لا توجد نتائج'; },
                searching: function () { return 'جارٍ البحث...'; }
            },
            placeholder: 'حدد مشروع من مشاريعك النشطة',
            allowClear: false
        });
        select.off('select2:open.spm select2:close.spm').on('select2:open.spm', function () {
            // Bootstrap 4 modal focus trap conflicts with Select2 — avoid closing modal on open
            $modal.removeAttr('tabindex');

            // Allow wheel to scroll dropdown normally, but if dropdown hits top/bottom,
            // pass the remaining wheel to the modal (so the modal can scroll).
            setTimeout(function () {
                // Fix dropdown alignment/width inside scrollable modal body (RTL-safe)
                try {
                    var $container = select.next('.select2'); // select2 container injected after select
                    var $dropdown = $modal.find('.select2-container--open .select2-dropdown');
                    var $parent = ($dropdownParent && $dropdownParent.length) ? $dropdownParent : $modal;
                    if ($container.length && $dropdown.length && $parent.length) {
                        var parentRect = $parent.get(0).getBoundingClientRect();
                        var contRect = $container.get(0).getBoundingClientRect();
                        var isRtl = (($('html').attr('dir') || '').toLowerCase() === 'rtl');

                        if (isRtl) {
                            var right = parentRect.right - contRect.right;
                            $dropdown.css({
                                left: 'auto',
                                right: right + 'px',
                                width: contRect.width + 'px',
                                boxSizing: 'border-box'
                            });
                        } else {
                            var left = contRect.left - parentRect.left;
                            $dropdown.css({
                                left: left + 'px',
                                right: 'auto',
                                width: contRect.width + 'px',
                                boxSizing: 'border-box'
                            });
                        }
                    }
                } catch (e) {}

                var $options = $modal.find('.select2-results__options');
                $options.off('wheel.spmScroll').on('wheel.spmScroll', function (e) {
                    var el = this;
                    var deltaY = e.originalEvent ? e.originalEvent.deltaY : e.deltaY;
                    if (typeof deltaY !== 'number') return;

                    var atTop = el.scrollTop <= 0;
                    var atBottom = (el.scrollTop + el.clientHeight) >= (el.scrollHeight - 1);

                    // If dropdown can scroll further, let it handle the wheel normally.
                    if ((deltaY < 0 && !atTop) || (deltaY > 0 && !atBottom)) {
                        return;
                    }

                    // Otherwise, prevent dropdown "scroll lock" and scroll the modal.
                    e.preventDefault();
                    $modalBody.scrollTop($modalBody.scrollTop() + deltaY);
                });
            }, 0);
        }).on('select2:close.spm', function () {
            $modal.attr('tabindex', '-1');
            $modal.find('.select2-results__options').off('wheel.spmScroll');
        });
        select.val('').trigger('change');

        var newProjectUrl = '{{ route("user.project.create") }}?target_uuid=' + encodeURIComponent(username);
        $('#spm-new-project-link').attr('href', newProjectUrl);

        // If no active projects, hide invite section and show only create-project CTA
        $('#spm-invite-section').toggle(!!hasActiveProjects);
        $('#spm-divider').toggle(!!hasActiveProjects);

        $('#spm-content').show();
    }

    $(document).on('click', '#spm-invite-btn', function () {
        var projectUuid = $('#spm-project-select').val();
        if (!projectUuid || !currentUsername) {
            showFeedback('يرجى اختيار مشروع من مشاريعك النشطة من القائمة', 'error');
            return;
        }

        var btn = $(this);
        btn.prop('disabled', true).text('جارٍ الإرسال...');
        $('#spm-invite-feedback').hide().text('');

        $.ajax({
            url: inviteUrl,
            method: 'POST',
            data: {
                _token: csrfToken,
                project_uuid: projectUuid,
                freelancer_username: currentUsername
            },
            success: function (res) {
                btn.prop('disabled', false).text('إرسال الدعوة');
                if (res.success) {
                    $('#sendProjectModal').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'تم الإرسال',
                        text: 'تم إرسال الدعوة للمستقل بنجاح',
                        confirmButtonColor: '#60d049',
                        confirmButtonText: 'حسناً'
                    });
                } else {
                    showFeedback(res.message || 'حدث خطأ، يرجى المحاولة لاحقاً', 'error');
                }
            },
            error: function (xhr) {
                btn.prop('disabled', false).text('إرسال الدعوة');
                var msg = 'حدث خطأ، يرجى المحاولة لاحقاً';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                showFeedback(msg, 'error');
            }
        });
    });

    function showFeedback(msg, type) {
        var el = $('#spm-invite-feedback');
        el.text(msg)
          .css('color', type === 'error' ? '#dc3545' : '#28a745')
          .show();
    }

    // Close Select2 dropdown when modal closes
    $('#sendProjectModal').on('hidden.bs.modal', function () {
        var select = $('#spm-project-select');
        if (select.hasClass('select2-hidden-accessible')) {
            select.select2('close');
        }
        $('#spm-invite-feedback').hide().text('');
        $('#spm-invite-btn').prop('disabled', false).text('إرسال الدعوة');
    });

    window.openSendProjectModal = openSendProjectModal;
})();
</script>
@endif
@endauth