@extends('layouts.dashboard')

@section('content')

    <!-- Content Loader -->
   
    <div class="page-content">

        @if ($candidates->count() > 0)
            <!-- Header -->
            <div class="heading">
                <h1 class="title">{{ __('list_of_participants') }}</h1>
                <h2 class="sub-title">{{ __('managing_and_viewing_reports_for_all_participants') }}</h2>
            </div>

            <!-- Stats -->
            @if (session('status'))
                <div class="alert alert-success" role="alert">
                    {{ session('status') }}
                </div>
            @endif

            <div class="participants-card">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">{{ __('active_participants') }}</h3>
                        <h4>{{ $firstBoxCounter }}</h4>
                        <p class="card-text">
                            <span>{{ $newCandidate }}</span>
                            {{ in_array($newCandidate, [1])
                                ? __('new')
                                : __('new_details')
                            }},

                            <span>{{ $waitingCandidate }}</span>
                            {{ in_array($waitingCandidate, [1])
                                ? __('awaiting_approval')
                                : __('did_not_approve_transfer_of_details')
                            }},

                            <span>{{ count($activeCandidate) }}</span>
                            {{ in_array(count($activeCandidate), [1])
                                ? __('active')
                                : __('activists')
                            }}
                        </p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">{{ __('participants_with_high_matches') }}</h3>
                        <h4>{{ $highMatchParticipantsCount }}</h4>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title">{{ __('submitted_reports') }}</h3>
                        <h4 class="text-primary">{{ $thirdBoxCounter }}</h4>
                    </div>
                </div>
            </div>

            <!-- Candidates -->
            <div class="participants-filtering" id="candidate-list-container">
                <div class="filtering-heading">
                    <input class="form-control" type="text" placeholder="{{ __('search_by_name_email_phone') }}" id="search" autocomplete="off">
                    <button type="button" class="btn btn-outline-secondary">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5 10H15M2.5 5H17.5M7.5 15H12.5" stroke="#6938EF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <span>{{ __('participant_filtering') }}</span>
                    </button>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addingParticipantsModal">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.99996 4.16667V15.8333M4.16663 10H15.8333" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <span>{{ __('adding_participants') }}</span>
                    </button>
                </div>
                <div id="candidate-list">
                    @include('partials.candidate-cards')
                </div>
            </div>

            <!-- Load more trigger -->
            <div id="load-more-trigger"></div>

            <!-- Loader -->
            <div id="loading" class="custom-loader-wrapper">
                <div class="custom-loader">
                    <p>טוען מועמדים...</p>
                    <div class="spinner"></div>
                </div>
            </div>
        @else
            {{-- ✅ BLANK / EMPTY STATE --}}
            <div class="dashboard-empty">

                <img src="{{ asset('images/Search-User.svg') }}" alt="Search-User" class="search-users">

                <h1 class="title">{{ __('no_records_found_for_participants') }}</h1>
                <h2 class="sub-title">
                    {!! __('no_records_found_for_participants_desc') !!}
                </h2>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addingParticipantsModal">
                    <img src="{{ asset('images/add-participant.svg') }}">
                    <span>{{ __('adding_participants') }}</span>
                </button>
            </div>

        @endif

        <div class="modal fade job-modal" id="addingParticipantsModal" tabindex="-1" aria-labelledby="addingParticipantsModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('adding_job_seeker') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Tabs -->
                        <ul class="nav nav-tabs" id="modalTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="import-tab" data-bs-toggle="tab"
                                    data-bs-target="#import-tab-pane" type="button" role="tab">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M17.5 12.5V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5"
                                            stroke="#717680" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                    <span>{{ __('excel_upload') }}</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="form-tab" data-bs-toggle="tab"
                                    data-bs-target="#form-tab-pane" type="button" role="tab">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M10 12.9167H6.25002C5.08705 12.9167 4.50557 12.9167 4.0324 13.0602C2.96707 13.3834 2.13339 14.217 1.81022 15.2824C1.66669 15.7555 1.66669 16.337 1.66669 17.5M15.8334 17.5V12.5M13.3334 15H18.3334M12.0834 6.25C12.0834 8.32107 10.4044 10 8.33335 10C6.26229 10 4.58335 8.32107 4.58335 6.25C4.58335 4.17893 6.26229 2.5 8.33335 2.5C10.4044 2.5 12.0834 4.17893 12.0834 6.25Z"
                                            stroke="#717680" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                    <span>{{ __('manual_addition') }}</span>
                                </button>
                            </li>
                        </ul>

                        <!-- Tabs Content -->
                        <div class="tab-content" id="modalTabContent">
                            <!-- Import Tab -->
                            <div class="tab-pane fade" id="import-tab-pane" role="tabpanel">
                                <form id="excelImportForm" enctype="multipart/form-data" class="invite-form">
                                    @csrf

                                    <!-- Upload Box -->
                                    <div class="form-group">
                                        <div class="upload-box" id="uploadBox">
                                            <input type="file" id="excel_file" name="excel_file" accept=".xlsx,.xls"
                                                hidden>

                                            <div id="uploadPlaceholder">
                                                <div class="upload-icon">
                                                    <svg width="20" height="20" viewBox="0 0 20 20"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M6.66666 13.3333L9.99999 10M9.99999 10L13.3333 13.3333M9.99999 10V17.5M16.6667 13.9524C17.6846 13.1117 18.3333 11.8399 18.3333 10.4167C18.3333 7.88536 16.2813 5.83333 13.75 5.83333C13.5679 5.83333 13.3975 5.73833 13.3051 5.58145C12.2184 3.73736 10.212 2.5 7.91666 2.5C4.46488 2.5 1.66666 5.29822 1.66666 8.75C1.66666 10.4718 2.36286 12.0309 3.48911 13.1613"
                                                            stroke="#535862" stroke-width="1.66667"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg>
                                                </div>
                                                <p>
                                                    {{ __('invite_drag_an_excel_file_here') }}
                                                    <span class="upload-link" id="browseFile">{{ __('invite_click_to_add_a_file') }}</span>
                                                </p>
                                            </div>

                                            <!-- File Preview -->
                                            <div class="file-preview d-none" id="filePreview">
                                                <div class="file-info">
                                                    <button type="button" id="removeFile">
                                                        <svg width="16" height="16" viewBox="0 0 16 16"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M10.6667 3.99992V3.46659C10.6667 2.71985 10.6667 2.34648 10.5213 2.06126C10.3935 1.81038 10.1895 1.60641 9.93865 1.47858C9.65344 1.33325 9.28007 1.33325 8.53333 1.33325H7.46667C6.71993 1.33325 6.34656 1.33325 6.06135 1.47858C5.81046 1.60641 5.60649 1.81038 5.47866 2.06126C5.33333 2.34648 5.33333 2.71985 5.33333 3.46659V3.99992M6.66667 7.66658V10.9999M9.33333 7.66658V10.9999M2 3.99992H14M12.6667 3.99992V11.4666C12.6667 12.5867 12.6667 13.1467 12.4487 13.5746C12.2569 13.9509 11.951 14.2569 11.5746 14.4486C11.1468 14.6666 10.5868 14.6666 9.46667 14.6666H6.53333C5.41323 14.6666 4.85318 14.6666 4.42535 14.4486C4.04903 14.2569 3.74307 13.9509 3.55132 13.5746C3.33333 13.1467 3.33333 12.5867 3.33333 11.4666V3.99992"
                                                                stroke="#A4A7AE" stroke-width="1.5"
                                                                stroke-linecap="round" stroke-linejoin="round" />
                                                        </svg>
                                                    </button>
                                                    <div class="file-details">
                                                        <div id="fileName" class="filename"></div>
                                                        <div id="fileSize" class="filesize"></div>
                                                    </div>
                                                    <svg width="20" height="20" viewBox="0 0 20 20"
                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M11.6667 1.8913V5.33342C11.6667 5.80013 11.6667 6.03348 11.7575 6.21174C11.8374 6.36854 11.9649 6.49603 12.1217 6.57592C12.2999 6.66675 12.5333 6.66675 13 6.66675H16.4421M16.6667 8.3236V14.3334C16.6667 15.7335 16.6667 16.4336 16.3942 16.9684C16.1545 17.4388 15.7721 17.8212 15.3016 18.0609C14.7669 18.3334 14.0668 18.3334 12.6667 18.3334H7.33334C5.9332 18.3334 5.23314 18.3334 4.69836 18.0609C4.22795 17.8212 3.8455 17.4388 3.60582 16.9684C3.33334 16.4336 3.33334 15.7335 3.33334 14.3334V5.66675C3.33334 4.26662 3.33334 3.56655 3.60582 3.03177C3.8455 2.56137 4.22795 2.17892 4.69836 1.93923C5.23314 1.66675 5.9332 1.66675 7.33334 1.66675H10.0098C10.6213 1.66675 10.927 1.66675 11.2147 1.73582C11.4698 1.79707 11.7137 1.89808 11.9374 2.03515C12.1897 2.18975 12.4059 2.40594 12.8382 2.83832L15.4951 5.49517C15.9275 5.92755 16.1437 6.14374 16.2983 6.39604C16.4353 6.61972 16.5364 6.86358 16.5976 7.11867C16.6667 7.40639 16.6667 7.71213 16.6667 8.3236Z"
                                                            stroke="#A4A7AE" stroke-width="1.66667"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg>
                                                </div>
                                                <div class="progress-row">
                                                    <div class="progress-percent" id="percent">0%</div>
                                                    <div class="progress">
                                                        <div class="progress-bar" id="uploadProgress"></div>
                                                    </div>
                                                </div>
                                                <span id="uploadStatus">{{ __('invite_waiting_to_upload') }}</span>
                                            </div>
                                        </div>

                                        <small class="error error-excel_file text-danger d-block mt-2"></small>
                                    </div>

                                    <!-- ERROR DISPLAY -->
                                    <div id="excelErrors"></div>

                                    <div class="form-group-submit">
                                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                                            {{ __('cancel') }}
                                        </button>
                                        <button type="submit" id="submitExcel" class="btn btn-primary">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M17.5 12.5V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5"
                                                    stroke="white" stroke-width="1.66667" stroke-linecap="round"
                                                    stroke-linejoin="round" />
                                            </svg>
                                            <span>{{ __('add') }}</span>
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <!-- Form Tab -->
                            <div class="tab-pane fade show active" id="form-tab-pane" role="tabpanel">
                                <form id="inviteForm" class="invite-form">
                                    @csrf

                                    <div class="form-group">
                                        <label><span>*</span>{{ __('full_name') }}</label>
                                        <input type="text" name="fullname" class="form-control" placeholder="{{ __('invite_full_name_placeholder') }}" autocomplete="off">
                                        <small class="error error-fullname"></small>
                                    </div>

                                    <div class="form-group">
                                        <label><span>*</span>{{ __('email') }}</label>
                                        <input type="email" name="email" class="form-control" placeholder="{{ __('invite_email_placeholder') }}" autocomplete="off">
                                        <small class="error error-email"></small>
                                    </div>

                                    <div class="form-group">
                                        <label><span>*</span>{{ __('mobile_number') }}</label>
                                        <input type="text" name="phone" class="form-control" placeholder="{{ __('invite_mobile_number_placeholder') }}" autocomplete="off">
                                        <small class="error error-phone"></small>
                                    </div>

                                    <div class="form-group">
                                        <label>{{ __('coordinator_name') }}</label>
                                        <input type="text" name="coordinator" class="form-control" value="{{ Auth::guard('coordinator')->user()->name }}" readonly disabled>
                                        <small class="error error-coordinator"></small>
                                    </div>

                                    <div class="form-group-submit">
                                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"
                                            aria-label="Close">{{ __('cancel') }}</button>
                                        <button type="submit" class="btn btn-primary" id="inviteSubmitBtn">
                                            <span class="btn-content d-flex align-items-center gap-2">
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M17.5 12.5V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                                <span>{{ __('add') }}</span>
                                            </span>
                                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="cvContentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close js-close-cv" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" style="overflow-x: auto;">
                        <p id="cvContent"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary js-close-cv" data-bs-dismiss="modal" aria-label="Close">{{ __('close') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
