<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <!-- Public Assessment Booking Page -->
    <template id="portal_book_assessment" name="Book an Assessment">
        <t t-call="website.layout">
            <div class="container py-5" style="max-width: 700px;">

                <!-- Success Message -->
                <t t-if="success">
                    <div class="alert alert-success text-center" role="alert">
                        <h4 class="alert-heading"><i class="fa fa-check-circle"></i> Assessment Booked!</h4>
                        <p>Thank you! Your assessment has been scheduled. We will confirm the date and time shortly.</p>
                        <p>You will receive a text message confirmation.</p>
                        <hr/>
                        <a href="/book-assessment" class="btn btn-outline-success">Book Another</a>
                    </div>
                </t>

                <!-- Error Message -->
                <t t-if="error">
                    <div class="alert alert-danger" role="alert">
                        <i class="fa fa-exclamation-triangle"></i> <t t-esc="error"/>
                    </div>
                </t>

                <!-- Booking Form -->
                <t t-if="not success">
                    <div class="text-center mb-4">
                        <h2 style="color: #1a5276;">Book an Accessibility Assessment</h2>
                        <p class="text-muted">Fill out the form below and our team will schedule a home visit.</p>
                    </div>

                    <form action="/book-assessment/submit" method="post" class="card shadow-sm">
                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                        <div class="card-body p-4">

                            <!-- Assessment Type -->
                            <div class="mb-3">
                                <label class="form-label fw-bold">What type of modification?<span class="text-danger"> *</span></label>
                                <select name="assessment_type" class="form-select" required="">
                                    <option value="">Select...</option>
                                    <t t-foreach="assessment_types" t-as="atype">
                                        <option t-att-value="atype[0]"><t t-esc="atype[1]"/></option>
                                    </t>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">What are you looking for?</label>
                                <textarea name="modification_requested" class="form-control" rows="2"
                                          placeholder="e.g. Curved stairlift for 2-storey home, bathroom grab bars..."></textarea>
                            </div>

                            <hr/>
                            <h5 class="mb-3" style="color: #1a5276;">Client Information</h5>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Client Name<span class="text-danger"> *</span></label>
                                    <input type="text" name="client_name" class="form-control" required="" placeholder="Full name"/>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Phone Number<span class="text-danger"> *</span></label>
                                    <input type="tel" name="client_phone" class="form-control" required="" placeholder="e.g. 416-555-1234"/>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" name="client_email" class="form-control" placeholder="Optional"/>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Street Address</label>
                                <input type="text" name="client_street" class="form-control" placeholder="e.g. 5 Nottawasaga Cres"/>
                            </div>

                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">City</label>
                                    <input type="text" name="client_city" class="form-control" placeholder="e.g. Brampton"/>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Province</label>
                                    <input type="text" name="client_province" class="form-control" value="Ontario"/>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Postal Code</label>
                                    <input type="text" name="client_postal" class="form-control" placeholder="e.g. L6Y 4G1"/>
                                </div>
                            </div>

                            <hr/>
                            <h5 class="mb-3" style="color: #1a5276;">Assessment Details</h5>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Preferred Assessment Date</label>
                                    <input type="date" name="assessment_date" class="form-control"/>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Assign Sales Rep</label>
                                    <select name="sales_rep_id" class="form-select">
                                        <option value="">Auto-assign</option>
                                        <t t-foreach="sales_reps" t-as="rep">
                                            <option t-att-value="rep.id"><t t-esc="rep.name"/></option>
                                        </t>
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Booking Source</label>
                                <select name="booking_source" class="form-select">
                                    <option value="portal" selected="">Online Booking</option>
                                    <option value="phone_authorizer">Phone - Authorizer Calling</option>
                                    <option value="phone_client">Phone - Client Calling</option>
                                    <option value="walk_in">Walk-In</option>
                                </select>
                            </div>

                            <hr/>
                            <h5 class="mb-3" style="color: #1a5276;">Authorizer / OT (Optional)</h5>
                            <p class="text-muted small">If an authorizer or occupational therapist is involved, provide their details.</p>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Authorizer Name</label>
                                    <input type="text" name="authorizer_name" class="form-control"/>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Authorizer Email</label>
                                    <input type="email" name="authorizer_email" class="form-control"/>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Authorizer Phone</label>
                                <input type="tel" name="authorizer_phone" class="form-control"/>
                            </div>

                        </div>
                        <div class="card-footer text-center bg-white border-top-0 pb-4">
                            <button type="submit" class="btn btn-lg" style="background-color: #1a5276; color: white;">
                                <i class="fa fa-calendar-check-o"></i> Book Assessment
                            </button>
                        </div>
                    </form>
                </t>

            </div>
        </t>
    </template>
</odoo>
