{"id":1487,"date":"2026-06-24T09:15:29","date_gmt":"2026-06-24T09:15:29","guid":{"rendered":"https:\/\/tudeycoffeesocial.com\/?page_id=1487"},"modified":"2026-06-30T05:45:37","modified_gmt":"2026-06-30T05:45:37","slug":"reservasi-2","status":"publish","type":"page","link":"https:\/\/tudeycoffeesocial.com\/?page_id=1487","title":{"rendered":"Reservasi"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1487\" class=\"elementor elementor-1487\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4461208a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"4461208a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3d5710db\" data-id=\"3d5710db\" 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-75d68e6b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"75d68e6b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-e2c5753\" data-id=\"e2c5753\" 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\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-64b70f1b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"64b70f1b\" data-element_type=\"section\" data-e-type=\"section\" id=\"Reservasi\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4db0f11\" data-id=\"4db0f11\" 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-7a5ad498 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7a5ad498\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-626a267f elementor-invisible\" data-id=\"626a267f\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;animation&quot;:&quot;fadeInLeft&quot;}\">\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-42a90ca8 elementor-widget elementor-widget-heading\" data-id=\"42a90ca8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Make a Reservation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fe590fa elementor-widget elementor-widget-heading\" data-id=\"6fe590fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\">Reserve your spot and let us take care of the rest. We can't wait to have you!<\/div>\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<div class=\"elementor-element elementor-element-b96c992 e-flex e-con-boxed e-con e-parent\" data-id=\"b96c992\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c58de4 elementor-widget elementor-widget-html\" data-id=\"1c58de4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Reservasi \u2014 Tudey Coffee Social<\/title>\r\n<style>\r\n#tcs-wrap *{box-sizing:border-box;margin:0;padding:0}\r\n#tcs-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:transparent;color:#0a0a0a;font-size:14px}\r\n\r\n#tcs-wrap .card{display:flex;border:1px solid #d8d8d8;border-radius:14px;overflow:hidden;background:#ffffff;min-height:440px}\r\n\r\n\/* LEFT *\/\r\n#tcs-wrap .left{width:220px;flex-shrink:0;padding:24px 20px;border-right:1px solid #e2e2e2;background:#f7f7f7}\r\n#tcs-wrap .brand-logo{width:80px;height:auto;margin-bottom:12px;display:block}\r\n#tcs-wrap .brand-name{font-size:12px;color:#666;margin-bottom:8px;font-weight:500}\r\n#tcs-wrap .event-title{font-size:17px;font-weight:700;color:#000;margin-bottom:8px;line-height:1.3}\r\n#tcs-wrap .event-desc{font-size:12px;color:#555;line-height:1.6;margin-bottom:16px}\r\n#tcs-wrap .meta-item{display:flex;align-items:center;gap:7px;font-size:12px;color:#333;font-weight:500;margin-bottom:8px}\r\n#tcs-wrap .meta-item svg{width:13px;height:13px;flex-shrink:0;opacity:0.7}\r\n#tcs-wrap .sel-info{display:none;margin-top:14px;padding-top:14px;border-top:1px solid #ddd}\r\n#tcs-wrap .sel-info.show{display:block}\r\n#tcs-wrap .sel-label{font-size:10px;color:#777;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:4px;font-weight:700}\r\n#tcs-wrap .sel-val{font-size:12px;color:#111;font-weight:600;line-height:1.6}\r\n\r\n\/* CALENDAR *\/\r\n#tcs-wrap .mid{flex:1;padding:24px 20px;border-right:1px solid #e2e2e2;background:#fff}\r\n#tcs-wrap .cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}\r\n#tcs-wrap .cal-month{font-size:15px;font-weight:700;color:#000}\r\n#tcs-wrap .cal-month span{color:#666;font-weight:500}\r\n#tcs-wrap .nav-btns{display:flex;gap:4px}\r\n#tcs-wrap .nav-btn{width:26px;height:26px;border-radius:6px;border:1px solid #ccc;background:transparent;cursor:pointer;color:#444;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all 0.1s;line-height:1}\r\n#tcs-wrap .nav-btn:hover{border-color:#999;color:#000}\r\n#tcs-wrap .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}\r\n#tcs-wrap .dow{font-size:10px;color:#888;text-align:center;padding:4px 0;font-weight:700;text-transform:uppercase;letter-spacing:0.04em}\r\n#tcs-wrap .day{height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;cursor:pointer;color:#333;position:relative;transition:all 0.1s;border:1px solid transparent;background:transparent}\r\n#tcs-wrap .day:hover:not(.empty):not(.disabled):not(.past){background:#ececec;color:#000}\r\n#tcs-wrap .day.today{color:#000;font-weight:700}\r\n#tcs-wrap .day.today::after{content:'\u00b7';position:absolute;bottom:1px;left:50%;transform:translateX(-50%);font-size:14px;color:#888;line-height:1}\r\n#tcs-wrap .day.selected{background:#000 !important;color:#fff !important;font-weight:700}\r\n#tcs-wrap .day.selected::after{display:none}\r\n#tcs-wrap .day.disabled,#tcs-wrap .day.past{color:#ccc;cursor:default;pointer-events:none}\r\n#tcs-wrap .day.empty{pointer-events:none;color:#ddd}\r\n#tcs-wrap .day.avail::before{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:#2a9d5c}\r\n\r\n\/* TIME SLOTS *\/\r\n#tcs-wrap .right{width:176px;flex-shrink:0;padding:24px 14px;overflow-y:auto;max-height:440px;background:#fff}\r\n#tcs-wrap .right::-webkit-scrollbar{width:3px}\r\n#tcs-wrap .right::-webkit-scrollbar-track{background:transparent}\r\n#tcs-wrap .right::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}\r\n#tcs-wrap .right-header{font-size:14px;font-weight:700;color:#000;margin-bottom:2px}\r\n#tcs-wrap .right-sub{font-size:10px;color:#888;margin-bottom:12px}\r\n#tcs-wrap .fmt-toggle{display:flex;gap:2px;background:#ececec;border-radius:6px;padding:2px;margin-bottom:12px}\r\n#tcs-wrap .fmt-btn{flex:1;padding:3px;border:none;background:transparent;color:#888;font-size:11px;font-weight:600;cursor:pointer;border-radius:5px;font-family:inherit;transition:all 0.1s}\r\n#tcs-wrap .fmt-btn.on{background:#fff;color:#000;box-shadow:0 1px 3px rgba(0,0,0,0.15)}\r\n#tcs-wrap .time-list{display:flex;flex-direction:column;gap:5px}\r\n#tcs-wrap .t-slot{padding:8px 10px;border:1px solid #d8d8d8;border-radius:7px;background:transparent;cursor:pointer;font-size:12px;font-weight:600;color:#333;font-family:inherit;transition:all 0.1s;text-align:left;display:flex;align-items:center;gap:6px;width:100%}\r\n#tcs-wrap .t-slot .dot{width:6px;height:6px;border-radius:50%;background:#2a9d5c;flex-shrink:0}\r\n#tcs-wrap .t-slot:hover{border-color:#999;color:#000;background:#f5f5f5}\r\n#tcs-wrap .t-slot.on{border-color:#000;background:#000;color:#fff}\r\n#tcs-wrap .t-slot.on .dot{background:#fff}\r\n#tcs-wrap .no-date{font-size:12px;color:#999;text-align:center;margin-top:32px;line-height:1.7}\r\n\r\n\/* STEP 2 FORM *\/\r\n#tcs-wrap .form-section{display:flex;width:100%}\r\n#tcs-wrap .form-left{width:220px;flex-shrink:0;padding:24px 20px;border-right:1px solid #e2e2e2;background:#f7f7f7}\r\n#tcs-wrap .form-right{flex:1;padding:24px 22px;overflow-y:auto;max-height:440px;background:#fff}\r\n#tcs-wrap .form-right::-webkit-scrollbar{width:3px}\r\n#tcs-wrap .form-right::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}\r\n#tcs-wrap .back-btn{display:flex;align-items:center;gap:5px;background:none;border:none;color:#555;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;padding:0;margin-bottom:18px;transition:color 0.1s}\r\n#tcs-wrap .back-btn:hover{color:#000}\r\n#tcs-wrap .back-btn svg{width:12px;height:12px}\r\n#tcs-wrap .fh2{font-size:15px;font-weight:700;color:#000;margin-bottom:14px}\r\n\r\n\/* ZONE TOGGLE *\/\r\n#tcs-wrap .zone-row{display:flex;gap:5px;margin-top:5px;margin-bottom:14px}\r\n#tcs-wrap .z-btn{flex:1;padding:8px 6px;border:1px solid #ccc;border-radius:7px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:#555;font-family:inherit;transition:all 0.1s;text-align:center}\r\n#tcs-wrap .z-btn:hover{border-color:#999;color:#000}\r\n#tcs-wrap .z-btn.on{border-color:#000;color:#000;background:#ececec}\r\n\r\n\/* FORM FIELDS *\/\r\n#tcs-wrap .field{margin-bottom:9px}\r\n#tcs-wrap .field label{display:block;font-size:12px;color:#444 !important;margin-bottom:4px;font-weight:600;background:transparent !important}\r\n#tcs-wrap .field input,\r\n#tcs-wrap .field select,\r\n#tcs-wrap .field textarea{\r\n  width:100% !important;\r\n  font-size:13px !important;\r\n  padding:9px 10px !important;\r\n  border:1px solid #c2c2c2 !important;\r\n  border-radius:7px !important;\r\n  background:#fff !important;\r\n  color:#000 !important;\r\n  font-family:inherit !important;\r\n  transition:border-color 0.1s !important;\r\n  appearance:none !important;\r\n  -webkit-appearance:none !important;\r\n  box-shadow:none !important;\r\n  outline:none !important;\r\n}\r\n#tcs-wrap .field select{\r\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23555'\/%3E%3C\/svg%3E\") !important;\r\n  background-repeat:no-repeat !important;\r\n  background-position:right 10px center !important;\r\n  padding-right:26px !important;\r\n  background-color:#fff !important;\r\n}\r\n#tcs-wrap .field select option{background:#fff;color:#000}\r\n#tcs-wrap .field textarea{resize:vertical !important;min-height:58px !important;line-height:1.5 !important}\r\n#tcs-wrap .field input:focus,\r\n#tcs-wrap .field select:focus,\r\n#tcs-wrap .field textarea:focus{border-color:#000 !important}\r\n#tcs-wrap .field input::placeholder,\r\n#tcs-wrap .field textarea::placeholder{color:#999 !important}\r\n#tcs-wrap .opt-tag{font-size:10px;color:#999;margin-left:3px;font-weight:400}\r\n#tcs-wrap .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}\r\n\r\n#tcs-wrap .confirm-btn{\r\n  width:100%;padding:11px;\r\n  background:#000 !important;color:#fff !important;\r\n  border:none !important;border-radius:8px;\r\n  font-size:13px;font-weight:700;cursor:pointer;\r\n  font-family:inherit;transition:opacity 0.1s;margin-top:8px;\r\n  box-shadow:none !important;\r\n}\r\n#tcs-wrap .confirm-btn:hover{opacity:0.85}\r\n\r\n\/* DONE *\/\r\n#tcs-wrap .done-view{display:none;align-items:center;justify-content:center;min-height:440px;flex-direction:column;text-align:center;padding:2rem;width:100%;background:#fff}\r\n#tcs-wrap .done-view.show{display:flex}\r\n#tcs-wrap .done-check{width:40px;height:40px;border-radius:50%;border:1.5px solid #000;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:16px;font-weight:700;color:#000}\r\n#tcs-wrap .done-view h2{font-size:17px;font-weight:700;color:#000;margin-bottom:6px}\r\n#tcs-wrap .done-view p{font-size:12px;color:#555;line-height:1.7;margin-bottom:1.25rem}\r\n#tcs-wrap .kode{display:inline-block;padding:6px 16px;border:1.5px solid #000;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:3px;color:#000;font-family:'Courier New',monospace;margin-bottom:4px}\r\n#tcs-wrap .kode-hint{font-size:10px;color:#888;margin-bottom:1.25rem}\r\n#tcs-wrap .notif-row{display:flex;gap:6px;justify-content:center;margin-bottom:1rem}\r\n#tcs-wrap .nbtn{padding:8px 14px;border:1px solid #ccc;border-radius:8px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:#444;font-family:inherit;transition:all 0.1s;display:flex;align-items:center;gap:5px}\r\n#tcs-wrap .nbtn svg{width:12px;height:12px}\r\n#tcs-wrap .nbtn:hover{border-color:#999;color:#000}\r\n#tcs-wrap .ghost-btn{background:none;border:none;color:#888;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px}\r\n#tcs-wrap .ghost-btn:hover{color:#000}\r\n\r\n@media(max-width:680px){\r\n  #tcs-wrap .card{flex-direction:column}\r\n  #tcs-wrap .left{width:100%;border-right:none;border-bottom:1px solid #e2e2e2}\r\n  #tcs-wrap .right{width:100%;max-height:none;border-top:1px solid #e2e2e2}\r\n  #tcs-wrap .form-section{flex-direction:column}\r\n  #tcs-wrap .form-left{width:100%;border-right:none;border-bottom:1px solid #e2e2e2}\r\n  #tcs-wrap .grid2{grid-template-columns:1fr}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"tcs-wrap\">\r\n\r\n<!-- STEP 1 -->\r\n<div class=\"card\" id=\"s1\">\r\n  <div class=\"left\">\r\n    <div class=\"brand-name\">Tudey Coffee &amp; Social<\/div>\r\n    <div class=\"event-title\">Reservasi Meja<\/div>\r\n    <div class=\"event-desc\">Pesan meja dan nikmati waktu bersama teman atau keluarga.<\/div>\r\n    <div class=\"meta-item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n      Tudey, Jakarta\r\n    <\/div>\r\n    <div class=\"meta-item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg>\r\n      Senin \u2013 Sabtu\r\n    <\/div>\r\n    <div class=\"meta-item\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20\"\/><\/svg>\r\n      Asia\/Jakarta\r\n    <\/div>\r\n    <div class=\"sel-info\" id=\"sel-info\">\r\n      <div class=\"sel-label\">Dipilih<\/div>\r\n      <div class=\"sel-val\" id=\"sel-val\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"mid\">\r\n    <div class=\"cal-header\">\r\n      <div class=\"cal-month\" id=\"cal-month\"><\/div>\r\n      <div class=\"nav-btns\">\r\n        <button class=\"nav-btn\" onclick=\"changeMonth(-1)\">&#8249;<\/button>\r\n        <button class=\"nav-btn\" onclick=\"changeMonth(1)\">&#8250;<\/button>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"cal-grid\" id=\"cal-grid\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"right\">\r\n    <div id=\"no-date\" class=\"no-date\">Pilih tanggal<br>untuk melihat<br>waktu tersedia<\/div>\r\n    <div id=\"time-panel\" style=\"display:none\">\r\n      <div class=\"right-header\" id=\"rh\"><\/div>\r\n      <div class=\"right-sub\">Senin \u2013 Sabtu \u00b7 11.00\u201323.00<\/div>\r\n      <div class=\"fmt-toggle\">\r\n        <button class=\"fmt-btn on\" onclick=\"setFmt('12',this)\">12h<\/button>\r\n        <button class=\"fmt-btn\" onclick=\"setFmt('24',this)\">24h<\/button>\r\n      <\/div>\r\n      <div class=\"time-list\" id=\"time-list\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- STEP 2 -->\r\n<div class=\"card\" id=\"s2\" style=\"display:none\">\r\n  <div class=\"form-section\">\r\n    <div class=\"form-left\">\r\n      <button class=\"back-btn\" onclick=\"goBack()\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 5l-7 7 7 7\"\/><\/svg>\r\n        Kembali\r\n      <\/button>\r\n      <div class=\"brand-name\">Tudey Coffee &amp; Social<\/div>\r\n      <div class=\"event-title\" style=\"font-size:15px;margin-bottom:10px\">Reservasi Meja<\/div>\r\n      <div class=\"meta-item\" style=\"margin-bottom:16px\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg>\r\n        <span id=\"form-dt\" style=\"color:#222;font-weight:600\"><\/span>\r\n      <\/div>\r\n      <div class=\"sel-label\">Area<\/div>\r\n      <div class=\"zone-row\">\r\n        <button id=\"z-in\" class=\"z-btn on\" onclick=\"setZone('indoor')\">Indoor<\/button>\r\n        <button id=\"z-out\" class=\"z-btn\" onclick=\"setZone('outdoor')\">Outdoor<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"form-right\">\r\n      <div class=\"fh2\">Detail reservasi<\/div>\r\n      <div class=\"grid2\">\r\n        <div class=\"field\">\r\n          <label>Nama<\/label>\r\n          <input type=\"text\" id=\"f-name\" placeholder=\"Nama kamu\">\r\n        <\/div>\r\n        <div class=\"field\">\r\n          <label>WhatsApp<\/label>\r\n          <input type=\"tel\" id=\"f-phone\" placeholder=\"08xxxxxxxxxx\">\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label>Jumlah tamu<\/label>\r\n        <select id=\"f-guests\">\r\n          <option value=\"\">Pilih jumlah<\/option>\r\n          <option>1 orang<\/option><option>2 orang<\/option><option>3 orang<\/option>\r\n          <option>4 orang<\/option><option>5 orang<\/option><option>6 orang<\/option>\r\n          <option>7 orang<\/option><option>8 orang<\/option><option>9 orang<\/option>\r\n          <option>10 orang<\/option><option>Lebih dari 10 orang<\/option>\r\n        <\/select>\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label>Pre-order pesanan <span class=\"opt-tag\">(opsional)<\/span><\/label>\r\n        <textarea id=\"f-order\" placeholder=\"2x Americano, 1x Matcha Latte...\"><\/textarea>\r\n      <\/div>\r\n      <div class=\"field\">\r\n        <label>Catatan <span class=\"opt-tag\">(opsional)<\/span><\/label>\r\n        <textarea id=\"f-notes\" placeholder=\"Ulang tahun, alergi, permintaan khusus...\" style=\"min-height:48px\"><\/textarea>\r\n      <\/div>\r\n      <button class=\"confirm-btn\" onclick=\"submitForm()\">Konfirmasi reservasi \u2192<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- STEP 3 -->\r\n<div class=\"card\" id=\"s3\" style=\"display:none\">\r\n  <div class=\"done-view show\">\r\n    <div class=\"done-check\">\u2713<\/div>\r\n    <h2>Reservasi masuk!<\/h2>\r\n    <p>Kami akan segera menghubungi kamu<br>untuk konfirmasi via WhatsApp.<\/p>\r\n    <div class=\"kode\" id=\"kode\"><\/div>\r\n    <p class=\"kode-hint\">Tunjukkan kode ini saat tiba<\/p>\r\n    <div class=\"notif-row\">\r\n      <button class=\"nbtn\" onclick=\"goWA()\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\r\n        Kirim via WA\r\n      <\/button>\r\n      <button class=\"nbtn\" onclick=\"goEmail()\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"M2 7l10 7 10-7\"\/><\/svg>\r\n        Kirim via Email\r\n      <\/button>\r\n    <\/div>\r\n    <button class=\"ghost-btn\" onclick=\"resetAll()\">Buat reservasi baru<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/div><!-- #tcs-wrap -->\r\n\r\n<script>\r\nconst WA='6285158286649',EMAIL='tudeysocialhouse@gmail.com';\r\nconst MI=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];\r\nconst DL=['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];\r\nconst DS=['MIN','SEN','SEL','RAB','KAM','JUM','SAB'];\r\nconst SLOTS=['11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00'];\r\n\r\nlet vy=new Date().getFullYear(),vm=new Date().getMonth(),sd=null,st=null,fmt='12',zone='indoor',bdata={};\r\n\r\nfunction t12(t){const[h,m]=t.split(':').map(Number);return(h%12||12)+':'+(m?m:'00')+(h>=12?'pm':'am')}\r\n\r\nfunction setFmt(f,el){fmt=f;document.querySelectorAll('#tcs-wrap .fmt-btn').forEach(b=>b.classList.remove('on'));el.classList.add('on');renderSlots()}\r\n\r\nfunction renderCal(){\r\n  const el=document.getElementById('cal-month');\r\n  el.innerHTML=MI[vm]+' <span>'+vy+'<\/span>';\r\n  const g=document.getElementById('cal-grid');g.innerHTML='';\r\n  DS.forEach(d=>{const e=document.createElement('div');e.className='dow';e.textContent=d;g.appendChild(e)});\r\n  const fd=new Date(vy,vm,1).getDay(),dim=new Date(vy,vm+1,0).getDate(),pDim=new Date(vy,vm,0).getDate();\r\n  const today=new Date();today.setHours(0,0,0,0);\r\n  for(let i=0;i<fd;i++){const e=document.createElement('div');e.className='day empty';e.textContent=pDim-fd+1+i;g.appendChild(e)}\r\n  for(let d=1;d<=dim;d++){\r\n    const e=document.createElement('div'),dt=new Date(vy,vm,d);dt.setHours(0,0,0,0);\r\n    const past=dt<today,wd=dt.getDay()>=1&&dt.getDay()<=6,isTod=dt.getTime()===today.getTime();\r\n    const isSel=sd&&dt.getTime()===new Date(sd.y,sd.m,sd.d).getTime();\r\n    e.className='day'+(past?' past':'')+(!wd?' disabled':'')+(isTod?' today':'')+(isSel?' selected':'')+(wd&&!past?' avail':'');\r\n    e.textContent=d;\r\n    if(wd&&!past)e.onclick=()=>pickDate(vy,vm,d);\r\n    g.appendChild(e);\r\n  }\r\n  const tot=fd+dim,rem=tot%7?7-tot%7:0;\r\n  for(let i=1;i<=rem;i++){const e=document.createElement('div');e.className='day empty';e.textContent=i;g.appendChild(e)}\r\n}\r\n\r\nfunction pickDate(y,m,d){\r\n  sd={y,m,d};st=null;renderCal();renderSlots();\r\n  const dn=DL[new Date(y,m,d).getDay()];\r\n  document.getElementById('rh').textContent=dn.slice(0,3)+' '+d;\r\n  document.getElementById('time-panel').style.display='block';\r\n  document.getElementById('no-date').style.display='none';\r\n}\r\n\r\nfunction renderSlots(){\r\n  const l=document.getElementById('time-list');l.innerHTML='';\r\n  SLOTS.forEach(t=>{\r\n    const b=document.createElement('button');\r\n    b.className='t-slot'+(st===t?' on':'');\r\n    b.innerHTML='<span class=\"dot\"><\/span>'+(fmt==='12'?t12(t):t);\r\n    b.onclick=()=>pickTime(t);\r\n    l.appendChild(b);\r\n  });\r\n}\r\n\r\nfunction pickTime(t){\r\n  st=t;renderSlots();\r\n  const dt=new Date(sd.y,sd.m,sd.d);\r\n  const str=DL[dt.getDay()]+', '+sd.d+' '+MI[sd.m]+' '+sd.y;\r\n  const ts=fmt==='12'?t12(t):t;\r\n  document.getElementById('sel-info').classList.add('show');\r\n  document.getElementById('sel-val').textContent=str+'\\n'+ts;\r\n  document.getElementById('form-dt').textContent=str+' \u00b7 '+ts;\r\n  setTimeout(()=>{document.getElementById('s1').style.display='none';document.getElementById('s2').style.display='flex'},260);\r\n}\r\n\r\nfunction changeMonth(d){vm+=d;if(vm>11){vm=0;vy++}if(vm<0){vm=11;vy--}renderCal()}\r\n\r\nfunction setZone(z){\r\n  zone=z;\r\n  document.getElementById('z-in').className='z-btn'+(z==='indoor'?' on':'');\r\n  document.getElementById('z-out').className='z-btn'+(z==='outdoor'?' on':'');\r\n}\r\n\r\nfunction goBack(){document.getElementById('s2').style.display='none';document.getElementById('s1').style.display='flex'}\r\n\r\nfunction submitForm(){\r\n  const name=document.getElementById('f-name').value.trim();\r\n  const phone=document.getElementById('f-phone').value.trim();\r\n  const guests=document.getElementById('f-guests').value;\r\n  if(!name)return alert('Isi nama dulu ya.');\r\n  if(!phone)return alert('Isi nomor WhatsApp dulu ya.');\r\n  if(!guests)return alert('Pilih jumlah tamu dulu ya.');\r\n  const dt=new Date(sd.y,sd.m,sd.d);\r\n  const dateStr=DL[dt.getDay()]+', '+sd.d+' '+MI[sd.m]+' '+sd.y;\r\n  const code='TCS-'+Math.random().toString(36).substr(2,6).toUpperCase();\r\n  bdata={name,phone,date:dateStr,time:st,guests,\r\n    order:document.getElementById('f-order').value.trim(),\r\n    notes:document.getElementById('f-notes').value.trim(),\r\n    zone:zone==='indoor'?'Indoor':'Outdoor',code};\r\n  document.getElementById('kode').textContent=code;\r\n  document.getElementById('s2').style.display='none';\r\n  document.getElementById('s3').style.display='flex';\r\n}\r\n\r\nfunction goWA(){\r\n  const b=bdata;\r\n  let m='*Reservasi \u2014 Tudey Coffee Social*\\n\\nKode: *'+b.code+'*\\nNama: '+b.name+'\\nWA: '+b.phone+'\\nArea: '+b.zone+'\\nTanggal: '+b.date+'\\nJam: '+b.time+'\\nTamu: '+b.guests;\r\n  if(b.order)m+='\\nPesanan: '+b.order;\r\n  if(b.notes)m+='\\nCatatan: '+b.notes;\r\n  window.open('https:\/\/wa.me\/'+WA+'?text='+encodeURIComponent(m),'_blank');\r\n}\r\n\r\nfunction goEmail(){\r\n  const b=bdata,sub='[Reservasi] '+b.code+' \u2014 '+b.name;\r\n  let body='Reservasi Baru \u2014 Tudey Coffee Social\\n\\nKode: '+b.code+'\\nNama: '+b.name+'\\nWA: '+b.phone+'\\nArea: '+b.zone+'\\nTanggal: '+b.date+'\\nJam: '+b.time+'\\nTamu: '+b.guests;\r\n  if(b.order)body+='\\nPesanan: '+b.order;\r\n  if(b.notes)body+='\\nCatatan: '+b.notes;\r\n  window.location.href='mailto:'+EMAIL+'?subject='+encodeURIComponent(sub)+'&body='+encodeURIComponent(body);\r\n}\r\n\r\nfunction resetAll(){\r\n  sd=null;st=null;bdata={};\r\n  document.getElementById('s3').style.display='none';\r\n  document.getElementById('s1').style.display='flex';\r\n  document.getElementById('sel-info').classList.remove('show');\r\n  document.getElementById('time-panel').style.display='none';\r\n  document.getElementById('no-date').style.display='block';\r\n  ['f-name','f-phone','f-order','f-notes'].forEach(id=>document.getElementById(id).value='');\r\n  document.getElementById('f-guests').value='';\r\n  vy=new Date().getFullYear();vm=new Date().getMonth();\r\n  renderCal();\r\n}\r\n\r\nrenderCal();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Make a Reservation Reserve your spot and let us take care of the rest. We can&#8217;t wait to have you! Reservasi \u2014 Tudey Coffee Social Tudey Coffee &amp; Social Reservasi Meja Pesan meja dan nikmati waktu bersama teman atau keluarga. Tudey, Jakarta Senin \u2013 Sabtu Asia\/Jakarta Dipilih &#8249; &#8250; Pilih tanggaluntuk melihatwaktu tersedia Senin \u2013 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1487","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tudeycoffeesocial.com\/index.php?rest_route=\/wp\/v2\/pages\/1487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tudeycoffeesocial.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tudeycoffeesocial.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tudeycoffeesocial.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tudeycoffeesocial.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1487"}],"version-history":[{"count":55,"href":"https:\/\/tudeycoffeesocial.com\/index.php?rest_route=\/wp\/v2\/pages\/1487\/revisions"}],"predecessor-version":[{"id":1768,"href":"https:\/\/tudeycoffeesocial.com\/index.php?rest_route=\/wp\/v2\/pages\/1487\/revisions\/1768"}],"wp:attachment":[{"href":"https:\/\/tudeycoffeesocial.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}