{"id":9,"date":"2025-01-02T11:46:28","date_gmt":"2025-01-02T11:46:28","guid":{"rendered":"https:\/\/ferijalos.peraic.dev\/?page_id=9"},"modified":"2025-01-02T11:46:28","modified_gmt":"2025-01-02T11:46:28","slug":"classes","status":"publish","type":"page","link":"https:\/\/ferijalos.peraic.dev\/","title":{"rendered":"Classes"},"content":{"rendered":"\n<div id=\"gym-classes-container\">\n    <div id=\"filters\">\n        <select id=\"teacher-filter\" class=\"class-filter\">\n            <option value=\"all\">All Teachers<\/option>\n            <!-- Options will be populated dynamically -->\n        <\/select>\n        <select id=\"facility-filter\" class=\"class-filter\">\n            <option value=\"all\">All Facilities<\/option>\n            <!-- Options will be populated dynamically -->\n        <\/select>\n    <\/div>\n    <div id=\"calendar\">\n        <button onclick=\"changeDate(-1)\">&#10094;<\/button>\n        <div id=\"current-date\" data-date=\"2026-09-15\">\n            <span id=\"month\">September<\/span>\n            <span id=\"day-of-week\">Tuesday<\/span>\n            <span id=\"day-of-month\">15<\/span>\n        <\/div>\n\n        <button onclick=\"changeDate(1)\">&#10095;<\/button>\n    <\/div>\n    <div id=\"classes-list\">\n        <!-- Classes will be populated dynamically -->\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    loadFilters();\n    loadClasses();\n});\n\ndocument.getElementById('teacher-filter').addEventListener('change', function() {\n    loadClasses(document.getElementById(\"current-date\").getAttribute('data-date'));\n});\n\ndocument.getElementById('facility-filter').addEventListener('change', function() {\n    loadClasses(document.getElementById(\"current-date\").getAttribute('data-date'));\n});\n\nfunction loadFilters() {\n    \/\/ U\u010ditavanje filtera za trenere\n    fetch(ajax_object.ajaxurl, {\n        method: 'POST',\n        credentials: 'same-origin',\n        headers: new Headers({\n            'Content-Type': 'application\/x-www-form-urlencoded',\n        }),\n        body: 'action=gymclasses_load_teachers'\n    })\n    .then(response => response.json())\n    .then(data => {\n        if (data.success) {\n            populateTeachersFilter(data.data);\n        } else {\n            console.error('Failed to load teachers:', data);\n        }\n    })\n    .catch(error => {\n        console.error('Error loading teachers:', error);\n    });\n\n    \/\/ U\u010ditavanje filtera za objekte\n    fetch(ajax_object.ajaxurl, {\n        method: 'POST',\n        credentials: 'same-origin',\n        headers: new Headers({\n            'Content-Type': 'application\/x-www-form-urlencoded',\n        }),\n        body: 'action=gymclasses_load_facilities'\n    })\n    .then(response => response.json())\n    .then(data => {\n        if (data.success) {\n            populateFacilitiesFilter(data.data);\n        } else {\n            console.error('Failed to load facilities:', data);\n        }\n    })\n    .catch(error => {\n        console.error('Error loading facilities:', error);\n    });\n}\n\nfunction populateTeachersFilter(teachers) {\n    const teacherSelect = document.getElementById('teacher-filter');\n    teacherSelect.innerHTML = '<option value=\"all\">All Teachers<\/option>';\n    teachers.forEach(teacher => {\n        const option = document.createElement('option');\n        option.value = teacher.ID;\n        option.textContent = teacher.display_name;\n        teacherSelect.appendChild(option);\n    });\n}\n\nfunction populateFacilitiesFilter(facilities) {\n    const facilitySelect = document.getElementById('facility-filter');\n    facilitySelect.innerHTML = '<option value=\"all\">All Facilities<\/option>';\n    facilities.forEach(facility => {\n        const option = document.createElement('option');\n        option.value = facility.Name;\n        option.textContent = facility.Name;\n        facilitySelect.appendChild(option);\n    });\n}\n\nfunction updateClassesList(classes) {\n    const classesList = document.getElementById('classes-list');\n    classesList.innerHTML = ''; \/\/ Clear existing entries\n\n    if (classes.length === 0) {\n        classesList.innerHTML = '<p>No classes available for this date.<\/p>';\n    } else {\n        classes.forEach(cl => {\n            let additionalClasses = '';\n            if (cl.Private === 'Yes') {\n                additionalClasses += ' class-item-private';\n            }\n\n            let exclusiveNotice = '';\n            if (cl.Exclusive_Membership_Name) {\n                exclusiveNotice = `Only for <span class='notice-bold'>${cl.Exclusive_Membership_Name} members<\/span>`;\n            }\n\n            const classElement = document.createElement('div');\n            classElement.className = `class-item studio-flex-row studio-flex-align-center${additionalClasses}`;\n\n            let buttonState;\n            let buttonClass;\n            if (cl.already_booked) {\n                buttonState = 'Already Booked';\n                buttonClass = 'button-ineligible';\n            } else if (cl.is_sold_out) {\n                buttonState = 'Sold Out';\n                buttonClass = 'button-soldout';\n            } else {\n                buttonState = 'Book Now';\n                buttonClass = 'button-active';\n            }\n\n            classElement.innerHTML = `\n                <div class=\"class-item-info studio-flex-column\">\n                    <div class=\"class-item-main-info studio-flex-row align-items-baseline\">\n                        <span class=\"class-title\">${cl.Name}<\/span>\n                        <span class=\"class-time\">${formatClassTime(cl.Time, cl.Duration)}<\/span>\n                    <\/div>                    \n                    <span class=\"class-item-description\">${cl.Description}<\/span>\n                    <div class=\"studio-flex-column class-item-footer\">\n                        <div class=\"studio-flex-row class-location\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" class=\"svg-class-location svg-icon\"><path d=\"M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z\"\/><\/svg>\n                            <span class=\"class-item-location\">${cl.Location_Name}${cl.Room_Name ? ', ' + cl.Room_Name : ''}<\/span>\n                        <\/div>\n                        ${exclusiveNotice ? `<div class='studio-flex-row class-location'>\n                                            <svg xmlns='http:\/\/www.w3.org\/2000\/svg' class='svg-class-location svg-icon svg-info-icon' viewBox='0 0 512 512'><path d=\"M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32V448h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V256H32c-17.7 0-32-14.3-32-32z\"\/><\/svg>\n                                            <span class=\"class-item-location\">${exclusiveNotice}<\/span>\n                                            <\/div>` : ''}\n                        <div class=\"studio-flex-row class-teacher\"> \n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" class=\"svg-class-location svg-icon\"><path d=\"M112 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm40 304V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V256.9L59.4 304.5c-9.1 15.1-28.8 20-43.9 10.9s-20-28.8-10.9-43.9l58.3-97c17.4-28.9 48.6-46.6 82.3-46.6h29.7c33.7 0 64.9 17.7 82.3 46.6l58.3 97c9.1 15.1 4.2 34.8-10.9 43.9s-34.8 4.2-43.9-10.9L232 256.9V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V352H152z\"\/><\/svg>\n                            <span class=\"class-item-teacher\">${cl.Teacher_First_Name} ${cl.Teacher_Last_Name}<\/span>\n                        <\/div>                   \n                    <\/div>\n                <\/div>\n                <div class=\"class-item-button studio-flex-row studio-flex-align-center\">\n                    <a href=\"\/class\/?class_id=${cl.ID}\"><button class=\"${buttonClass} class-book\" ${cl.already_booked || cl.is_sold_out ? 'disabled' : ''}>${buttonState}<\/button><\/a>\n                <\/div>\n            `;\n            classesList.appendChild(classElement);\n        });\n    }\n}\n\n\n\nfunction loadClasses(date = '2026-09-15') {\n    const teacherId = document.getElementById('teacher-filter').value || 'all';\n    const facilityName = document.getElementById('facility-filter').value || 'all';\n\n    fetch(ajax_object.ajaxurl, {\n        method: 'POST',\n        credentials: 'same-origin',\n        headers: new Headers({\n            'Content-Type': 'application\/x-www-form-urlencoded',\n        }),\n        body: `action=gymclasses_load_classes&date=${date}&teacher_id=${teacherId}&facility_name=${facilityName}`\n    })\n    .then(response => response.json())\n    .then(data => {\n        if (data.success) {\n            updateClassesList(data.data);\n        } else {\n            console.error('Failed to fetch classes:', data);\n        }\n    });\n}\n\nfunction formatClassTime(startTime, duration) {\n    const start = new Date('1970-01-01T' + startTime + 'Z');\n    const end = new Date(start.getTime() + duration * 60000); \/\/ Duration * 60000 to convert minutes to milliseconds\n    return `${start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${end.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;\n}\n\nfunction changeDate(direction) {\n    let currentDateElement = document.getElementById(\"current-date\");\n    let currentDate = new Date(currentDateElement.getAttribute('data-date'));\n\n    currentDate.setDate(currentDate.getDate() + direction);\n    currentDateElement.setAttribute('data-date', currentDate.toISOString().split('T')[0]);\n\n    updateDateDisplay(currentDate); \/\/ Funkcija za a\u017euriranje prikaza datuma\n    loadClasses(currentDate.toISOString().split('T')[0]); \/\/ Ponovno u\u010ditavanje classova\n}\n\nfunction updateDateDisplay(currentDate) {\n    let month = currentDate.toLocaleString('default', { month: 'long' });\n    let dayOfWeek = currentDate.toLocaleString('default', { weekday: 'long' });\n    let dayOfMonth = currentDate.getDate();\n\n    document.querySelector('#month').textContent = month;\n    document.querySelector('#day-of-week').textContent = dayOfWeek;\n    document.querySelector('#day-of-month').textContent = dayOfMonth;\n}\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ferijalos.peraic.dev\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ferijalos.peraic.dev\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ferijalos.peraic.dev\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ferijalos.peraic.dev\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ferijalos.peraic.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":0,"href":"https:\/\/ferijalos.peraic.dev\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/ferijalos.peraic.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}