<script src="{{ asset('js/add-note.js') }}?v={{ filemtime(public_path('js/add-note.js')) }}"></script>
<script>
//$(document).ready(function() {
document.addEventListener('turbo:load', function() {
    
    //$('#inviteForm').on('submit', function(e) {
    $('#inviteForm').off('submit').on('submit', function(e) {
        e.preventDefault();

        // Clear previous errors
        $('.error').text('');

        // Loader
        $('#inviteSubmitBtn .btn-content').hide();
        $('#inviteSubmitBtn .spinner-border').removeClass('d-none');

        let formData = new FormData(this);

        fetch("{{ route('coordinator.invite') }}", {
            method: "POST",
            headers: {'X-CSRF-TOKEN': window.APP.csrfToken},
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            // Hide loader
            $('#inviteSubmitBtn .btn-content').show();
            $('#inviteSubmitBtn .spinner-border').addClass('d-none');

            if (!data.status) {

                // Validation errors
                if (data.errors) {
                    $.each(data.errors, function (field, messages) {
                        $('.error-' + field).text(messages[0]);
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message ?? 'Validation failed',
                        confirmButtonColor: '#6938EF'
                    });
                }
            } else {
                // Success
                $('#inviteForm')[0].reset();
                $('.error').text('');
                $('#addingParticipantsModal').modal('hide');

                Swal.fire({
                    title: "{{ __('Invitation_success') }}",
                    showConfirmButton: true,
                    confirmButtonText: "{{ __('approval_button') }}",
                    confirmButtonColor: '#6938EF',
                    showCloseButton: true,
                    imageUrl: '{{ asset("images/success.svg") }}',
                    imageWidth: 36,
                    imageHeight: 36,
                    imageAlt: 'Success Icon',
                    text: '',
                    allowOutsideClick: false,
                    customClass: {
                        popup: 'my-swal-popup',
                        title: 'my-swal-title',
                        confirmButton: 'btn btn-primary',
                        closeButton: 'my-swal-close'
                    }
                }).then((result) => {
                    location.reload();
                });
            }
        })
        .catch(() => {
            $('#inviteSubmitBtn .btn-content').show();
            $('#inviteSubmitBtn .spinner-border').addClass('d-none');

            Swal.fire({
                title: "{{ __('Invitation_error') }}",
                showConfirmButton: true,
                confirmButtonText: "{{ __('approval_button') }}",
                confirmButtonColor: '#6938EF',
                showCloseButton: true,
                imageUrl: '{{ asset("images/error.svg") }}',
                imageWidth: 36,
                imageHeight: 36,
                imageAlt: 'Error icon',
                text: "{{ __('something_went_wrong') }}",
                allowOutsideClick: false,
                customClass: {
                    popup: 'my-swal-popup',
                    title: 'my-swal-title',
                    confirmButton: 'btn btn-primary',
                    closeButton: 'my-swal-close'
                }
            }).then(() => {
                location.reload();
            });
        });
    });
});

