<?xml version="1.0" encoding="utf-8"?>
<odoo>
	<template id="event_details" inherit_id="website_event.event_details" name="Events Details">
		<xpath expr="//div[@class='container']" position="replace">
            <div class="container bread_container">
                <div class="crumb" id="event_menu">
                    <ol class="breadcrumb mb0" t-if="not event.menu_id">
                        <li><a href="/event">All Events</a></li>
                        <li t-if="event.event_type_id">
                            <a t-attf-href="/event?type=#{event.event_type_id.id}" t-esc="event.event_type_id.name"/>
                        </li>
                        <li t-if="event.country_id">
                            <a t-attf-href="/event?country=#{event.country_id.id}" t-esc="event.country_id.name"/>
                        </li>
                        <li class="active">
                            <span t-field="event.name"/>
                        </li>
                    </ol>
                    <ol name="Event Menu" class="breadcrumb mb0" id="event_menu" t-if="event.menu_id" t-att-data-content_menu_id="editable and event.menu_id.id">
                        <t t-foreach="event.menu_id.child_id" t-as="submenu">
                            <t t-call="website.submenu"/>
                        </t>
                    </ol>
                </div>
            </div>
            <div itemscope="itemscope" itemtype="http://schema.org/Event" class="container details_container">
                <div class="events_details_row mb32">
                    <!-- Event organizer info  -->
                    <div class="event_div">
                        <div class="wrapper">
                            <h4 itemprop="name" class="event_name" t-field="event.name"></h4>
                            
                            <div class="event_info">
                                <div class="name">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                        <circle cx="12" cy="7" r="4" />
                                        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                                    </svg>
                                    <span class="org_name" t-field="event.organizer_id" t-options='{
                                        "widget": "contact",
                                        "fields": ["name"]
                                        }' />
                                </div>
                                <div class="date">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                        <rect x="4" y="5" width="16" height="16" rx="2" />
                                        <line x1="16" y1="3" x2="16" y2="7" />
                                        <line x1="8" y1="3" x2="8" y2="7" />
                                        <line x1="4" y1="11" x2="20" y2="11" />
                                        <line x1="11" y1="15" x2="12" y2="15" />
                                        <line x1="12" y1="15" x2="12" y2="18" />
                                    </svg>
                                    <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options='{"hide_seconds":"True"}'> </span>
                                </div>
                                <div class="location">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                        <circle cx="12" cy="11" r="3" />
                                        <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />
                                    </svg>
                                    <span t-field="event.organizer_id" t-options='{
                                        "widget": "contact",
                                        "fields": ["address"]
                                        }' />
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- location on the map  -->
                    <div class="event_div">
                        <div class="wrapper">
                            <h4> Location on the Map </h4>
                            <span>
                                <t t-if="event.google_map_img()">
                                    <a t-att-href="event.google_map_link()" target="_BLANK">
                                       <img t-att-src="event.google_map_img()" width="100%%"/>
                                    </a>
                                </t>
                                <t t-else="1">
                                    <a class="google_maps" t-att-href="event.google_map_link()" target="_BLANK">Google Maps</a>
                                </t>
                            </span>
                            <div class="event_info">
                                <div class="location">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                        <circle cx="12" cy="11" r="3" />
                                        <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />
                                    </svg>
                                    <span t-field="event.organizer_id" t-options='{
                                        "widget": "contact",
                                        "fields": ["address"]
                                        }' />
                                </div>
                                <div class="location">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-phone" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                        <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
                                    </svg>
                                    <span t-field="event.organizer_id" t-options='{
                                        "widget": "contact",
                                        "fields": ["phone", "mobile"]
                                        }' />
                                </div>
                                <div class="location">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-opened" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                        <polyline points="3 9 12 15 21 9 12 3 3 9" />
                                        <path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" />
                                        <line x1="3" y1="19" x2="9" y2="13" />
                                        <line x1="15" y1="13" x2="21" y2="19" />
                                      </svg>
                                    <span t-field="event.organizer_id" t-options='{
                                        "widget": "contact",
                                        "fields": ["email"]
                                        }' />
                                </div>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="container events_details_row  ">
                <div class="join_us event_div">
                    <div class="wrapper sponsors_wrapper">
                        <h4> Join us now in  <t t-esc="event.name"/>  </h4>
                        <div class="row mt32 mb32">
                            <t t-raw="0"/>
                        </div>
                    </div>
                </div>
                <div class="join_us event_div">
                    <div class="wrapper">
                        <h4> Join as a Sponsor </h4>
                        <span class="trigger_sponsors_modal btn btn-primary btn-block"> Join </span>
                        <div id="response"></div> 
                        <div id="sponsors_modal" class="modal custom_modal fade" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-lg">
                                <form id="sponsors_form_reg"  method="POST"  class="form">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                                            <h4 class="modal-title" id="myModalLabel"><strong>Sponsors</strong></h4>
                                        </div>
                                        <div class="modal-body">
                                            <!-- <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> -->
                                            <input type="hidden" id="eid" name="id"  t-att-value="event.id"/>
                                            <div class="form-group">
                                                <label for="sponsprs_types"> Sponsor Type </label>
                                                <select name="sponsor_type_id" id="sponsprs_types" class="form-control custom-select">
                                                    <option value="-- Select Type --" id="select_type" disabled="disabled"> -- Select Type -- </option>
                                                </select> 
                                            </div>
                                            <input type="hidden" id="userId" name="partner_id"  t-att-value="request.env.user.id"/>
                                            <input type="hidden" id="eventId" name="event_id"  t-att-value="event.id"/>
                                            <div class="form-group">
                                                <label> URL </label>
                                                <input type="text" id="url" name="url" class="input form-control"/>
                                            </div>
                                            <div class="new_sponsor w-100"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="">
                                                <button type="submit" id="submit" class="btn btn-primary submit_sponsors">Continue</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container sponsors_container mb16 hidden-print" t-if="event.sponsor_ids">
                <div class="sponsors_wrapper">
                    <h4 class="text-center">Our Sponsors</h4>
                    <div class="row">
                        <div t-attf-class="oe_sponsor" t-foreach="event.sponsor_ids" t-as="sponsor">
                            <t t-if="sponsor.url">
                                <a t-att-href="sponsor.url" style="position: relative; display: inline-block;">
                                    <span t-field="sponsor.image_medium"
                                        t-options='{"widget": "image", "class": "shadow"}'/>
                                    <div class="ribbon-wrapper">
                                        <div t-field="sponsor.sponsor_type_id" t-attf-class="ribbon ribbon_#{sponsor.sponsor_type_id.name}"/>
                                    </div>
                                </a>
                            </t>
                            <t t-if="not sponsor.url">
                                <span style="position: relative; display: inline-block;">
                                    <span t-field="sponsor.image_medium"
                                        t-options='{"widget": "image", "class": "shadow"}'/>
                                    <div class="ribbon-wrapper">
                                        <div t-field="sponsor.sponsor_type_id" t-attf-class="ribbon ribbon_#{sponsor.sponsor_type_id.name}"/>
                                    </div>
                                </span>
                            </t>
                        </div>
                    </div>
                </div>
            </div>
           
		</xpath>
	</template>


    

    <template id="sponsors_holder" inherit_id="website_event_track.event_sponsor" >
        <xpath expr="//div[hasclass('container')]" position="replace">

        </xpath>

    </template>
    <!-- modal_attendees_registration -->
    <template id="attendans" inherit_id="website_event.registration_attendee_details" >
        <xpath expr="//div[@id='modal_attendees_registration']" position="replace">
            <div id="modal_attendees_registration" class="modal custom_modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg">
                    <form id="attendee_registration" t-attf-action="/event/#{slug(event)}/registration/confirm" method="post" class="js_website_submit_form">
                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                                <h4 class="modal-title" id="myModalLabel"><strong>Attendees</strong></h4>
                            </div>
                            <div class="modal-body">
                                <div class="container">
                                    <t t-set="counter_type" t-value="1"/>
                                    <t t-set="counter" t-value="0"/>
                                    <t t-foreach="tickets" t-as="ticket">
                                        <h4 class="page-header mt16">
                                            <strong>
                                                Ticket Type #<t t-raw="counter_type"/>: <t t-esc="ticket['name']"/>
                                                <t t-if="ticket['price'] == 0">(Free)</t>
                                            </strong>
                                        </h4>
                                        <t t-foreach="range(1, ticket['quantity'] + 1)" t-as="att_counter" name="attendee_loop">
                                            <t t-set="counter" t-value="counter + 1"/>
                                            <div class="row mb4">
                                                <t t-set="attendee_placeholder">Attendee #%s</t>
                                                <div class="attendans_wrapper">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label> Name </label>
                                                            <input class='form-control' type='text' t-attf-name="#{counter}-name" required="This field is required" t-att-placeholder="attendee_placeholder %counter"/>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label> Email </label>
                                                            <input class='form-control' placeholder="Email" type='email' t-attf-name="#{counter}-email" required="This field is required"/>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label> Phone </label>
                                                            <input class='form-control' placeholder="Phone" type='tel' t-attf-name="#{counter}-phone"/>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                                <input class='hidden' type='text' t-attf-name="#{counter}-ticket_id" t-attf-value="#{ticket['id']}"/>
                                            </div>
                                        </t>
                                        <t t-id="myReg" t-call="website_event.registration_template">
                                            <div class="form-group">
                                                <label> Quantity </label>
                                                <div class="col-xs-6 col-md-3">
                                                    
                                                    <t t-if="tickets_available">
                                                        <link itemprop="availability" content="http://schema.org/InStock"/>
                                                        <t t-raw="quantity"/>
                                                    </t>
                                                    <t t-else="">
                                                        <span itemprop="availability" content="http://schema.org/SoldOut"> 
                                                            Sold Out
                                                        </span>
                                                    </t>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-6 col-md-3" t-raw="price"/>
                                            </div>
                                            <div class="registeration_end">
                                                Registration End Date
                                                <div class="col-xs-6 col-md-3" t-raw="registration_end"/>
    
                                            </div>
                                        </t>
                                        

                                        
                                        <t t-set="counter_type" t-value="counter_type + 1"/>
                                    </t>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="pull-left">
                                    <button type="submit" class="btn btn-primary">Continue</button>
                                    <button type="button" class="btn btn-default js_goto_event" data-dismiss="modal">Cancel Registration</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </xpath>
    </template>

