{"id":147,"date":"2026-07-30T22:10:27","date_gmt":"2026-07-30T22:10:27","guid":{"rendered":"https:\/\/www.nopawsforconcern.com\/?page_id=147"},"modified":"2026-08-07T12:24:08","modified_gmt":"2026-08-07T12:24:08","slug":"itinerary","status":"publish","type":"page","link":"https:\/\/www.nopawsforconcern.com\/?page_id=147","title":{"rendered":"Itinerary"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"147\" class=\"elementor elementor-147\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2112e0a e-flex e-con-boxed e-con e-parent\" data-id=\"2112e0a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7029e6e elementor-widget elementor-widget-html\" data-id=\"7029e6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .npfc-itinerary-app {\r\n        --color-primary: #1a2b3c;\r\n        --color-secondary: #d4a373;\r\n        --color-bg: #f4f6f8;\r\n        --color-white: #ffffff;\r\n        --color-text: #333333;\r\n        --radius: 12px;\r\n        --shadow: 0 4px 20px rgba(0,0,0,0.06);\r\n        \r\n        font-family: 'Inter', sans-serif; \r\n        background-color: var(--color-bg); \r\n        color: var(--color-text);\r\n        margin: -20px; \/* Counteract WP default page padding *\/\r\n        min-height: 90vh;\r\n        position: relative;\r\n    }\r\n\r\n    .npfc-itinerary-app * { box-sizing: border-box; }\r\n    .npfc-itinerary-app h1, .npfc-itinerary-app h2, .npfc-itinerary-app h3, .npfc-itinerary-app h4 { \r\n        font-family: 'Outfit', sans-serif; \r\n        color: var(--color-primary); \r\n        margin-top: 0; \r\n        line-height: 1.2; \r\n    }\r\n    \r\n    .npfc-itinerary-app p { margin-bottom: 0; }\r\n\r\n    .npfc-itinerary-app .navbar { background: var(--color-primary); padding: 16px 32px; display: flex; align-items: center; gap: 16px; color: white; }\r\n    .npfc-itinerary-app .navbar i { font-size: 24px; color: var(--color-secondary); }\r\n    .npfc-itinerary-app .navbar h1 { color: white; font-size: 1.5rem; margin: 0; }\r\n\r\n    .npfc-itinerary-app .layout { display: flex; min-height: calc(100vh - 72px); flex-wrap: wrap; }\r\n    \r\n    \/* Editor Panel *\/\r\n    .npfc-itinerary-app .editor-panel { width: 500px; max-width: 100%; background: white; border-right: 1px solid #e2e8f0; padding: 32px; padding-bottom: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 32px; z-index: 10; }\r\n    \r\n    .npfc-itinerary-app .section-title { font-size: 1.2rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }\r\n    \r\n    .npfc-itinerary-app .form-group { margin-bottom: 16px; text-align: left; }\r\n    .npfc-itinerary-app .form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; color: #475569; }\r\n    .npfc-itinerary-app .form-control { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 1rem; }\r\n    .npfc-itinerary-app .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26,43,60,0.1); }\r\n    .npfc-itinerary-app textarea.form-control { resize: vertical; min-height: 80px; }\r\n    \r\n    .npfc-itinerary-app .event-builder { background: #f8fafc; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 24px; }\r\n    .npfc-itinerary-app .file-upload { display: flex; align-items: center; gap: 12px; margin-top: 12px; }\r\n    .npfc-itinerary-app .file-upload input[type=\"file\"] { display: none; }\r\n    .npfc-itinerary-app .file-label { cursor: pointer; background: white; border: 1px solid #cbd5e1; padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }\r\n    .npfc-itinerary-app .file-label:hover { background: #f1f5f9; }\r\n    .npfc-itinerary-app .file-name { font-size: 0.8rem; color: #64748b; }\r\n    \r\n    .npfc-itinerary-app .btn { padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; font-size: 1rem; text-decoration: none; }\r\n    .npfc-itinerary-app .btn-primary { background: var(--color-secondary); color: var(--color-primary); width: 100%; }\r\n    .npfc-itinerary-app .btn-primary:hover { background: #e6b88b; }\r\n    .npfc-itinerary-app .btn-outline { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); }\r\n    .npfc-itinerary-app .btn-outline:hover { background: var(--color-primary); color: white; }\r\n    \r\n    .npfc-itinerary-app .events-list { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: auto; padding-right: 8px; }\r\n    .npfc-itinerary-app .events-list::-webkit-scrollbar { width: 6px; }\r\n    .npfc-itinerary-app .events-list::-webkit-scrollbar-track { background: transparent; }\r\n    .npfc-itinerary-app .events-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }\r\n    .npfc-itinerary-app .events-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\r\n    .npfc-itinerary-app .event-edit-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; }\r\n    .npfc-itinerary-app .event-edit-del { color: #ef4444; background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 4px; }\r\n    \r\n    .npfc-itinerary-app .ev-builder-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; }\r\n\r\n    \/* Preview Panel *\/\r\n    .npfc-itinerary-app .preview-panel { flex: 1; padding: 40px; padding-bottom: 100px; background: var(--color-bg); display: flex; justify-content: center; align-items: flex-start; }\r\n    .npfc-itinerary-app .document { background: white; width: 100%; max-width: 800px; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; text-align: left; }\r\n    \r\n    .npfc-itinerary-app .doc-header { background: var(--color-primary); color: white; padding: 40px; text-align: center; }\r\n    .npfc-itinerary-app .doc-header h2 { color: var(--color-secondary); font-size: 2.5rem; margin-bottom: 8px; }\r\n    \r\n    .npfc-itinerary-app .doc-body { padding: 40px; }\r\n    .npfc-itinerary-app .emergency-grid { display: grid; gap: 24px; background: #fff1f2; border: 1px solid #fecdd3; padding: 24px; border-radius: 8px; margin-bottom: 40px; }\r\n    .npfc-itinerary-app .em-box h4 { color: #be123c; margin-bottom: 8px; font-size: 1.1rem; }\r\n    .npfc-itinerary-app .em-box p { font-size: 0.95rem; color: #4c0519; margin: 0; }\r\n    \r\n    .npfc-itinerary-app .doc-events { display: flex; flex-direction: column; }\r\n    .npfc-itinerary-app .doc-event-item { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid #e2e8f0; page-break-inside: avoid; break-inside: avoid; }\r\n    .npfc-itinerary-app .doc-event-item:last-child { border-bottom: none; }\r\n    .npfc-itinerary-app .doc-time { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--color-primary); width: 120px; flex-shrink: 0; }\r\n    .npfc-itinerary-app .doc-info { flex: 1; }\r\n    .npfc-itinerary-app .doc-info h4 { font-size: 1.25rem; margin-bottom: 8px; display: flex; align-items: center; }\r\n    .npfc-itinerary-app .doc-info p { color: #475569; line-height: 1.6; margin: 0; }\r\n    .npfc-itinerary-app .doc-image { margin-top: 16px; max-width: 250px; border-radius: 8px; border: 1px solid #e2e8f0; }\r\n    \r\n    \/* Action Bar *\/\r\n    .npfc-itinerary-app .action-bar { background: white; padding: 16px 32px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 16px; position: absolute; bottom: 0; right: 0; width: 100%; box-shadow: 0 -4px 10px rgba(0,0,0,0.05); z-index: 100; align-items: center; }\r\n\r\n    @media (max-width: 1024px) {\r\n        .npfc-itinerary-app .editor-panel { width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; }\r\n        .npfc-itinerary-app .action-bar { position: sticky; bottom: 0; justify-content: center; flex-wrap: wrap; }\r\n    }\r\n    \r\n    @media (max-width: 768px) {\r\n        .hide-mobile { display: none !important; }\r\n        .npfc-itinerary-app { margin: 0; overflow-x: hidden; width: 100%; }\r\n        .npfc-itinerary-app .navbar { padding: 16px; }\r\n        .npfc-itinerary-app .editor-panel { padding: 20px; padding-bottom: 100px; }\r\n        .npfc-itinerary-app .preview-panel { padding: 16px; padding-bottom: 100px; }\r\n        .npfc-itinerary-app .doc-header { padding: 24px 16px; }\r\n        .npfc-itinerary-app .doc-body { padding: 16px; }\r\n        .npfc-itinerary-app .doc-event-item { flex-direction: column; gap: 8px; }\r\n        .npfc-itinerary-app .doc-time { width: auto; font-size: 1.2rem; }\r\n        .npfc-itinerary-app .action-bar { padding: 12px; gap: 8px; }\r\n        .npfc-itinerary-app .action-bar .btn { padding: 10px 16px; font-size: 0.9rem; flex: 1; }\r\n        \r\n        .npfc-itinerary-app .ev-builder-grid { grid-template-columns: 1fr; }\r\n        .npfc-itinerary-app .ev-builder-grid > div:nth-child(3) { margin-top: 0; }\r\n    }\r\n\r\n    @media print {\r\n        .npfc-itinerary-app { margin: 0; background: white; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }\r\n        .npfc-itinerary-app * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }\r\n        .npfc-itinerary-app .navbar, .npfc-itinerary-app .editor-panel, .npfc-itinerary-app .action-bar { display: none !important; }\r\n        .npfc-itinerary-app .layout { display: block; height: auto; }\r\n        .npfc-itinerary-app .preview-panel { padding: 0; display: block; }\r\n        .npfc-itinerary-app .document { max-width: 100%; box-shadow: none; border-radius: 0; }\r\n        \r\n        \/* Force explicit hex colors for print to bypass variable stripping *\/\r\n        .npfc-itinerary-app .doc-header { background-color: #1a2b3c !important; color: #ffffff !important; }\r\n        .npfc-itinerary-app .doc-header h2 { color: #d4a373 !important; }\r\n        .npfc-itinerary-app .doc-header p { color: #ffffff !important; }\r\n        .npfc-itinerary-app .doc-time { color: #1a2b3c !important; }\r\n        .npfc-itinerary-app .emergency-grid { background-color: #fff1f2 !important; border-color: #fecdd3 !important; }\r\n        @page { margin: 0; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"npfc-itinerary-app\">\r\n\r\n    <nav class=\"navbar\">\r\n        <i class=\"fa-solid fa-paw\"><\/i>\r\n        <h1>Ultimate Care Itinerary Builder<\/h1>\r\n    <\/nav>\r\n\r\n    <div class=\"layout\">\r\n        <!-- Editor Panel -->\r\n        <aside class=\"editor-panel\">\r\n\r\n            <div style=\"background-color: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 20px;\">\r\n                <h3 style=\"color: #166534; font-size: 1.1rem; margin-bottom: 8px;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> How it works<\/h3>\r\n                <ol style=\"margin: 0; padding-left: 20px; color: #166534; font-size: 0.95rem; line-height: 1.6;\">\r\n                    <li>Add your pets and emergency info.<\/li>\r\n                    <li>Build a daily schedule of events (walks, meals).<\/li>\r\n                    <li>Preview your beautifully formatted guide on the right.<\/li>\r\n                    <li>Click <strong>Save as PDF<\/strong> at the bottom to download and send to your sitter!<\/li>\r\n                <\/ol>\r\n                <p style=\"margin-top: 12px; margin-bottom: 0; font-size: 0.85rem; color: #15803d; font-weight: 500;\">\r\n                    <i class=\"fa-solid fa-circle-info\"><\/i> Your data saves automatically to this device. If you switch to another computer or phone, you will need to recreate your itinerary.\r\n                <\/p>\r\n            <\/div>\r\n            \r\n            <div>\r\n                <div class=\"section-title\">\r\n                    <span>1. Pet Profiles<\/span>\r\n                    <button class=\"btn btn-outline\" id=\"btn-add-pet\" style=\"padding: 4px 12px; font-size: 0.85rem; width: auto;\"><i class=\"fa-solid fa-plus\"><\/i> Add Pet<\/button>\r\n                <\/div>\r\n                <div id=\"pets-editor-container\" style=\"display: flex; flex-direction: column; gap: 24px;\">\r\n                    <!-- Pets injected via JS -->\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div>\r\n                <div class=\"section-title\">\r\n                    <span>2. Emergency Contacts & House Rules<\/span>\r\n                <\/div>\r\n                <div style=\"display:grid; grid-template-columns: 1fr 1fr; gap:12px;\">\r\n                    <div class=\"form-group\">\r\n                        <label>Local Contact Name<\/label>\r\n                        <input type=\"text\" id=\"local-name\" class=\"form-control\" placeholder=\"Jane Doe (Neighbor)\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Local Contact Phone<\/label>\r\n                        <input type=\"text\" id=\"local-phone\" class=\"form-control\" placeholder=\"07700 900000\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Vet Name & Clinic<\/label>\r\n                    <input type=\"text\" id=\"vet-name\" class=\"form-control\" placeholder=\"Dr. Smith, City Vet\">\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Vet Phone Number<\/label>\r\n                    <input type=\"text\" id=\"vet-phone\" class=\"form-control\" placeholder=\"01234 567890\">\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>Pet Insurance ID<\/label>\r\n                    <input type=\"text\" id=\"insurance-id\" class=\"form-control\" placeholder=\"Policy #\">\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>House Rules for Sitter (Optional)<\/label>\r\n                    <textarea id=\"house-rules\" class=\"form-control\" placeholder=\"e.g. Please lock the back door. No dogs on the sofa.\"><\/textarea>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div>\r\n                <div class=\"section-title\">\r\n                    <span>3. Daily Events<\/span>\r\n                <\/div>\r\n                \r\n                <div class=\"event-builder\">\r\n                    <div class=\"ev-builder-grid\">\r\n                        <div class=\"form-group\" style=\"margin-bottom:0;\">\r\n                            <label>Pet<\/label>\r\n                            <select id=\"ev-pet\" class=\"form-control\">\r\n                                <option value=\"All Pets\">All Pets<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <div class=\"form-group\" style=\"margin-bottom:0;\">\r\n                            <label>Time<\/label>\r\n                            <input type=\"time\" id=\"ev-time\" class=\"form-control\">\r\n                        <\/div>\r\n                        <div class=\"form-group\" style=\"margin-bottom:0;\">\r\n                            <label>Type<\/label>\r\n                            <select id=\"ev-type\" class=\"form-control\">\r\n                                <option>Breakfast<\/option>\r\n                                <option>Dinner<\/option>\r\n                                <option>Morning Walk<\/option>\r\n                                <option>Evening Walk<\/option>\r\n                                <option>Potty Break<\/option>\r\n                                <option>Medication<\/option>\r\n                                <option>Training<\/option>\r\n                                <option>Sleep<\/option>\r\n                                <option>Other<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"form-group\" style=\"margin-top:12px;\" id=\"ev-notes-container\">\r\n                        <label>Notes<\/label>\r\n                        <input type=\"text\" class=\"form-control ev-notes-input\" data-pet=\"All Pets\" placeholder=\"e.g. 1 cup of kibble\">\r\n                    <\/div>\r\n                    <div class=\"file-upload\">\r\n                        <label class=\"file-label\">\r\n                            <i class=\"fa-solid fa-camera\"><\/i> Attach Photo\r\n                            <input type=\"file\" id=\"ev-image\" accept=\"image\/*\">\r\n                        <\/label>\r\n                        <span class=\"file-name\" id=\"ev-filename\">No image selected<\/span>\r\n                    <\/div>\r\n                    <button class=\"btn btn-primary\" id=\"btn-add-event\" style=\"margin-top:20px;\">\r\n                        <i class=\"fa-solid fa-plus\"><\/i> Add Event\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <div class=\"events-list\" id=\"editor-events-list\">\r\n                    <!-- Event rows injected here -->\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/aside>\r\n\r\n        <!-- Preview Panel -->\r\n        <main class=\"preview-panel\">\r\n            <div class=\"document\" id=\"printable-area\">\r\n                <header class=\"doc-header\">\r\n                    <h2 id=\"doc-title\">Care Guide<\/h2>\r\n                    <p style=\"font-size: 1.1rem; opacity: 0.9;\">A comprehensive daily schedule to ensure a happy, healthy pack.<\/p>\r\n                <\/header>\r\n                \r\n                <div class=\"doc-body\">\r\n                    <div id=\"doc-pets-container\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 32px;\">\r\n                        <!-- Pets injected via JS -->\r\n                    <\/div>\r\n\r\n                    <div class=\"emergency-grid\" id=\"doc-emergency-box\" style=\"display:none;\">\r\n                        <!-- Injected via JS -->\r\n                    <\/div>\r\n\r\n                    <div class=\"doc-events\" id=\"doc-events-container\">\r\n                        <!-- Injected via JS -->\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/main>\r\n        \r\n        <!-- Floating Action Bar -->\r\n        <div class=\"action-bar\">\r\n            <a href=\"\/?page_id=18\" class=\"btn btn-outline\" style=\"width: auto; text-decoration: none; color: #64748b; border-color: #cbd5e1;\"><i class=\"fa-solid fa-house\"><\/i> Home<\/a>\r\n            <button class=\"btn btn-outline\" id=\"btn-reset\" style=\"color: #64748b; border-color: #cbd5e1; margin-right: auto; width: auto;\"><i class=\"fa-solid fa-rotate-left\"><\/i> Reset<\/button>\r\n            <span class=\"hide-mobile\" style=\"color: #64748b; font-size: 0.85rem; margin-right: 12px; font-weight: 500;\">Changes save automatically!<\/span>\r\n            <button class=\"btn btn-primary\" id=\"btn-print\" style=\"width: auto;\"><i class=\"fa-solid fa-download\"><\/i> Save as PDF<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            let state = {\r\n                pets: [{ id: Date.now(), name: 'Buster', breed: '', age: '', weight: '', microchip: '', quirks: '' }],\r\n                vetName: '', vetPhone: '', insurance: '',\r\n                localName: '', localPhone: '', houseRules: '',\r\n                events: []\r\n            };\r\n            const saved = localStorage.getItem('npfc_itinerary_state');\r\n            if (saved) {\r\n                try {\r\n                    const parsed = JSON.parse(saved);\r\n                    if(parsed.dogName && !parsed.pets) {\r\n                        parsed.pets = [{ id: Date.now(), name: parsed.dogName, breed: '', age: '', weight: '', microchip: '', quirks: '' }];\r\n                        delete parsed.dogName;\r\n                    }\r\n                    if(parsed.quirks && parsed.pets && parsed.pets.length > 0 && typeof parsed.pets[0].quirks === 'undefined') {\r\n                        parsed.pets[0].quirks = parsed.quirks;\r\n                        delete parsed.quirks;\r\n                    }\r\n                    state = { ...state, ...parsed };\r\n                } catch(e) {}\r\n            }\r\n            function saveState() {\r\n                localStorage.setItem('npfc_itinerary_state', JSON.stringify(state));\r\n            }\r\n            document.getElementById('vet-name').value = state.vetName || '';\r\n            document.getElementById('vet-phone').value = state.vetPhone || '';\r\n            document.getElementById('insurance-id').value = state.insurance || '';\r\n            document.getElementById('local-name').value = state.localName || '';\r\n            document.getElementById('local-phone').value = state.localPhone || '';\r\n            document.getElementById('house-rules').value = state.houseRules || '';\r\n            \r\n            function readImageAsBase64(file) {\r\n                return new Promise((resolve, reject) => {\r\n                    const reader = new FileReader();\r\n                    reader.onload = (e) => resolve(e.target.result);\r\n                    reader.onerror = (e) => reject(e);\r\n                    reader.readAsDataURL(file);\r\n                });\r\n            }\r\n            function format12(timeStr) {\r\n                const [h, m] = timeStr.split(':');\r\n                let hr = parseInt(h, 10);\r\n                return `${hr % 12 || 12}:${m} ${hr >= 12 ? 'PM' : 'AM'}`;\r\n            }\r\n            const fileInput = document.getElementById('ev-image');\r\n            const fileLabel = document.getElementById('ev-filename');\r\n            let currentBase64Image = null;\r\n            fileInput.addEventListener('change', async (e) => {\r\n                const file = e.target.files[0];\r\n                if (file) {\r\n                    fileLabel.textContent = file.name;\r\n                    currentBase64Image = await readImageAsBase64(file);\r\n                } else {\r\n                    fileLabel.textContent = 'No image selected';\r\n                    currentBase64Image = null;\r\n                }\r\n            });\r\n\r\n            function renderEventNotesInputs() {\r\n                const container = document.getElementById('ev-notes-container');\r\n                const selectedPet = document.getElementById('ev-pet').value;\r\n                container.innerHTML = '';\r\n                \r\n                if (selectedPet === 'All Pets') {\r\n                    const validPets = state.pets.filter(p => p.name);\r\n                    container.innerHTML += `\r\n                        <div style=\"margin-bottom: 8px;\">\r\n                            <label style=\"font-size: 0.8rem; color:var(--color-primary); font-weight: 700;\">General Note (All Pets)<\/label>\r\n                            <input type=\"text\" class=\"form-control ev-notes-input\" data-pet=\"All Pets\" placeholder=\"e.g. 30 minute walk together\">\r\n                        <\/div>\r\n                    `;\r\n                    if (validPets.length > 0) {\r\n                        validPets.forEach(pet => {\r\n                            container.innerHTML += `\r\n                                <div style=\"margin-bottom: 8px;\">\r\n                                    <label style=\"font-size: 0.8rem; color:#475569;\">Specific note for ${pet.name} (Optional)<\/label>\r\n                                    <input type=\"text\" class=\"form-control ev-notes-input\" data-pet=\"${pet.name}\" placeholder=\"e.g. 1 cup of kibble\">\r\n                                <\/div>\r\n                            `;\r\n                        });\r\n                    }\r\n                } else {\r\n                    container.innerHTML = `\r\n                        <label>Notes for ${selectedPet}<\/label>\r\n                        <input type=\"text\" class=\"form-control ev-notes-input\" data-pet=\"${selectedPet}\" placeholder=\"e.g. 1 cup of kibble\">\r\n                    `;\r\n                }\r\n            }\r\n            document.getElementById('ev-pet').addEventListener('change', renderEventNotesInputs);\r\n\r\n            window.updatePet = function(id, field, value) {\r\n                const p = state.pets.find(x => x.id === id);\r\n                if(p) { \r\n                    p[field] = value; \r\n                    saveState(); \r\n                    \r\n                    if (field === 'name') {\r\n                        const evPetSelect = document.getElementById('ev-pet');\r\n                        const currentVal = evPetSelect.value;\r\n                        evPetSelect.innerHTML = '<option value=\"All Pets\">All Pets<\/option>';\r\n                        state.pets.forEach(pet => {\r\n                            if (pet.name) evPetSelect.innerHTML += `<option value=\"${pet.name}\">${pet.name}<\/option>`;\r\n                        });\r\n                        evPetSelect.value = currentVal;\r\n                        renderEventNotesInputs();\r\n                    }\r\n\r\n                    renderPreview(); \r\n                }\r\n            };\r\n            window.deletePet = function(id) {\r\n                state.pets = state.pets.filter(x => x.id !== id);\r\n                saveState(); \r\n                renderPetsEditor();\r\n                renderPreview();\r\n            };\r\n            document.getElementById('btn-add-pet').addEventListener('click', () => {\r\n                state.pets.push({ id: Date.now(), name: '', breed: '', age: '', weight: '', microchip: '', quirks: '' });\r\n                saveState(); \r\n                renderPetsEditor();\r\n                renderPreview();\r\n            });\r\n            function renderPetsEditor() {\r\n                const petsEditor = document.getElementById('pets-editor-container');\r\n                petsEditor.innerHTML = '';\r\n                const evPetSelect = document.getElementById('ev-pet');\r\n                const currentPetVal = evPetSelect ? evPetSelect.value : 'All Pets';\r\n                if(evPetSelect) evPetSelect.innerHTML = '<option value=\"All Pets\">All Pets<\/option>';\r\n                \r\n                state.pets.forEach((pet, idx) => {\r\n                    if(evPetSelect && pet.name) {\r\n                        evPetSelect.innerHTML += `<option value=\"${pet.name}\">${pet.name}<\/option>`;\r\n                    }\r\n                    petsEditor.innerHTML += `\r\n                        <div style=\"background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; position: relative;\">\r\n                            ${state.pets.length > 1 ? `<button onclick=\"deletePet(${pet.id})\" style=\"position:absolute; top:12px; right:12px; background:none; border:none; color:#ef4444; cursor:pointer;\"><i class=\"fa-solid fa-trash\"><\/i><\/button>` : ''}\r\n                            <h4 style=\"margin-bottom: 12px; font-size: 1rem; color: var(--color-primary);\">Pet #${idx + 1}<\/h4>\r\n                            <div class=\"form-group\">\r\n                                <label>Name<\/label>\r\n                                <input type=\"text\" class=\"form-control\" value=\"${pet.name}\" oninput=\"updatePet(${pet.id}, 'name', this.value)\">\r\n                            <\/div>\r\n                            <div style=\"display:grid; grid-template-columns: 1fr 1fr; gap:12px;\">\r\n                                <div class=\"form-group\">\r\n                                    <label>Breed<\/label>\r\n                                    <input type=\"text\" class=\"form-control\" value=\"${pet.breed}\" oninput=\"updatePet(${pet.id}, 'breed', this.value)\">\r\n                                <\/div>\r\n                                <div class=\"form-group\">\r\n                                    <label>Age<\/label>\r\n                                    <input type=\"text\" class=\"form-control\" value=\"${pet.age}\" oninput=\"updatePet(${pet.id}, 'age', this.value)\">\r\n                                <\/div>\r\n                                <div class=\"form-group\">\r\n                                    <label>Weight<\/label>\r\n                                    <input type=\"text\" class=\"form-control\" value=\"${pet.weight}\" oninput=\"updatePet(${pet.id}, 'weight', this.value)\">\r\n                                <\/div>\r\n                                <div class=\"form-group\" style=\"grid-column: 1 \/ -1;\">\r\n                                    <label>Microchip<\/label>\r\n                                    <input type=\"text\" class=\"form-control\" value=\"${pet.microchip}\" oninput=\"updatePet(${pet.id}, 'microchip', this.value)\">\r\n                                <\/div>\r\n                                <div class=\"form-group\" style=\"grid-column: 1 \/ -1; margin-bottom: 0;\">\r\n                                    <label>Quirks & Commands<\/label>\r\n                                    <textarea class=\"form-control\" placeholder=\"e.g. Hates fireworks. 'Leave it' means drop immediately.\" oninput=\"updatePet(${pet.id}, 'quirks', this.value)\">${pet.quirks || ''}<\/textarea>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    `;\r\n                });\r\n                if(evPetSelect) {\r\n                    evPetSelect.value = currentPetVal;\r\n                    renderEventNotesInputs();\r\n                }\r\n            }\r\n            function renderEventsEditor() {\r\n                const editorList = document.getElementById('editor-events-list');\r\n                editorList.innerHTML = '';\r\n                state.events.sort((a, b) => a.time.localeCompare(b.time));\r\n                state.events.forEach(ev => {\r\n                    const row = document.createElement('div');\r\n                    row.className = 'event-edit-row';\r\n                    \r\n                    let notesSnippet = '';\r\n                    if (ev.notesObj && Object.keys(ev.notesObj).length > 0) {\r\n                        const snippets = Object.entries(ev.notesObj).map(([p, n]) => p === 'All Pets' ? n : `${p}: ${n}`);\r\n                        notesSnippet = `<div style=\"font-size:0.8rem; color:#64748b; margin-top:4px;\">${snippets.join(' | ')}<\/div>`;\r\n                    } else if (ev.notes) {\r\n                        notesSnippet = `<div style=\"font-size:0.8rem; color:#64748b; margin-top:4px;\">${ev.notes}<\/div>`;\r\n                    }\r\n\r\n                    row.innerHTML = `\r\n                        <div>\r\n                            <strong>${format12(ev.time)}<\/strong> - ${ev.type}\r\n                            <span style=\"color:#64748b; font-size:0.8rem; margin-left:6px;\">(${ev.pet || 'All Pets'})<\/span>\r\n                            ${ev.image ? ' <i class=\"fa-solid fa-image\" style=\"color:#d4a373;\"><\/i>' : ''}\r\n                            ${notesSnippet}\r\n                        <\/div>\r\n                        <button class=\"event-edit-del\" data-id=\"${ev.id}\"><i class=\"fa-solid fa-circle-minus\"><\/i><\/button>\r\n                    `;\r\n                    editorList.appendChild(row);\r\n                });\r\n                document.querySelectorAll('.event-edit-del').forEach(btn => {\r\n                    btn.addEventListener('click', (e) => {\r\n                        state.events = state.events.filter(x => x.id !== parseInt(e.currentTarget.dataset.id, 10));\r\n                        saveState();\r\n                        renderEventsEditor();\r\n                        renderPreview();\r\n                    });\r\n                });\r\n            }\r\n            function renderPreview() {\r\n                const emBox = document.getElementById('doc-emergency-box');\r\n                if (state.vetName || state.vetPhone || state.insurance || state.localName || state.localPhone || state.houseRules) {\r\n                    emBox.style.display = 'grid';\r\n                    emBox.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';\r\n                    emBox.innerHTML = `\r\n                        <div class=\"em-box\">\r\n                            <h4><i class=\"fa-solid fa-stethoscope\"><\/i> Vet & Insurance<\/h4>\r\n                            <p><strong>Vet:<\/strong> ${state.vetName || 'N\/A'}<\/p>\r\n                            <p><strong>Phone:<\/strong> ${state.vetPhone || 'N\/A'}<\/p>\r\n                            <p><strong>Policy ID:<\/strong> ${state.insurance || 'N\/A'}<\/p>\r\n                        <\/div>\r\n                        <div class=\"em-box\">\r\n                            <h4><i class=\"fa-solid fa-address-book\"><\/i> Local Contact<\/h4>\r\n                            <p><strong>Name:<\/strong> ${state.localName || 'N\/A'}<\/p>\r\n                            <p><strong>Phone:<\/strong> ${state.localPhone || 'N\/A'}<\/p>\r\n                        <\/div>\r\n                        ${state.houseRules ? `\r\n                        <div class=\"em-box\" style=\"grid-column: 1 \/ -1;\">\r\n                            <h4><i class=\"fa-solid fa-house-user\"><\/i> House Rules<\/h4>\r\n                            <p>${state.houseRules.replace(\/\\n\/g, '<br>')}<\/p>\r\n                        <\/div>\r\n                        ` : ''}\r\n                    `;\r\n                } else {\r\n                    emBox.style.display = 'none';\r\n                }\r\n                const petNames = state.pets.map(p => p.name).filter(Boolean);\r\n                let titleName = petNames.length > 0 ? petNames.join(' & ') + \"'s\" : \"Pack\";\r\n                if(titleName === \"Pack\") titleName = \"Pack's\";\r\n                document.getElementById('doc-title').textContent = `${titleName} Care Guide`;\r\n                const docPets = document.getElementById('doc-pets-container');\r\n                docPets.innerHTML = '';\r\n                state.pets.forEach(pet => {\r\n                    docPets.innerHTML += `\r\n                        <div style=\"background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px;\">\r\n                            <h4 style=\"color: var(--color-secondary); margin-bottom: 12px; font-size: 1.2rem;\">${pet.name || 'Unnamed Pet'}<\/h4>\r\n                            <div style=\"font-size: 0.9rem; color: #475569; display: grid; gap: 8px;\">\r\n                                ${pet.breed ? `<div><strong>Breed:<\/strong> ${pet.breed}<\/div>` : ''}\r\n                                ${pet.age ? `<div><strong>Age:<\/strong> ${pet.age}<\/div>` : ''}\r\n                                ${pet.weight ? `<div><strong>Weight:<\/strong> ${pet.weight}<\/div>` : ''}\r\n                                ${pet.microchip ? `<div><strong>Microchip:<\/strong> ${pet.microchip}<\/div>` : ''}\r\n                                ${pet.quirks ? `<div style=\"margin-top:8px; padding-top:8px; border-top:1px solid #e2e8f0; color:#1a2b3c;\"><strong><i class=\"fa-solid fa-triangle-exclamation\" style=\"color:#d4a373;\"><\/i> Quirks:<\/strong> ${pet.quirks.replace(\/\\n\/g, '<br>')}<\/div>` : ''}\r\n                            <\/div>\r\n                        <\/div>\r\n                    `;\r\n                });\r\n                const docEvents = document.getElementById('doc-events-container');\r\n                docEvents.innerHTML = '';\r\n                state.events.sort((a, b) => a.time.localeCompare(b.time));\r\n                state.events.forEach(ev => {\r\n                    const localTime = format12(ev.time);\r\n                    const imgHtml = ev.image ? `<img decoding=\"async\" src=\"${ev.image}\" class=\"doc-image\" alt=\"Event photo\">` : '';\r\n                    const petTag = (!ev.pet || ev.pet === 'All Pets') ? '' : `<span style=\"display:inline-block; background:#f4f6f8; color:#1a2b3c; padding:2px 8px; border-radius:12px; font-size:0.75rem; font-weight:600; margin-left:8px; vertical-align:middle;\">${ev.pet}<\/span>`;\r\n                    \r\n                    let notesHtml = '';\r\n                    if (ev.notesObj && Object.keys(ev.notesObj).length > 0) {\r\n                        for (const [petName, note] of Object.entries(ev.notesObj)) {\r\n                            if (petName === 'All Pets' || (Object.keys(ev.notesObj).length === 1 && petName === ev.pet)) {\r\n                                notesHtml += `<p>${note}<\/p>`;\r\n                            } else {\r\n                                notesHtml += `<p><strong>${petName}:<\/strong> ${note}<\/p>`;\r\n                            }\r\n                        }\r\n                    } else if (ev.notes) {\r\n                        notesHtml = `<p>${ev.notes}<\/p>`;\r\n                    }\r\n\r\n                    docEvents.innerHTML += `\r\n                        <div class=\"doc-event-item\">\r\n                            <div class=\"doc-time\">${localTime}<\/div>\r\n                            <div class=\"doc-info\">\r\n                                <h4>${ev.type} ${petTag}<\/h4>\r\n                                ${notesHtml}\r\n                                ${imgHtml}\r\n                            <\/div>\r\n                        <\/div>\r\n                    `;\r\n                });\r\n            }\r\n            document.getElementById('vet-name').addEventListener('input', e => { state.vetName = e.target.value; saveState(); renderPreview(); });\r\n            document.getElementById('vet-phone').addEventListener('input', e => { state.vetPhone = e.target.value; saveState(); renderPreview(); });\r\n            document.getElementById('insurance-id').addEventListener('input', e => { state.insurance = e.target.value; saveState(); renderPreview(); });\r\n            document.getElementById('local-name').addEventListener('input', e => { state.localName = e.target.value; saveState(); renderPreview(); });\r\n            document.getElementById('local-phone').addEventListener('input', e => { state.localPhone = e.target.value; saveState(); renderPreview(); });\r\n            document.getElementById('house-rules').addEventListener('input', e => { state.houseRules = e.target.value; saveState(); renderPreview(); });\r\n            \r\n            document.getElementById('btn-add-event').addEventListener('click', () => {\r\n                const time = document.getElementById('ev-time').value;\r\n                if (!time) return alert('Please specify a time.');\r\n                \r\n                const notesInputs = document.querySelectorAll('.ev-notes-input');\r\n                let notesObj = {};\r\n                notesInputs.forEach(input => {\r\n                    const petName = input.getAttribute('data-pet');\r\n                    if (input.value.trim()) {\r\n                        notesObj[petName] = input.value.trim();\r\n                    }\r\n                });\r\n\r\n                state.events.push({\r\n                    id: Date.now(),\r\n                    time: time,\r\n                    pet: document.getElementById('ev-pet').value,\r\n                    type: document.getElementById('ev-type').value,\r\n                    notesObj: notesObj,\r\n                    image: currentBase64Image\r\n                });\r\n                saveState();\r\n                \r\n                document.getElementById('ev-time').value = '';\r\n                document.querySelectorAll('.ev-notes-input').forEach(input => input.value = '');\r\n                fileInput.value = '';\r\n                fileLabel.textContent = 'No image selected';\r\n                currentBase64Image = null;\r\n                \r\n                renderEventsEditor();\r\n                renderPreview();\r\n            });\r\n            document.getElementById('btn-reset').addEventListener('click', () => {\r\n                if (confirm(\"Are you sure you want to reset your itinerary? This will clear all saved data on this device.\")) {\r\n                    localStorage.removeItem('npfc_itinerary_state');\r\n                    window.location.reload();\r\n                }\r\n            });\r\n            document.getElementById('btn-print').addEventListener('click', () => {\r\n                window.print();\r\n            });\r\n            renderPetsEditor();\r\n            renderEventsEditor();\r\n            renderPreview();\r\n        })();\r\n    <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ultimate Care Itinerary Builder How it works Add your pets and emergency info. Build a daily schedule of events (walks, meals). Preview your beautifully formatted guide on the right. Click Save as PDF at the bottom to download and send to your sitter! Your data saves automatically to this device. If you switch to another [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-147","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.nopawsforconcern.com\/index.php?rest_route=\/wp\/v2\/pages\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nopawsforconcern.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nopawsforconcern.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nopawsforconcern.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nopawsforconcern.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=147"}],"version-history":[{"count":55,"href":"https:\/\/www.nopawsforconcern.com\/index.php?rest_route=\/wp\/v2\/pages\/147\/revisions"}],"predecessor-version":[{"id":342,"href":"https:\/\/www.nopawsforconcern.com\/index.php?rest_route=\/wp\/v2\/pages\/147\/revisions\/342"}],"wp:attachment":[{"href":"https:\/\/www.nopawsforconcern.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}