$(document).on('click', '.js-close-cv', function () {
    $('#cvContentModel').modal('hide');
});

</script>

<script>
//document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('turbo:load', function() {
    if (!document.getElementById('excelImportForm')) return;

    // if (window.jsAlreadyLoadedAgain) return; // exit if already run
    //window.jsAlreadyLoadedAgain = true;
    var form = document.getElementById('excelImportForm');
    var fileInput = document.getElementById('excel_file');
    var uploadBox = document.getElementById('uploadBox');
    var browseFile = document.getElementById('browseFile');

    var filePreview = document.getElementById('filePreview');
    var uploadPlaceholder = document.getElementById('uploadPlaceholder');
    var fileName = document.getElementById('fileName');
    var fileSize = document.getElementById('fileSize');
    var progressBar = document.getElementById('uploadProgress');
    var uploadStatus = document.getElementById('uploadStatus');
    var removeFile = document.getElementById('removeFile');
    var percentText = document.getElementById('percent');
    let errorBox = document.getElementById('excelErrors');

    if (!browseFile || browseFile.dataset.bound === 'true') {
        return;
    }
    browseFile.dataset.bound = 'true';

    /* ---------- FILE PICK ---------- */
    browseFile.addEventListener('click', () => fileInput.click());
    uploadBox.addEventListener('click', () => fileInput.click());

    fileInput.addEventListener('change', () => {
        var file = fileInput.files[0];
        if (!file) return;

        fileName.textContent = file.name;
        fileSize.textContent = Math.round(file.size / 1024) + ' KB';

        uploadPlaceholder.classList.add('d-none');
        filePreview.classList.remove('d-none');
        uploadStatus.textContent = 'מוכן להעלאה';
        progressBar.style.width = '0%';
        percentText.innerText = '0%';
        if (errorBox) errorBox.innerHTML = '';
    });

    removeFile.addEventListener('click', () => {
        fileInput.value = '';
        filePreview.classList.add('d-none');
        uploadPlaceholder.classList.remove('d-none');
        progressBar.style.width = '0%';
        percentText.innerText = '0%';
        uploadStatus.textContent = '';
        if (errorBox) errorBox.innerHTML = '';
    });

    /* ---------- SUBMIT ---------- */
    form.addEventListener('submit', function (e) {
        e.preventDefault();

        if (!fileInput.files.length) {
            document.querySelector('.error-excel_file').innerText = 'נא לבחור קובץ אקסל';
            return;
        }

        document.querySelector('.error-excel_file').innerText = '';
        if (errorBox) errorBox.innerHTML = '';

        // ---------- SHOW LOADER ----------
        if (errorBox) {
            errorBox.innerHTML = `
                <div class="text-center my-2">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <div>ממתין לעיבוד...</div>
                </div>`;
        }

        progressBar.style.width = '0%';
        percentText.innerText = '0%';

        var xhr = new XMLHttpRequest();
        var formData = new FormData(form);

        xhr.open('POST', "{{ route('coordinator.invite.import') }}", true);
        xhr.setRequestHeader('X-CSRF-TOKEN', window.APP.csrfToken);

        xhr.upload.onprogress = function (e) {
            if (e.lengthComputable) {
                var percent = Math.round((e.loaded / e.total) * 100);
                progressBar.style.width = percent + '%';
                percentText.innerText = percent + '%';
                uploadStatus.textContent = 'מעלה... ' + percent + '%';
            }
        };

        xhr.onload = function () {
            let response = {};
            try { response = JSON.parse(xhr.responseText); } catch (e) {}

            /* ✅ SUCCESS */
            if (xhr.status === 200 && response.status === true) {
                progressBar.style.width = '100%';
                percentText.innerText = '100%';
                uploadStatus.textContent = '✔ הועלה בהצלחה';

                // CLOSE MODAL
                $('#addingParticipantsModal').modal('hide');

                Swal.fire({
                    title: "{{ __('Invitation_success') }}",
                    showConfirmButton: true,
                    confirmButtonText: "{{ __('approval_button') }}",
                    confirmButtonColor: '#6938EF',
                    showCloseButton: true,
                    imageUrl: '{{ asset("images/success.svg") }}',
                    imageWidth: 36,
                    imageHeight: 36,
                    imageAlt: 'Success Icon',
                    text: '',
                    allowOutsideClick: false,
                    customClass: {
                        popup: 'my-swal-popup',
                        title: 'my-swal-title',
                        confirmButton: 'btn btn-primary',
                        closeButton: 'my-swal-close'
                    }
                }).then((result) => {
                    location.reload();
                });

                return;
            }

            /* ❌ EXCEL / VALIDATION ERRORS */
            if (xhr.status === 422) {
                uploadStatus.textContent = '❌ נמצאו שגיאות בקובץ';

                let html = `<ul class="mb-0 text-danger">`;

                /* Excel row errors */
                if (Array.isArray(response.errors)) {
                    response.errors.forEach(err => {
                        if (Array.isArray(err.messages)) {
                            err.messages.forEach(msg => {
                                html += `<li>${msg}</li>`;
                            });
                        }
                    });
                } else if (typeof response.errors === 'object') {
                    Object.values(response.errors).forEach(messages => {
                        messages.forEach(msg => {
                            html += `<li>${msg}</li>`;
                        });
                    });
                } else {
                    html += `<li>אירעה שגיאה. בדוק את הקובץ ונסה שוב.</li>`;
                }

                html += `</ul>`;
                if (errorBox) errorBox.innerHTML = html;
                return;
            }

            /* ❌ SERVER ERROR */
            uploadStatus.textContent = '❌ שגיאת שרת';
            if (errorBox) errorBox.innerHTML = `
                <div class="alert alert-danger">
                    שגיאת שרת. נסה שוב מאוחר יותר.
                </div>`;
        };

        xhr.send(formData);
    });

    /* ---------- DRAG & DROP ---------- */
    uploadBox.addEventListener('dragover', e => {
        e.preventDefault();
        uploadBox.classList.add('dragover');
    });

    uploadBox.addEventListener('dragleave', () => {
        uploadBox.classList.remove('dragover');
    });

    uploadBox.addEventListener('drop', e => {
        e.preventDefault();
        uploadBox.classList.remove('dragover');

        if (!e.dataTransfer.files.length) return;

        fileInput.files = e.dataTransfer.files;
        fileInput.dispatchEvent(new Event('change'));
    });

});
</script>