<!--    <template id="reg_temp" inherit_id="website_event.registration_template" name="event reg">-->
<!--        <xpath expr="//form[@id='registration_form']" position="replace">-->
<!--            <form id="registration_form" t-attf-action="/event/#{slug(event)}/registration/new" method="post" class="panel panel-default" t-if="buy">-->
<!--                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>-->
<!--                <t t-id="tickets">-->
<!--                    <t t-set="registration_end">-->
<!--                        <t t-if="event.date_begin">-->
<!--                            Date : -->
<!--                            <span t-esc="event.date_begin_located"/>-->
<!--                        </t>-->
<!--                        <t t-if="not event.date_begin">-->
<!--                            <span>Unlimited</span>-->
<!--                        </t>-->
<!--                    </t>-->
<!--                    <t t-set="price">-->
<!--                        Price is -->
<!--                        <span itemprop="price" content="0">-->
<!--                            Free-->
<!--                        </span>-->
<!--                    </t>-->
<!--                    <t t-set="quantity">-->
<!--                        <span class="my_label"> Number of Attendance </span>-->
<!--                        <select name="nb_register-0" class="form-control">-->
<!--                            <t t-foreach="range(1, (event.seats_availability == 'unlimited' or event.seats_available &gt; 9) and 10 or event.seats_available+1)" t-as="nb">-->
<!--                                <option t-esc="nb" t-att-selected="nb == 1 and 'selected'"/>-->
<!--                            </t>-->
<!--                        </select>-->
<!--                    </t>-->
<!--                </t>-->
<!--                <div class="panel-footer">-->
<!--                    <div class="row">-->
<!--                        <div class="col-md-4 col-md-offset-8 col-lg-3 col-lg-offset-9">-->
<!--                            <button type="submit" class="btn btn-primary btn-lg btn-block a-submit" t-attf-id="#{event.id}">-->
<!--                                Register Now-->
<!--                            </button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </form>-->
<!--        </xpath>-->
<!--    </template>-->

