<div class="guest-sub-theme">
  <section id="header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 dept-img"><img src="modules/core/assets/xplo-theme/booking/head.png" class="img-responsive">
          <div class="header-text">
            <h4><%=data.vendordata[0].Servicename%></h4>
            <img src="modules/core/assets/xplo-theme/booking/map.png" class="img-responsive"><span>XYZ Tour </span>
          </div>
        </div>
      </div>
    </div>
  </section>
    <section class="step-container">
        <div class="container">
            <div class="step-text-wrapper">
                <div class="steps">
                    <div class="step active">
                        <div class="circle">
                            <p class="step-number">1</p>
                        </div>
                    </div>
                    <div class="step">
                        <div class="line"></div>
                        <div class="circle">
                            <p class="step-number">2</p>
                        </div>
                    </div>
                    <div class="step">
                        <div class="line"></div>
                        <div class="circle">
                            <p class="step-number">3</p>
                        </div>
                    </div>
                </div>
                <div class="steps-text text-center">
                    <div class="step-text">Departure</div>
                    <div class="step-text">Pricing Details</div>
                    <div class="step-text">Payment Summary</div>
                </div>
            </div>
        </div>
    </section>


  <section id="body-nav">
    <div class="container">
      <div class="row">
          <div class="col-md-12 booking">
              <!-- Templates render here.-->
              <div id="book-tour-step"><%=timingTpl%></div>
          </div>
          <div class="col-md-12">
              <div class="booking booking-controls">
                  <div class="next">
                      <a href="departure.html" data-pre="3" type="button" class="btn btn-danger btn-back">Back</a>
                      <a href="price.html" data-next="1" type="button" class="btn btn-danger btn-next">Next</a>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </section>
<div>

events: {
            'click .btn-next': 'goNextTab',
            'click .btn-back': 'goPrevTab'
        },
 self.tabs = [
                {template: departureTpl},
                {template: priceDetailsTpl},
                {template: paymentSummaryTpl}
            ];
 goNextTab: function (e) {
            var self = this;
            if(e == undefined) {
                self.$el.find('#book-tour-step').html(_.template(departureTpl)({}))
                return true;
            }

            e.preventDefault();
            var viewData = {};
            var context = $(e.currentTarget);
            var nextTab = context.data('next');

            // stop at tab 3, No need to increase data or render.
            if(parseInt(nextTab) > 3) return;

            if(parseInt(nextTab) === 3) {
                viewData.txnid = Math.random().toString(36).substring(10);
            }

            var template = self.tabs[nextTab].template;
            self.$el.find('.steps .step:nth-child(' + (nextTab + 1) + ')').addClass('active');

            if(nextTab == 3) {
                return;
            } else if(nextTab == 1) {
                var details = self.priceDetailsModel.get('priceDetails');
                var tourprice = details[0].ListPrice;
                var a = parseFloat(tourprice);
                var addOnsprice = details[0].VendorAttributeValue;
                var b = parseFloat(addOnsprice);
                var c = a+b;
                var formattedData = {
                    TourPrice:  details[0].ListPrice,
                    AddOns:     details[0].VendorAttributeValue,
                    priceAdult: details[1].VendorAttributeValue,
                    priceChild: details[2].VendorAttributeValue,
                    pay: c
                };
                self.$el.find('#book-tour-step').html(_.template(priceDetailsTpl)({details: formattedData}));
            } else if (nextTab == 2) {
                var self = this;
                var details = self.priceDetailsModel.get('priceDetails');
                var tourprice = details[0].ListPrice;
                var a = parseFloat(tourprice);
                var addOnsprice = details[0].VendorAttributeValue;
                var b = parseFloat(addOnsprice);
                var c = a+b;
                var formattedData = {
                    pay: c
                };
                self.$el.find('#book-tour-step').html(_.template(paymentSummaryTpl)({details: formattedData}));
                context.hide();
            }
            context.data('next', parseInt(nextTab) + 1);
        },
        goPrevTab: function(e) {

        /*Back Button Not Working*/

           var self = this;
            if(e == undefined) {
                self.$el.find('#book-tour-step').html(_.template(priceDetailsTpl)({}))
                return true;
            }
            e.preventDefault();
            var context = $(e.currentTarget);
        }