<?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>
