131 lines
11 KiB
XML
131 lines
11 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">Book your spot for an authentic South Indian dining experience.</p>
|
|
</div>
|
|
|
|
<t t-if="error">
|
|
<div class="alert alert-danger" role="alert">
|
|
<t t-esc="error"/>
|
|
</div>
|
|
</t>
|
|
|
|
<form action="/reservation/submit" method="post" class="s_website_form">
|
|
<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 (Optional)</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" t-att-value="post.get('email') if post else ''"/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Select Floor</label>
|
|
<select name="floor_id" id="floor_id" class="form-select form-select-lg border-0 shadow-sm" style="background: #f8f9fa; border-radius: 12px; color: #171422 !important; border: 1px solid #fecd4f !important;" required="1">
|
|
<option value="">Choose a Floor...</option>
|
|
<t t-foreach="floors" t-as="floor">
|
|
<option t-att-value="floor.id"><t t-esc="floor.name"/></option>
|
|
</t>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Select Table</label>
|
|
<select name="table_id" id="table_id" class="form-select form-select-lg border-0 shadow-sm" style="background: #f8f9fa; border-radius: 12px; color: #171422 !important; border: 1px solid #fecd4f !important;" required="1">
|
|
<option value="">Choose a Table...</option>
|
|
<t t-foreach="tables" t-as="table">
|
|
<option t-att-value="table.id" t-att-data-floor="table.floor_id.id"><t t-esc="table.name"/> (Cap: <t t-esc="table.seats"/>)</option>
|
|
</t>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<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-12">
|
|
<label class="form-label fw-bold">Reservation Date & Time</label>
|
|
<input type="datetime-local" name="start_time" 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('start_time') if post else ''"/>
|
|
</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.getElementById('floor_id').addEventListener('change', function() {
|
|
var floorId = this.value;
|
|
var tableSelect = document.getElementById('table_id');
|
|
var tableOptions = tableSelect.querySelectorAll('option');
|
|
|
|
tableSelect.value = "";
|
|
tableOptions.forEach(function(option) {
|
|
if (option.value === "") {
|
|
option.style.display = "block";
|
|
} else if (option.getAttribute('data-floor') === floorId) {
|
|
option.style.display = "block";
|
|
} else {
|
|
option.style.display = "none";
|
|
}
|
|
});
|
|
});
|
|
</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:</strong> <t t-esc="reservation.table_id.name"/></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 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</t>
|
|
</template>
|
|
</odoo>
|