<script>
var page = 1;
var loading = false;
var lastPage = {{ $candidates->lastPage() }};
var search = '';

var container = document.querySelector('.dashboard-content');

function fetchCandidates(reset = false) {
    loading = true;
    var loader = document.getElementById('loading');
    if (loader) loader.style.display = 'block';

    var url = `?page=${page}`;
    if (search) url += `&search=${encodeURIComponent(search)}`;

    setTimeout(() => {
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(response => response.json())
            .then(data => {
                var list = document.getElementById('candidate-list');

                if (reset) {
                    list.innerHTML = data.html;
                    page = 1;
                    lastPage = data.lastPage ?? {{ $candidates->lastPage() }};
                } else {
                    list.insertAdjacentHTML('beforeend', data.html);
                }

                loading = false;
                if (loader) loader.style.display = 'none';

                var trigger = document.getElementById('load-more-trigger');
                if (trigger && page >= lastPage) trigger.style.display = 'none';
            })
            .catch(err => {
                console.error(err);
                loading = false;
                if (loader) loader.style.display = 'none';
            });
    }, 500);
}

/* SEARCH */
var searchInput = document.getElementById('search');
if (searchInput) {
    searchInput.addEventListener('keyup', function () {
        search = this.value;
        page = 1;
        lastPage = {{ $candidates->lastPage() }};
        var trigger = document.getElementById('load-more-trigger');
        if (trigger) trigger.style.display = 'block';
        fetchCandidates(true);
    });
}

