<?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="small fw-bold mb-0" style="color: #171422;">
                                                <i class="fa fa-clock-o me-1"></i> Sun - Thu: 12pm - 9pm | Fri &amp; Sat: 12pm - 11pm
                                            </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 (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 &amp; 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>
