233 lines
19 KiB
XML
233 lines
19 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
<template id="reservation_page_template" name="Table Reservation Form">
|
|
<t t-call="website.layout">
|
|
<div id="wrap" class="oe_structure oe_empty">
|
|
<section class="s_reservation_form pt64 pb64" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/dine360_theme_chennora/static/src/img/bg_reservation.jpg') center/cover no-repeat;">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-7">
|
|
<div class="card border-0 shadow-lg" style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px;">
|
|
<div class="card-body p-5">
|
|
<div class="text-center mb-5">
|
|
<h2 class="display-4 fw-bold mb-2" style="color: #fecd4f;">Table Reservation</h2>
|
|
<p class="text-muted mb-1">Book your spot for an authentic South Indian dining experience.</p>
|
|
<div class="mt-2 text-center">
|
|
<button class="btn btn-sm btn-outline-dark border-0 fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#openingHours" aria-expanded="false">
|
|
<i class="fa fa-clock-o me-1"/> View Opening Hours
|
|
</button>
|
|
<div class="collapse mt-2" id="openingHours">
|
|
<div class="p-3 rounded shadow-sm" style="background: rgba(254, 205, 79, 0.1); border: 1px solid #fecd4f;">
|
|
<div class="row g-2">
|
|
<t t-foreach="schedule" t-as="day_schedule">
|
|
<div class="col-6 col-md-4 text-start">
|
|
<div class="small fw-bold text-uppercase" style="font-size: 0.7rem; color: #171422;">
|
|
<t t-esc="dict(day_schedule._fields['day'].selection).get(day_schedule.day)"/>
|
|
</div>
|
|
<div class="small">
|
|
<t t-if="day_schedule.is_closed">
|
|
<span class="text-danger">Closed</span>
|
|
</t>
|
|
<t t-else="">
|
|
<t t-esc="day_schedule.display_opening"/> - <t t-esc="day_schedule.display_closing"/>
|
|
<t t-if="day_schedule.has_break">
|
|
<br/><span class="text-muted" style="font-size: 0.75rem;">Break: <t t-esc="day_schedule.display_break"/></span>
|
|
</t>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<t t-if="error">
|
|
<div class="alert alert-danger" role="alert">
|
|
<t t-esc="error"/>
|
|
</div>
|
|
</t>
|
|
|
|
<form action="/reservation/submit" method="post">
|
|
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Full Name</label>
|
|
<input type="text" name="customer_name" class="form-control form-control-lg border-0 shadow-sm" style="background: #f8f9fa; border-radius: 12px; color: #171422 !important; border: 1px solid #fecd4f !important;" placeholder="John Doe" required="1" t-att-value="post.get('customer_name') if post else ''"/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Phone Number</label>
|
|
<input type="tel" name="phone" class="form-control form-control-lg border-0 shadow-sm" style="background: #f8f9fa; border-radius: 12px; color: #171422 !important; border: 1px solid #fecd4f !important;" placeholder="+1 (647) 000-0000" required="1" t-att-value="post.get('phone') if post else ''"/>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-bold">Email</label>
|
|
<input type="email" name="email" class="form-control form-control-lg border-0 shadow-sm" style="background: #f8f9fa; border-radius: 12px; color: #171422 !important; border: 1px solid #fecd4f !important;" placeholder="john@example.com" required="1" t-att-value="post.get('email') if post else ''"/>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-bold">Number of Guests</label>
|
|
<input type="number" name="num_people" class="form-control form-control-lg border-0 shadow-sm" style="background: #f8f9fa; border-radius: 12px; color: #171422 !important; border: 1px solid #fecd4f !important;" value="2" min="1" required="1" t-att-value="post.get('num_people') if post else 2"/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Reservation Date</label>
|
|
<input type="date" id="res_date" name="res_date" class="form-control form-control-lg border-0 shadow-sm" style="background: #f8f9fa; border-radius: 12px; color: #171422 !important; border: 1px solid #fecd4f !important;" required="1" t-att-value="post.get('res_date') if post else datetime.date.today().strftime('%Y-%m-%d')"/>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-bold">Available Time Slots</label>
|
|
<div id="slot_container" class="d-flex flex-wrap gap-2 p-3 rounded" style="background: #f8f9fa; border: 1px dashed #fecd4f; min-height: 100px;">
|
|
<div class="text-muted w-100 text-center py-4" id="slot_placeholder">
|
|
<i class="fa fa-calendar-check-o mb-2 d-block" style="font-size: 1.5rem;"></i>
|
|
Select a date and guest count to see available slots
|
|
</div>
|
|
</div>
|
|
<div id="selection_info" class="mt-2 small text-muted text-center" style="display: none;">
|
|
<i class="fa fa-info-circle me-1"/>
|
|
<span id="assigned_table_text"></span>
|
|
</div>
|
|
<input type="hidden" name="start_time" id="selected_start_time" required="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<button type="submit" class="btn btn-lg w-100 shadow-sm transition-all text-dark" style="background: #fecd4f; border-radius: 12px; height: 60px; font-weight: 700; font-size: 1.1rem;">
|
|
CONFIRM RESERVATION
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const dateInput = document.getElementById('res_date');
|
|
const guestsInput = document.getElementsByName('num_people')[0];
|
|
const container = document.getElementById('slot_container');
|
|
const hiddenInput = document.getElementById('selected_start_time');
|
|
|
|
function fetchSlots() {
|
|
const date = dateInput.value;
|
|
const guests = guestsInput.value;
|
|
|
|
if (!date || !guests) return;
|
|
|
|
container.innerHTML = '<div class="text-center w-100 py-4"><i class="fa fa-spinner fa-spin me-2"></i>Loading slots...</div>';
|
|
hiddenInput.value = "";
|
|
|
|
fetch('/reservation/get_slots', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
jsonrpc: "2.0",
|
|
params: { date_str: date, num_people: guests }
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
container.innerHTML = `<div class="alert alert-danger w-100 mb-0">${data.error.message}</div>`;
|
|
return;
|
|
}
|
|
const result = data.result;
|
|
container.innerHTML = "";
|
|
|
|
if (result.error) {
|
|
container.innerHTML = `<div class="alert alert-warning w-100 mb-0 text-center fw-bold">${result.error}</div>`;
|
|
return;
|
|
}
|
|
|
|
if (result.slots.length === 0) {
|
|
container.innerHTML = '<div class="alert alert-info w-100 mb-0 text-center fw-bold">No available slots for this selection. Try another date or party size.</div>';
|
|
return;
|
|
}
|
|
|
|
result.slots.forEach(slot => {
|
|
const btn = document.createElement('button');
|
|
btn.type = "button";
|
|
btn.className = "btn btn-outline-dark slot-btn transition-all m-1";
|
|
btn.style.cssText = "border-radius: 8px; font-weight: 600; padding: 10px 15px; border: 1px solid #fecd4f; min-width: 100px;";
|
|
btn.innerHTML = slot.display;
|
|
btn.onclick = function() {
|
|
document.querySelectorAll('.slot-btn').forEach(b => {
|
|
b.classList.remove('active');
|
|
b.style.backgroundColor = "";
|
|
b.style.color = "";
|
|
});
|
|
this.classList.add('active');
|
|
this.style.backgroundColor = "#fecd4f";
|
|
this.style.color = "#171422";
|
|
hiddenInput.value = slot.full_dt;
|
|
|
|
const infoDiv = document.getElementById('selection_info');
|
|
const infoText = document.getElementById('assigned_table_text');
|
|
infoDiv.style.display = 'block';
|
|
infoText.innerHTML = "Assignment: <strong>" + slot.tables + "</strong>";
|
|
};
|
|
container.appendChild(btn);
|
|
});
|
|
});
|
|
}
|
|
|
|
dateInput.addEventListener('change', fetchSlots);
|
|
guestsInput.addEventListener('change', fetchSlots);
|
|
|
|
if(dateInput.value) fetchSlots();
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
|
|
<template id="reservation_success_template" name="Reservation Success">
|
|
<t t-call="website.layout">
|
|
<div id="wrap" class="oe_structure">
|
|
<section class="pt64 pb64 text-center">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-6">
|
|
<div class="bg-success-light p-5 rounded-circle d-inline-block mb-4" style="background: rgba(43, 177, 165, 0.1);">
|
|
<i class="fa fa-check-circle text-success display-1"></i>
|
|
</div>
|
|
<h1 class="display-3 fw-bold mb-3">Thank You!</h1>
|
|
<p class="lead text-muted mb-5">Your reservation request <strong><t t-esc="reservation.name"/></strong> has been received. We will contact you shortly to confirm.</p>
|
|
<div class="card border-0 shadow-sm p-4 mb-5" style="border-radius: 15px; background: #f8f9fa;">
|
|
<div class="row text-start g-3">
|
|
<div class="col-6"><strong>Floor:</strong> <t t-esc="reservation.floor_id.name"/></div>
|
|
<div class="col-6"><strong>Table(s):</strong>
|
|
<t t-if="reservation.table_ids">
|
|
<t t-esc="', '.join(reservation.table_ids.mapped('name'))"/>
|
|
</t>
|
|
<t t-else="">
|
|
<t t-esc="reservation.table_id.name"/>
|
|
</t>
|
|
</div>
|
|
<div class="col-6"><strong>Guests:</strong> <t t-esc="reservation.num_people"/></div>
|
|
<div class="col-12"><strong>Time:</strong> <t t-esc="reservation.start_time.strftime('%B %d, %Y at %I:%M %p')"/></div>
|
|
</div>
|
|
</div>
|
|
<a t-att-href="reservation.whatsapp_url" id="whatsapp_auto_link" class="btn btn-lg text-white mb-3" target="_blank" style="background: #25D366; border-radius: 12px; padding-left: 40px; padding-right: 40px; font-weight: 600;">
|
|
<i class="fa fa-whatsapp me-2"/>SEND WHATSAPP CONFIRMATION
|
|
</a>
|
|
<br/>
|
|
<a href="/" class="btn btn-lg text-dark" style="background: #fecd4f; border-radius: 12px; padding-left: 40px; padding-right: 40px; font-weight: 600;">BACK TO HOME</a>
|
|
|
|
<script type="text/javascript">
|
|
setTimeout(function() {
|
|
var waLink = document.getElementById('whatsapp_auto_link');
|
|
if (waLink) {
|
|
waLink.click();
|
|
}
|
|
}, 2000);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
</odoo>
|