/* SCROLL LOAD MORE */
if (container) {
    container.addEventListener('scroll', function () {
        var trigger = document.getElementById('load-more-trigger');
        if (!trigger || loading || page >= lastPage) return;

        var containerRect = container.getBoundingClientRect();
        var triggerRect = trigger.getBoundingClientRect();

        if (triggerRect.top <= containerRect.bottom) {
            page++;
            fetchCandidates(false);
        }
    });
}

function dopendropdown(event) {
    event.preventDefault();
    event.stopPropagation();

    // Close all other open dropdowns
    document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
        menu.classList.remove('show');
    });

    // Toggle current dropdown
    var dropdown = event.currentTarget.closest('.dropdown');
    var menu = dropdown.querySelector('.dropdown-menu');

    if (menu) {
        menu.classList.toggle('show');
    }

}

function downloadCV(event,id) {

    $(".download-cv-"+id).removeClass('d-none');

    $.ajax({
        type: "POST",
        url: "{{url('downloadCandidateCv')}}",
        data: {id:id,_token: window.APP.csrfToken},
        success: function (data) {
            $(".download-cv-"+id).addClass('d-none');
            window.location = data.url;
        }
    });
}

function updateStatus(event,id) {

    $.ajax({
        type: "POST",
        url: "{{url('updateStatus')}}",
        data: {id:id,_token: window.APP.csrfToken},
        success: function (data) {
            var el = $('#status-' + id);

            // Remove all classes except 'status'
            el.attr('class', 'status');

            // Add danger class
            el.addClass('danger');

            // Change text
            el.text('{{ __("hired_status") }}');
        }
    });
}

