Repair Issues<\/title>\n <link rel=\"stylesheet\" href=\"issues.css\" \/>\n<\/head>\n<body>\n <main class=\"wrap\">\n <section class=\"grid\" aria-label=\"Repair issue selection\">\n \n <a class=\"card\" href=\"#iphone-cracked-front\" role=\"button\">\n <span class=\"label\">\n MacBook Screen Replacement\n <\/span>\n <\/a>\n\n \n <a class=\"card\" href=\"#liquid-damage\" role=\"button\">\n <span class=\"label\">\n MacBook Battery<br>Replacement\n <\/span>\n <\/a>\n\n \n <a class=\"card\" href=\"#back-cracked\" role=\"button\">\n <span class=\"label\">\n Keyboard and Trackpad<br>Repair\n <\/span>\n <\/a>\n\n \n <a class=\"card\" href=\"#unresponsive-app\" role=\"button\">\n <span class=\"label\">\n Logic Board<br>Repair\n <\/span>\n <\/a>\n\n \n <a class=\"card\" href=\"#device-slow\" role=\"button\">\n <span class=\"label\">\n Liquid Damage<br>Repair\n <\/span>\n <\/a>\n\n \n <a class=\"card\" href=\"#display-flicker\" role=\"button\">\n <span class=\"label\">\n MacBook Data<br>Recovery\n <\/span>\n <\/a>\n\n \n <\/section>\n <\/main>\n \n<div class=\"modal-backdrop\" id=\"modalBackdrop\" aria-hidden=\"true\">\n <div class=\"modal\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"modal__header\">\n <button class=\"icon-btn\" style=\"background: white\" id=\"backBtn\" title=\"Back\" aria-label=\"Back\" style=\"display:none\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M15 18l-6-6 6-6\" stroke=\"#6b7280\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/button>\n <div class=\"modal__title\" id=\"modalTitle\">Choose your model<\/div>\n <div class=\"spacer\"><\/div>\n <button class=\"icon-btn close-btn\" style=\"background: white\" id=\"closeBtn\" aria-label=\"Close\">\u00d7<\/button>\n <\/div>\n\n \n <div class=\"modal__search\" id=\"step1Search\">\n <div class=\"searchbox\">\n <div class=\"magnify\">\ud83d\udd0d<\/div>\n <input id=\"searchInput\" type=\"text\" placeholder=\"Search For Your Device\" autocomplete=\"off\" \/>\n <\/div>\n <\/div>\n\n <div class=\"modal__body\" id=\"step1Body\">\n <div class=\"list\" id=\"deviceList\">\n \n <a href=\"#\" data-name=\"MacBook Pro 14inch M4 Repair\">MacBook Pro 14inch M4 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 14inch M4 Pro\/Max Repair\">MacBook Pro 14inch M4 Pro\/Max Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 14inch M3 Repair\">MacBook Pro 14inch M3 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 14inch M3 Pro\/Max Repair\">MacBook Pro 14inch M3 Pro\/Max Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 14inch 2023 Repair\">MacBook Pro 14inch 2023 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 14inch 2021 Repair\">MacBook Pro 14inch 2021 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 13inch 2022 Repair\">MacBook Pro 13inch 2022 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 13inch 2020 Repair\">MacBook Pro 13inch 2020 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 16inch M4 Repair\">MacBook Pro 16inch M4 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 16inch M4 Pro\/Max Repair\">MacBook Pro 16inch M4 Pro\/Max Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 16inch M3 Repair\">MacBook Pro 16inch M3 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 16inch M3 Pro\/Max Repair\">MacBook Pro 16inch M3 Pro\/Max Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 16inch 2023 Repair\">MacBook Pro 16inch 2023 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Pro 16inch 2021 Repair\">MacBook Pro 16inch 2021 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Air 15inch M4 2025 Repair\">MacBook Air 15inch M4 2025 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Air 15inch M3 2024 Repair\">MacBook Air 15inch M3 2024 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Air 15inch M2 2023 Repair\">MacBook Air 15inch M2 2023 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Air 13inch M4 2025 Repair\">MacBook Air 13inch M4 2025 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Air 13inch M3 2024 Repair\">MacBook Air 13inch M3 2024 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Air 13inch M2 2023 Repair\">MacBook Air 13inch M2 2023 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Air M2 2022 Repair\">MacBook Air M2 2022 Repair<\/a>\n <a href=\"#\" data-name=\"MacBook Air M1 2020 Repair\">MacBook Air M1 2020 Repair<\/a>\n <\/div>\n <p class=\"muted\" id=\"emptyMsg\" style=\"display:none\">No results.<\/p>\n <\/div>\n\n \n <div class=\"modal__body step2\" id=\"step2\" style=\"display:none\">\n <div class=\"h1-like\" id=\"step2Title\">Model title here<\/div>\n\n <label class=\"field-label\" for=\"serviceInput\">Please select the service you need<\/label>\n \n<div id=\"serviceMulti\" class=\"multi\">\n <div class=\"multi-input\" role=\"combobox\" aria-expanded=\"false\" aria-haspopup=\"listbox\" tabindex=\"0\">\n <div class=\"chips\" id=\"serviceChips\"><\/div>\n <input id=\"serviceFilter\" class=\"multi-filter\" type=\"text\" placeholder=\"\" autocomplete=\"off\" \/>\n <button class=\"multi-caret\" style=\"background: white\" type=\"button\" aria-label=\"Open\">\u25be<\/button>\n <\/div>\n <ul class=\"multi-list\" id=\"serviceList\" role=\"listbox\" aria-multiselectable=\"true\">\n <li data-value=\"Body Repair\"><label><input type=\"checkbox\" \/> Body Repair<\/label><\/li>\n <li data-value=\"Camera Repair\"><label><input type=\"checkbox\" \/> Camera Repair<\/label><\/li>\n <li data-value=\"Screen Repair\"><label><input type=\"checkbox\" \/> Screen Repair<\/label><\/li>\n <li data-value=\"Battery Repair\"><label><input type=\"checkbox\" \/> Battery Repair<\/label><\/li>\n <li data-value=\"Keyboard not working\"><label><input type=\"checkbox\" \/> Keyboard not working<\/label><\/li>\n <li data-value=\"Sound Repair\"><label><input type=\"checkbox\" \/> Sound Repair<\/label><\/li>\n <li data-value=\"Liquid Damage\"><label><input type=\"checkbox\" \/> Liquid Damage<\/label><\/li>\n <li data-value=\"Health Checkup\"><label><input type=\"checkbox\" \/> Health Checkup<\/label><\/li>\n <li data-value=\"Power Repair\"><label><input type=\"checkbox\" \/> Power Repair<\/label><\/li>\n <li data-value=\"Software Corrupted\"><label><input type=\"checkbox\" \/> Software Corrupted<\/label><\/li>\n <li data-value=\"Start up Failure\"><label><input type=\"checkbox\" \/> Start up Failure<\/label><\/li>\n <li data-value=\"Others\"><label><input type=\"checkbox\" \/> Others<\/label><\/li>\n <\/ul>\n \n<div id=\"serviceDescRow\" class=\"desc-row\" style=\"display:none;\">\n <label class=\"field-label\" for=\"serviceDesc\">Please provide the description of the service<\/label>\n <input id=\"serviceDesc\" class=\"text-input\" type=\"text\" placeholder=\"\" \/>\n<\/div>\n<\/div>\n\n <div class=\"field-label\" style=\"margin-top:18px\">I would like to get this service at :<\/div>\n <div class=\"options\" id=\"serviceOptions\">\n <div class=\"option\" data-id=\"amman\">\n <div class=\"serviceImage\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2025\/10\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png?ssl=1\" alt=\"Service Center\"\/>\n <\/div>\n \n <div class=\"title\">365 Solutions in Amman<\/div>\n <\/div>\n <div class=\"option\" data-id=\"irbid\">\n <div class=\"serviceImage\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2025\/10\/pngtree-cartoon-illustration-of-a-shophouse-coloring-page-outline-sketch-drawing-vector-png-image_6980999.png?ssl=1\" alt=\"Service Center\"\/>\n <\/div>\n <div class=\"title\">365 Solutions in Irbid<\/div>\n \n <\/div>\n <div class=\"option\" data-id=\"homeOffice\">\n <div class=\"serviceImage\">\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2025\/10\/delivery-drawing.jpg?ssl=1\" alt=\"delivery\"\/>\n <\/div>\n <div class=\"title\">Collect it from my Home\/Office<\/div>\n\n <\/div>\n <\/div>\n \n<div id=\"locationInfoAmman\" class=\"location-info\" style=\"display:none; text-align:center; margin-top:18px;\">\n <div class=\"info-text\">\n <strong>Amman<\/strong><br>\n 221 Mecca Street Amman<br>\n <a href=\"mailto:Help@365solutionsjo.com\">Help@365solutionsjo.com<\/a><br>\n <a href=\"tel:+962796818189\">+962 796 818189<\/a><br><br>\n <strong>Opening hours:<\/strong><br>\n Sun \u2013 Thu | 9:00 AM to 9:00 PM<br>\n Sat | 10:00 AM to 9:00 PM<br>\n Fri | closed\n <\/div>\n<\/div>\n\n\n<div id=\"locationInfoIrbid\" class=\"location-info\" style=\"display:none; text-align:center; margin-top:18px;\">\n <div class=\"info-text\">\n <strong>Irbid<\/strong><br>\n Wasfi AlTal Street<br>\n <a href=\"mailto:Irbid@365solutionsjo.com\">Irbid@365solutionsjo.com<\/a><br>\n <a href=\"tel:+962796688831\">+962 79 668 88 31<\/a><br><br>\n <strong>Opening hours:<\/strong><br>\n Sat \u2013 Thu | 10:00 AM to 9:00 PM<br>\n Fri | closed\n <\/div>\n<\/div>\n\n\n<div id=\"locationInfoHomeOffice\" class=\"location-info\" style=\"display:none; text-align:left; margin-top:18px;\">\n <strong>Terms & Conditions<\/strong>\n <ul>\n <li>\n Pick-up & Delivery Service is chargeable at 5.0JD as a logistic fee.<\/li>\n <li>If the customer chooses to continue the repair the logistic fee will be waived OFF.<\/li>\n <li>Technician will diagnose the device and share a detailed report for customers approval to proceed with repair.<\/li>\n <li>Repair or replaced parts will be charged additionally with up to 90 days of warranty.<\/li>\n <li>This offer is valid only for limited time and can be discontinued without any prior notice.<\/li>\n <li>This service is currently available only in Amman and its suburbs.<\/li>\n <\/ul>\n \n\n\n\n\n \n <\/div>\n\n <div class=\"actions\">\n <button class=\"btn-primary\" id=\"nextBtn\">NEXT<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"modal-backdrop\" id=\"modalCustomer\" aria-hidden=\"true\">\n <div class=\"modal\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"modal__header\">\n <div class=\"modal__title\">\ud83d\udcc5 Book Your Appointment<\/div>\n <div class=\"spacer\"><\/div>\n <button class=\"icon-btn close-btn\" id=\"closeCustomer\" aria-label=\"Close\">\u00d7<\/button>\n<\/div>\n\n <div class=\"modal__body step2\" style=\"padding: 24px 30px;\">\n <div id=\"summaryDetails\" class=\"summary-box\">\n <div class=\"summary-title\">\n <div class=\"summary-icon\">\ud83e\uddfe<\/div>\n Summary of Your Request\n <\/div>\n <p><strong>Device:<\/strong> iPhone 16 Pro Max<\/p>\n <p><strong>Service(s):<\/strong> Screen Repair, Camera Repair<\/p>\n <p><strong>Description:<\/strong> Screen cracked on the bottom left<\/p>\n <hr>\n <p><strong>Location:<\/strong> 365 Solutions in Amman<\/p>\n<\/div>\n\n <label class=\"field-label\" for=\"custName\">Full Name<\/label>\n <input id=\"custName\" class=\"text-input\" type=\"text\" placeholder=\"Your full name\" \/>\n\n <label class=\"field-label\" for=\"custEmail\" style=\"margin-top:12px;\">Email<\/label>\n <input id=\"custEmail\" class=\"text-input\" type=\"email\" placeholder=\"example@email.com\" \/>\n\n <label class=\"field-label\" for=\"custPhone\" style=\"margin-top:12px;\">Phone Number<\/label>\n <input id=\"custPhone\" class=\"text-input\" type=\"tel\" placeholder=\"+962 ...\" \/>\n\n \n<div class=\"field-group\" style=\"margin-top:16px;\">\n <label class=\"field-label\" for=\"apptDate\">Choose Appointment Date<\/label>\n <input id=\"apptDate\" class=\"text-input\" type=\"date\" \/>\n<\/div>\n\n<div class=\"field-group\" style=\"margin-top:12px;\">\n <label class=\"field-label\" for=\"apptTime\">Choose Appointment Time<\/label>\n <select id=\"apptTime\" class=\"text-input\">\n <option value=\"\">Select a time<\/option>\n <\/select>\n <div id=\"closedMsg\" style=\"display:none; margin-top:6px; font-size:13px; color:#b00020;\">\n Selected day is closed for this location.\n <\/div>\n<\/div>\n\n <div class=\"actions\" style=\"margin-top:24px;\">\n <button class=\"btn-primary\" id=\"submitAppointment\">SUBMIT<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"modal-backdrop\" id=\"modalHomePickup\" aria-hidden=\"true\">\n <div class=\"modal\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"modal__header\">\n <div class=\"modal__title\">\ud83d\ude9a Home\/Office Pickup \u2013 Create Ticket<\/div>\n <div class=\"spacer\"><\/div>\n <button class=\"icon-btn close-btn\" id=\"closeHomePickup\" aria-label=\"Close\">\u00d7<\/button>\n <\/div>\n\n <div class=\"modal__body\" style=\"padding: 24px 30px;\">\n \n <div id=\"homePickupSummary\" class=\"summary-box\" style=\"margin-bottom: 20px;\">\n \n <\/div>\n\n \n <label class=\"field-label\" for=\"hpName\">Full Name<\/label>\n <input id=\"hpName\" class=\"text-input\" type=\"text\" placeholder=\"Your full name\" \/>\n\n <label class=\"field-label\" for=\"hpEmail\" style=\"margin-top:12px;\">Email<\/label>\n <input id=\"hpEmail\" class=\"text-input\" type=\"email\" placeholder=\"example@email.com\" \/>\n\n <label class=\"field-label\" for=\"hpPhone\" style=\"margin-top:12px;\">Phone Number<\/label>\n <input id=\"hpPhone\" class=\"text-input\" type=\"tel\" placeholder=\"+962 ...\" \/>\n\n \n <label class=\"field-label\" for=\"hpSerial\" style=\"margin-top:16px;\">Serial number or IMEI<\/label>\n <input id=\"hpSerial\" class=\"text-input\" type=\"text\" placeholder=\"Serial\/IMEI\" \/>\n\n <label class=\"field-label\" for=\"hpProblem\" style=\"margin-top:12px;\">Problem details<\/label>\n <textarea id=\"hpProblem\" class=\"text-input\" rows=\"4\" style=\"height:auto; padding:10px;\" placeholder=\"Describe the issue...\"><\/textarea>\n\n <label class=\"field-label\" for=\"hpCompany\" style=\"margin-top:12px;\">Company name (optional)<\/label>\n <input id=\"hpCompany\" class=\"text-input\" type=\"text\" placeholder=\"Company (optional)\" \/>\n\n <label class=\"field-label\" for=\"hpAddress\" style=\"margin-top:12px;\">Customer address<\/label>\n <textarea id=\"hpAddress\" class=\"text-input\" rows=\"3\" style=\"height:auto; padding:10px;\" placeholder=\"Address for pickup\"><\/textarea>\n\n <div class=\"actions\" style=\"margin-top:22px;\">\n \n <button class=\"btn-primary\" id=\"submitHomePickup\" type=\"button\">SUBMIT<\/button>\n \n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"modal-backdrop\" id=\"modalAgreement\" aria-hidden=\"true\">\n <div class=\"modal\" role=\"dialog\" aria-modal=\"true\">\n <div class=\"modal__header\">\n <div class=\"modal__title\">\ud83d\udcdd Service Agreement<\/div>\n <div class=\"spacer\"><\/div>\n <button class=\"icon-btn close-btn\" id=\"closeAgreement\" aria-label=\"Close\">\u00d7<\/button>\n <\/div>\n\n <div class=\"modal__body\" style=\"padding: 24px 30px;\">\n \n <div id=\"agreementSummary\" class=\"summary-box\" style=\"margin-bottom: 16px;\"><\/div>\n\n \n <div style=\"margin-bottom: 12px;\">\n <label class=\"field-label\">Terms & Conditions<\/label>\n \n <iframe id=\"termsPdfFrame\" src=\"\" style=\"width:100%; height:600px; border:1px solid #e5e5e5; border-radius:10px;\"><\/iframe>\n <\/div>\n\n \n <div class=\"grid-2\" style=\"display:grid; grid-template-columns:1fr 1fr; gap:12px;\">\n <div>\n <label class=\"field-label\" for=\"agreeName\">Customer Name<\/label>\n <input id=\"agreeName\" class=\"text-input\" type=\"text\" placeholder=\"Your full name\">\n <\/div>\n <div>\n <label class=\"field-label\" for=\"agreePID\">Personal ID (optional)<\/label>\n <input id=\"agreePID\" class=\"text-input\" type=\"text\" placeholder=\"ID \/ National No.\">\n <\/div>\n <\/div>\n\n \n <div style=\"margin-top:14px;\">\n <label class=\"field-label\">Signature<\/label>\n <div style=\"border:1px solid #d2e3f0; border-radius:8px; background:#fff; padding:10px;\">\n <canvas id=\"sigPad\" style=\"width:50%; height:100px;\"><\/canvas>\n <\/div>\n <div style=\"margin-top:8px; display:flex; gap:8px;\">\n <button id=\"clearSig\" type=\"button\" class=\"icon-btn\" title=\"Clear\" aria-label=\"Clear\">Clear<\/button>\n <\/div>\n <\/div>\n\n <div style=\"margin-top:16px;\">\n <label class=\"field-label\"><input id=\"agreeCheck\" type=\"checkbox\"> I have read and agree to the Terms & Conditions.<\/label>\n <\/div>\n\n <div class=\"actions\" style=\"margin-top:18px;\">\n <button class=\"btn-primary\" id=\"agreeAndCreate\">AGREE & CREATE TICKET<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/signature_pad@4.1.5\/dist\/signature_pad.umd.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/pdf-lib@1.17.1\/dist\/pdf-lib.min.js\"><\/script>\n\n\n\n<script type=\"module\">\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.13.1\/firebase-app.js\";\n import { getFirestore, collection, addDoc, serverTimestamp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.13.1\/firebase-firestore.js\";\n import { getStorage, ref, uploadBytes, getDownloadURL } from \"https:\/\/www.gstatic.com\/firebasejs\/10.13.1\/firebase-storage.js\";\n \n \/\/ \ud83d\udd39 Replace with your actual Firebase config\n const firebaseConfig = {\n apiKey: \"AIzaSyCWSayCLeyr_6aBSNjb4nCY--Lw-DB_4S4\",\n authDomain: \"solutionssystemmain.firebaseapp.com\",\n projectId: \"solutionssystemmain\",\n storageBucket: \"solutionssystemmain.appspot.com\",\n messagingSenderId: \"961697855820\",\n appId: \"1:961697855820:web:a83ed62b1fdacee11f77e9\"\n };\n\n \/\/ \ud83d\udd39 Initialize Firebase\n const app = initializeApp(firebaseConfig);\n const db = getFirestore(app);\n \n\n \/\/ make db globally accessible\n window.db = db;\n<\/script>\n<script>\n \/\/ ===== utilities\n const $ = s => document.querySelector(s);\n const $$ = s => Array.from(document.querySelectorAll(s));\n\n const backdrop = $('#modalBackdrop');\n const openers = $$('.open-modal, .card'); \/\/ any card can open\n const closeBtn = $('#closeBtn');\n const backBtn = $('#backBtn');\n const modalTitle = $('#modalTitle');\n\n \/\/ step1 els\n const step1Search = $('#step1Search');\n const step1Body = $('#step1Body');\n const deviceList = $('#deviceList');\n const searchInput = $('#searchInput');\n const emptyMsg = $('#emptyMsg');\n\n \/\/ step2 els\n const step2 = $('#step2');\n const step2Title = $('#step2Title');\n const serviceInput= $('#serviceInput');\n const optionsWrap = $('#serviceOptions');\n const nextBtn = $('#nextBtn');\n\n function openModal(){\n backdrop.classList.add('open');\n backdrop.setAttribute('aria-hidden','false');\n showStep(1);\n setTimeout(()=>searchInput.focus(), 50);\n document.documentElement.style.overflow='hidden';\n }\n function closeModal(){\n backdrop.classList.remove('open');\n backdrop.setAttribute('aria-hidden','true');\n document.documentElement.style.overflow='';\n }\n\n function showStep(n){\n if(n===1){\n step1Search.style.display='';\n step1Body.style.display='';\n step2.style.display='none';\n backBtn.style.display='none';\n modalTitle.textContent='Choose your model';\n }else{\n step1Search.style.display='none';\n step1Body.style.display='none';\n step2.style.display='';\n backBtn.style.display='';\n }\n }\n\n \/\/ open from any trigger\n openers.forEach(el=>el.addEventListener('click', openModal));\n closeBtn.addEventListener('click', closeModal);\n backdrop.addEventListener('click', (e)=>{ if(e.target===backdrop) closeModal(); });\n window.addEventListener('keydown', (e)=>{ if(e.key==='Escape' && backdrop.classList.contains('open')) closeModal(); });\n\n \/\/ filter list\n function filterList(q){\n const items = Array.from(deviceList.querySelectorAll('a'));\n let visible = 0;\n items.forEach(a=>{\n const hit = a.dataset.name.toLowerCase().includes(q.toLowerCase());\n a.style.display = hit ? '' : 'none';\n if(hit) visible++;\n });\n emptyMsg.style.display = visible ? 'none' : '';\n }\n searchInput.addEventListener('input', e=>filterList(e.target.value));\n\n \/\/ select model \u2192 go to step 2\n deviceList.addEventListener('click', (e)=>{\n const a = e.target.closest('a'); if(!a) return;\n e.preventDefault();\n const model = a.dataset.name;\n step2Title.textContent = model;\n modalTitle.textContent = model;\n showStep(2);\n setTimeout(()=>serviceInput.focus(), 50);\n });\n\n \/\/ back to models\n backBtn.addEventListener('click', ()=> showStep(1));\n\n \/\/ select an option card (single-select)\n const locationInfo = document.getElementById('locationInfo');\n\noptionsWrap.addEventListener('click', (e)=>{\n const opt = e.target.closest('.option');\n if(!opt) return;\n\n \/\/ toggle visual active state\n $$('.option').forEach(o=>o.classList.remove('active'));\n opt.classList.add('active');\n\n \/\/ show Amman info if chosen\n if(opt.dataset.id === 'amman'){\n locationInfoAmman.style.display = 'block';\n } else {\n locationInfoAmman.style.display = 'none';\n }\n \n if(opt.dataset.id === 'irbid'){\n locationInfoIrbid.style.display = 'block';\n } else {\n locationInfoIrbid.style.display = 'none';\n }\n \n if(opt.dataset.id === 'homeOffice'){\n locationInfoHomeOffice.style.display = 'block';\n } else {\n locationInfoHomeOffice.style.display = 'none';\n }\n});\n\n \/\/ Next button \u2013 replace with your own action (navigate, submit, etc.)\n nextBtn.addEventListener('click', ()=>{\n const chosenModel = step2Title.textContent.trim();\n const chosenService = serviceInput.value.trim();\n const chosenPlace = ( $('.option.active')?.dataset.id ) || '';\n if(!chosenPlace){\n alert('Please choose a service location.'); return;\n }\n \/\/ TODO: replace with your real flow:\n alert(`Model: ${chosenModel}\\nService: ${chosenService || '(none)'}\\nPlace: ${chosenPlace}`);\n \/\/ closeModal();\n });\n<\/script>\n<script>\n \/\/ ===== Multi-select logic =====\n const multi = document.getElementById('serviceMulti');\n const chipsWrap = document.getElementById('serviceChips');\n const filterInp = document.getElementById('serviceFilter');\n const listEl = document.getElementById('serviceList');\n const caretBtn = multi.querySelector('.multi-caret');\n const combo = multi.querySelector('.multi-input');\n\n let selectedServices = [];\n\n function openList(open=true){\n listEl.classList.toggle('open', open);\n combo.setAttribute('aria-expanded', open ? 'true' : 'false');\n }\n\n function renderChips(){\n chipsWrap.innerHTML = '';\n selectedServices.forEach(val=>{\n const chip = document.createElement('span');\n chip.className = 'chip';\n chip.innerHTML = `<span>${val}<\/span><span class=\"x\" aria-label=\"Remove\" data-val=\"${val}\">\u00d7<\/span>`;\n chipsWrap.appendChild(chip);\n });\n }\n\n function setCheckedStates(){\n listEl.querySelectorAll('li').forEach(li=>{\n const v = li.dataset.value;\n li.querySelector('input').checked = selectedServices.includes(v);\n });\n }\n\n function toggleValue(val){\n const idx = selectedServices.indexOf(val);\n if(idx === -1) selectedServices.push(val);\n else selectedServices.splice(idx,1);\n renderChips();\n setCheckedStates();\n }\n\n \/\/ Click on list items\n listEl.addEventListener('change', (e)=>{\n const li = e.target.closest('li'); if(!li) return;\n toggleValue(li.dataset.value);\n filterInp.focus();\n });\n\n \/\/ Remove chip\n chipsWrap.addEventListener('click', (e)=>{\n const x = e.target.closest('.x'); if(!x) return;\n toggleValue(x.dataset.val);\n });\n\n \/\/ Open\/close\n caretBtn.addEventListener('click', e=>{\n e.stopPropagation();\n openList(!listEl.classList.contains('open'));\n filterInp.focus();\n });\n combo.addEventListener('click', ()=>{\n openList(true);\n filterInp.focus();\n });\n document.addEventListener('click', (e)=>{\n if(!multi.contains(e.target)) openList(false);\n });\n\n \/\/ Filter options\n filterInp.addEventListener('input', ()=>{\n const q = filterInp.value.trim().toLowerCase();\n listEl.querySelectorAll('li').forEach(li=>{\n li.style.display = li.dataset.value.toLowerCase().includes(q) ? '' : 'none';\n });\n });\n\n \/\/ Keyboard: Enter toggles first visible\n filterInp.addEventListener('keydown', (e)=>{\n if(e.key === 'Enter'){\n e.preventDefault();\n const firstVisible = Array.from(listEl.querySelectorAll('li'))\n .find(li => li.style.display !== 'none');\n if(firstVisible){\n firstVisible.querySelector('input').click();\n }\n }\n });\n\n \nnextBtn.addEventListener('click', ()=>{\n const chosenModel = step2Title.textContent.trim();\n const chosenPlaceEl = document.querySelector('.option.active');\n const chosenPlace = chosenPlaceEl?.dataset.id || '';\n const chosenPlaceName = chosenPlaceEl?.querySelector('.title')?.textContent?.trim() || '';\n const serviceDesc = document.getElementById('serviceDesc')?.value.trim() || '';\n\n if(!selectedServices.length){\n alert('Please choose at least one service.');\n return;\n }\n if(!chosenPlace){\n alert('Please choose a service location.');\n return;\n }\n\n const data = {\n model: chosenModel,\n services: selectedServices.slice(),\n description: serviceDesc,\n location: chosenPlace,\n locationName: chosenPlaceName\n };\n\n \/\/ Close the first modal\n backdrop.classList.remove('open');\n document.documentElement.style.overflow = '';\n\n \/\/ Open appointment modal for store branches; open Home\/Office modal otherwise\n if (chosenPlace === 'homeOffice') {\n openHomePickupModal(data);\n } else {\n openCustomerModal(data);\n }\n});\n \n const descRow = document.getElementById('serviceDescRow');\nconst descInput = document.getElementById('serviceDesc');\n\nfunction updateDescVisibility() {\n const hasSelection = selectedServices.length > 0;\n descRow.style.display = hasSelection ? '' : 'none';\n if (hasSelection) setTimeout(()=>descInput.focus(), 30);\n}\n\n\/\/ In your toggleValue() (after renderChips\/setCheckedStates), append:\nfunction toggleValue(val){\n const idx = selectedServices.indexOf(val);\n if(idx === -1) selectedServices.push(val);\n else selectedServices.splice(idx,1);\n renderChips();\n setCheckedStates();\n updateDescVisibility(); \/\/ <-- show\/hide description based on selection\n}\n\n\/\/ When you enter Step 2 (after showStep(2);):\nshowStep(2);\nupdateDescVisibility(); \/\/ <-- ensure correct state on step change\n\n\/\/ If you go back to Step 1, you can hide\/reset:\nbackBtn.addEventListener('click', ()=>{\n showStep(1);\n \/\/ optional: clear description when going back\n \/\/ selectedServices = []; renderChips(); setCheckedStates();\n \/\/ descInput.value = ''; updateDescVisibility();\n});\n\n\/\/ SECOND MODAL ELEMENTS\nconst modalCustomer = document.getElementById('modalCustomer');\nconst closeCustomer = document.getElementById('closeCustomer');\nconst summaryDetails = document.getElementById('summaryDetails');\nconst appointmentSel = document.getElementById('appointment');\nconst submitAppointment = document.getElementById('submitAppointment');\n\n\/\/ ====== Working hours by branch ======\n\/\/ JS weekday: 0=Sun, 1=Mon, 2=Tue, 3=Wed, 4=Thu, 5=Fri, 6=Sat\nconst SCHEDULES = {\n amman: {\n 0: [9, 21], 1: [9, 21], 2: [9, 21], 3: [9, 21], 4: [9, 21],\n 5: null, \/\/ Fri closed\n 6: [10, 21] \/\/ Sat 10\u201321\n },\n irbid: {\n 0: [10, 21], 1: [10, 21], 2: [10, 21], 3: [10, 21], 4: [10, 21],\n 5: null, \/\/ Fri closed\n 6: [10, 21] \/\/ Sat 10\u201321\n },\n homeOffice: {\n 0: [9, 18], 1: [9, 18], 2: [9, 18], 3: [9, 18], 4: [9, 18],\n 5: null, \/\/ Fri closed\n 6: null \/\/ Sat closed (adjust if you do Saturday pickups)\n }\n};\n\nconst apptDate = document.getElementById('apptDate');\nconst apptTime = document.getElementById('apptTime');\nconst closedMsg = document.getElementById('closedMsg');\n\n\/\/ Utility: format hh:mm to 12h\nfunction fmt12h(h, m=0){\n const ampm = h >= 12 ? 'PM' : 'AM';\n let hh = h % 12; if(hh === 0) hh = 12;\n const mm = String(m).padStart(2, '0');\n return `${hh}:${mm} ${ampm}`;\n}\n\n\/\/ Build 30-min slots between [startHour, endHour)\nfunction buildSlots(startHour, endHour, date){\n const slots = [];\n const now = new Date();\n const isToday = date.toDateString() === now.toDateString();\n\n for(let h = startHour; h < endHour; h++){\n for(let m = 0; m < 60; m += 30){\n const slot = new Date(date);\n slot.setHours(h, m, 0, 0);\n\n \/\/ If today, skip past times\n if(isToday && slot <= now) continue;\n\n slots.push({ val: slot.toISOString(), label: fmt12h(h, m) });\n }\n }\n return slots;\n}\n\n\/\/ Find the earliest date from today that is open\nfunction nextOpenDate(branch){\n const schedule = SCHEDULES[branch];\n const d = new Date();\n for(let i=0;i<14;i++){ \/\/ look ahead up to 2 weeks\n const test = new Date(d);\n test.setDate(d.getDate() + i);\n const w = test.getDay();\n if(schedule[w]) return test;\n }\n return d;\n}\n\n\/\/ Populate time select for the chosen date\nfunction populateTimes(branch){\n apptTime.innerHTML = '<option value=\"\">Select a time<\/option>';\n closedMsg.style.display = 'none';\n\n const schedule = SCHEDULES[branch];\n if(!apptDate.value){\n \/\/ default to next open date\n const nd = nextOpenDate(branch);\n apptDate.valueAsDate = nd;\n }\n\n const chosen = new Date(apptDate.value + 'T00:00:00');\n const weekday = chosen.getDay();\n const hours = schedule[weekday];\n\n if(!hours){\n closedMsg.style.display = '';\n return;\n }\n\n const [startHour, endHour] = hours;\n const slots = buildSlots(startHour, endHour, chosen);\n if(slots.length === 0){\n \/\/ All remaining times today passed; suggest next open day automatically\n const nextDay = nextOpenDate(branch);\n if(nextDay.toDateString() !== chosen.toDateString()){\n apptDate.valueAsDate = nextDay;\n return populateTimes(branch);\n }\n return; \/\/ no slots (shouldn't happen)\n }\n\n const frag = document.createDocumentFragment();\n slots.forEach(s=>{\n const opt = document.createElement('option');\n opt.value = s.val;\n opt.textContent = s.label;\n frag.appendChild(opt);\n });\n apptTime.appendChild(frag);\n}\n\n\/\/ Hook: when date changes, rebuild times for current branch\napptDate?.addEventListener('change', ()=>{\n const branch = window._currentBranchForBooking; \/\/ set when opening modal\n if(branch) populateTimes(branch);\n});\n\n\/\/ Function to open second modal\nfunction openCustomerModal(data) {\n \/\/ Fill summary info\n summaryDetails.innerHTML = `\n <strong>Device:<\/strong> ${data.model}<br>\n <strong>Service(s):<\/strong> ${data.services.join(', ')}<br>\n <strong>Description:<\/strong> ${data.description || '(none)'}<br>\n <strong>Location:<\/strong> ${data.locationName}\n `;\n\n\n \n \/\/ Remember the branch for the date\/time generator\n window._currentBranchForBooking = data.location;\n\n \/\/ Set minimum date to today\n const today = new Date();\n apptDate.min = today.toISOString().slice(0,10);\n\n \/\/ Prefill to next open date and populate time slots\n apptDate.value = ''; \/\/ reset\n populateTimes(data.location);\n\n \/\/ Open modal\n modalCustomer.classList.add('open');\n modalCustomer.setAttribute('aria-hidden','false');\n document.documentElement.style.overflow = 'hidden';\n\n \n}\n\n\/\/ Close second modal\ncloseCustomer.addEventListener('click', ()=>{\n modalCustomer.classList.remove('open');\n document.documentElement.style.overflow = '';\n});\n\n \/\/ Elements\nconst modalHomePickup = document.getElementById('modalHomePickup');\nconst closeHomePickup = document.getElementById('closeHomePickup');\nconst homePickupSummary= document.getElementById('homePickupSummary');\n\n\/\/ Open Home\/Office modal and fill summary\nfunction openHomePickupModal(data){\n \/\/ Make the selection available if you need it later too\n window._homePickupData = data;\n\n homePickupSummary.innerHTML = `\n <div class=\"summary-title\">\n <div class=\"summary-icon\">\ud83e\uddfe<\/div>\n Home\/Office Pickup \u2013 Summary\n <\/div>\n <p><strong>Device:<\/strong> ${data.model}<\/p>\n <p><strong>Service(s):<\/strong> ${data.services.join(', ')}<\/p>\n <p><strong>Description:<\/strong> ${data.description || '(none)'}<\/p>\n <hr>\n <p><strong>Location:<\/strong> ${data.locationName}<\/p>\n `;\n\n modalHomePickup.classList.add('open');\n modalHomePickup.setAttribute('aria-hidden','false');\n document.documentElement.style.overflow = 'hidden';\n}\n\ncloseHomePickup.addEventListener('click', ()=>{\n modalHomePickup.classList.remove('open');\n modalHomePickup.setAttribute('aria-hidden','true');\n document.documentElement.style.overflow = '';\n});\n\n\n\n\n\n<\/script>\n\n\n\n\n<script type=\"module\">\n import { collection, addDoc, serverTimestamp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.13.1\/firebase-firestore.js\";\n import { getStorage, ref, uploadBytes, getDownloadURL } from \"https:\/\/www.gstatic.com\/firebasejs\/10.13.1\/firebase-storage.js\";\n\n \/\/ Use the default app you already initialized earlier\n const storage = getStorage();\n\n \/\/ ===== AGREEMENT ELEMENTS =====\n const agreementModal = document.getElementById('modalAgreement');\n const closeAgreement = document.getElementById('closeAgreement');\n const agreementSummary = document.getElementById('agreementSummary');\n const agreeName = document.getElementById('agreeName');\n const agreePID = document.getElementById('agreePID');\n const agreeCheck = document.getElementById('agreeCheck');\n const agreeAndCreate = document.getElementById('agreeAndCreate');\n const termsPdfFrame = document.getElementById('termsPdfFrame');\n\n const homePickupModal = document.getElementById('modalHomePickup');\n\n \/\/ Your Terms PDF\n\/\/ const TERMS_PDF_URL = 'https:\/\/365solutionsjo.com\/wp-content\/uploads\/2024\/06\/Amman_new_contract.pdf';\n\n const TERMS_PDF_URL = 'https:\/\/365solutionsjo.com\/wp-content\/uploads\/2025\/11\/Terms-and-conditions.pdf';\n \n \/\/ ----- Signature Pad -----\n let signaturePad;\n function initSignaturePad(){\n const canvas = document.getElementById('sigPad');\n const rect = canvas.getBoundingClientRect();\n canvas.width = rect.width * window.devicePixelRatio;\n canvas.height = rect.height * window.devicePixelRatio;\n const ctx = canvas.getContext('2d');\n ctx.scale(window.devicePixelRatio, window.devicePixelRatio);\n signaturePad = new window.SignaturePad(canvas, { backgroundColor: 'rgba(255,255,255,0)' });\n const clearBtn = document.getElementById('clearSig');\n if (clearBtn) clearBtn.onclick = ()=> signaturePad.clear();\n }\n window.addEventListener('resize', ()=> {\n if (agreementModal.classList.contains('open')) initSignaturePad();\n });\n\n \/\/ ----- Define & EXPOSE openAgreementModal -----\n function openAgreementModal(summary, prefillName){\n agreementSummary.innerHTML = `\n <div class=\"summary-title\"><div class=\"summary-icon\">\ud83e\uddfe<\/div> Service Agreement \u2013 Summary<\/div>\n <p><strong>Device:<\/strong> ${summary.device}<\/p>\n <p><strong>Service(s):<\/strong> ${summary.services.join(', ')}<\/p>\n <p><strong>Description:<\/strong> ${summary.description || '(none)'}<\/p>\n <hr>\n <p><strong>Location:<\/strong> ${summary.locationName}<\/p>\n `;\n termsPdfFrame.src = TERMS_PDF_URL + '#toolbar=0&navpanes=0&scrollbar=0';\n agreeName.value = prefillName || '';\n agreePID.value = '';\n agreeCheck.checked = false;\n\n agreementModal.classList.add('open');\n agreementModal.setAttribute('aria-hidden','false');\n document.documentElement.style.overflow = 'hidden';\n setTimeout(initSignaturePad, 50);\n }\n \/\/ \ud83d\udc47 expose globally so other scripts\/handlers can call it\n window.openAgreementModal = openAgreementModal;\n\n closeAgreement.addEventListener('click', ()=>{\n agreementModal.classList.remove('open');\n agreementModal.setAttribute('aria-hidden','true');\n document.documentElement.style.overflow = '';\n });\n\n \/\/ ----- Rebind Home\/Office SUBMIT so it calls openAgreementModal -----\n {\n const oldBtn = document.getElementById('submitHomePickup');\n const newBtn = oldBtn.cloneNode(true); \/\/ strip old listeners\n oldBtn.replaceWith(newBtn);\n const btn = document.getElementById('submitHomePickup');\n\n btn.addEventListener('click', (e)=>{\n e.preventDefault();\n\n const name = document.getElementById('hpName').value.trim();\n const email = document.getElementById('hpEmail').value.trim();\n const phone = document.getElementById('hpPhone').value.trim();\n const serial = document.getElementById('hpSerial').value.trim();\n const problem = document.getElementById('hpProblem').value.trim();\n const company = document.getElementById('hpCompany').value.trim();\n const address = document.getElementById('hpAddress').value.trim();\n\n if(!name || !email || !phone || !serial || !problem || !address){\n alert('Please fill in name, email, phone, serial\/IMEI, problem details, and address.');\n return;\n }\n\n const sel = window._homePickupData;\n if(!sel){\n alert('Missing selection context. Please choose model\/services again.');\n return;\n }\n\n \/\/ keep values for final ticket save\n window._homePickupFormInputs = { name, email, phone, serial, problem, company, address };\n\n \/\/ \u2705 call the now-global function\n window.openAgreementModal({\n device: sel.model,\n services: sel.services,\n description: sel.description,\n locationName: sel.locationName\n }, name);\n });\n }\n\n \/\/ ----- Helpers for stamping & uploading -----\n async function fetchArrayBuffer(url){\n const res = await fetch(url);\n if(!res.ok) throw new Error('Failed to fetch Terms PDF');\n return await res.arrayBuffer();\n }\n\n async function createStampedAgreementPDF({customerName, personalId, signatureDataUrl, selection}) {\n const { PDFDocument, rgb, StandardFonts } = window.PDFLib;\n const pdfBytes = await fetchArrayBuffer(TERMS_PDF_URL);\n const pdfDoc = await PDFDocument.load(pdfBytes);\n const page = pdfDoc.getPages()[0];\n const { width, height } = page.getSize();\n const font = await pdfDoc.embedFont(StandardFonts.Helvetica);\n\n \/\/ Signature\n const sigPngBytes = await (await fetch(signatureDataUrl)).arrayBuffer();\n const sigImage = await pdfDoc.embedPng(sigPngBytes);\n const sigW = 60, sigH = 20;\n const sigX = 225, sigY = 55;\n\n \/\/ Text positions (tweak as needed)\n const nameX = 40, nameY = sigY + 10;\n const idX = 350, idY = nameY;\n \n \n \n\n page.drawText(`${customerName}`, { x: nameX, y: nameY, size: 5, font, color: rgb(0,0,0) });\n \/\/ if (personalId) {\n \/\/ page.drawText(`Personal ID: ${personalId}`, { x: idX, y: idY, size: 12, font, color: rgb(0,0,0) });\n \/\/ }\n \n page.drawImage(sigImage, { x: sigX, y: sigY, width: sigW, height: sigH });\n \n \n const sigX2 = 300, sigY2 = 45;\n \n const nameX2 = 475, nameY2 = sigY2 + 5;\n \n \n page.drawText(`${customerName}`, { x: nameX2, y: nameY2, size: 5, font, color: rgb(0,0,0) });\n \/\/ if (personalId) {\n \/\/ page.drawText(`Personal ID: ${personalId}`, { x: idX, y: idY, size: 12, font, color: rgb(0,0,0) });\n \/\/ }\n \n page.drawImage(sigImage, { x: sigX2, y: sigY2, width: sigW, height: sigH });\n \n\n \n return await pdfDoc.save();\n }\n\n async function uploadAgreementToStorage(bytes){\n const filename = `agreements\/${Date.now()}_agreement.pdf`;\n const fileRef = ref(storage, filename);\n await uploadBytes(fileRef, new Blob([bytes], { type: 'application\/pdf' }));\n return await getDownloadURL(fileRef);\n }\n\n \/\/ ----- Final AGREE & CREATE (writes to onlineTickets) -----\n const db = window.db; \/\/ from your earlier Firebase init module\n agreeAndCreate.addEventListener('click', async ()=>{\n try{\n const name = agreeName.value.trim();\n const pid = agreePID.value.trim();\n if(!name){ alert('Please enter your name.'); return; }\n if(!agreeCheck.checked){ alert('Please accept the Terms & Conditions.'); return; }\n if(!signaturePad || signaturePad.isEmpty()){\n alert('Please provide your signature.'); return;\n }\n\n const selection = window._homePickupData;\n const form = window._homePickupFormInputs;\n if(!selection || !form){ alert('Missing context. Please fill the form again.'); return; }\n\n const sigDataUrl = signaturePad.toDataURL('image\/png');\n const stampedBytes = await createStampedAgreementPDF({\n customerName: name,\n personalId: pid || '',\n signatureDataUrl: sigDataUrl,\n selection\n });\n\n const agreementUrl = await uploadAgreementToStorage(stampedBytes);\n\n const payload = {\n device: selection.model,\n services: selection.services,\n selectionDescription: selection.description || '',\n location: selection.location, \/\/ 'homeOffice'\n locationName: selection.locationName,\n agreement: {\n customerName: name,\n personalId: pid || null,\n signedAt: new Date().toISOString(),\n url: agreementUrl\n },\n customer: {\n name: form.name,\n email: form.email,\n phone: form.phone,\n company: form.company || null,\n address: form.address\n },\n deviceInfo: {\n serialOrImei: form.serial,\n problemDetails: form.problem\n },\n appointment: null,\n createdAt: serverTimestamp()\n };\n\n await addDoc(collection(db, 'onlineTickets'), payload);\n\n alert('\u2705 Ticket created. Thank you!');\n agreementModal.classList.remove('open');\n homePickupModal.classList.remove('open');\n document.documentElement.style.overflow = '';\n\n } catch(err){\n console.error(err);\n alert('\u274c Could not create ticket. Please try again.');\n }\n });\n<\/script>\n\n\n<script type=\"module\">\n import { collection, addDoc, serverTimestamp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.13.1\/firebase-firestore.js\";\n\n\n submitAppointment.addEventListener(\"click\", async () => {\n const name = document.getElementById(\"custName\").value.trim();\n const email = document.getElementById(\"custEmail\").value.trim();\n const phone = document.getElementById(\"custPhone\").value.trim();\n const dateVal = document.getElementById(\"apptDate\").value;\n const timeVal = document.getElementById(\"apptTime\").value;\n\n if (!name || !email || !phone || !dateVal || !timeVal) {\n alert(\"\u26a0\ufe0f Please fill in all required fields.\");\n return;\n }\n\n \/\/ Gather all data from the booking flow\n const data = {\n device: step2Title.textContent.trim(),\n services: selectedServices,\n description: document.getElementById(\"serviceDesc\")?.value.trim() || \"\",\n location: window._currentBranchForBooking || \"\",\n customer: {\n name,\n email,\n phone,\n },\n appointment: {\n date: dateVal,\n time: timeVal,\n },\n createdAt: serverTimestamp(),\n };\n\n try {\n \/\/ \u2705 Save appointment to Firestore\n const docRef = await addDoc(collection(window.db, \"appointments\"), data);\n alert(`\u2705 Appointment saved successfully!\\nOur team will contact you very soon.\\nThank you...`);\n\n \/\/ Close modal and reset\n modalCustomer.classList.remove(\"open\");\n document.documentElement.style.overflow = \"\";\n document.getElementById(\"custName\").value = \"\";\n document.getElementById(\"custEmail\").value = \"\";\n document.getElementById(\"custPhone\").value = \"\";\n document.getElementById(\"apptDate\").value = \"\";\n document.getElementById(\"apptTime\").value = \"\";\n } catch (error) {\n console.error(\"Error adding document:\", error);\n alert(\"\u274c Error saving appointment. Check console for details.\");\n }\n });\n \n \n \n\n\n\/\/ const storage = getStorage(); \/\/ reuse your initialized app\n\n\/\/ \/\/ ====== AGREEMENT ELEMENTS (you already have these in HTML) ======\n\/\/ const agreementModal = document.getElementById('modalAgreement');\n\/\/ const closeAgreement = document.getElementById('closeAgreement');\n\/\/ const agreementSummary = document.getElementById('agreementSummary');\n\/\/ const agreeName = document.getElementById('agreeName');\n\/\/ const agreePID = document.getElementById('agreePID');\n\/\/ const agreeCheck = document.getElementById('agreeCheck');\n\/\/ const agreeAndCreate = document.getElementById('agreeAndCreate');\n\/\/ const termsPdfFrame = document.getElementById('termsPdfFrame');\n\n\/\/ \/\/ Your Terms PDF\n\/\/ const TERMS_PDF_URL = 'https:\/\/365solutionsjo.com\/wp-content\/uploads\/2024\/06\/Amman_new_contract.pdf';\n\n\/\/ \/\/ ----- Signature Pad -----\n\/\/ let signaturePad;\n\/\/ function initSignaturePad(){\n\/\/ const canvas = document.getElementById('sigPad');\n\/\/ const rect = canvas.getBoundingClientRect();\n\/\/ canvas.width = rect.width * window.devicePixelRatio;\n\/\/ canvas.height = rect.height * window.devicePixelRatio;\n\/\/ const ctx = canvas.getContext('2d');\n\/\/ ctx.scale(window.devicePixelRatio, window.devicePixelRatio);\n\/\/ signaturePad = new window.SignaturePad(canvas, { backgroundColor: 'rgba(255,255,255,0)' });\n\/\/ document.getElementById('clearSig').onclick = ()=> signaturePad.clear();\n\/\/ }\n\/\/ window.addEventListener('resize', ()=> {\n\/\/ if (agreementModal.classList.contains('open')) initSignaturePad();\n\/\/ });\n\n\/\/ \/\/ ----- Open Agreement Modal -----\n\/\/ function openAgreementModal(summary, prefillName){\n\/\/ console.log(\"Opening agreementModal\");\n\/\/ agreementSummary.innerHTML = `\n\/\/ <div class=\"summary-title\"><div class=\"summary-icon\">\ud83e\uddfe<\/div> Service Agreement \u2013 Summary<\/div>\n\/\/ <p><strong>Device:<\/strong> ${summary.device}<\/p>\n\/\/ <p><strong>Service(s):<\/strong> ${summary.services.join(', ')}<\/p>\n\/\/ <p><strong>Description:<\/strong> ${summary.description || '(none)'}<\/p>\n\/\/ <hr>\n\/\/ <p><strong>Location:<\/strong> ${summary.locationName}<\/p>\n\/\/ `;\n\/\/ termsPdfFrame.src = TERMS_PDF_URL + '#toolbar=0&navpanes=0&scrollbar=0';\n\/\/ agreeName.value = prefillName || '';\n\/\/ agreePID.value = '';\n\/\/ agreeCheck.checked = false;\n\n\/\/ agreementModal.classList.add('open');\n\/\/ agreementModal.setAttribute('aria-hidden','false');\n\/\/ document.documentElement.style.overflow = 'hidden';\n\/\/ setTimeout(initSignaturePad, 50);\n\/\/ }\n\/\/ closeAgreement.addEventListener('click', ()=>{\n\/\/ agreementModal.classList.remove('open');\n\/\/ agreementModal.setAttribute('aria-hidden','true');\n\/\/ document.documentElement.style.overflow = '';\n\/\/ });\n\n\/\/ \/\/ ----- On Home\/Office SUBMIT \u2192 open Agreement instead of saving now -----\n\/\/ const submitHomePickup = document.getElementById('submitHomePickup');\n\/\/ submitHomePickup.replaceWith(submitHomePickup.cloneNode(true)); \/\/ clear any previous listeners added elsewhere\n\/\/ document.getElementById('submitHomePickup').addEventListener('click', (e)=>{\n\/\/ e.preventDefault();\n\n\/\/ const name = document.getElementById('hpName').value.trim();\n\/\/ const email = document.getElementById('hpEmail').value.trim();\n\/\/ const phone = document.getElementById('hpPhone').value.trim();\n\/\/ const serial = document.getElementById('hpSerial').value.trim();\n\/\/ const problem = document.getElementById('hpProblem').value.trim();\n\/\/ const company = document.getElementById('hpCompany').value.trim();\n\/\/ const address = document.getElementById('hpAddress').value.trim();\n\/\/ console.log(\"Submit home\");\n\/\/ if(!name || !email || !phone || !serial || !problem || !address){\n\/\/ alert('Please fill in name, email, phone, serial\/IMEI, problem details, and address.');\n\/\/ return;\n\/\/ }\n\n\/\/ \/\/ Save form fields + selection for the final step\n\/\/ window._homePickupFormInputs = { name, email, phone, serial, problem, company, address };\n\n\/\/ const sel = window._homePickupData;\n\/\/ if(!sel){\n\/\/ alert('Missing selection context. Please choose model\/services again.');\n\/\/ return;\n\/\/ }\n\n\/\/ \/\/ Open the agreement modal before generating the ticket\n\/\/ openAgreementModal({\n\/\/ device: sel.model,\n\/\/ services: sel.services,\n\/\/ description: sel.description,\n\/\/ locationName: sel.locationName\n\/\/ }, name);\n\/\/ });\n\n\/\/ \/\/ ----- Helpers for stamping & uploading -----\n\/\/ async function fetchArrayBuffer(url){\n\/\/ const res = await fetch(url);\n\/\/ if(!res.ok) throw new Error('Failed to fetch Terms PDF');\n\/\/ return await res.arrayBuffer();\n\/\/ }\n\n\/\/ async function createStampedAgreementPDF({customerName, personalId, signatureDataUrl, selection}) {\n\/\/ const { PDFDocument, rgb, StandardFonts } = window.PDFLib;\n\/\/ const pdfBytes = await fetchArrayBuffer(TERMS_PDF_URL);\n\/\/ const pdfDoc = await PDFDocument.load(pdfBytes);\n\/\/ const page = pdfDoc.getPages()[0];\n\/\/ const { width, height } = page.getSize();\n\/\/ const font = await pdfDoc.embedFont(StandardFonts.Helvetica);\n\n\/\/ \/\/ Signature image\n\/\/ const sigPngBytes = await (await fetch(signatureDataUrl)).arrayBuffer();\n\/\/ const sigImage = await pdfDoc.embedPng(sigPngBytes);\n\/\/ const sigW = 180, sigH = 60;\n\/\/ const sigX = 70, sigY = 80;\n\n\/\/ \/\/ Text positions (adjust to match your PDF)\n\/\/ const nameX = 70, nameY = sigY + sigH + 18;\n\/\/ const idX = 350, idY = nameY;\n\/\/ const dateX = 70, dateY = sigY - 6;\n\n\/\/ page.drawText(`Name: ${customerName}`, { x: nameX, y: nameY, size: 12, font, color: rgb(0,0,0) });\n\/\/ if (personalId) {\n\/\/ page.drawText(`Personal ID: ${personalId}`, { x: idX, y: idY, size: 12, font, color: rgb(0,0,0) });\n\/\/ }\n\/\/ page.drawText(`Signed: ${new Date().toLocaleString()}`, { x: dateX, y: dateY, size: 11, font, color: rgb(0,0,0) });\n\/\/ page.drawImage(sigImage, { x: sigX, y: sigY, width: sigW, height: sigH });\n\n\/\/ \/\/ Optional: small summary on top-right\n\/\/ const summaryY = height - 90;\n\/\/ page.drawText(`Device: ${selection.model}`, { x: width - 300, y: summaryY, size: 10, font });\n\/\/ page.drawText(`Services: ${selection.services.join(', ')}`, { x: width - 300, y: summaryY - 14, size: 10, font });\n\/\/ page.drawText(`Location: ${selection.locationName}`, { x: width - 300, y: summaryY - 28, size: 10, font });\n\n\/\/ return await pdfDoc.save();\n\/\/ }\n\n\/\/ async function uploadAgreementToStorage(bytes){\n\/\/ const filename = `agreements\/${Date.now()}_agreement.pdf`;\n\/\/ const fileRef = ref(storage, filename);\n\/\/ await uploadBytes(fileRef, new Blob([bytes], { type: 'application\/pdf' }));\n\/\/ return await getDownloadURL(fileRef);\n\/\/ }\n\n\/\/ \/\/ ----- Agree & Create Ticket (final) -----\n\/\/ agreeAndCreate.addEventListener('click', async ()=>{\n\/\/ try{\n\/\/ const name = agreeName.value.trim();\n\/\/ const pid = agreePID.value.trim();\n\/\/ if(!name){ alert('Please enter your name.'); return; }\n\/\/ if(!agreeCheck.checked){ alert('Please accept the Terms & Conditions.'); return; }\n\/\/ if(!signaturePad || signaturePad.isEmpty()){\n\/\/ alert('Please provide your signature.'); return;\n\/\/ }\n\n\/\/ const selection = window._homePickupData;\n\/\/ const form = window._homePickupFormInputs;\n\/\/ if(!selection || !form){ alert('Missing context. Please fill the form again.'); return; }\n\n\/\/ \/\/ Stamp PDF\n\/\/ const sigDataUrl = signaturePad.toDataURL('image\/png');\n\/\/ const stampedBytes = await createStampedAgreementPDF({\n\/\/ customerName: name,\n\/\/ personalId: pid || '',\n\/\/ signatureDataUrl: sigDataUrl,\n\/\/ selection\n\/\/ });\n\n\/\/ \/\/ Upload to Firebase Storage\n\/\/ const agreementUrl = await uploadAgreementToStorage(stampedBytes);\n\n\/\/ \/\/ Build payload for Firestore (onlineTickets)\n\/\/ const payload = {\n\/\/ device: selection.model,\n\/\/ services: selection.services,\n\/\/ selectionDescription: selection.description || '',\n\/\/ location: selection.location, \/\/ 'homeOffice'\n\/\/ locationName: selection.locationName,\n\/\/ agreement: {\n\/\/ customerName: name,\n\/\/ personalId: pid || null,\n\/\/ signedAt: new Date().toISOString(),\n\/\/ url: agreementUrl\n\/\/ },\n\/\/ customer: {\n\/\/ name: form.name,\n\/\/ email: form.email,\n\/\/ phone: form.phone,\n\/\/ company: form.company || null,\n\/\/ address: form.address\n\/\/ },\n\/\/ deviceInfo: {\n\/\/ serialOrImei: form.serial,\n\/\/ problemDetails: form.problem\n\/\/ },\n\/\/ appointment: null,\n\/\/ createdAt: serverTimestamp()\n\/\/ };\n\n\/\/ await addDoc(collection(window.db, 'onlineTickets'), payload);\n\n\/\/ alert('\u2705 Ticket created. Thank you!');\n\/\/ \/\/ Close agreement + home pickup modals\n\/\/ agreementModal.classList.remove('open');\n\/\/ document.getElementById('modalHomePickup')?.classList.remove('open');\n\/\/ document.documentElement.style.overflow = '';\n\n\/\/ } catch(err){\n\/\/ console.error(err);\n\/\/ alert('\u274c Could not create ticket. Please try again.');\n\/\/ }\n\/\/ });\n \n\/\/ \/\/ --- SAFELY REBIND THE HOME\/OFFICE SUBMIT BUTTON ---\n\/\/ let hpBtn = document.getElementById('submitHomePickup');\n\n\/\/ \/\/ replace the node to strip any old listeners added by other scripts\n\/\/ hpBtn = hpBtn.replaceWith(hpBtn.cloneNode(true)) || document.getElementById('submitHomePickup');\n\n\/\/ \/\/ re-select the (cloned) element\n\/\/ const submitHomePickupFresh = document.getElementById('submitHomePickup');\n\n\/\/ \/\/ quick sanity log\n\/\/ submitHomePickupFresh.addEventListener('click', () => console.log('[HomePickup] Click received'));\n\n\/\/ submitHomePickupFresh.addEventListener('click', (e)=>{\n\/\/ e.preventDefault();\n\n\/\/ \/\/ your existing validation + openAgreementModal flow OR direct save\n\/\/ const name = document.getElementById('hpName').value.trim();\n\/\/ const email = document.getElementById('hpEmail').value.trim();\n\/\/ const phone = document.getElementById('hpPhone').value.trim();\n\/\/ const serial = document.getElementById('hpSerial').value.trim();\n\/\/ const problem = document.getElementById('hpProblem').value.trim();\n\/\/ const company = document.getElementById('hpCompany').value.trim();\n\/\/ const address = document.getElementById('hpAddress').value.trim();\n\n\/\/ if(!name || !email || !phone || !serial || !problem || !address){\n\/\/ alert('Please fill in name, email, phone, serial\/IMEI, problem details, and address.');\n\/\/ return;\n\/\/ }\n\n\/\/ \/\/ keep form inputs for agreement step\n\/\/ window._homePickupFormInputs = { name, email, phone, serial, problem, company, address };\n\n\/\/ const sel = window._homePickupData;\n\/\/ if(!sel){\n\/\/ alert('Missing selection context. Please choose model\/services again.');\n\/\/ return;\n\/\/ }\n\n\/\/ \/\/ \u2705 If using agreement flow:\n\/\/ if (typeof window.openAgreementModal === 'function') {\n\/\/ window.openAgreementModal({\n\/\/ device: sel.model,\n\/\/ services: sel.services,\n\/\/ description: sel.description,\n\/\/ locationName: sel.locationName\n\/\/ }, name);\n\/\/ } else {\n\/\/ \/\/ fallback: direct save (no agreement)\n\/\/ alert('Agreement modal not loaded; add the agreement script or call openAgreementModal.');\n\/\/ }\n\/\/ });\n\n\n<\/script>\n<\/body>\n<style>\n :root {\n --border: #d9d9d9;\n --shadow: 0 0 0 1px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.08);\n --radius: 12px;\n}\n\n* { box-sizing: border-box; }\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\n color: #000;\n background: #fff;\n}\n\n.wrap {\n max-width: 1500px; \/* wide like your screenshot *\/\n margin: 32px auto;\n padding: 0 20px;\n}\n\n\/* Responsive grid *\/\n.grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr); \/* 5 across on wide screens *\/\n gap: 28px 36px; \/* row \/ column spacing *\/\n}\n\n@media (max-width: 1400px) {\n .grid { grid-template-columns: repeat(4, 1fr); }\n}\n@media (max-width: 1100px) {\n .grid { grid-template-columns: repeat(3, 1fr); }\n}\n@media (max-width: 780px) {\n .grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 480px) {\n .grid { grid-template-columns: 1fr; }\n}\n\n\/* Card *\/\n.card {\n display: grid;\n place-items: center;\n min-height: 160px; \/* similar feel to the screenshot *\/\n padding: 28px;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n text-align: center;\n text-decoration: none;\n color: inherit;\n background: #fff;\n box-shadow: var(--shadow);\n transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;\n}\n\n.card:focus-visible {\n outline: 3px solid #0a84ff; \/* accessible focus *\/\n outline-offset: 2px;\n}\n\n.card:hover {\n transform: translateY(-1px);\n border-color: #c9c9c9;\n box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 6px 14px rgba(0,0,0,.12);\n}\n\n.label {\n font-size: 20px;\n line-height: 1.45;\n font-weight: 500;\n}\n\n\/* Slightly smaller on phones so lines break nicely *\/\n@media (max-width: 480px) {\n .label { font-size: 18px; }\n}\n\n\/* ==== modal ==== *\/\n .modal-backdrop{\n position:fixed;inset:0;background:rgba(0,0,0,.35);\n display:none;align-items:center;justify-content:center;padding:24px;z-index:999999 !important;\n }\n .modal-backdrop.open{display:flex}\n .modal{\n background:#fff;width:min(1050px,95vw);max-height:86vh;border-radius:14px;\n box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;\n }\n .modal__header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid #eee}\n .icon-btn{width:36px;height:36px;border-radius:8px;border:1px solid #e5e5e5;background:#fff;display:grid;place-items:center;cursor:pointer}\n .serviceImage{width: 120px; height: 120px}\n .close-btn{font-size:20px;line-height:1;background:#fff}\n .modal__title{margin-left:4px;font-weight:700}\n .spacer{flex:1}\n\n .modal__search{padding:14px 16px;border-bottom:1px solid #f0f0f0;background:#fafafa}\n .searchbox{position:relative;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding-left:40px}\n .searchbox input{width:100%;height:44px;border:0;outline:0;border-radius:8px;padding:0 12px 0 0;font-size:16px;background:transparent}\n .searchbox .magnify{position:absolute;left:12px;top:0;height:100%;display:grid;place-items:center;font-size:18px;color:#999}\n\n .modal__body{padding:18px 16px 22px;overflow:auto}\n \/* step 1: device list *\/\n .list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px;max-width:900px;margin:0 auto}\n @media (max-width:680px){.list{grid-template-columns:1fr}}\n .list a{display:block;padding:14px 16px;border:1px solid #e5e5e5;border-radius:10px;text-decoration:none;color:#111;background:#fff}\n .muted{color:#888;font-weight:500;text-align:center;margin-top:14px}\n\n \/* step 2: service selection layout *\/\n .step2 {max-width:840px;margin:0 auto}\n .h1-like{font-weight:700;text-align:center;margin:22px 0 6px;font-size:22px}\n .field-label{margin:18px 0 8px;font-size:14px;font-weight:600;color:#333}\n .text-input{width:100%;height:42px;border:1px solid var(--border);border-radius:6px;padding:0 10px;font-size:15px}\n .options{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:18px 0 8px}\n @media (max-width:860px){.options{grid-template-columns:1fr}}\n .option{\n border:1px solid #ddd;border-radius:10px;padding:20px;text-align:center;cursor:pointer;background:#fff;\n display:grid;gap:10px;place-items:center;transition:border-color .1s ease, box-shadow .1s ease;\n }\n .option:hover{border-color:#cfcfcf}\n .option.active{border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,111,219,.12)}\n .option .icon{font-size:40px;line-height:1}\n .option .title{font-weight:700;font-size:13px;letter-spacing:.3px}\n .option .price{font-size:12px;color:#666}\n\n .actions{display:grid;place-items:center;margin:18px 0 24px}\n .btn-primary{\n appearance:none;border:0;border-radius:8px;background:var(--primary);color:#fff;\n padding:12px 28px;font-weight:700;letter-spacing:.4px;cursor:pointer;\n }\n \n \/* ===== Multi-select styles ===== *\/\n.multi { position: relative; }\n.multi-input{\n display:flex; align-items:center; flex-wrap:wrap; gap:6px;\n min-height:42px; border:1px solid var(--border); border-radius:6px;\n padding:6px 36px 6px 8px; cursor:text; background:#fff;\n}\n.multi-input:focus-within{ box-shadow:0 0 0 2px rgba(59,111,219,.12); border-color:#bfc9ee; }\n.multi-caret{\n position:absolute; right:6px; top:6px; height:30px; width:30px;\n border:0; background:transparent; font-size:16px; cursor:pointer; color:#666;\n}\n.multi-filter{\n flex:1; min-width:120px; border:0; outline:0; font-size:15px; padding:6px 4px;\n}\n.chips{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }\n.chip{\n display:inline-flex; align-items:center; gap:6px; padding:4px 8px;\n background:#eef2ff; color:#2b3a8a; border:1px solid #dfe5ff; border-radius:999px; font-size:12px; font-weight:600;\n}\n.chip .x{ cursor:pointer; font-weight:700; line-height:1; opacity:.7; }\n.chip .x:hover{ opacity:1; }\n\n.multi-list{\n position:absolute; z-index:999999; left:0; right:0; top:calc(100% + 6px);\n max-height:260px; overflow:auto; background:#fff; border:1px solid #e5e5e5;\n border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:6px; display:none;\n}\n.multi-list.open{ display:block; }\n.multi-list li{ list-style:none; margin:0; padding:4px 8px; border-radius:6px; }\n.multi-list li:hover{ background:#f6f8ff; }\n.multi-list label{ display:flex; align-items:center; gap:8px; cursor:pointer; }\n.multi-list input{ width:16px; height:16px; }\n.desc-row { margin-top: 14px; }\n\n.location-info {\n font-size:14px;\n color:#333;\n line-height:1.5;\n}\n.location-info a {\n color:#3b6fdb;\n text-decoration:none;\n}\n.location-info a:hover {\n text-decoration:underline;\n}\n\n.summary-box {\n background: linear-gradient(135deg, #f9fafc 0%, #ffffff 100%);\n border: 1px solid rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n padding: 20px 24px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n margin-bottom: 24px;\n}\n\n.summary-box:hover {\n box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);\n transform: translateY(-2px);\n}\n\n.summary-box strong {\n color: #111827;\n font-weight: 700;\n}\n\n.summary-box p {\n margin: 4px 0;\n color: #374151;\n font-size: 15px;\n line-height: 1.5;\n}\n\n.summary-box .summary-title {\n font-size: 17px;\n font-weight: 700;\n color: #1e3a8a;\n margin-bottom: 10px;\n letter-spacing: 0.3px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.summary-box .summary-icon {\n width: 20px;\n height: 20px;\n background-color: #1e3a8a;\n border-radius: 6px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 12px;\n}\n\n.summary-box hr {\n border: 0;\n height: 1px;\n background: rgba(0, 0, 0, 0.05);\n margin: 10px 0 12px;\n}\n\n.field-group { max-width: 420px; }\n\n\/* ===== SECOND MODAL MODERN STYLING ===== *\/\n#modalCustomer .modal {\n background: linear-gradient(135deg, #fefefe 0%, #f7fbff 100%);\n border: 1px solid rgba(0,0,0,0.05);\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n border-radius: 16px;\n overflow: hidden;\n}\n\n\/* colored top bar *\/\n#modalCustomer .modal__header {\n background: linear-gradient(90deg, #0095a8 0%, #00b8d9 100%);\n color: #fff;\n border-bottom: none;\n padding: 18px 24px;\n}\n\n#modalCustomer .modal__title {\n font-weight: 700;\n font-size: 18px;\n letter-spacing: 0.4px;\n}\n\n#modalCustomer .close-btn {\n background: rgba(255,255,255,0.15);\n color: #fff;\n border: none;\n transition: background 0.2s ease;\n}\n#modalCustomer .close-btn:hover {\n background: rgba(255,255,255,0.25);\n}\n\n\/* modern form styling *\/\n#modalCustomer .modal__body {\n padding: 28px 36px;\n background: #fefefe;\n}\n\n#modalCustomer label.field-label {\n color: #374151;\n font-weight: 600;\n font-size: 14px;\n}\n\n#modalCustomer .text-input,\n#modalCustomer select {\n border: 1px solid #d2e3f0;\n border-radius: 8px;\n height: 44px;\n padding: 0 12px;\n font-size: 15px;\n width: 100%;\n transition: all 0.2s ease;\n background: #fff;\n}\n#modalCustomer .text-input:focus,\n#modalCustomer select:focus {\n border-color: #0095a8;\n box-shadow: 0 0 0 3px rgba(0,149,168,0.15);\n outline: none;\n}\n\n\/* summary box with accent *\/\n#modalCustomer .summary-box {\n background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%);\n border: 1px solid #b2ebf2;\n border-left: 5px solid #00acc1;\n border-radius: 12px;\n padding: 16px 22px;\n margin-bottom: 28px;\n color: #004d59;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n}\n#modalCustomer .summary-box strong {\n color: #004d59;\n}\n\n\/* appointment dropdown and date input *\/\n#apptDate,\n#apptTime {\n background: #fff;\n font-weight: 500;\n color: #333;\n}\n\n\/* submit button *\/\n#modalCustomer .btn-primary {\n background: linear-gradient(90deg, #0095a8, #00b8d9);\n border: none;\n color: #fff;\n border-radius: 10px;\n padding: 12px 32px;\n font-size: 15px;\n letter-spacing: 0.5px;\n cursor: pointer;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n#modalCustomer .btn-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 18px rgba(0,149,168,0.3);\n}\n\n\/* subtle animation on modal open *\/\n#modalCustomer.open .modal {\n animation: fadeUp 0.3s ease;\n}\n@keyframes fadeUp {\n from { transform: translateY(25px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n\n#modalHomePickup .modal { \n background: linear-gradient(135deg, #fefefe 0%, #f7fbff 100%);\n border: 1px solid rgba(0,0,0,0.05);\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 10px 40px rgba(0,0,0,0.15);\n}\n#modalHomePickup .modal__header {\n background: linear-gradient(90deg, #0095a8 0%, #00b8d9 100%);\n color: #fff; border-bottom: none; padding: 18px 24px;\n}\n#modalHomePickup .modal__body { padding: 28px 36px; background: #fff; }\n#modalHomePickup .btn-primary {\n background: linear-gradient(90deg, #0095a8, #00b8d9); border:none; color:#fff;\n border-radius:10px; padding:12px 32px; font-size:15px; letter-spacing:.5px;\n cursor:pointer; transition: transform .15s ease, box-shadow .15s ease;\n}\n#modalHomePickup .btn-primary:hover {\n transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,149,168,0.3);\n}\n\n\n<\/style>\n\n\n<\/html>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-58b3de7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"58b3de7\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6e82b1d\" data-id=\"6e82b1d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cd77919 elementor-widget elementor-widget-text-editor\" data-id=\"cd77919\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>This is your Apple Authorised Mac service and repair Center<\/h4>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-849f187 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"849f187\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2b73878\" data-id=\"2b73878\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-0df7199 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0df7199\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-628a8b0\" data-id=\"628a8b0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a0a39d3 elementor-widget elementor-widget-heading\" data-id=\"a0a39d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Cost<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b688277 elementor-widget elementor-widget-text-editor\" data-id=\"b688277\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Prices may vary depending on the model and type of repair, but the service that we provide will always worth it, when you bring your Mac device to the service center, we can give you an estimation.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c877cb elementor-widget elementor-widget-heading\" data-id=\"1c877cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span style=\"font-size: 24px;text-transform: none\">Time<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf80009 elementor-widget elementor-widget-text-editor\" data-id=\"bf80009\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: rgb(0, 0, 0); font-family: Tahoma, sans-serif;\">Most of the repairs can take 3-5 working days depending on the type of repair, but this might change if parts are needed in the repair.<\/span><br><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9e6252 elementor-widget elementor-widget-heading\" data-id=\"e9e6252\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span style=\"font-size: 24px;text-transform: none\">How to start a repair<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1210e13 elementor-widget elementor-widget-text-editor\" data-id=\"1210e13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #000000; font-family: Tahoma, sans-serif;\">You can bring your Mac device to our service center and we will estimate the time and cost, and you will receive an SMS and email during the repair procedure, more over you can always track your repair from\u00a0<\/span><a style=\"font-size: 1rem;\" href=\"https:\/\/365solutionsjo.com\/customer_repair_tracking.html\" target=\"_blank\" rel=\"noopener\">here.<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ff710d2\" data-id=\"ff710d2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ec4fa4c elementor-widget elementor-widget-image\" data-id=\"ec4fa4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"472\" height=\"472\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/MacBook_Pro_16_in_M3_Pro_Max_Space_Black_PDP_Image_Position-1__en-ME.png?fit=472%2C472&ssl=1\" class=\"attachment-large size-large wp-image-1445\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/MacBook_Pro_16_in_M3_Pro_Max_Space_Black_PDP_Image_Position-1__en-ME.png?w=472&ssl=1 472w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/MacBook_Pro_16_in_M3_Pro_Max_Space_Black_PDP_Image_Position-1__en-ME.png?resize=300%2C300&ssl=1 300w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/MacBook_Pro_16_in_M3_Pro_Max_Space_Black_PDP_Image_Position-1__en-ME.png?resize=150%2C150&ssl=1 150w\" sizes=\"(max-width: 472px) 100vw, 472px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-de13bf8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"de13bf8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5ed00de\" data-id=\"5ed00de\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-1c4fe46 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1c4fe46\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-16 elementor-inner-column elementor-element elementor-element-c68c8bc\" data-id=\"c68c8bc\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-56c9931 e-transform elementor-position-top elementor-widget elementor-widget-image-box\" data-id=\"56c9931\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_transform_scale_effect_hover":{"unit":"px","size":1.1999999999999999555910790149937383830547332763671875,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><a href=\"https:\/\/365solutionsjo.com\/iPhone-service\" tabindex=\"-1\"><img decoding=\"async\" width=\"472\" height=\"527\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/iPhone_15_Pro_iPhone_15_Family_Screen__GBEN.png?fit=472%2C527&ssl=1\" class=\"attachment-full size-full wp-image-1437\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/iPhone_15_Pro_iPhone_15_Family_Screen__GBEN.png?w=472&ssl=1 472w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/iPhone_15_Pro_iPhone_15_Family_Screen__GBEN.png?resize=269%2C300&ssl=1 269w\" sizes=\"(max-width: 472px) 100vw, 472px\" \/><\/a><\/figure><div class=\"elementor-image-box-content\"><div class=\"elementor-image-box-title\"><a href=\"https:\/\/365solutionsjo.com\/iPhone-service\">iPhone<\/a><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-16 elementor-inner-column elementor-element elementor-element-28acef7\" data-id=\"28acef7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-370e249 e-transform elementor-position-top elementor-widget elementor-widget-image-box\" data-id=\"370e249\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_transform_scale_effect_hover":{"unit":"px","size":1.1999999999999999555910790149937383830547332763671875,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><a href=\"https:\/\/365solutionsjo.com\/iPad-service\" tabindex=\"-1\"><img decoding=\"async\" width=\"283\" height=\"283\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/iPad-Service-Small.png?fit=283%2C283&ssl=1\" class=\"attachment-medium size-medium wp-image-1279\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/iPad-Service-Small.png?w=283&ssl=1 283w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/iPad-Service-Small.png?resize=150%2C150&ssl=1 150w\" sizes=\"(max-width: 283px) 100vw, 283px\" \/><\/a><\/figure><div class=\"elementor-image-box-content\"><div class=\"elementor-image-box-title\"><a href=\"https:\/\/365solutionsjo.com\/iPad-service\">iPad<\/a><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-16 elementor-inner-column elementor-element elementor-element-91e7971\" data-id=\"91e7971\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-12ad916 e-transform elementor-position-top elementor-widget elementor-widget-image-box\" data-id=\"12ad916\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_transform_scale_effect_hover":{"unit":"px","size":1.1999999999999999555910790149937383830547332763671875,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><a href=\"https:\/\/365solutionsjo.com\/mac-service\/\" mac=\"\" tabindex=\"-1\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/MacBook_Pro_16_in_M3_Pro_Max_Space_Black_PDP_Image_Position-1__en-ME.png?fit=300%2C300&ssl=1\" class=\"attachment-medium size-medium wp-image-1445\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/MacBook_Pro_16_in_M3_Pro_Max_Space_Black_PDP_Image_Position-1__en-ME.png?w=472&ssl=1 472w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/MacBook_Pro_16_in_M3_Pro_Max_Space_Black_PDP_Image_Position-1__en-ME.png?resize=300%2C300&ssl=1 300w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/MacBook_Pro_16_in_M3_Pro_Max_Space_Black_PDP_Image_Position-1__en-ME.png?resize=150%2C150&ssl=1 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><div class=\"elementor-image-box-content\"><div class=\"elementor-image-box-title\"><a href=\"https:\/\/365solutionsjo.com\/mac-service\/\" mac=\"\">Mac<\/a><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-16 elementor-inner-column elementor-element elementor-element-84e7220\" data-id=\"84e7220\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c3c810a e-transform elementor-position-top elementor-widget elementor-widget-image-box\" data-id=\"c3c810a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_transform_scale_effect_hover":{"unit":"px","size":1.1999999999999999555910790149937383830547332763671875,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><a href=\"https:\/\/365solutionsjo.com\/AppleWatch-Service\" tabindex=\"-1\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/Apple_Watch_Series_9_45mm_Cellular_Apple_Watch_Ultra_2_49mm_Cellular_Apple_Watch_SE_44mm_Cellular_3-up_Family_Screen__AEEN-1.png?fit=300%2C300&ssl=1\" class=\"attachment-medium size-medium wp-image-1444\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/Apple_Watch_Series_9_45mm_Cellular_Apple_Watch_Ultra_2_49mm_Cellular_Apple_Watch_SE_44mm_Cellular_3-up_Family_Screen__AEEN-1.png?w=472&ssl=1 472w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/Apple_Watch_Series_9_45mm_Cellular_Apple_Watch_Ultra_2_49mm_Cellular_Apple_Watch_SE_44mm_Cellular_3-up_Family_Screen__AEEN-1.png?resize=300%2C300&ssl=1 300w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2024\/03\/Apple_Watch_Series_9_45mm_Cellular_Apple_Watch_Ultra_2_49mm_Cellular_Apple_Watch_SE_44mm_Cellular_3-up_Family_Screen__AEEN-1.png?resize=150%2C150&ssl=1 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><div class=\"elementor-image-box-content\"><div class=\"elementor-image-box-title\"><a href=\"https:\/\/365solutionsjo.com\/AppleWatch-Service\">AppleWatch<\/a><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-16 elementor-inner-column elementor-element elementor-element-219f5ec\" data-id=\"219f5ec\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9c8362f e-transform elementor-position-top elementor-widget elementor-widget-image-box\" data-id=\"9c8362f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_transform_scale_effect_hover":{"unit":"px","size":1.1999999999999999555910790149937383830547332763671875,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><a href=\"https:\/\/365solutionsjo.com\/AirPods-Service\" tabindex=\"-1\"><img loading=\"lazy\" decoding=\"async\" width=\"283\" height=\"283\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/AirPods-Service-Small.png?fit=283%2C283&ssl=1\" class=\"attachment-medium size-medium wp-image-1282\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/AirPods-Service-Small.png?w=283&ssl=1 283w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/AirPods-Service-Small.png?resize=150%2C150&ssl=1 150w\" sizes=\"(max-width: 283px) 100vw, 283px\" \/><\/a><\/figure><div class=\"elementor-image-box-content\"><div class=\"elementor-image-box-title\"><a href=\"https:\/\/365solutionsjo.com\/AirPods-Service\">AirPods<\/a><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-16 elementor-inner-column elementor-element elementor-element-de247ac\" data-id=\"de247ac\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4b4fe41 e-transform elementor-position-top elementor-widget elementor-widget-image-box\" data-id=\"4b4fe41\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_transform_scale_effect_hover":{"unit":"px","size":1.1999999999999999555910790149937383830547332763671875,"sizes":[]},"_transform_scale_effect_hover_tablet":{"unit":"px","size":"","sizes":[]},"_transform_scale_effect_hover_mobile":{"unit":"px","size":"","sizes":[]}}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><figure class=\"elementor-image-box-img\"><a href=\"https:\/\/365solutionsjo.com\/AppleTV-Service\" tabindex=\"-1\"><img loading=\"lazy\" decoding=\"async\" width=\"283\" height=\"283\" src=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/AppleTV-Service-Small.png?fit=283%2C283&ssl=1\" class=\"attachment-medium size-medium wp-image-1283\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/AppleTV-Service-Small.png?w=283&ssl=1 283w, https:\/\/i0.wp.com\/365solutionsjo.com\/wp-content\/uploads\/2023\/07\/AppleTV-Service-Small.png?resize=150%2C150&ssl=1 150w\" sizes=\"(max-width: 283px) 100vw, 283px\" \/><\/a><\/figure><div class=\"elementor-image-box-content\"><div class=\"elementor-image-box-title\"><a href=\"https:\/\/365solutionsjo.com\/AppleTV-Service\">AppleTV<\/a><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MacBook Repair Services We Offer At 365 Solutions, an Apple Authorised Service Provider, we provide expert MacBook repair services using genuine Apple parts and certified Apple technicians to ensure your device runs smoothly. Repair Issues MacBook Screen Replacement MacBook BatteryReplacement Keyboard and TrackpadRepair Logic BoardRepair Liquid DamageRepair MacBook DataRecovery Choose your model \u00d7 \ud83d\udd0d MacBook […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-1163","page","type-page","status-publish","hentry"],"aioseo_notices":[],"yoast_head":"\n<title>Mac service -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/365solutionsjo.com\/ar\/mac-service\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mac service -\" \/>\n<meta property=\"og:description\" content=\"MacBook Repair Services We Offer At 365 Solutions, an Apple Authorised Service Provider, we provide expert MacBook repair services using genuine Apple parts and certified Apple technicians to ensure your device runs smoothly. Repair Issues MacBook Screen Replacement MacBook BatteryReplacement Keyboard and TrackpadRepair Logic BoardRepair Liquid DamageRepair MacBook DataRecovery Choose your model \u00d7 \ud83d\udd0d MacBook […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/365solutionsjo.com\/ar\/mac-service\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-29T04:56:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/365solutionsjo.com\/wp-content\/uploads\/2025\/10\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 \u062f\u0642\u0627\u0626\u0642\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/mac-service\\\/\",\"url\":\"https:\\\/\\\/365solutionsjo.com\\\/mac-service\\\/\",\"name\":\"Mac service -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dso.azu.mybluehost.me\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/mac-service\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/mac-service\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/365solutionsjo.com\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png\",\"datePublished\":\"2023-07-04T10:17:30+00:00\",\"dateModified\":\"2025-12-29T04:56:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/mac-service\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/365solutionsjo.com\\\/mac-service\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/mac-service\\\/#primaryimage\",\"url\":\"https:\\\/\\\/365solutionsjo.com\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png\",\"contentUrl\":\"https:\\\/\\\/365solutionsjo.com\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/mac-service\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/365solutionsjo.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mac service\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/dso.azu.mybluehost.me\\\/#website\",\"url\":\"https:\\\/\\\/dso.azu.mybluehost.me\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/dso.azu.mybluehost.me\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"}]}<\/script>\n","yoast_head_json":{"title":"Mac service -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/365solutionsjo.com\/ar\/mac-service\/","og_locale":"ar_AR","og_type":"article","og_title":"Mac service -","og_description":"MacBook Repair Services We Offer At 365 Solutions, an Apple Authorised Service Provider, we provide expert MacBook repair services using genuine Apple parts and certified Apple technicians to ensure your device runs smoothly. Repair Issues MacBook Screen Replacement MacBook BatteryReplacement Keyboard and TrackpadRepair Logic BoardRepair Liquid DamageRepair MacBook DataRecovery Choose your model \u00d7 \ud83d\udd0d MacBook […]","og_url":"https:\/\/365solutionsjo.com\/ar\/mac-service\/","article_modified_time":"2025-12-29T04:56:16+00:00","og_image":[{"url":"https:\/\/365solutionsjo.com\/wp-content\/uploads\/2025\/10\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"5 \u062f\u0642\u0627\u0626\u0642"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/365solutionsjo.com\/mac-service\/","url":"https:\/\/365solutionsjo.com\/mac-service\/","name":"Mac service -","isPartOf":{"@id":"https:\/\/dso.azu.mybluehost.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/365solutionsjo.com\/mac-service\/#primaryimage"},"image":{"@id":"https:\/\/365solutionsjo.com\/mac-service\/#primaryimage"},"thumbnailUrl":"https:\/\/365solutionsjo.com\/wp-content\/uploads\/2025\/10\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png","datePublished":"2023-07-04T10:17:30+00:00","dateModified":"2025-12-29T04:56:16+00:00","breadcrumb":{"@id":"https:\/\/365solutionsjo.com\/mac-service\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/365solutionsjo.com\/mac-service\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/365solutionsjo.com\/mac-service\/#primaryimage","url":"https:\/\/365solutionsjo.com\/wp-content\/uploads\/2025\/10\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png","contentUrl":"https:\/\/365solutionsjo.com\/wp-content\/uploads\/2025\/10\/pngtree-an-image-of-a-store-front-or-bakery-store-coloring-pages-vector-png-image_6981000.png"},{"@type":"BreadcrumbList","@id":"https:\/\/365solutionsjo.com\/mac-service\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/365solutionsjo.com\/"},{"@type":"ListItem","position":2,"name":"Mac service"}]},{"@type":"WebSite","@id":"https:\/\/dso.azu.mybluehost.me\/#website","url":"https:\/\/dso.azu.mybluehost.me\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dso.azu.mybluehost.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/365solutionsjo.com\/ar\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"MacBook Repair Services We Offer At 365 Solutions, an Apple Authorised Service Provider, we provide expert MacBook repair services using genuine Apple parts and certified Apple technicians to ensure your device runs smoothly. Repair Issues MacBook Screen Replacement MacBook BatteryReplacement Keyboard and TrackpadRepair Logic BoardRepair Liquid DamageRepair MacBook DataRecovery Choose your model \u00d7 \ud83d\udd0d MacBook…","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/pages\/1163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/comments?post=1163"}],"version-history":[{"count":38,"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/pages\/1163\/revisions"}],"predecessor-version":[{"id":2699,"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/pages\/1163\/revisions\/2699"}],"wp:attachment":[{"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/media?parent=1163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}