
<!-- Модальное окно &times;-->


<!-- Модальное окно &times;-->
<div id="client-modal" class="fixed inset-0 hidden bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 w-4/5 relative shadow-2xl">
        <span id="close-modal" class="absolute top-2 right-4 text-xl cursor-pointer"></span>
        <h2 class="modal__content">Client Details</h2>
<div class="post intro-y overflow-hidden box mt-5">
                            <div class="post__tabs nav-tabs flex flex-col sm:flex-row bg-gray-200 text-gray-600">
                                <a title="Main" data-toggle="tab" data-target="#content" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center active"> <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Main </a>
                                <a title="Profile" data-toggle="tab" data-target="#prom" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center"> <i data-feather="code" class="w-4 h-4 mr-2"></i> Profile </a>
                                <a title="Knowledge Base" data-toggle="tab" data-target="#rozetka" href="javascript:;" class="tooltip w-full sm:w-40 py-4 text-center flex justify-center items-center"> <i data-feather="align-left" class="w-4 h-4 mr-2"></i> Knowledge Base </a>
                                

                            </div>
                            <div class="post__content tab-content">
                                        <div class="tab-content__pane p-5 active" id="content">
                                            <h2 class="font-medium text-base mr-auto"> INFO</h2>
                                        <div class="border border-gray-200 rounded-md p-5 mt-5">
            
                                        <p class="font-medium"><strong>Name:</strong> <span id="client-name"></span></p>
                                        <p class="font-medium"><strong>Email:</strong> <span id="client-email"></span></p>
                                        <p class="font-medium"><strong>Phone:</strong> <span id="client-phone"></span></p>
                                                
                                        
                                        </div>
                                        
                                        <div class="border border-gray-200 rounded-md p-5 mt-5">
                                            <span id="token" style="display: none;"></span>
                                            <h2 class="font-medium text-base mb-2">Ask a question</h2>
                                            <textarea id="user-question" rows="3" class="form-control w-full mb-2" placeholder="Enter a question..."></textarea>
                                            <button id="send-question" class="btn button w-24 mr-1 mb-2 bg-theme-9 text-white">Send</button>
                                            <div class="mt-4">
                                                <strong>Answer:</strong>
                                                <p id="question-response" class="mt-1 text-gray-700">—</p>
                                            </div>
                                        </div>
                
                                        </div>

                                        <div class="tab-content__pane p-5" id="prom">
                                        <div class="border border-gray-200 rounded-md p-5 mt-5">
                                            <div class="grid grid-cols-12 gap-6">
                                                <!-- Основной блок -->
                                                <div class="col-span-12 lg:col-span-8 space-y-5">
                                                        <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
                                                            <div class="flex flex-col lg:flex-row border-b border-gray-200 pb-5 -mx-5">
                                                                <div class="flex flex-1 px-5 items-center justify-center lg:justify-start">
                                                                    <div class="ml-5">
                                                                        <div class="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg">
                                                                            <span id="client-name2"></span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Дополнительные блоки один под другим education_list -->
                                                        <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
                                                            <div class="font-medium text-lg">Statement</div>
                                                            <span id="user_statement"></span>
                                                        </div>
                                                        <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
                                                            <div class="font-medium text-lg">Education</div>
                                                            <span id="education_list"></span>
                                                        </div>
                                                        <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
                                                            <div class="font-medium text-lg">Experience</div>
                                                            <span id="experience_list"></span>
                                                        </div>
                                                        <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
                                                            <div class="font-medium text-lg">Skills</div>
                                                            <span id="skills"></span>
                                                        </div>
                                                        <div class="intro-y box px-5 pt-5 mt-5 col-span-12">
                                                            <div class="font-medium text-lg">Volunteering</div>
                                                            <span id="volunteering_list"></span>
                                                        </div>

                                                </div>
                                          
                                            <div class="col-span-12 lg:col-span-4 flex flex-col space-y-4">
                                                <div class="intro-y box p-4">
                                                    <div class="font-medium text-lg">Job Preferences</div>
                                                    <span id="job-title"></span>
                                                </div>
                                                
                                                <div class="intro-y box p-4">
                                                    <div class="font-medium text-lg">Contact Info</div>
                                                     <span id="contactinfo"></span>
                                                </div>
                                                
                                               

                                                <div class="intro-y box p-4">
                                                    <div class="font-medium text-lg">Resume</div>
                                                    <span id="resume_url"></span>
                                                </div>
                                                <div class="intro-y box p-4">
                                                    <div class="font-medium text-lg">Languages</div>
                                                    <span id="languages"></span>

                                                </div>
                                                <div class="intro-y box p-4">
                                                   <div class="font-medium text-lg">Website</div>
                                                   <span id="websites"></span>
                                                </div>
                                                <div class="intro-y box p-4">
                                                    <div class="font-medium text-lg">Legal Status</div>
                                                </div>
                                                <div class="intro-y box p-4">
                                                    <div class="font-medium text-lg">Equal Opportunity</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                      </div>

                                        
                                        <div class="tab-content__pane p-5" id="rozetka">
                                            <div class="border border-gray-200 rounded-md p-5 mt-5">
                                                
                                        
                                                <div id="knows-container"></div>
                                            </div>
                                        </div>
                                                    
                                                    
                                                    
                                                    
                            </div>
                        </div>
                    </div>
                    <!-- END: Post Content -->
                    <!-- BEGIN: Post Info -->
                    
    </div>
    </div>

</div>