function handleClick(event, url) {
    event.preventDefault(); // Prevent default link behavior
    
    // Use Turbo.visit() to navigate without full reload
    if (window.Turbo) {
        Turbo.visit(url);
    } else {
        // fallback for non-Turbo
        window.location.href = url;
    }
}

function showResume(event,id) {

    $(".show-resume-"+id).removeClass('d-none');

    $.ajax({
        type: "POST",
        url: "{{url('showResume')}}",
        data: { id:id,user_type:1,_token: window.APP.csrfToken},
        success: function (response) {

            $(".show-resume-"+id).addClass('d-none');
            
            if (response.type === 'manual') {
                let htmlContent = response.content.replace(/\n/g, '<br>');
                $("#cvContent").html(htmlContent);
                $("#cvContentModel").modal('show');
            } else if (response.type === 'file') {
                var fileUrl = response.url;
                let viewerUrl = '';

                if (fileUrl.endsWith('.pdf')) {
                    viewerUrl = fileUrl;
                } else if (fileUrl.endsWith('.doc') || fileUrl.endsWith('.docx')) {
                    viewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`;
                } else {
                    $("#cvContent").html("Unsupported file type.");
                    $("#cvContentModel").modal('show');
                    return;
                }

                var iframe = '<iframe src="'+viewerUrl+'" width="100%" height="600px" style="border:none;"></iframe>';
                $("#cvContent").html(iframe);
                $("#cvContentModel").modal('show');
            } else {
                $("#cvContent").html("Invalid response.");
                $("#cvContentModel").modal('show');
            }
        }
    });
}

function closeDropdownAndStop(event) {
    event.preventDefault();
    event.stopPropagation();

    // Close all open dropdowns
    document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
        menu.classList.remove('show');
    });
}

function toggleFlag(event, btn) {
    event.preventDefault();
    event.stopPropagation();

    // 🔥 change color immediately
    var newState = !btn.classList.contains('active');
    btn.classList.toggle('active', newState);

    fetch(`/coordinator/invite/${btn.dataset.id}/toggle-flag`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document
                .querySelector('meta[name="csrf-token"]').content,
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(res => {
        if (!res.ok) throw new Error();
        return res.json();
    })
    .then(data => {
        if (!data.status) throw new Error();

        // keep UI in sync with backend
        btn.classList.toggle('active', data.flag);
    })
    .catch(() => {
        // ❌ revert if request fails
        btn.classList.toggle('active', !newState);

        Swal.fire({
            icon: 'error',
            title: window.APP?.lang?.something_went_wrong ?? 'Something went wrong',
            confirmButtonColor: '#6938EF'
        });
    });
}
</script>
<script>
    /*document.addEventListener('DOMContentLoaded', function() {

        setTimeout(function() {
            document.getElementById('page-loader')?.classList.add('hidden');
        }, 1000);

    });*/
</script>
@endsection