File: /var/www/vhosts/greenclinic.kz/newsite/wp-content/themes/green-clinic/blocks/three_blocks_modal.php
<?php
$link = get_sub_field('link');
$directions = get_sub_field('directions');
$list = get_sub_field('list');
$i = 1;
?>
<div class="container">
<div class="hospital__tabs block3">
<div class="hospital__tab">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/img/med-case.png" alt="" />
<h3><?php
// Get the current language
$current_language = wpm_get_language();
// Output the appropriate translation based on the current language
if ($current_language == 'en') {
echo 'Directions';
} elseif ($current_language == 'kz') {
echo 'Бағыттар';
} else {
echo 'Направления'; // Default to Russian or the original language
}
?></h3>
<svg
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.6274 11.3431L22.6274 10.3431L23.6274 10.3431L23.6274 11.3431L22.6274 11.3431ZM12.7279 22.6568C12.3374 23.0473 11.7042 23.0473 11.3137 22.6568C10.9232 22.2663 10.9232 21.6331 11.3137 21.2426L12.7279 22.6568ZM14.1421 10.3431H22.6274L22.6274 12.3431H14.1421L14.1421 10.3431ZM23.6274 11.3431L23.6274 19.8284H21.6274L21.6274 11.3431L23.6274 11.3431ZM23.3345 12.0502L12.7279 22.6568L11.3137 21.2426L21.9203 10.636L23.3345 12.0502Z"
fill="white"
/>
</svg>
</div>
<a
href="<?php echo esc_url( $link); ?>"
>
<div class="hospital__tab">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/img/med-case.png" alt="" />
<h3><?php
// Get the current language
$current_language = wpm_get_language();
// Output the appropriate translation based on the current language
if ($current_language == 'en') {
echo 'Treatment according to Compulsory Social Health Insurance';
} elseif ($current_language == 'kz') {
echo 'МӘМС бойынша емдеу';
} else {
echo 'Лечение по ОСМС'; // Default to Russian or the original language
}
?></h3>
<svg
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.6274 11.3431L22.6274 10.3431L23.6274 10.3431L23.6274 11.3431L22.6274 11.3431ZM12.7279 22.6568C12.3374 23.0473 11.7042 23.0473 11.3137 22.6568C10.9232 22.2663 10.9232 21.6331 11.3137 21.2426L12.7279 22.6568ZM14.1421 10.3431H22.6274L22.6274 12.3431H14.1421L14.1421 10.3431ZM23.6274 11.3431L23.6274 19.8284H21.6274L21.6274 11.3431L23.6274 11.3431ZM23.3345 12.0502L12.7279 22.6568L11.3137 21.2426L21.9203 10.636L23.3345 12.0502Z"
fill="white"
/>
</svg>
</div>
</a>
<div class="hospital__tab">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/img/med-case.png" alt="" />
<h3><?php
// Get the current language
$current_language = wpm_get_language();
// Output the appropriate translation based on the current language
if ($current_language == 'en') {
echo 'Leaflets for patients';
} elseif ($current_language == 'kz') {
echo 'Пациенттерге арналған жадынамалар';
} else {
echo 'Памятки пациентам'; // Default to Russian or the original language
}
?></h3>
<svg
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.6274 11.3431L22.6274 10.3431L23.6274 10.3431L23.6274 11.3431L22.6274 11.3431ZM12.7279 22.6568C12.3374 23.0473 11.7042 23.0473 11.3137 22.6568C10.9232 22.2663 10.9232 21.6331 11.3137 21.2426L12.7279 22.6568ZM14.1421 10.3431H22.6274L22.6274 12.3431H14.1421L14.1421 10.3431ZM23.6274 11.3431L23.6274 19.8284H21.6274L21.6274 11.3431L23.6274 11.3431ZM23.3345 12.0502L12.7279 22.6568L11.3137 21.2426L21.9203 10.636L23.3345 12.0502Z"
fill="white"
/>
</svg>
</div>
</div>
</div>
<div id="modal">
<div id="modal-content">
<div class="modal__content-top">
<h3 class="modal__content-title">Справка 075У</h3>
<svg
class="close"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6L6 18"
stroke="#262626"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6 6L18 18"
stroke="#262626"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="modal__content-bottom"></div>
</div>
</div>
<script>
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modal-content");
const modalСontentBottom = document.querySelector(
".modal__content-bottom"
);
const closeSvg = document.querySelector(".close");
const hospitalTabs = document.querySelectorAll(".hospital__tab");
const modalContentTitle = document.querySelector(".modal__content-title");
hospitalTabs.forEach((elem, index) => {
if (index !== 1) {
elem.addEventListener("click", () => {
modal.style.display = "flex";
if (index === 0) {
modalContentTitle.innerHTML = "Направления";
// Function to create a modal content column item
function createModalContentColItem(title, fillColor, hhref) {
// Create container div
var container = document.createElement("div");
container.className = "modal__content-col-item";
// Create paragraph element
var paragraph = document.createElement("p");
paragraph.textContent = title;
var link = document.createElement("a");
link.href = hhref;
// Create SVG element
var svg = document.createElementNS(
"http://www.w3.org/2000/svg",
"svg"
);
svg.setAttribute("width", "34");
svg.setAttribute("height", "34");
svg.setAttribute("viewBox", "0 0 34 34");
svg.setAttribute("fill", "none");
// Create path element within SVG
var path = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
);
path.setAttribute(
"d",
"M22.6274 11.3431L22.6274 10.3431L23.6274 10.3431L23.6274 11.3431L22.6274 11.3431ZM12.7279 22.6568C12.3374 23.0473 11.7042 23.0473 11.3137 22.6568C10.9232 22.2663 10.9232 21.6331 11.3137 21.2426L12.7279 22.6568ZM14.1421 10.3431H22.6274L22.6274 12.3431H14.1421L14.1421 10.3431ZM23.6274 11.3431L23.6274 19.8284H21.6274L21.6274 11.3431L23.6274 11.3431ZM23.3345 12.0502L12.7279 22.6568L11.3137 21.2426L21.9203 10.636L23.3345 12.0502Z"
);
path.setAttribute("fill", fillColor);
// Append path to SVG
svg.appendChild(path);
// Append paragraph and SVG to container
link.appendChild(paragraph);
link.appendChild(svg);
container.appendChild(link);
return container;
}
function createModalContentCol(items) {
var container = document.createElement("div");
container.className = "modal__content-col";
items.forEach(function (item) {
container.appendChild(item);
});
return container;
}
// Get modal content bottom element
var modalContentBottom = document.querySelector(
".modal__content-bottom"
);
var column1Items = [
<?php foreach($directions as $item): ?>
createModalContentColItem("<?php echo get_the_title( $item );?>", "#04633E", "<?php echo the_permalink( $item );?>"),
<?php endforeach; ?>
];
var column1 = createModalContentCol(column1Items);
modalContent.style.width = "65%";
modalСontentBottom.style.gridTemplateColumns = "repeat(3, 1fr)";
modalContentBottom.innerHTML = "";
modalСontentBottom.appendChild(column1);
}
if (index === 2) {
modalContentTitle.innerHTML = "Памятки пациентам";
modalСontentBottom.innerHTML = "";
modalСontentBottom.style.gridTemplateColumns = "1fr";
modalContent.style.width = "fit-content";
modalСontentBottom.innerHTML += `
<?php foreach($list as $list_item): ?>
<div class="modal__content-col-item modal__content-col-item-r"><p><a href="<?php echo $list_item['file']['url']; ?>" target="_blank"><?php echo esc_html($list_item['file']['caption']); ?></a></p><svg fill="#000000" height="26" width="26" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482.14 482.14" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M142.024,310.194c0-8.007-5.556-12.782-15.359-12.782c-4.003,0-6.714,0.395-8.132,0.773v25.69 c1.679,0.378,3.743,0.504,6.588,0.504C135.57,324.379,142.024,319.1,142.024,310.194z"></path> <path d="M202.709,297.681c-4.39,0-7.227,0.379-8.905,0.772v56.896c1.679,0.394,4.39,0.394,6.841,0.394 c17.809,0.126,29.424-9.677,29.424-30.449C230.195,307.231,219.611,297.681,202.709,297.681z"></path> <path d="M315.458,0H121.811c-28.29,0-51.315,23.041-51.315,51.315v189.754h-5.012c-11.418,0-20.678,9.251-20.678,20.679v125.404 c0,11.427,9.259,20.677,20.678,20.677h5.012v22.995c0,28.305,23.025,51.315,51.315,51.315h264.223 c28.272,0,51.3-23.011,51.3-51.315V121.449L315.458,0z M99.053,284.379c6.06-1.024,14.578-1.796,26.579-1.796 c12.128,0,20.772,2.315,26.58,6.965c5.548,4.382,9.292,11.615,9.292,20.127c0,8.51-2.837,15.745-7.999,20.646 c-6.714,6.32-16.643,9.157-28.258,9.157c-2.585,0-4.902-0.128-6.714-0.379v31.096H99.053V284.379z M386.034,450.713H121.811 c-10.954,0-19.874-8.92-19.874-19.889v-22.995h246.31c11.42,0,20.679-9.25,20.679-20.677V261.748 c0-11.428-9.259-20.679-20.679-20.679h-246.31V51.315c0-10.938,8.921-19.858,19.874-19.858l181.89-0.19v67.233 c0,19.638,15.934,35.587,35.587,35.587l65.862-0.189l0.741,296.925C405.891,441.793,396.987,450.713,386.034,450.713z M174.065,369.801v-85.422c7.225-1.15,16.642-1.796,26.58-1.796c16.516,0,27.226,2.963,35.618,9.282 c9.031,6.714,14.704,17.416,14.704,32.781c0,16.643-6.06,28.133-14.453,35.224c-9.157,7.612-23.096,11.222-40.125,11.222 C186.191,371.092,178.966,370.446,174.065,369.801z M314.892,319.226v15.996h-31.23v34.973h-19.74v-86.966h53.16v16.122h-33.42 v19.875H314.892z"></path> </g> </g></svg></div>
<?php endforeach; ?>
`;
}
});
}
});
closeSvg.addEventListener("click", () => {
modal.style.display = "none";
});
window.onclick = (event) => {
if (event.target === modal) {
modal.style.display = "none";
}
};
</script>