Vuokrakalusto<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/uicdn.toast.com\/calendar\/latest\/toastui-calendar.min.css\" \/>\n <script src=\"https:\/\/uicdn.toast.com\/calendar\/latest\/toastui-calendar.min.js\"><\/script>\n\n <style>\n .no-scrollbar::-webkit-scrollbar { display: none; }\n .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 min-h-screen font-sans text-gray-900\">\n\n <header class=\"bg-white shadow-sm mb-8\">\n <div class=\"max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4\">\n <div>\n <h1 class=\"text-3xl font-bold text-orange-600\">Vuokrakalusto<\/h1>\n <p class=\"text-gray-500 text-sm mt-1\">Laadukkaat koneet ja laitteet kaikkiin tarpeisiin<\/p>\n <\/div>\n \n <div class=\"flex items-center space-x-3 bg-gray-50 p-2 rounded-lg border border-gray-200\">\n <span class=\"text-sm font-medium text-gray-600\" id=\"vat-label-0\">ALV 0%<\/span>\n <button id=\"vat-toggle-btn\" type=\"button\" class=\"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-orange-500 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2\" role=\"switch\" aria-checked=\"true\">\n <span id=\"vat-toggle-circle\" aria-hidden=\"true\" class=\"translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out\"><\/span>\n <\/button>\n <span class=\"text-sm font-bold text-gray-900\" id=\"vat-label-25\">ALV 25,5%<\/span>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12\">\n <div class=\"flex flex-col lg:flex-row gap-8\">\n \n <aside class=\"w-full lg:w-72 flex-shrink-0\">\n <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 lg:sticky lg:top-6\">\n \n <div class=\"mb-6\">\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Hae kalustoa<\/label>\n <div class=\"relative\">\n <input id=\"search\" type=\"text\" placeholder=\"Esim. porakone...\" \n class=\"w-full pl-10 p-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-orange-400 focus:border-orange-400 text-sm transition\">\n <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n <svg class=\"h-4 w-4 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-3\">Kategoriat<\/label>\n \n <div id=\"category-filters-desktop\" class=\"hidden lg:flex flex-col gap-2\">\n <\/div>\n\n <div class=\"lg:hidden\">\n <select id=\"category-select-mobile\" class=\"w-full p-2.5 rounded-lg border border-gray-300 bg-white focus:ring-orange-400 focus:border-orange-400 text-sm\">\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n\n <main class=\"flex-1\">\n <div id=\"equipment-list\" class=\"grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6\">\n <div class=\"col-span-full flex flex-col items-center justify-center py-20\">\n <div class=\"animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600\"><\/div>\n <p class=\"text-gray-500 mt-4\">Haetaan valikoimaa…<\/p>\n <\/div>\n <\/div>\n <\/main>\n\n <\/div>\n <\/div>\n\n <div id=\"equipment-details-modal\" class=\"fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center p-4 z-40 backdrop-blur-sm\">\n <div class=\"bg-white rounded-xl shadow-2xl w-full max-w-2xl flex flex-col max-h-[90vh] relative overflow-hidden\">\n <button id=\"close-details-modal\" class=\"absolute top-3 right-3 z-10 bg-white rounded-full p-1.5 text-gray-500 hover:text-gray-900 shadow-md transition\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n\n <div class=\"overflow-y-auto w-full flex-1\">\n <div class=\"h-48 sm:h-72 bg-gray-100 flex items-center justify-center p-4\">\n <img decoding=\"async\" id=\"detail-modal-img\" src=\"\" alt=\"Laitekuva\" class=\"max-h-full max-w-full object-contain mix-blend-multiply\">\n <\/div>\n <div class=\"p-5 sm:p-8\">\n <div class=\"mb-4\">\n <span id=\"detail-modal-category\" class=\"text-xs font-bold text-orange-500 uppercase tracking-wider mb-1 block\"><\/span>\n <h3 id=\"detail-modal-title\" class=\"text-2xl sm:text-3xl font-extrabold text-gray-900 leading-tight\"><\/h3>\n <p id=\"detail-modal-price\" class=\"text-xl font-bold text-gray-900 mt-2\"><\/p>\n <\/div>\n <div class=\"mb-6\">\n <span id=\"detail-modal-status\"><\/span>\n <\/div>\n <h4 class=\"text-sm font-bold text-gray-900 uppercase tracking-wider mb-2 border-b pb-1\">Tuotekuvaus<\/h4>\n <p id=\"detail-modal-desc\" class=\"text-gray-600 text-sm sm:text-base leading-relaxed whitespace-pre-wrap\"><\/p>\n <\/div>\n <\/div>\n\n <div class=\"border-t border-gray-100 bg-gray-50 p-4 flex flex-col sm:flex-row gap-3\">\n <button id=\"detail-modal-cal-btn\" class=\"w-full sm:w-1\/2 bg-white border border-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg hover:bg-gray-50 transition shadow-sm flex items-center justify-center gap-2 text-sm sm:text-base\">\n <svg class=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"><\/path><\/svg>\n Tarkista vapaat ajat\n <\/button>\n \n <a id=\"detail-modal-book-btn\" href=\"https:\/\/kalustonvuokraus.web.app\/etusivu\" class=\"w-full sm:w-1\/2 bg-orange-500 text-white font-bold py-3 px-4 rounded-lg hover:bg-orange-600 transition shadow-md flex items-center justify-center gap-2 text-sm sm:text-base\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\n Siirry varaamaan\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"calendar-modal\" class=\"fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center p-4 z-50 backdrop-blur-sm\">\n <div class=\"bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6 relative\">\n <button id=\"close-calendar\" class=\"absolute top-4 right-4 text-gray-400 hover:text-gray-800 transition\">\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n \n <h3 class=\"text-2xl font-bold mb-1 text-gray-800\" id=\"calendar-modal-title\">Laitteen saatavuus<\/h3>\n <p class=\"text-sm text-gray-500 mb-6\">Punaisella merkityt p\u00e4iv\u00e4t ovat varattuja.<\/p>\n \n <div class=\"flex items-center justify-between mb-4 bg-gray-50 p-2 rounded-lg border border-gray-100\">\n <div class=\"flex items-center space-x-2\">\n <button id=\"cal-today\" class=\"px-3 py-1.5 text-sm font-medium bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 shadow-sm\">T\u00e4n\u00e4\u00e4n<\/button>\n <div class=\"flex space-x-1\">\n <button id=\"cal-prev\" class=\"p-1.5 bg-white border border-gray-300 rounded-md hover:bg-gray-50 shadow-sm text-gray-600\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"><\/path><\/svg>\n <\/button>\n <button id=\"cal-next\" class=\"p-1.5 bg-white border border-gray-300 rounded-md hover:bg-gray-50 shadow-sm text-gray-600\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <span id=\"cal-title\" class=\"font-bold text-lg text-gray-800\"><\/span>\n <div class=\"w-20\"><\/div> <\/div>\n\n <div id=\"public-calendar\" class=\"h-[450px]\"><\/div>\n <\/div>\n <\/div>\n\n <script type=\"module\">\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\n import { getFirestore, collection, onSnapshot, query } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\n\n const firebaseConfig = {\n apiKey: \"AIzaSyDrS-GoVS4mKVrCP1HgmEtbWTDX2XkwezA\",\n authDomain: \"kalustonvuokraus.firebaseapp.com\",\n projectId: \"kalustonvuokraus\",\n storageBucket: \"kalustonvuokraus.firebasestorage.app\",\n messagingSenderId: \"425641093523\",\n appId: \"1:425641093523:web:0acc24844676a7081d2066\"\n };\n\n const app = initializeApp(firebaseConfig);\n const db = getFirestore(app);\n\n const userId = \"IOfD0gUN5UXwWVqPo3pVdsA6Is73\"; \n\n const equipmentListEl = document.getElementById('equipment-list');\n const searchInput = document.getElementById('search');\n const desktopCatContainer = document.getElementById('category-filters-desktop');\n const mobileCatSelect = document.getElementById('category-select-mobile');\n \n const calendarModal = document.getElementById('calendar-modal');\n let calendarInstance = null;\n\n let allEquipment = [];\n let allCategories = [];\n let allRentals = []; \n let currentCategoryFilter = 'all';\n\n onSnapshot(collection(db, `users\/${userId}\/equipmentCategories`), (snapshot) => {\n allCategories = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\n allCategories.sort((a, b) => a.name.localeCompare(b.name));\n renderCategoryFilters();\n renderEquipment();\n }, (error) => console.error(\"Kategoriavirhe:\", error));\n\n onSnapshot(collection(db, `users\/${userId}\/equipment`), (snapshot) => {\n if (snapshot.empty) {\n equipmentListEl.innerHTML = `<p class=\"text-center col-span-full text-gray-500 py-10\">Ei laitteita n\u00e4ytett\u00e4v\u00e4ksi.<\/p>`;\n allEquipment = [];\n return;\n }\n allEquipment = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\n renderEquipment();\n }, (error) => {\n console.error(\"Latausvirhe:\", error);\n equipmentListEl.innerHTML = `<p class=\"text-center col-span-full text-red-500 py-10\">Virhe: ${error.message}<\/p>`;\n });\n\n const qRentals = query(collection(db, `users\/${userId}\/publicRentals`));\n onSnapshot(qRentals, (snapshot) => {\n allRentals = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\n });\n\n \/\/ --- ALV-TILA JA KYTKIMEN LOGIIKKA ---\n let showVat = true; \/\/ Oletuksena n\u00e4ytet\u00e4\u00e4n hinnat verollisena (ALV 25.5%)\n\n document.getElementById('vat-toggle-btn').addEventListener('click', function() {\n showVat = !showVat; \/\/ Vaihdetaan tilaa (true <-> false)\n \n const btn = this;\n const circle = document.getElementById('vat-toggle-circle');\n const label0 = document.getElementById('vat-label-0');\n const label25 = document.getElementById('vat-label-25');\n \n \/\/ P\u00e4ivitet\u00e4\u00e4n napin ulkon\u00e4k\u00f6\n if (showVat) {\n btn.classList.replace('bg-gray-300', 'bg-orange-500');\n circle.classList.replace('translate-x-0', 'translate-x-5');\n label25.classList.add('font-bold', 'text-gray-900');\n label25.classList.remove('text-gray-600', 'font-medium');\n label0.classList.remove('font-bold', 'text-gray-900');\n label0.classList.add('text-gray-600', 'font-medium');\n } else {\n btn.classList.replace('bg-orange-500', 'bg-gray-300');\n circle.classList.replace('translate-x-5', 'translate-x-0');\n label0.classList.add('font-bold', 'text-gray-900');\n label0.classList.remove('text-gray-600', 'font-medium');\n label25.classList.remove('font-bold', 'text-gray-900');\n label25.classList.add('text-gray-600', 'font-medium');\n }\n\n \/\/ P\u00e4ivitet\u00e4\u00e4n n\u00e4yt\u00f6ll\u00e4 oleva laitelista uusilla hinnoilla\n renderEquipment();\n });\n\n \/\/ --- TUOTEKORTIN (MODAALIN) LOGIIKKA ---\n window.openEquipmentDetails = (id) => {\n const eq = allEquipment.find(item => item.id === id);\n if (!eq) return;\n\n const modal = document.getElementById('equipment-details-modal');\n const priceVat0 = eq.pricePerDay || 0;\n const activePrice = showVat ? (priceVat0 * 1.255) : priceVat0;\n const vatTextShort = showVat ? '(sis. alv 25,5%)' : '(alv 0%)';\n const vatTextTitle = showVat ? 'Hinnasto (sis. ALV)' : 'Hinnasto (ALV 0%)';\n \n document.getElementById('detail-modal-title').textContent = eq.name;\n document.getElementById('detail-modal-book-btn').href = \"https:\/\/kalustonvuokraus.web.app\/Kyrorent?laite=\" + eq.id;\n document.getElementById('detail-modal-category').textContent = eq.category || 'Laitteet';\n document.getElementById('detail-modal-price').innerHTML = `${activePrice.toFixed(2)} \u20ac <span class=\"text-sm text-gray-500 font-medium\">\/ vrk ${vatTextShort}<\/span>`;\n \n \/\/ --- UUSI HINNOITTELUTAULUKKO ALKAA ---\n const weekendPrice = activePrice * 2.5;\n const weekPrice = activePrice * 4;\n const descriptionText = eq.description || 'Ei kuvausta saatavilla.';\n \n const pricingTableHTML = `\n <div class=\"mt-6 bg-orange-50\/50 rounded-xl p-5 border border-orange-100 shadow-sm\">\n <h4 class=\"text-sm font-bold text-gray-900 mb-4 flex items-center uppercase tracking-wider\">\n <svg class=\"w-4 h-4 mr-2 text-orange-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n ${vatTextTitle}\n <\/h4>\n <div class=\"space-y-3 text-sm\">\n <div class=\"flex justify-between items-center border-b border-gray-200 pb-2\">\n <span class=\"text-gray-600\">P\u00e4iv\u00e4vuokra <span class=\"text-xs text-gray-400\">(24h)<\/span><\/span>\n <span class=\"font-bold text-gray-900\">${activePrice.toFixed(2)} \u20ac<\/span>\n <\/div>\n <div class=\"flex justify-between items-center border-b border-gray-200 pb-2\">\n <span class=\"text-gray-600\">Viikonloppu <span class=\"text-xs text-gray-400\">(Pe(IP)-Ma(AP))<\/span><\/span>\n <span class=\"font-bold text-gray-900\">${weekendPrice.toFixed(2)} \u20ac<\/span>\n <\/div>\n <div class=\"flex justify-between items-center border-b border-gray-200 pb-2\">\n <span class=\"text-gray-600\">Ty\u00f6viikko <span class=\"text-xs text-gray-400\">(Ma-Pe)<\/span><\/span>\n <span class=\"font-bold text-gray-900\">${weekPrice.toFixed(2)} \u20ac<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pt-1\">\n <span class=\"text-gray-600\">Pitk\u00e4aikaisvuokra<\/span>\n <a href=\"mailto:info@kyrorent.fi\" class=\"font-bold text-orange-500 hover:text-blue-800 transition-colors cursor-pointer\">Kysy tarjous!<\/a>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Yhdistet\u00e4\u00e4n kuvaus ja hinnastotaulukko\n document.getElementById('detail-modal-desc').innerHTML = `<p class=\"whitespace-pre-line text-gray-700\">${descriptionText}<\/p>` + pricingTableHTML;\n \/\/ --- HINNOITTELUTAULUKKO P\u00c4\u00c4TTYY ---\n\n document.getElementById('detail-modal-img').src = eq.imageUrl || 'https:\/\/via.placeholder.com\/400x300?text=Ei+kuvaa';\n \n let statusBadge = '';\n if (eq.status === 'huollossa') {\n statusBadge = `<span class=\"px-2.5 py-1 text-xs font-bold rounded bg-red-100 text-red-700 uppercase tracking-wider\">Huollossa<\/span>`;\n } else if (eq.status === 'vuokrattu') {\n statusBadge = `<span class=\"px-2.5 py-1 text-xs font-bold rounded bg-yellow-100 text-yellow-800 uppercase tracking-wider\">Vuokralla nyt<\/span>`;\n } else {\n statusBadge = `<span class=\"px-2.5 py-1 text-xs font-bold rounded bg-green-100 text-green-700 uppercase tracking-wider\">Vuokrattavissa<\/span>`;\n }\n document.getElementById('detail-modal-status').innerHTML = statusBadge;\n\n \/\/ Yhdist\u00e4 kalenterinappi\n const calBtn = document.getElementById('detail-modal-cal-btn');\n calBtn.onclick = () => {\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n window.openAvailabilityCalendar(eq.id, eq.name);\n };\n\n \/\/ N\u00e4yt\u00e4 modaali\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n };\n\n \/\/ Tuotemodaalin sulkeminen\n document.getElementById('close-details-modal').onclick = () => {\n const modal = document.getElementById('equipment-details-modal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n };\n \/\/ Sulje klikkaamalla taustaa\n document.getElementById('equipment-details-modal').onclick = (e) => {\n const modal = document.getElementById('equipment-details-modal');\n if (e.target === modal) {\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n };\n\n \/\/ --- KALENTERIN LOGIIKKA ---\n \n function initCalendar() {\n if (calendarInstance) return;\n \n const container = document.getElementById('public-calendar');\n calendarInstance = new tui.Calendar(container, {\n defaultView: 'month',\n isReadOnly: true,\n useCreationPopup: false,\n useDetailPopup: false,\n month: {\n dayNames: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],\n visibleWeeksCount: 0,\n },\n theme: {\n common: {\n border: '1px solid #e5e7eb',\n backgroundColor: 'white',\n holiday: { color: '#ff4040' },\n saturday: { color: '#333' },\n dayname: { color: '#333' }\n }\n }\n });\n\n const updateTitle = () => {\n const date = calendarInstance.getDate().toDate();\n const title = date.toLocaleDateString('fi-FI', { month: 'long', year: 'numeric' });\n document.getElementById('cal-title').textContent = title.charAt(0).toUpperCase() + title.slice(1);\n };\n\n document.getElementById('cal-prev').onclick = () => { calendarInstance.prev(); updateTitle(); };\n document.getElementById('cal-next').onclick = () => { calendarInstance.next(); updateTitle(); };\n document.getElementById('cal-today').onclick = () => { calendarInstance.today(); updateTitle(); };\n \n document.getElementById('close-calendar').onclick = () => {\n calendarModal.classList.add('hidden');\n calendarModal.classList.remove('flex');\n };\n \n calendarModal.onclick = (e) => {\n if (e.target === calendarModal) {\n calendarModal.classList.add('hidden');\n calendarModal.classList.remove('flex');\n }\n };\n\n updateTitle();\n }\n\n window.openAvailabilityCalendar = (equipmentId, equipmentName) => {\n calendarModal.classList.remove('hidden');\n calendarModal.classList.add('flex');\n document.getElementById('calendar-modal-title').textContent = equipmentName;\n\n setTimeout(() => {\n initCalendar();\n calendarInstance.clear();\n\n const events = [];\n const today = new Date();\n today.setHours(0,0,0,0);\n \n allRentals.forEach(rental => {\n const hasItem = rental.equipmentItems && rental.equipmentItems.find(i => i.equipmentId === equipmentId);\n \n if (hasItem) {\n const parseDate = (str) => {\n if(!str) return null;\n const parts = str.split('-');\n if(parts.length === 3) return new Date(parts[0], parts[1]-1, parts[2]);\n return new Date(str);\n };\n\n const start = parseDate(rental.startDate);\n const end = parseDate(rental.endDate);\n \n if(end) end.setDate(end.getDate() + 1);\n\n if (start && end) {\n events.push({\n id: rental.id,\n calendarId: '1',\n title: 'Varattu',\n category: 'allday',\n start: start,\n end: end,\n isAllday: true,\n backgroundColor: '#ef4444',\n borderColor: '#ef4444',\n color: 'white'\n });\n }\n }\n });\n\n calendarInstance.createEvents(events);\n calendarInstance.today(); \n calendarInstance.render();\n \n const date = calendarInstance.getDate().toDate();\n const title = date.toLocaleDateString('fi-FI', { month: 'long', year: 'numeric' });\n document.getElementById('cal-title').textContent = title.charAt(0).toUpperCase() + title.slice(1);\n\n }, 50);\n };\n\n\n \/\/ --- KUUNTELIJAT ---\n\n searchInput.addEventListener('input', () => renderEquipment());\n\n if (mobileCatSelect) {\n mobileCatSelect.addEventListener('change', (e) => {\n currentCategoryFilter = e.target.value;\n renderCategoryFilters(); \n renderEquipment(); \n });\n }\n\n \/\/ --- RENDER\u00d6INTI ---\n\n function renderCategoryFilters() {\n if (desktopCatContainer) {\n desktopCatContainer.innerHTML = '';\n const allBtn = createCategoryButton('Kaikki tuotteet', 'all');\n desktopCatContainer.appendChild(allBtn);\n allCategories.forEach(cat => {\n const btn = createCategoryButton(cat.name, cat.id);\n desktopCatContainer.appendChild(btn);\n });\n }\n if (mobileCatSelect) {\n mobileCatSelect.innerHTML = '';\n const allOpt = document.createElement('option');\n allOpt.value = 'all'; allOpt.textContent = 'Kaikki tuotteet';\n mobileCatSelect.appendChild(allOpt);\n allCategories.forEach(cat => {\n const opt = document.createElement('option');\n opt.value = cat.id; opt.textContent = cat.name;\n mobileCatSelect.appendChild(opt);\n });\n mobileCatSelect.value = currentCategoryFilter;\n }\n }\n\n function createCategoryButton(name, id) {\n const btn = document.createElement('button');\n const isActive = currentCategoryFilter === id;\n \n btn.className = `\n w-full text-left px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 flex justify-between items-center\n ${isActive \n ? 'bg-orange-500 text-white shadow-md' \n : 'bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-orange-500 border border-transparent hover:border-gray-200'}\n `;\n \n btn.innerHTML = `<span>${name}<\/span> ${isActive ? '<svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/><\/svg>' : ''}`;\n \n btn.onclick = () => {\n currentCategoryFilter = id;\n renderCategoryFilters();\n renderEquipment();\n };\n return btn;\n }\n\n function renderEquipment() {\n const query = searchInput.value.toLowerCase();\n const filtered = allEquipment.filter(item => {\n const matchesSearch = (item.name || '').toLowerCase().includes(query) || \n (item.description || '').toLowerCase().includes(query);\n const matchesCategory = currentCategoryFilter === 'all' || item.categoryId === currentCategoryFilter;\n return matchesSearch && matchesCategory;\n });\n\n equipmentListEl.innerHTML = '';\n\n if (filtered.length === 0) {\n equipmentListEl.innerHTML = `\n <div class=\"col-span-full text-center py-12 bg-white rounded-xl border border-dashed border-gray-300 w-full\">\n <p class=\"text-gray-500 text-lg\">Ei hakuehtoja vastaavia laitteita.<\/p>\n <button onclick=\"document.getElementById('search').value=''; renderEquipment();\" class=\"text-orange-500 mt-2 hover:underline\">Tyhjenn\u00e4 haku<\/button>\n <\/div>`;\n return;\n }\n\n filtered.forEach(eq => {\n let statusBadge = '';\n\n \/\/ Tilalogiikka kompaktimpaan tilaan\n if (eq.status === 'huollossa') {\n statusBadge = `<span class=\"px-2 py-0.5 text-[10px] sm:text-xs font-bold rounded bg-red-100 text-red-700 uppercase tracking-wider\">Huollossa<\/span>`;\n } \n else if (eq.status === 'vuokrattu') {\n statusBadge = `<span class=\"px-2 py-0.5 text-[10px] sm:text-xs font-bold rounded bg-yellow-100 text-yellow-800 uppercase tracking-wider\">Varattu<\/span>`;\n } \n else {\n statusBadge = `<span class=\"px-2 py-0.5 text-[10px] sm:text-xs font-bold rounded bg-green-100 text-green-700 uppercase tracking-wider\">Vapaa<\/span>`;\n }\n\n const imageUrl = eq.imageUrl || 'https:\/\/via.placeholder.com\/400x300?text=Ei+kuvaa';\n const priceVat0 = eq.pricePerDay || 0;\n \/\/ K\u00c4YTET\u00c4\u00c4N KYTKIMEN TILAA:\n const activePrice = showVat ? (priceVat0 * 1.255) : priceVat0;\n const vatSuffix = showVat ? 'sis. alv' : 'alv 0%';\n\n \/\/ KORJAUS 2: Tiiviimpi kortti joka on kokonaan klikattava\n const card = document.createElement('div');\n card.className = 'bg-white rounded-xl shadow-sm hover:shadow-lg overflow-hidden transition-all duration-300 border border-gray-100 flex flex-col group cursor-pointer';\n card.onclick = () => window.openEquipmentDetails(eq.id);\n \n card.innerHTML = `\n <div class=\"relative h-32 sm:h-48 w-full bg-gray-100 flex items-center justify-center p-2 border-b border-gray-100 overflow-hidden\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${eq.name}\" class=\"max-h-full max-w-full object-contain mix-blend-multiply group-hover:scale-110 transition-transform duration-500\">\n <div class=\"absolute top-2 right-2 shadow-sm\">${statusBadge}<\/div>\n <\/div>\n <div class=\"p-3 sm:p-5 flex-1 flex flex-col\">\n <h3 class=\"text-sm sm:text-base font-bold text-gray-900 mb-1 leading-tight group-hover:text-orange-600 transition-colors line-clamp-2\">${eq.name}<\/h3>\n \n <div class=\"mt-auto pt-2 flex items-baseline\">\n <div class=\"text-base sm:text-xl font-extrabold text-gray-900\">${activePrice.toFixed(2)} \u20ac<\/div>\n <span class=\"text-[10px] sm:text-xs text-gray-500 ml-1 font-medium\">\/ vrk (${vatSuffix})<\/span>\n <\/div>\n <\/div>\n `;\n equipmentListEl.appendChild(card);\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vuokrakalusto Vuokrakalusto Laadukkaat koneet ja laitteet kaikkiin tarpeisiin ALV 0% ALV 25,5% Hae kalustoa Kategoriat Haetaan valikoimaa… Tuotekuvaus Tarkista vapaat […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":20,"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/pages\/52\/revisions\/112"}],"wp:attachment":[{"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/media?parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":52,"date":"2026-02-18T19:15:58","date_gmt":"2026-02-18T19:15:58","guid":{"rendered":"https:\/\/kyrorent.fi\/?page_id=52"},"modified":"2026-03-30T08:49:21","modified_gmt":"2026-03-30T08:49:21","slug":"vuokraus","status":"publish","type":"page","link":"https:\/\/kyrorent.fi\/index.php\/vuokraus\/","title":{"rendered":"Vuokraus"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n Vuokrakalusto<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/uicdn.toast.com\/calendar\/latest\/toastui-calendar.min.css\" \/>\n <script src=\"https:\/\/uicdn.toast.com\/calendar\/latest\/toastui-calendar.min.js\"><\/script>\n\n <style>\n .no-scrollbar::-webkit-scrollbar { display: none; }\n .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 min-h-screen font-sans text-gray-900\">\n\n <header class=\"bg-white shadow-sm mb-8\">\n <div class=\"max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4\">\n <div>\n <h1 class=\"text-3xl font-bold text-orange-600\">Vuokrakalusto<\/h1>\n <p class=\"text-gray-500 text-sm mt-1\">Laadukkaat koneet ja laitteet kaikkiin tarpeisiin<\/p>\n <\/div>\n \n <div class=\"flex items-center space-x-3 bg-gray-50 p-2 rounded-lg border border-gray-200\">\n <span class=\"text-sm font-medium text-gray-600\" id=\"vat-label-0\">ALV 0%<\/span>\n <button id=\"vat-toggle-btn\" type=\"button\" class=\"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-orange-500 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2\" role=\"switch\" aria-checked=\"true\">\n <span id=\"vat-toggle-circle\" aria-hidden=\"true\" class=\"translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out\"><\/span>\n <\/button>\n <span class=\"text-sm font-bold text-gray-900\" id=\"vat-label-25\">ALV 25,5%<\/span>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12\">\n <div class=\"flex flex-col lg:flex-row gap-8\">\n \n <aside class=\"w-full lg:w-72 flex-shrink-0\">\n <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 lg:sticky lg:top-6\">\n \n <div class=\"mb-6\">\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Hae kalustoa<\/label>\n <div class=\"relative\">\n <input id=\"search\" type=\"text\" placeholder=\"Esim. porakone...\" \n class=\"w-full pl-10 p-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-orange-400 focus:border-orange-400 text-sm transition\">\n <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n <svg class=\"h-4 w-4 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-3\">Kategoriat<\/label>\n \n <div id=\"category-filters-desktop\" class=\"hidden lg:flex flex-col gap-2\">\n <\/div>\n\n <div class=\"lg:hidden\">\n <select id=\"category-select-mobile\" class=\"w-full p-2.5 rounded-lg border border-gray-300 bg-white focus:ring-orange-400 focus:border-orange-400 text-sm\">\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n\n <main class=\"flex-1\">\n <div id=\"equipment-list\" class=\"grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6\">\n <div class=\"col-span-full flex flex-col items-center justify-center py-20\">\n <div class=\"animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600\"><\/div>\n <p class=\"text-gray-500 mt-4\">Haetaan valikoimaa…<\/p>\n <\/div>\n <\/div>\n <\/main>\n\n <\/div>\n <\/div>\n\n <div id=\"equipment-details-modal\" class=\"fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center p-4 z-40 backdrop-blur-sm\">\n <div class=\"bg-white rounded-xl shadow-2xl w-full max-w-2xl flex flex-col max-h-[90vh] relative overflow-hidden\">\n <button id=\"close-details-modal\" class=\"absolute top-3 right-3 z-10 bg-white rounded-full p-1.5 text-gray-500 hover:text-gray-900 shadow-md transition\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n\n <div class=\"overflow-y-auto w-full flex-1\">\n <div class=\"h-48 sm:h-72 bg-gray-100 flex items-center justify-center p-4\">\n <img decoding=\"async\" id=\"detail-modal-img\" src=\"\" alt=\"Laitekuva\" class=\"max-h-full max-w-full object-contain mix-blend-multiply\">\n <\/div>\n <div class=\"p-5 sm:p-8\">\n <div class=\"mb-4\">\n <span id=\"detail-modal-category\" class=\"text-xs font-bold text-orange-500 uppercase tracking-wider mb-1 block\"><\/span>\n <h3 id=\"detail-modal-title\" class=\"text-2xl sm:text-3xl font-extrabold text-gray-900 leading-tight\"><\/h3>\n <p id=\"detail-modal-price\" class=\"text-xl font-bold text-gray-900 mt-2\"><\/p>\n <\/div>\n <div class=\"mb-6\">\n <span id=\"detail-modal-status\"><\/span>\n <\/div>\n <h4 class=\"text-sm font-bold text-gray-900 uppercase tracking-wider mb-2 border-b pb-1\">Tuotekuvaus<\/h4>\n <p id=\"detail-modal-desc\" class=\"text-gray-600 text-sm sm:text-base leading-relaxed whitespace-pre-wrap\"><\/p>\n <\/div>\n <\/div>\n\n <div class=\"border-t border-gray-100 bg-gray-50 p-4 flex flex-col sm:flex-row gap-3\">\n <button id=\"detail-modal-cal-btn\" class=\"w-full sm:w-1\/2 bg-white border border-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg hover:bg-gray-50 transition shadow-sm flex items-center justify-center gap-2 text-sm sm:text-base\">\n <svg class=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"><\/path><\/svg>\n Tarkista vapaat ajat\n <\/button>\n \n <a id=\"detail-modal-book-btn\" href=\"https:\/\/kalustonvuokraus.web.app\/etusivu\" class=\"w-full sm:w-1\/2 bg-orange-500 text-white font-bold py-3 px-4 rounded-lg hover:bg-orange-600 transition shadow-md flex items-center justify-center gap-2 text-sm sm:text-base\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\n Siirry varaamaan\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"calendar-modal\" class=\"fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center p-4 z-50 backdrop-blur-sm\">\n <div class=\"bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6 relative\">\n <button id=\"close-calendar\" class=\"absolute top-4 right-4 text-gray-400 hover:text-gray-800 transition\">\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n \n <h3 class=\"text-2xl font-bold mb-1 text-gray-800\" id=\"calendar-modal-title\">Laitteen saatavuus<\/h3>\n <p class=\"text-sm text-gray-500 mb-6\">Punaisella merkityt p\u00e4iv\u00e4t ovat varattuja.<\/p>\n \n <div class=\"flex items-center justify-between mb-4 bg-gray-50 p-2 rounded-lg border border-gray-100\">\n <div class=\"flex items-center space-x-2\">\n <button id=\"cal-today\" class=\"px-3 py-1.5 text-sm font-medium bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 shadow-sm\">T\u00e4n\u00e4\u00e4n<\/button>\n <div class=\"flex space-x-1\">\n <button id=\"cal-prev\" class=\"p-1.5 bg-white border border-gray-300 rounded-md hover:bg-gray-50 shadow-sm text-gray-600\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"><\/path><\/svg>\n <\/button>\n <button id=\"cal-next\" class=\"p-1.5 bg-white border border-gray-300 rounded-md hover:bg-gray-50 shadow-sm text-gray-600\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <span id=\"cal-title\" class=\"font-bold text-lg text-gray-800\"><\/span>\n <div class=\"w-20\"><\/div> <\/div>\n\n <div id=\"public-calendar\" class=\"h-[450px]\"><\/div>\n <\/div>\n <\/div>\n\n <script type=\"module\">\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\n import { getFirestore, collection, onSnapshot, query } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\n\n const firebaseConfig = {\n apiKey: \"AIzaSyDrS-GoVS4mKVrCP1HgmEtbWTDX2XkwezA\",\n authDomain: \"kalustonvuokraus.firebaseapp.com\",\n projectId: \"kalustonvuokraus\",\n storageBucket: \"kalustonvuokraus.firebasestorage.app\",\n messagingSenderId: \"425641093523\",\n appId: \"1:425641093523:web:0acc24844676a7081d2066\"\n };\n\n const app = initializeApp(firebaseConfig);\n const db = getFirestore(app);\n\n const userId = \"IOfD0gUN5UXwWVqPo3pVdsA6Is73\"; \n\n const equipmentListEl = document.getElementById('equipment-list');\n const searchInput = document.getElementById('search');\n const desktopCatContainer = document.getElementById('category-filters-desktop');\n const mobileCatSelect = document.getElementById('category-select-mobile');\n \n const calendarModal = document.getElementById('calendar-modal');\n let calendarInstance = null;\n\n let allEquipment = [];\n let allCategories = [];\n let allRentals = []; \n let currentCategoryFilter = 'all';\n\n onSnapshot(collection(db, `users\/${userId}\/equipmentCategories`), (snapshot) => {\n allCategories = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\n allCategories.sort((a, b) => a.name.localeCompare(b.name));\n renderCategoryFilters();\n renderEquipment();\n }, (error) => console.error(\"Kategoriavirhe:\", error));\n\n onSnapshot(collection(db, `users\/${userId}\/equipment`), (snapshot) => {\n if (snapshot.empty) {\n equipmentListEl.innerHTML = `<p class=\"text-center col-span-full text-gray-500 py-10\">Ei laitteita n\u00e4ytett\u00e4v\u00e4ksi.<\/p>`;\n allEquipment = [];\n return;\n }\n allEquipment = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\n renderEquipment();\n }, (error) => {\n console.error(\"Latausvirhe:\", error);\n equipmentListEl.innerHTML = `<p class=\"text-center col-span-full text-red-500 py-10\">Virhe: ${error.message}<\/p>`;\n });\n\n const qRentals = query(collection(db, `users\/${userId}\/publicRentals`));\n onSnapshot(qRentals, (snapshot) => {\n allRentals = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));\n });\n\n \/\/ --- ALV-TILA JA KYTKIMEN LOGIIKKA ---\n let showVat = true; \/\/ Oletuksena n\u00e4ytet\u00e4\u00e4n hinnat verollisena (ALV 25.5%)\n\n document.getElementById('vat-toggle-btn').addEventListener('click', function() {\n showVat = !showVat; \/\/ Vaihdetaan tilaa (true <-> false)\n \n const btn = this;\n const circle = document.getElementById('vat-toggle-circle');\n const label0 = document.getElementById('vat-label-0');\n const label25 = document.getElementById('vat-label-25');\n \n \/\/ P\u00e4ivitet\u00e4\u00e4n napin ulkon\u00e4k\u00f6\n if (showVat) {\n btn.classList.replace('bg-gray-300', 'bg-orange-500');\n circle.classList.replace('translate-x-0', 'translate-x-5');\n label25.classList.add('font-bold', 'text-gray-900');\n label25.classList.remove('text-gray-600', 'font-medium');\n label0.classList.remove('font-bold', 'text-gray-900');\n label0.classList.add('text-gray-600', 'font-medium');\n } else {\n btn.classList.replace('bg-orange-500', 'bg-gray-300');\n circle.classList.replace('translate-x-5', 'translate-x-0');\n label0.classList.add('font-bold', 'text-gray-900');\n label0.classList.remove('text-gray-600', 'font-medium');\n label25.classList.remove('font-bold', 'text-gray-900');\n label25.classList.add('text-gray-600', 'font-medium');\n }\n\n \/\/ P\u00e4ivitet\u00e4\u00e4n n\u00e4yt\u00f6ll\u00e4 oleva laitelista uusilla hinnoilla\n renderEquipment();\n });\n\n \/\/ --- TUOTEKORTIN (MODAALIN) LOGIIKKA ---\n window.openEquipmentDetails = (id) => {\n const eq = allEquipment.find(item => item.id === id);\n if (!eq) return;\n\n const modal = document.getElementById('equipment-details-modal');\n const priceVat0 = eq.pricePerDay || 0;\n const activePrice = showVat ? (priceVat0 * 1.255) : priceVat0;\n const vatTextShort = showVat ? '(sis. alv 25,5%)' : '(alv 0%)';\n const vatTextTitle = showVat ? 'Hinnasto (sis. ALV)' : 'Hinnasto (ALV 0%)';\n \n document.getElementById('detail-modal-title').textContent = eq.name;\n document.getElementById('detail-modal-book-btn').href = \"https:\/\/kalustonvuokraus.web.app\/Kyrorent?laite=\" + eq.id;\n document.getElementById('detail-modal-category').textContent = eq.category || 'Laitteet';\n document.getElementById('detail-modal-price').innerHTML = `${activePrice.toFixed(2)} \u20ac <span class=\"text-sm text-gray-500 font-medium\">\/ vrk ${vatTextShort}<\/span>`;\n \n \/\/ --- UUSI HINNOITTELUTAULUKKO ALKAA ---\n const weekendPrice = activePrice * 2.5;\n const weekPrice = activePrice * 4;\n const descriptionText = eq.description || 'Ei kuvausta saatavilla.';\n \n const pricingTableHTML = `\n <div class=\"mt-6 bg-orange-50\/50 rounded-xl p-5 border border-orange-100 shadow-sm\">\n <h4 class=\"text-sm font-bold text-gray-900 mb-4 flex items-center uppercase tracking-wider\">\n <svg class=\"w-4 h-4 mr-2 text-orange-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n ${vatTextTitle}\n <\/h4>\n <div class=\"space-y-3 text-sm\">\n <div class=\"flex justify-between items-center border-b border-gray-200 pb-2\">\n <span class=\"text-gray-600\">P\u00e4iv\u00e4vuokra <span class=\"text-xs text-gray-400\">(24h)<\/span><\/span>\n <span class=\"font-bold text-gray-900\">${activePrice.toFixed(2)} \u20ac<\/span>\n <\/div>\n <div class=\"flex justify-between items-center border-b border-gray-200 pb-2\">\n <span class=\"text-gray-600\">Viikonloppu <span class=\"text-xs text-gray-400\">(Pe(IP)-Ma(AP))<\/span><\/span>\n <span class=\"font-bold text-gray-900\">${weekendPrice.toFixed(2)} \u20ac<\/span>\n <\/div>\n <div class=\"flex justify-between items-center border-b border-gray-200 pb-2\">\n <span class=\"text-gray-600\">Ty\u00f6viikko <span class=\"text-xs text-gray-400\">(Ma-Pe)<\/span><\/span>\n <span class=\"font-bold text-gray-900\">${weekPrice.toFixed(2)} \u20ac<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pt-1\">\n <span class=\"text-gray-600\">Pitk\u00e4aikaisvuokra<\/span>\n <a href=\"mailto:info@kyrorent.fi\" class=\"font-bold text-orange-500 hover:text-blue-800 transition-colors cursor-pointer\">Kysy tarjous!<\/a>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Yhdistet\u00e4\u00e4n kuvaus ja hinnastotaulukko\n document.getElementById('detail-modal-desc').innerHTML = `<p class=\"whitespace-pre-line text-gray-700\">${descriptionText}<\/p>` + pricingTableHTML;\n \/\/ --- HINNOITTELUTAULUKKO P\u00c4\u00c4TTYY ---\n\n document.getElementById('detail-modal-img').src = eq.imageUrl || 'https:\/\/via.placeholder.com\/400x300?text=Ei+kuvaa';\n \n let statusBadge = '';\n if (eq.status === 'huollossa') {\n statusBadge = `<span class=\"px-2.5 py-1 text-xs font-bold rounded bg-red-100 text-red-700 uppercase tracking-wider\">Huollossa<\/span>`;\n } else if (eq.status === 'vuokrattu') {\n statusBadge = `<span class=\"px-2.5 py-1 text-xs font-bold rounded bg-yellow-100 text-yellow-800 uppercase tracking-wider\">Vuokralla nyt<\/span>`;\n } else {\n statusBadge = `<span class=\"px-2.5 py-1 text-xs font-bold rounded bg-green-100 text-green-700 uppercase tracking-wider\">Vuokrattavissa<\/span>`;\n }\n document.getElementById('detail-modal-status').innerHTML = statusBadge;\n\n \/\/ Yhdist\u00e4 kalenterinappi\n const calBtn = document.getElementById('detail-modal-cal-btn');\n calBtn.onclick = () => {\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n window.openAvailabilityCalendar(eq.id, eq.name);\n };\n\n \/\/ N\u00e4yt\u00e4 modaali\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n };\n\n \/\/ Tuotemodaalin sulkeminen\n document.getElementById('close-details-modal').onclick = () => {\n const modal = document.getElementById('equipment-details-modal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n };\n \/\/ Sulje klikkaamalla taustaa\n document.getElementById('equipment-details-modal').onclick = (e) => {\n const modal = document.getElementById('equipment-details-modal');\n if (e.target === modal) {\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n };\n\n \/\/ --- KALENTERIN LOGIIKKA ---\n \n function initCalendar() {\n if (calendarInstance) return;\n \n const container = document.getElementById('public-calendar');\n calendarInstance = new tui.Calendar(container, {\n defaultView: 'month',\n isReadOnly: true,\n useCreationPopup: false,\n useDetailPopup: false,\n month: {\n dayNames: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],\n visibleWeeksCount: 0,\n },\n theme: {\n common: {\n border: '1px solid #e5e7eb',\n backgroundColor: 'white',\n holiday: { color: '#ff4040' },\n saturday: { color: '#333' },\n dayname: { color: '#333' }\n }\n }\n });\n\n const updateTitle = () => {\n const date = calendarInstance.getDate().toDate();\n const title = date.toLocaleDateString('fi-FI', { month: 'long', year: 'numeric' });\n document.getElementById('cal-title').textContent = title.charAt(0).toUpperCase() + title.slice(1);\n };\n\n document.getElementById('cal-prev').onclick = () => { calendarInstance.prev(); updateTitle(); };\n document.getElementById('cal-next').onclick = () => { calendarInstance.next(); updateTitle(); };\n document.getElementById('cal-today').onclick = () => { calendarInstance.today(); updateTitle(); };\n \n document.getElementById('close-calendar').onclick = () => {\n calendarModal.classList.add('hidden');\n calendarModal.classList.remove('flex');\n };\n \n calendarModal.onclick = (e) => {\n if (e.target === calendarModal) {\n calendarModal.classList.add('hidden');\n calendarModal.classList.remove('flex');\n }\n };\n\n updateTitle();\n }\n\n window.openAvailabilityCalendar = (equipmentId, equipmentName) => {\n calendarModal.classList.remove('hidden');\n calendarModal.classList.add('flex');\n document.getElementById('calendar-modal-title').textContent = equipmentName;\n\n setTimeout(() => {\n initCalendar();\n calendarInstance.clear();\n\n const events = [];\n const today = new Date();\n today.setHours(0,0,0,0);\n \n allRentals.forEach(rental => {\n const hasItem = rental.equipmentItems && rental.equipmentItems.find(i => i.equipmentId === equipmentId);\n \n if (hasItem) {\n const parseDate = (str) => {\n if(!str) return null;\n const parts = str.split('-');\n if(parts.length === 3) return new Date(parts[0], parts[1]-1, parts[2]);\n return new Date(str);\n };\n\n const start = parseDate(rental.startDate);\n const end = parseDate(rental.endDate);\n \n if(end) end.setDate(end.getDate() + 1);\n\n if (start && end) {\n events.push({\n id: rental.id,\n calendarId: '1',\n title: 'Varattu',\n category: 'allday',\n start: start,\n end: end,\n isAllday: true,\n backgroundColor: '#ef4444',\n borderColor: '#ef4444',\n color: 'white'\n });\n }\n }\n });\n\n calendarInstance.createEvents(events);\n calendarInstance.today(); \n calendarInstance.render();\n \n const date = calendarInstance.getDate().toDate();\n const title = date.toLocaleDateString('fi-FI', { month: 'long', year: 'numeric' });\n document.getElementById('cal-title').textContent = title.charAt(0).toUpperCase() + title.slice(1);\n\n }, 50);\n };\n\n\n \/\/ --- KUUNTELIJAT ---\n\n searchInput.addEventListener('input', () => renderEquipment());\n\n if (mobileCatSelect) {\n mobileCatSelect.addEventListener('change', (e) => {\n currentCategoryFilter = e.target.value;\n renderCategoryFilters(); \n renderEquipment(); \n });\n }\n\n \/\/ --- RENDER\u00d6INTI ---\n\n function renderCategoryFilters() {\n if (desktopCatContainer) {\n desktopCatContainer.innerHTML = '';\n const allBtn = createCategoryButton('Kaikki tuotteet', 'all');\n desktopCatContainer.appendChild(allBtn);\n allCategories.forEach(cat => {\n const btn = createCategoryButton(cat.name, cat.id);\n desktopCatContainer.appendChild(btn);\n });\n }\n if (mobileCatSelect) {\n mobileCatSelect.innerHTML = '';\n const allOpt = document.createElement('option');\n allOpt.value = 'all'; allOpt.textContent = 'Kaikki tuotteet';\n mobileCatSelect.appendChild(allOpt);\n allCategories.forEach(cat => {\n const opt = document.createElement('option');\n opt.value = cat.id; opt.textContent = cat.name;\n mobileCatSelect.appendChild(opt);\n });\n mobileCatSelect.value = currentCategoryFilter;\n }\n }\n\n function createCategoryButton(name, id) {\n const btn = document.createElement('button');\n const isActive = currentCategoryFilter === id;\n \n btn.className = `\n w-full text-left px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 flex justify-between items-center\n ${isActive \n ? 'bg-orange-500 text-white shadow-md' \n : 'bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-orange-500 border border-transparent hover:border-gray-200'}\n `;\n \n btn.innerHTML = `<span>${name}<\/span> ${isActive ? '<svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/><\/svg>' : ''}`;\n \n btn.onclick = () => {\n currentCategoryFilter = id;\n renderCategoryFilters();\n renderEquipment();\n };\n return btn;\n }\n\n function renderEquipment() {\n const query = searchInput.value.toLowerCase();\n const filtered = allEquipment.filter(item => {\n const matchesSearch = (item.name || '').toLowerCase().includes(query) || \n (item.description || '').toLowerCase().includes(query);\n const matchesCategory = currentCategoryFilter === 'all' || item.categoryId === currentCategoryFilter;\n return matchesSearch && matchesCategory;\n });\n\n equipmentListEl.innerHTML = '';\n\n if (filtered.length === 0) {\n equipmentListEl.innerHTML = `\n <div class=\"col-span-full text-center py-12 bg-white rounded-xl border border-dashed border-gray-300 w-full\">\n <p class=\"text-gray-500 text-lg\">Ei hakuehtoja vastaavia laitteita.<\/p>\n <button onclick=\"document.getElementById('search').value=''; renderEquipment();\" class=\"text-orange-500 mt-2 hover:underline\">Tyhjenn\u00e4 haku<\/button>\n <\/div>`;\n return;\n }\n\n filtered.forEach(eq => {\n let statusBadge = '';\n\n \/\/ Tilalogiikka kompaktimpaan tilaan\n if (eq.status === 'huollossa') {\n statusBadge = `<span class=\"px-2 py-0.5 text-[10px] sm:text-xs font-bold rounded bg-red-100 text-red-700 uppercase tracking-wider\">Huollossa<\/span>`;\n } \n else if (eq.status === 'vuokrattu') {\n statusBadge = `<span class=\"px-2 py-0.5 text-[10px] sm:text-xs font-bold rounded bg-yellow-100 text-yellow-800 uppercase tracking-wider\">Varattu<\/span>`;\n } \n else {\n statusBadge = `<span class=\"px-2 py-0.5 text-[10px] sm:text-xs font-bold rounded bg-green-100 text-green-700 uppercase tracking-wider\">Vapaa<\/span>`;\n }\n\n const imageUrl = eq.imageUrl || 'https:\/\/via.placeholder.com\/400x300?text=Ei+kuvaa';\n const priceVat0 = eq.pricePerDay || 0;\n \/\/ K\u00c4YTET\u00c4\u00c4N KYTKIMEN TILAA:\n const activePrice = showVat ? (priceVat0 * 1.255) : priceVat0;\n const vatSuffix = showVat ? 'sis. alv' : 'alv 0%';\n\n \/\/ KORJAUS 2: Tiiviimpi kortti joka on kokonaan klikattava\n const card = document.createElement('div');\n card.className = 'bg-white rounded-xl shadow-sm hover:shadow-lg overflow-hidden transition-all duration-300 border border-gray-100 flex flex-col group cursor-pointer';\n card.onclick = () => window.openEquipmentDetails(eq.id);\n \n card.innerHTML = `\n <div class=\"relative h-32 sm:h-48 w-full bg-gray-100 flex items-center justify-center p-2 border-b border-gray-100 overflow-hidden\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${eq.name}\" class=\"max-h-full max-w-full object-contain mix-blend-multiply group-hover:scale-110 transition-transform duration-500\">\n <div class=\"absolute top-2 right-2 shadow-sm\">${statusBadge}<\/div>\n <\/div>\n <div class=\"p-3 sm:p-5 flex-1 flex flex-col\">\n <h3 class=\"text-sm sm:text-base font-bold text-gray-900 mb-1 leading-tight group-hover:text-orange-600 transition-colors line-clamp-2\">${eq.name}<\/h3>\n \n <div class=\"mt-auto pt-2 flex items-baseline\">\n <div class=\"text-base sm:text-xl font-extrabold text-gray-900\">${activePrice.toFixed(2)} \u20ac<\/div>\n <span class=\"text-[10px] sm:text-xs text-gray-500 ml-1 font-medium\">\/ vrk (${vatSuffix})<\/span>\n <\/div>\n <\/div>\n `;\n equipmentListEl.appendChild(card);\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vuokrakalusto Vuokrakalusto Laadukkaat koneet ja laitteet kaikkiin tarpeisiin ALV 0% ALV 25,5% Hae kalustoa Kategoriat Haetaan valikoimaa… Tuotekuvaus Tarkista vapaat […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":20,"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/pages\/52\/revisions\/112"}],"wp:attachment":[{"href":"https:\/\/kyrorent.fi\/index.php\/wp-json\/wp\/v2\/media?parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}