<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- Assets -->
    <template id="assets_frontend" inherit_id="website.assets_frontend" name="Online Appointment">
        <xpath expr="." position="inside">
            <link rel="stylesheet" type="text/scss" href="/odex25_website_calendar/static/src/scss/odex25_website_calendar.scss" t-ignore="true"/>
            <script type="text/javascript" src="/odex25_website_calendar/static/src/js/odex25_website_calendar.js"/>
        </xpath>
    </template>

    <template id="assets_backend" inherit_id="website.assets_backend" name="Online Appointment">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/odex25_website_calendar/static/src/js/appointment_employee_url.js"/>
            <link rel="stylesheet" type="text/scss" href="/odex25_website_calendar/static/src/scss/appointment_employee_url.scss"/>
        </xpath>
    </template>

    <template id="assets_editor_inherit_odex25_website_calendar" inherit_id="website.assets_editor" name="odex25_website_calendar Assets Editor">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/odex25_website_calendar/static/src/js/odex25_website_calendar.editor.js"></script>
        </xpath>
    </template>

    <template id="qunit_suite" inherit_id="web.qunit_suite_tests" name="Website Calendar Tests" >
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/odex25_website_calendar/static/tests/odex25_website_calendar_tests.js"/>
        </xpath>
    </template>

    <!-- Pages -->
    <template id="index" name="Website Appointment: Appointment Page">
        <t t-call="website.layout">
            <div id="wrap" class="o_odex25_website_calendar">
                <div class="oe_structure container mb128 o_odex25_website_calendar_appointment">
                    <ul class="wizard mt32 float-right">
                        <li class="text-primary">Appointment<span class="chevron"></span></li>
                        <li class="text-muted">Time<span class="chevron"></span></li>
                        <li class="text-muted">Confirmation<span class="chevron"></span></li>
                    </ul>
                    <h1 class="o_page_header mt32">
                        Schedule an Appointment
                    </h1>
                    <div t-if="message=='cancel'" class="alert alert-danger mt16" role="alert">
                        <p>
                            <strong>Appointment canceled!</strong>
                            You can schedule another appointment from here.
                        </p>
                    </div>
                    <form class="o_website_appoinment_form w-md-50" t-attf-action="/calendar/#{ slug(appointment_type) }/appointment" type="post">
                      <div id="appointment" class="form-group row">
                        <label for="calendarType" class="col-md-3 col-form-label">Appointment</label>
                        <div class="col-md-9">
                          <select class="form-control" id="calendarType" t-att-disabled="len(suggested_appointment_types)==1 and '1' or None">
                            <t t-foreach="suggested_appointment_types" t-as="cal">
                                <option t-att-value="cal.id" t-att-selected="cal.id == appointment_type.id and 'selected'">
                                    <t t-esc="cal.name"/>
                                </option>
                            </t>
                          </select>
                        </div>
                      </div>
                      <t t-call="odex25_website_calendar.employee_select"/>
                      <div class="form-group row">
                        <div class="offset-md-8 col-md-4">
                            <button type="submit" class="btn btn-primary">View Availabilities <span class="fa fa-arrow-right"/></button>
                        </div>
                      </div>
                    </form>
                    <div t-raw="appointment_type.message_intro" class="o_calendar_intro mb32"/>
                </div>
            </div>
        </t>
    </template>

    <template id="employee_select" name="Website Appointment: Appointment Calendars">
      <div name="employee_select" t-att-class="'form-group ' + (appointment_type.assignation_method!='chosen' and 'o_hidden' or '')">
        <label for="selectEmployee" class="col-md-4 col-form-label">With:</label>
        <div class="col-md-7">
          <!-- do not add the disabled tag or it won't be submitted with the form -->
          <select class="form-control" name="employee_id" id="selectEmployee">
            <t t-foreach="suggested_employees" t-as="emp">
                <option t-att-value="emp[0]" t-att-selected="emp[0] == selected_employee_id and 'selected'">
                    <t t-esc="emp[1]"/>
                </option>
            </t>
          </select>
        </div>
      </div>
    </template>

    <template id="appointment_select_timezone" inherit_id="odex25_website_calendar.index" active="False" customize_show="True" name="Website Appointment: Timezone Selection">
        <xpath expr="//div[@id='appointment']" position="after">
          <div class="form-group row">
            <label for="calendarTimezone" class="col-md-3 col-form-label">Time zone:</label>
            <div class="col-md-9">
              <select class="form-control" name="timezone">
                <t t-foreach="appointment_type._fields['appointment_tz'].selection(appointment_type)" t-as="timezone">
                    <option t-att-value="timezone[0]" t-esc="timezone[1]" t-att-selected="(timezone[1] == request.session.timezone) and 1 or None"/>
                </t>
              </select>
            </div>
          </div>
        </xpath>
    </template>

    <template id="appointment_calendar" name="Website Appointment: Appointment Calendars">
        <div class="row">
            <div t-foreach="slots" t-as="month" class="col-lg-6">
                <h3 t-esc="month['month']"/>
                <table class="table">
                    <tr class="active">
                        <th class="text-center">Mon</th>
                        <th class="text-center">Tue</th>
                        <th class="text-center">Wed</th>
                        <th class="text-center">Thu</th>
                        <th class="text-center">Fri</th>
                        <th class="text-center">Sat</th>
                        <th class="text-center">Sun</th>
                    </tr>
                    <tr t-foreach="month['weeks']" t-as="weeks" class="o_calendar_days">
                        <t t-foreach="weeks" t-as="day">
                            <td t-attf-class="text-center#{day['slots'] and ' o_day dropdown' or ''} #{day['weekend_cls']} #{day['today_cls']}" t-attf-title="#{day['today_cls'] and 'Today' or ''}">
                                <t t-if="day['slots']">
                                    <div class="dropdown-toggle o_slots_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                      <strong>
                                        <span t-esc="day['day'].day"/>
                                      </strong>
                                    </div>
                                    <div class="dropdown-menu" role="menu">
                                        <t t-foreach="day['slots']" t-as="slot">
                                            <a t-if='slot' role="menuitem" class="dropdown-item" t-attf-href="/calendar/#{appointment_type.id}/info?employee_id=#{slot['employee_id']}&amp;date_time=#{slot['datetime']}" t-esc="slot['hours']"/>
                                        </t>
                                    </div>
                                </t>
                                <t t-if="not day['slots']">
                                    <div t-esc="day['day'].day" t-att-class="day['mute_cls']"/>
                                </t>
                            </td>
                        </t>
                    </tr>
                    <!--to fix bootstrap md height add empty tr so now each month has 6 weeks row -->
                    <tr t-if="len(month['weeks']) == 5" class="o_calendar_days"/>
                </table>
            </div>
        </div>
        <p>
            Time displayed in <strong t-esc="timezone"/> timezone
        </p>
    </template>

    <template id="appointment" name="Website Appointment: Schedule Appointment" track="1">
        <t t-call="website.layout">
            <div id="wrap" class="o_odex25_website_calendar">
                <div class="oe_structure container mb128">
                    <ul class="wizard mt32 float-right">
                        <li><a t-attf-href="/calendar" class="text-success">Appointment</a><span class="chevron"></span></li>
                        <li class="text-primary">Time<span class="chevron"></span></li>
                        <li class="text-muted">Confirmation<span class="chevron"></span></li>
                    </ul>
                    <h1 class="o_page_header mt32">Appointment Time</h1>
                    <div t-if="failed=='employee'" class="alert alert-danger mt16" role="alert">
                        <p>
                            <strong>Appointment failed!</strong>
                            The selected timeslot is not available anymore.
                            Someone has booked the same time slot a few
                            seconds before you.
                        </p><p>
                            Please, select another date.
                        </p>
                    </div>
                    <div t-if="failed=='partner'" class="alert alert-danger mt16" role="alert">
                        <p>
                            <strong>Appointment failed!</strong>
                            The selected timeslot is not available.
                            It appears you already have another meeting with us at that date.
                        </p><p>
                            Please, select another date.
                        </p>
                    </div>
                    <div class="mb8">
                        <t t-call="website.publish_management">
                          <t t-set="object" t-value="appointment_type"/>
                          <t t-set="publish_edit" t-value="True"/>
                          <t t-set="action" t-value="'odex25_website_calendar.calendar_appointment_type_action'"/>
                        </t>
                    </div>
                    <div class="clearfix"/>
                    <t t-call="odex25_website_calendar.appointment_calendar"/>
                </div>
            </div>
        </t>
    </template>

    <template id="appointment_form" name="Website Appointment: Your Data">
        <t t-call="website.layout">
            <div id="wrap" class="o_odex25_website_calendar">
                <div class="oe_structure container mb128 o_odex25_website_calendar_form">
                    <ul class="wizard mt32 float-right">
                        <li><a t-attf-href="/calendar" class="text-success">Appointment</a><span class="chevron"></span></li>
                        <li><a t-attf-href="/calendar/#{ slug(appointment_type) }/appointment" class="text-success">Time</a><span class="chevron"></span></li>
                        <li class="text-primary">Confirmation<span class="chevron"></span></li>
                    </ul>
                    <h2 class="o_page_header mt32">Confirm your details</h2>
                    <p>
                        <span t-field="appointment_type.name"/> on <strong t-esc="datetime_locale"/>
                    </p>

                    <form class="mt32 appointment_submit_form" t-attf-action="/calendar/#{ slug(appointment_type) }/submit" method="POST">
                      <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                      <input type="hidden" name="datetime_str" t-att-value="datetime_str"/>
                      <input type="hidden" name="employee_id" t-att-value="employee_id"/>
                      <div class="form-group row col-xl-8">
                        <label for="name" class="col-md-4 col-form-label">Your Name</label>
                        <div class="col-md-8">
                          <input type="char" class="form-control" name="name" required="1" t-att-value="'name' in partner_data and partner_data['name']"/>
                        </div>
                    </div><div class="form-group row col-xl-8">
                        <label class="col-md-4 col-form-label" for="country_id">Your Country</label>
                        <div class="col-md-8">
                          <select name="country_id" class="form-control" required="1" id="country_field">
                              <t t-if="'country_id' not in partner_data or not partner_data['country_id']">
                                <option disabled="1" selected="1"> -- select a country -- </option>
                              </t>
                              <t t-foreach="countries or []" t-as="country">
                                  <option t-att-value="country.id" t-att-data-phone-code="country.phone_code and ('+'+str(country.phone_code)+' ') or None" t-att-selected="partner_data.get('country_id') and country.id == partner_data['country_id'][0]"><t t-esc="country.name"/></option>
                              </t>
                          </select>
                        </div>
                      </div>

                      <div class="form-group row col-xl-8">
                        <label for="email" class="col-md-4 col-form-label">Your Email</label>
                        <div class="col-md-8">
                          <input type="email" class="form-control" name="email" t-att-value="'email' in partner_data and partner_data['email']" required="1"/>
                        </div>
                    </div><div class="form-group row col-xl-8">
                        <label for="phone" class="col-md-4 col-form-label">Your Phone</label>
                        <div class="col-md-8">
                          <input type="tel" class="form-control" name="phone" placeholder="+1 (650) 691-3277" required="1" id="phone_field" t-att-value="'mobile' in partner_data and partner_data['mobile']"/>
                          <small t-if="appointment_type.reminder_ids.filtered(lambda r:r.alarm_type=='sms')" class="text-muted">
                              A text message reminder is sent to you before your appointment
                          </small>
                        </div>
                      </div>

                      <t t-foreach="appointment_type.question_ids" t-as="question">
                          <div class="form-group row col-xl-8" t-if="question.question_type!='text'">
                            <label t-att-for="question_#{question.id}" class="col-md-4 col-form-label" t-esc="question.name"/>
                            <div class="col-md-8">
                              <t t-if="question.question_type=='char'">
                                  <input type="char" class="form-control"
                                        t-attf-name="question_#{question.id}"
                                        t-att-required="question.question_required or None"
                                        t-att-placeholder="question.placeholder"/>
                              </t>
                              <t t-if="question.question_type=='select'">
                                  <select t-attf-name="question_#{question.id}" class="form-control"
                                        t-att-required="question.question_required or None"
                                        t-att-placeholder="question.placeholder">
                                      <t t-foreach="question.answer_ids or []" t-as="answer">
                                          <option t-att-value="answer.name"><t t-esc="answer.name"/></option>
                                      </t>
                                  </select>
                              </t>
                              <t t-if="question.question_type=='radio'">
                                  <div class="checkbox" t-foreach="question.answer_ids or []" t-as="answer">
                                      <label>
                                          <input type="radio" t-attf-name="question_#{question.id}"
                                            t-att-required="question.question_required or None"
                                            t-att-value="answer.name"/> <t t-esc="answer.name"/>
                                      </label>
                                  </div>
                              </t>
                              <t t-if="question.question_type=='checkbox'">
                                  <div class="checkbox" t-foreach="question.answer_ids or []" t-as="answer">
                                      <label>
                                          <input type="checkbox" t-attf-name="question_#{question.id}_answer_#{answer.id}"
                                            t-att-value="answer.name"/><t t-esc="answer.name"/>
                                      </label>
                                  </div>
                              </t>
                            </div>
                          </div>
                          <div class="form-group row col-xl-8" t-if="question.question_type=='text'">
                              <label t-att-for="question_#{question.id}" class="col-md-4 col-form-label" t-esc="question.name"/>
                              <div class="col-md-8">
                                  <textarea class="form-control" rows="8"
                                      t-att-required="question.question_required or None"
                                      t-attf-name="question_#{question.id}"
                                      t-att-placeholder="question.placeholder"/>
                              </div>
                          </div>
                      </t>

                      <div class="form-group row">
                        <div class="offset-md-2 col-md-10">
                          <button type="submit" class="btn btn-primary">Confirm Appointment <span class="fa fa-arrow-right"/></button>
                        </div>
                      </div>
                    </form>
                </div>
            </div>
        </t>
    </template>

    <template id="appointment_validated" name="Website Appointment: Appointment Confirmed">
        <t t-call="website.layout">
            <div id="wrap" class="o_odex25_website_calendar">
                <div class="oe_structure container mb128">
                    <h1 class="o_page_header">Appointment: <span t-esc="event.name"/></h1>
                    <div class="alert alert-info" t-if="message=='new'" role="status">
                        <p>
                            <strong>Your appointment has been successfully booked!</strong>
                        </p>
                    </div>
                    <div class="alert alert-danger" t-if="message=='no-cancel'" role="alert">
                        <p>
                            <strong>Your appointment is in less than <t t-esc="event.appointment_type_id.min_cancellation_hours"/> hours from now!</strong><br/>
                            It's too late to cancel online, please contact the attendees another way if you really can't make it.
                        </p>
                    </div>
                    <div class="row mb-5">
                        <div class="col-md-9 my-3 o_not_editable">
                        <t t-if="event.appointment_type_id">
                            <div t-raw="event.appointment_type_id.message_confirmation" class="mb-2"/>
                        </t>
                        <div class="col-lg-6 mx-md-auto row">
                            <div class="col-5 col-md-4 text-right">
                                <label>When:</label>
                            </div>
                            <div class="col-7 mx-md-0">
                                <t t-esc="datetime_start"/>
                                <br/>
                                <i class="text-muted">(timezone: <t t-esc="request.session.timezone"/>)</i>
                            </div>
                        </div>
                        <div class="col-lg-6 mx-md-auto row">
                            <div class="col-5 col-md-4 text-right">
                                <label>Duration:</label>
                            </div>
                            <div class="col-7 mx-md-0">
                                <t t-esc="int(event.duration)"/><t t-if="event.duration % 1">:<t t-esc="'%02d' % (int(event.duration % 1 * 60),)"/></t>
                                hour<t t-if="event.duration>=2">s</t>
                            </div>
                        </div>
                        <div t-if="event.location" class="col-lg-6 mx-md-auto row">
                            <div class="col-5 col-md-4 text-right">
                                <label>Location:</label>
                            </div>
                            <div class="col-7 mx-md-0">
                                <t t-esc="event.location"/>
                            </div>
                        </div>
                        <div class="col-lg-6 mx-md-auto row">
                            <div class="col-5 col-md-4 text-right">
                                <label>Attendees:</label>
                            </div>
                            <div class="col-7 mx-md-0">
                                <div t-foreach="event.attendee_ids" t-as="attendee">
                                    <t t-esc="attendee.common_name"/>
                                    <span t-if="attendee.state=='accepted'" class="fa fa-check text-success" title="Confirmed" role="img" aria-label="Confirmed"/>
                                    <span t-if="attendee.state=='declined'" class="fa fa-times text-danger" title="Declined" role="img" aria-label="Declined"/>
                                </div>
                            </div>
                        </div>
                        <div t-if="event.description" class="col-lg-6 mx-md-auto row">
                            <div class="col-5 col-md-4 text-right">
                                <label>Description:</label>
                            </div>
                            <div class="col-7 mx-md-0">
                                <div t-field="event.description"/>
                            </div>
                        </div>
                        </div>
                        <div class="col-md-3 my-auto">
                            <a role="button" class="btn btn-block btn-primary" t-attf-href="/calendar/ics/#{event.access_token}.ics">
                                <i class="fa fa-fw fa-arrow-right"></i>Add to iCal/Outlook
                            </a>
                            <a role="button" class="btn btn-primary btn-block" t-att-href="google_url">
                                <i class="fa fa-fw fa-arrow-right"></i>Add to Google Calendar
                            </a>
                            <t t-if="event.appointment_type_id">
                                <br/>
                                <br/>
                                <a role="button" class="btn btn-danger btn-block" t-attf-href="/calendar/cancel/#{event.access_token}">
                                    <i class="fa fa-fw fa-times"></i>Cancel / Reschedule
                                </a>
                            </t>
                        </div>

                    </div>

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

    <template id="setup" name="Website Appointment: Configure You Appointments">
        <t t-call="website.layout">
            <div id="wrap" class="o_odex25_website_calendar">
                <div class="oe_structure container mb128">
                    <h1 class="o_page_header">No appointments available!</h1>
                    <p groups="base.group_user">
                        In order to configure your first appointment, go
                        to the "Calendar" application in Odoo and create
                        an online appointment.
                    </p>
                </div>
            </div>
        </t>
    </template>

    <!-- User Navbar -->
    <template id="user_navbar_inherit_odex25_website_inherit_odex25_website_calendar" inherit_id="odex25_website.user_navbar_inherit_odex25_website">
        <xpath expr="//div[@name='module_odex25_website_calendar']" position="attributes">
            <attribute name="name"/>
            <attribute name="t-att-data-module-id"/>
            <attribute name="t-att-data-module-shortdesc"/>
            <attribute name="groups">odex25_website_calendar.group_calendar_manager</attribute>
        </xpath>
    </template>

</odoo>
