<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="contact_page" inherit_id="website.contactus" name="Chennora Contact Page" priority="1000">
            <xpath expr="//div[@id='wrap']" position="replace">
                <div id="wrap" class="oe_structure">
                    
                    <!-- 1. HERO BANNER -->
                    <section class="s_page_title o_colored_level" style="background-color: #04121D; background-image: url('/dine360_theme_chennora/static/src/img/contact-banner-bg.png'); background-size: cover; background-position: center; padding: 120px 0; position: relative;">
                         <div class="o_we_bg_filter bg-black-50"/>
                         <div class="container text-center text-white position-relative" style="z-index: 2;">
                            <h1 class="display-3 fw-bold mb-3" style="text-transform: uppercase; letter-spacing: 1px;">Contact Us</h1>
                            <nav aria-label="breadcrumb" class="d-flex justify-content-center">
                                <ol class="breadcrumb mb-0" style="background: transparent; font-size: 14px; text-transform: uppercase; font-weight: 600;">
                                    <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none" style="opacity: 0.8;">Home</a></li>
                                    <li class="breadcrumb-item active" style="color: #FECD4F;" aria-current="page">Contact Us</li>
                                </ol>
                            </nav>
                         </div>
                    </section>

                    <!-- 2. CONTACT INFO SECTION -->
                    <section class="s_contact_info pt80 pb80" style="background-color: #F9F6F0;">
                        <div class="container">
                            <div class="text-center mb-5">
                                <h6 style="color: #2BB1A5; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px;">
                                    <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 20px;" alt=""/> 
                                    CHENNORA 
                                    <img src="/dine360_theme_chennora/static/src/img/subtitle-icon.png" style="width: 20px;" alt=""/>
                                </h6>
                                <h2 class="display-5 fw-bold" style="color: #04121D;">Contact</h2>
                                <p class="text-muted mt-3" style="max-width: 800px; margin: 0 auto; font-size: 14px;">
                                    Looking for 'Indian restaurants near me' in Brampton? Find us conveniently located near Downtown Brampton. Chennora is your go-to destination for authentic Indian and South Indian food in Brampton, Ontario. Call us or drop by for dine-in, takeout, or catering services.
                                </p>
                            </div>

                            <div class="row g-4 justify-content-center">
                                <!-- Address -->
                                <div class="col-lg-3 col-md-6">
                                    <div class="bg-white p-4 text-center h-100 rounded-3 shadow-sm border-bottom border-warning border-3">
                                        <div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px; background-color: rgba(254, 205, 79, 0.1); color: #FECD4F;">
                                            <i class="fa fa-map-marker fa-lg"></i>
                                        </div>
                                        <h5 class="fw-bold mb-2">Our Address</h5>
                                        <p class="text-muted small mb-0">Chennora Indian Kitchen Bar<br/>Unit 66, 11665 McVean Dr, Brampton</p>
                                    </div>
                                </div>
                                <!-- Email -->
                                <div class="col-lg-3 col-md-6">
                                    <div class="bg-white p-4 text-center h-100 rounded-3 shadow-sm border-bottom border-warning border-3">
                                        <div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px; background-color: rgba(254, 205, 79, 0.1); color: #FECD4F;">
                                            <i class="fa fa-envelope fa-lg"></i>
                                        </div>
                                        <h5 class="fw-bold mb-2">Email</h5>
                                        <p class="text-muted small mb-0">chennorakitchen@gmail.com</p>
                                    </div>
                                </div>
                                <!-- Call Us -->
                                <div class="col-lg-3 col-md-6">
                                    <div class="bg-white p-4 text-center h-100 rounded-3 shadow-sm border-bottom border-warning border-3">
                                        <div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px; background-color: rgba(254, 205, 79, 0.1); color: #FECD4F;">
                                            <i class="fa fa-phone fa-lg"></i>
                                        </div>
                                        <h5 class="fw-bold mb-2">Call Us</h5>
                                        <p class="text-muted small mb-0">+1(647)856-2878</p>
                                    </div>
                                </div>
                                <!-- Opening Hours -->
                                <div class="col-lg-3 col-md-6">
                                    <div class="bg-white p-4 text-center h-100 rounded-3 shadow-sm border-bottom border-warning border-3">
                                        <div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px; background-color: rgba(254, 205, 79, 0.1); color: #FECD4F;">
                                            <i class="fa fa-clock-o fa-lg"></i>
                                        </div>
                                        <h5 class="fw-bold mb-2">Opening Hours</h5>
                                        <p class="text-muted small mb-0">Sunday - Thursday: 12 PM - 9 PM<br/>Friday &amp; Saturday: 12 PM - 11 PM</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 3. FORM & IMAGE SECTION -->
                    <section class="s_contact_form_wrapper pb96 pt48" style="background-color: #F9F6F0;">
                        <div class="container">
                            <div class="row align-items-center">
                                <!-- Left Image -->
                                <div class="col-lg-6 mb-5 mb-lg-0">
                                    <div class="position-relative p-3">
                                        <div class="position-absolute" style="background-color: #FECD4F; bottom: 0; left: 0; width: 90%; height: 90%; z-index: 0; border-radius: 2px;"></div>
                                        <div class="position-relative bg-white p-2 shadow-sm" style="z-index: 1; margin: 0 20px 20px 20px;">
                                            <img src="/dine360_theme_chennora/static/src/img/contact-side-img-new.png" class="img-fluid w-100" style="object-fit: cover; height: 500px;" alt="Interior"/>
                                        </div>
                                    </div>
                                </div>

                                <!-- Right Form -->
                                <div class="col-lg-6">
                                    <div class="bg-white p-5 rounded-3 shadow-lg">
                                        <h3 class="fw-bold mb-4" style="color: #04121D;">Get In Touch For Reservations Or Inquiries!</h3>
                                        
                                        <!-- Standard HTML Form (Bypassing Odoo JS Interference) -->
                                        <section class="s_contact_form_custom pt-3">
                                            <div class="container">
                                                <form action="/contactus/submit" method="post" enctype="multipart/form-data">
                                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                                    <div class="s_website_form_rows row s_col_no_bgcolor">
                                                        
                                                        <!-- Full Name -->
                                                        <div class="col-lg-6 mb-4">
                                                            <div class="s_col_no_resize s_col_no_bgcolor">
                                                                <label class="form-label fw-normal" for="name" style="color: #666; font-size: 15px;">
                                                                    Full Name
                                                                    <span style="color: #2BB1A5;"> *</span>
                                                                </label>
                                                                <div>
                                                                    <input type="text" class="form-control" name="name" required="1" placeholder="Full Name" style="background-color: #F8F9FA; border: 1px solid #2BB1A5 !important; border-radius: 8px; padding: 12px; color: #2BB1A5 !important; font-size: 14px;"/>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Email Address -->
                                                        <div class="col-lg-6 mb-4">
                                                            <div class="s_col_no_resize s_col_no_bgcolor">
                                                                <label class="form-label fw-normal" for="email_from" style="color: #666; font-size: 15px;">
                                                                    Email Address
                                                                    <span style="color: #2BB1A5;"> *</span>
                                                                </label>
                                                                <div>
                                                                    <input type="email" class="form-control" name="email_from" required="1" placeholder="Email Address" style="background-color: #F8F9FA; border: 1px solid #2BB1A5 !important; border-radius: 8px; padding: 12px; color: #2BB1A5 !important; font-size: 14px;"/>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Phone Number -->
                                                        <div class="col-lg-6 mb-4">
                                                            <div class="s_col_no_resize s_col_no_bgcolor">
                                                                <label class="form-label fw-normal" for="phone" style="color: #666; font-size: 15px;">
                                                                    Phone Number
                                                                    <span style="color: #2BB1A5;"> *</span>
                                                                </label>
                                                                <div>
                                                                    <input type="tel" class="form-control" name="phone" required="1" placeholder="Phone Number" style="background-color: #F8F9FA; border: 1px solid #2BB1A5 !important; border-radius: 8px; padding: 12px; color: #2BB1A5 !important; font-size: 14px;"/>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Subject -->
                                                        <div class="col-lg-6 mb-4">
                                                            <div class="s_col_no_resize s_col_no_bgcolor">
                                                                <label class="form-label fw-normal" for="subject" style="color: #666; font-size: 15px;">
                                                                    Subject
                                                                    <span style="color: #2BB1A5;"> *</span>
                                                                </label>
                                                                <div>
                                                                    <select class="form-select" name="subject" required="1" style="background-color: #F8F9FA; border: 1px solid #2BB1A5 !important; border-radius: 8px; padding: 12px; color: #2BB1A5 !important; font-size: 14px;">
                                                                        <option value="" disabled="disabled" selected="selected">Select Subject</option>
                                                                        <option value="Complain">Complain</option>
                                                                        <option value="Greetings">Greetings</option>
                                                                        <option value="Expire Date">Expire Date</option>
                                                                        <option value="About Price">About Price</option>
                                                                        <option value="About Order">About Order</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Message -->
                                                        <div class="col-12 mb-4">
                                                            <div class="s_col_no_resize s_col_no_bgcolor">
                                                                <label class="form-label fw-normal" for="description" style="color: #666; font-size: 15px;">
                                                                    Message
                                                                    <span style="color: #2BB1A5;"> *</span>
                                                                </label>
                                                                <div>
                                                                    <textarea class="form-control" name="description" required="1" placeholder="Message" rows="5" style="background-color: #FFFFFF; border: 1px solid #2BB1A5 !important; border-radius: 8px; padding: 12px; color: #2BB1A5 !important; font-size: 14px;"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Submit Button -->
                                                        <div class="col-12">
                                                            <button type="submit" class="btn btn-primary btn-lg w-100 fw-bold" style="background-color: #2BB1A5 !important; border: none; color: #04121D; padding: 15px; text-transform: uppercase; border-radius: 4px;">
                                                                Submit Now <i class="fa fa-long-arrow-right ms-2"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 4. MAP SECTION -->
                    <section class="s_map pb0" data-snippet="s_map" data-name="Map">
                        <div class="map_container o_not_editable" style="height: 500px !important; width: 100%;">
                             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2882.023604364022!2d-79.69973268450123!3d43.79155297911666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3d8f3b1b3b1b%3A0x1b3b1b3b1b3b1b3b!2s11665%20McVean%20Dr%2C%20Brampton%2C%20ON%20L6P%201J7%2C%20Canada!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" 
                                width="100%" height="500" style="border:0; height: 500px !important; width: 100%;" allowfullscreen="" loading="lazy"></iframe>
                        </div>
                    </section>

                </div>
            </xpath>
        </template>

        <template id="contact_thank_you" name="Contact Thank You">
            <t t-call="website.layout">
                <div id="wrap">
                    <section class="pt120 pb120" style="background-color: #F9F6F0;">
                        <div class="container text-center">
                            <div class="mb-4">
                                <i class="fa fa-check-circle-o fa-5x" style="color: #2BB1A5;"></i>
                            </div>
                            <h1 class="display-3 fw-bold mb-3" style="color: #04121D;">Thank You!</h1>
                            <p class="lead text-muted mb-5">Your message has been successfully sent to us.<br/>We will get back to you as soon as possible.</p>
                            <a href="/" class="btn btn-lg flat" style="background-color: #FECD4F; color: #04121D; font-weight: 700; padding: 15px 40px; border-radius: 4px; text-transform: uppercase;">Back to Home</a>
                        </div>
                    </section>
                </div>
            </t>
        </template>

    </data>
</odoo>