<!--    <template id="ticket_redesign" inherit_id="website_event.ticket" name="ticket design">-->
<!--        <xpath expr="//div[@class='panel-body']" position="replace">-->
<!--            <div class="panel-body">-->
<!--                <div class="row" itemscope="itemscope" itemtype="http://schema.org/Offer">-->
<!--                    <div class="col-xs-6 d-none end_reg hidden-md hidden-lg">-->
<!--                        <h6>End of Registration</h6>-->
<!--                    </div>-->
<!--                    <div class="col-xs-6 d-none col-md-3" itemprop="availabilityEnds" t-raw="registration_end"/>-->
<!--                    <div class="clearfix d-none hidden-md hidden-lg mb4"/>-->
<!--                    <div class="col-xs-6 d-none hidden-md hidden-lg">-->
<!--                        <h6>Price</h6>-->
<!--                    </div>-->
<!--                    <div class="col-xs-6 col-md-3 d-none" t-raw="price"/>-->
<!--                    <div class="clearfix hidden-md d-none hidden-lg mb4"/>-->
<!--                    <div class="col-xs-6 hidden-md d-none hidden-lg">-->
<!--                        <h6>Quantity</h6>-->
<!--                    </div>-->
<!--                    <div class="col-xs-6 number_of_attendance col-md-3">-->
<!--                        <t t-if="tickets_available">-->
<!--                            <link itemprop="availability" content="http://schema.org/InStock"/>-->
<!--                            <t t-raw="quantity"/>-->
<!--                        </t>-->
<!--                        <t t-else="">-->
<!--                            <span itemprop="availability" content="http://schema.org/SoldOut">-->
<!--                                Sold Out-->
<!--                            </span>-->
<!--                        </t>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <script src="/event_website_custom/static/src/js/sponsors.js"></script>-->
<!--            </div>-->
<!--        </xpath>-->
<!--    </template>-->

    <template id="events_details_assets" inherit_id="website.assets_frontend" name="events details">
        <xpath expr="." position="inside">
            <link rel="stylesheet" href="/event_website_custom/static/src/css/event_details.css"/>
        </xpath>
    </template>
</odoo>