102 lines
5.3 KiB
HTML
102 lines
5.3 KiB
HTML
|
|
<!-- Модальное окно ×-->
|
|
|
|
|
|
<!-- Модальное окно ×-->
|
|
<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-1/3 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">
|
|
<div class="border border-gray-200 rounded-md p-5 mt-5">
|
|
|
|
<p><strong>Name:</strong> <span id="client-name"></span></p>
|
|
<p><strong>Email:</strong> <span id="client-email"></span></p>
|
|
<p><strong>Phone:</strong> <span id="client-phone"></span></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="tab-content__pane p-5 " id="prom">
|
|
<div class="border border-gray-200 rounded-md p-5 mt-5">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab-content__pane p-5" id="rozetka">
|
|
<div class="border border-gray-200 rounded-md p-5 mt-5">
|
|
|
|
|
|
|
|
</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 => {
|
|
document.getElementById("client-name").textContent = data.username;
|
|
document.getElementById("client-email").textContent = data.email;
|
|
document.getElementById("client-phone").textContent = data.phone;
|
|
modal.classList.remove("hidden");
|
|
})
|
|
.catch(err => console.error("Error fetching client data:", err));
|
|
});
|
|
});
|
|
|
|
// Закрытие модалки
|
|
closeModal.addEventListener("click", () => {
|
|
modal.classList.add("hidden");
|
|
});
|
|
|
|
// Закрытие по клику вне модалки
|
|
modal.addEventListener("click", (e) => {
|
|
if (e.target === modal) {
|
|
modal.classList.add("hidden");
|
|
}
|
|
});
|
|
});
|
|
</script>
|