<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Basic Catalog Page -->
    <template id="rental_catalog_template" name="Rental Catalog">
        <t t-call="website.layout">
            <div id="wrap" class="container py-4">
                <h1 class="mb-4">Event Rentals</h1>
                <div class="row">
                    <!-- Categories sidebar -->
                    <div class="col-md-3 mb-4">
                        <div class="card p-3">
                            <h5>Categories</h5>
                            <div class="list-group">
                                <a t-att-href="'/rentals' + (search and ('?search=' + search) or '')" 
                                   t-att-class="'list-group-item list-group-item-action ' + (not current_category and 'active' or '')">
                                    All
                                </a>
                                <t t-foreach="categories" t-as="cat">
                                    <a t-att-href="'/rentals?category=' + str(cat.id) + (search and ('&amp;search=' + search) or '')"
                                       t-att-class="'list-group-item list-group-item-action ' + (current_category == cat.id and 'active' or '')">
                                        <span t-field="cat.name"/>
                                    </a>
                                </t>
                            </div>
                        </div>
                    </div>
                    <!-- Product list -->
                    <div class="col-md-9">
                        <div class="mb-4">
                            <form action="/rentals" method="get" class="input-group">
                                <input type="hidden" name="category" t-att-value="current_category" t-if="current_category"/>
                                <input type="text" name="search" class="form-control" placeholder="Search rental items..." t-att-value="search"/>
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-primary">Search</button>
                                </div>
                            </form>
                        </div>
                        <div class="row" t-if="products">
                            <t t-foreach="products" t-as="product">
                                <div class="col-md-4 col-sm-6 mb-4">
                                    <div class="card h-100">
                                        <div style="height: 150px; background: #eee; text-align: center; line-height: 150px;">
                                            <img t-if="product.image_1920" t-att-src="image_data_uri(product.image_1920)" class="img-fluid h-100" style="object-fit: cover;"/>
                                            <span t-else="" class="text-muted">No Image</span>
                                        </div>
                                        <div class="card-body d-flex flex-column">
                                            <h5 class="card-title" t-field="product.name"/>
                                            <p class="card-text text-muted flex-grow-1" t-field="product.description_sale"/>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <span class="font-weight-bold" t-field="product.rental_price_per_day" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                                                <a t-att-href="'/rentals/%s' % slug(product)" class="btn btn-sm btn-outline-primary">Details</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </t>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <!-- Basic Product Detail Page -->
    <template id="rental_product_detail_template" name="Rental Product Detail">
        <t t-call="website.layout">
            <div id="wrap" style="background-color: #fdf6e3; font-family: 'Jost', sans-serif; padding: 160px 0 80px; min-height: 100vh; display: flex; align-items: center;">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-6 mb-4">
                            <div style="height: 450px; background: #f0e9d6; text-align: center; line-height: 450px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
                                <img t-if="product.image_1920" t-att-src="image_data_uri(product.image_1920)" class="img-fluid h-100 w-100" style="object-fit: contain;"/>
                                <span t-else="" class="text-muted" style="font-family: 'Jost', sans-serif;">No Image</span>
                            </div>
                        </div>
                        <div class="col-md-6" style="padding-left: 2rem;">
                            <h1 t-field="product.name" style="font-family: 'Cormorant Garamond', serif; color: #1a1206; font-size: 3rem; margin-bottom: 1rem;"/>
                            <h4 class="my-3" style="color: #795769; font-family: 'Jost', sans-serif; font-size: 1.5rem; font-weight: 600;" t-field="product.rental_price_per_day" t-options="{'widget': 'monetary', 'display_currency': res_company.currency_id}"/>
                            <p t-field="product.description_sale" style="font-family: 'Jost', sans-serif; color: #4a4a4a; line-height: 1.6; margin-bottom: 2rem;"/>
                            <a t-att-href="'/rental/request?product_id=%s' % product.product_variant_id.id" class="btn" style="background-color: #795769; color: #fff; padding: 12px 30px; border-radius: 30px; font-family: 'Jost', sans-serif; font-weight: 500; text-decoration: none; display: inline-block; transition: all 0.3s ease;">
                                Request Booking
                            </a>
                        </div>
                    </div>
                    <div class="mt-5" t-if="product.rental_terms" style="background: #fff; padding: 2.5rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">
                        <h3 style="font-family: 'Cormorant Garamond', serif; color: #1a1206; margin-bottom: 1rem;">Terms &amp; Conditions</h3>
                        <div t-field="product.rental_terms" style="font-family: 'Jost', sans-serif; color: #4a4a4a; line-height: 1.6;"/>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <!-- Basic Request Form Template -->
    <template id="rental_request_form_template" name="Request Rental Form">
        <t t-call="website.layout">
            <div id="wrap" style="background-color: #fdf6e3; font-family: 'Jost', sans-serif; padding: 160px 0 80px; min-height: 100vh;">
                <div class="container">
                    <div style="background: #fff; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); max-width: 900px; margin: 0 auto;">
                        <h2 class="mb-4 text-center" style="font-family: 'Cormorant Garamond', serif; color: #1a1206; font-size: 2.5rem;">Request Booking</h2>
                        <div class="alert alert-danger" role="alert" t-if="error_message">
                            <t t-out="error_message"/>
                        </div>
                        <form action="/rental/request" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                            
                            <h4 style="font-family: 'Cormorant Garamond', serif; color: #c9973a;">Customer Information</h4>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="customer_name" style="font-weight: 500;">Name</label>
                                    <input type="text" name="customer_name" id="customer_name" class="form-control" required="1" t-att-value="post.get('customer_name', '')" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"/>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="customer_email" style="font-weight: 500;">Email</label>
                                    <input type="email" name="customer_email" id="customer_email" class="form-control" required="1" t-att-value="post.get('customer_email', '')" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="customer_phone" style="font-weight: 500; margin-top: 20px;">Phone</label>
                                    <input type="tel" name="customer_phone" id="customer_phone" class="form-control" required="1" t-att-value="post.get('customer_phone', '')" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"/>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="company_name" style="font-weight: 500; margin-top: 20px;">Company Name</label>
                                    <input type="text" name="company_name" id="company_name" class="form-control" t-att-value="post.get('company_name', '')" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="customer_address" style="font-weight: 500; margin-top: 20px;">Address</label>
                                <textarea name="customer_address" id="customer_address" class="form-control" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"><t t-out="post.get('customer_address', '')"/></textarea>
                            </div>

                            <h4 class="mt-4" style="font-family: 'Cormorant Garamond', serif; color: #c9973a;">Event Details</h4>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="start_date" style="font-weight: 500;">Start Date &amp; Time</label>
                                    <input type="datetime-local" name="start_date" id="start_date" class="form-control" required="1" t-att-value="post.get('start_date', '')" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"/>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="end_date" style="font-weight: 500;">End Date &amp; Time</label>
                                    <input type="datetime-local" name="end_date" id="end_date" class="form-control" required="1" t-att-value="post.get('end_date', '')" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="location" style="font-weight: 500; margin-top: 20px;">Location</label>
                                    <input type="text" name="location" id="location" class="form-control" required="1" t-att-value="post.get('location', '')" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"/>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="event_type" style="font-weight: 500; margin-top: 20px;">Event Type</label>
                                    <select name="event_type" id="event_type" class="form-control" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;">
                                        <option value="wedding">Wedding</option>
                                        <option value="birthday">Birthday</option>
                                        <option value="corporate">Corporate Event</option>
                                        <option value="stage">Stage Setup</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                            </div>

                            <h4 class="mt-4" style="font-family: 'Cormorant Garamond', serif; color: #c9973a;">Rental Product</h4>
                            <div class="row">
                                <div class="form-group col-md-8">
                                    <label for="product_id" style="font-weight: 500;">Product</label>
                                    <select name="product_id" id="product_id" class="form-control" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;">
                                        <t t-foreach="all_products" t-as="prod">
                                            <option t-att-value="prod.id" t-att-selected="selected_product and selected_product.id == prod.id">
                                                <t t-out="prod.display_name"/>
                                            </option>
                                        </t>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="quantity" style="font-weight: 500;">Quantity</label>
                                    <input type="number" name="quantity" id="quantity" class="form-control" min="1" value="1" required="1" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;"/>
                                </div>
                            </div>

                            <h4 class="mt-4" style="font-family: 'Cormorant Garamond', serif; color: #c9973a;">Documents</h4>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="doc_type" style="font-weight: 500;">ID Proof Type</label>
                                    <select name="doc_type" id="doc_type" class="form-control" style="border-radius: 6px; border: 1px solid #ddd; padding: 10px;">
                                        <option value="aadhaar">Aadhaar Card</option>
                                        <option value="driving_license">Driving License</option>
                                        <option value="passport">Passport</option>
                                        <option value="voter_id">Voter ID</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="id_proof" style="font-weight: 500;">Upload ID Proof</label>
                                    <input type="file" name="id_proof" id="id_proof" class="form-control-file" accept=".pdf,.jpg,.jpeg,.png" required="1" style="padding: 10px;"/>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-block btn-lg mt-4" style="background-color: #C9973A; color: #fff; border-radius: 30px; font-family: 'Jost', sans-serif; font-weight: 500; transition: all 0.3s ease;">Submit Request</button>
                        </form>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <!-- Basic Success Page -->
    <template id="rental_request_success_template" name="Rental Request Success">
        <t t-call="website.layout">
            <div id="wrap" class="container py-5 text-center">
                <h2 class="text-success">Request Submitted</h2>
                <p class="lead">Your request has been successfully submitted for review.</p>
                <div class="alert alert-secondary d-inline-block">
                    Reference: <strong t-out="name"/>
                </div>
                <div class="mt-4">
                    <a href="/rentals" class="btn btn-primary">Back to Catalog</a>
                </div>
            </div>
        </t>
    </template>
</odoo>