<!-- JS только для модалки -->
<script>
document.addEventListener("DOMContentLoaded", () => {
    const modal = document.getElementById("client-modal");
    const closeModal = document.getElementById("close-modal");

    // Открытие модалки по клику на имя клиента
    document.querySelectorAll(".client-link").forEach(link => {
        link.addEventListener("click", (e) => {
            e.preventDefault();
            const clientId = link.getAttribute("data-client-id");

            fetch(`/get_client/${clientId}`)
                .then(response => response.json())
                .then(data => {
                    console.log("Ответ от сервера:", data);  // Проверяем, что данные пришли education_list user_statement websites
                    console.log("Перед выборкой элементов DOM");
                    const education = data.education_list.map(item => {
                        return `
                            <div>
                                <strong>University Name:</strong> ${item.university_name} <br>
                                <strong>Course:</strong> ${item.course} <br>
                                <strong>Period:</strong> ${item.start_date_month}/${item.start_date_year} - ${item.end_date_month}/${item.end_date_year} <br>
                                <strong>Description:</strong> ${item.description} <br>
                            </div>
                        `;
                    }).join('');




                    const volunt = data.volunteering_list.map(item => {
                        return `
                            <div>
                                <strong>Compan Name:</strong> ${item.volunteering_organisation_name} <br>
                                <strong>Course:</strong> ${item.volunteering_position} <br>
                                <strong>Period:</strong> ${item.volunteering_start_date_month}/${item.volunteering_start_date_year} - ${item.volunteering_end_date_month}/${item.volunteering_end_date_year} <br>
                                <strong>Description:</strong> ${item.volunteering_description} <br>
                            </div>
                        `;
                    }).join('');

                    const experience = data.experience_list.map(item => {
                        return `
                            <div>
                                <strong>Company Name:</strong> ${item.company_name} <br>
                                <strong>Title:</strong> ${item.title} <br>
                                <strong>Employment type:</strong> ${item.employment_type} <br>
                                
                                <strong>Period:</strong> ${item.start_date_month}/${item.start_date_year} - ${item.end_date_month}/${item.end_date_year} <br>
                                <strong>Description:</strong> ${item.description} <br>
                                <br>
                            </div>
                        `;
                    }).join('');
                    document.getElementById("token").textContent = data.token;
                    document.getElementById("client-name").textContent = data.first_name+ ' ' + data.last_name;
                    document.getElementById("client-email").textContent = data.email_addr;
                    document.getElementById("client-phone").textContent = data.phone_num;
                    document.getElementById("client-name2").textContent = data.first_name+ ' ' + data.last_name+ '  ' +data.additional_name+ '    ' + data.pronouns ;
                    document.getElementById("user_statement").innerHTML = data.user_statement; 
                    document.getElementById("skills").innerHTML = data.skills.join(', ');
                    document.getElementById("education_list").innerHTML = education; 
                    document.getElementById("volunteering_list").innerHTML = volunt;
                    document.getElementById("experience_list").innerHTML = experience;
                     
                    document.getElementById("job-title").innerHTML = data["job-title"];
                    document.getElementById("resume_url").innerHTML = `<a href="${data["resume_url"]}" target="_blank">${data["resume_url"]}</a>`;

                    document.getElementById("languages").innerHTML = data.languages
                        .map(lang => `${lang.language_label}: ${lang.level_label}`)
                        .join('<br>');
                    //document.getElementById("contactinfo").textContent = data.email_addr + '<br>' + data.phone_num   ; 
                    if (data.websites && data.websites.length > 0) {
                        document.getElementById("websites").innerHTML = data.websites
                            .map(web => `${web.type}: <a href="${web.url}" target="_blank">${web.url}</a>`)
                            .join('<br>');
                    } else {
                        document.getElementById("websites").innerHTML = "No websites available.";
                    }

                    
                    document.getElementById("contactinfo").innerHTML = data.email_addr + '<br>' + data.phone_num;+

                   


                    
                                    

                    modal.classList.remove("hidden");

                    // Отображаем знания (knows)
                    const knows = data.knows?.result || [];
                    const knowsContainer = document.getElementById("knows-container");
                    knowsContainer.innerHTML = ""; // Очистка контейнера перед добавлением новых данных

                    knows.forEach(item => {
                        const block = document.createElement("div");
                        block.className = "intro-y box p-4";
                        block.innerHTML = `
                            <div class="font-medium text-lg">${item.title}</div>
                            <span>${item.text}</span>
                        `;
                        knowsContainer.appendChild(block);
                    });


                    


                })
                .catch(err => console.error("Error fetching client data:", err));
        });
    });

    // Закрытие модалки
    closeModal.addEventListener("click", () => {
        modal.classList.add("hidden");
        clearModalFields();
    });

    // Закрытие по клику вне модалки
    modal.addEventListener("click", (e) => {
        
        
        if (e.target === modal) {
            modal.classList.add("hidden");
            clearModalFields();
        }
    });
});

function clearModalFields() {
    document.getElementById("user-question").value = "";
    document.getElementById("question-response").textContent = "";
}

document.getElementById("send-question").addEventListener("click", () => {
    const question = document.getElementById("user-question").value;
    const clientName = document.getElementById("client-name").textContent;
    const token = document.getElementById("token").textContent;;

    fetch("/ask_question", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            question: question,
            client_name: clientName,  // или передай ID клиента, если удобнее
            token: token
        })
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById("question-response").textContent = data.answer || "Нет ответа.";
    })
    .catch(err => {
        document.getElementById("question-response").textContent = "Ошибка при получении ответа.";
        console.error("Ошибка:", err);
    });
});
</script>


