  
  <style>
  
    #container{
        min-width: 70em !important;
    }
  </style>
  <!-- Modal -->
  
  <div class="modal fade" id="funnelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Save Funnel</h5>
        </div>
        <div class="modal-body">
         <div class="form-group">
             <label for="">Funnel Name</label>
             <input ng-blur="validateFunnel()" type="text" id="funnelname" class="form-control">
             <label for="">Funnel Description</label>
             <textarea name=""  id="funneldesc" cols="7" rows="3" class="form-control"></textarea>
         </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-primary" ng-click="cancelFunnel()" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-sm btn-primary" ng-click="createFunnel()">Save</button>
        </div>
      </div>
    </div>
  </div>
<!----Modal ends -->


<div class="panel panel-info remove-padding" data-sortable-id="chart-js-6">
    <div class="panel-heading">
                    <h4 class="panel-title p-heading" >{{mode}} Journeys</h4>
                    <a style=" margin-top: -20px;float:right; font-weight: 700;" href="{{PANEL_URL}}/dashboard?action=insideapp#/journey/table" class="panel-title p-heading" > X </a>
    </div>
    <br>
    <br>
    <div style="width:100%;">
        <div class="row">
            <div class="col-sm-4 journeyDivs">
                    <div style="display: flex;padding:0 20px;">
                        <div style="padding-top: 0.8rem">Journey Name : &nbsp;</div>
                        <input type="text" class="textbx" ng-model="journeyName" placeholder="Enter the journey name">
                    </div>
                        
            </div>
            <div class="col-sm-4 journeyDivs">
                    <div style="display: flex;padding:0 20px;">
                        <div style="padding-top: 0.8rem">Journey Description : &nbsp;</div>
                        <input type="text" class="textbx" ng-model="journeyDescription" placeholder="Enter the journey description">
                    </div>
            </div>

            <div class="col-sm-4 journeyDivs">
              <div style="display: flex;padding:0 20px;">
                  <div style="padding-top: 0.8rem">Platform: &nbsp;</div>
                  <select name="" id="" class="form-control" style="max-width: 100px;" ng-model="pf"  ng-change="selectedPlatform(pf)" >
                    <option ng-show="false" value="Platform" selected disabled>Platform</option>  
                    <option value="all">All</option>
                    <option value="android">Android</option>
                    <option value="ios">iOS</option>
                    <option value="web">Web</option>
                  </select>
              </div>
      </div>

      <!--  new create  -->
        <div class="col-sm-3" ng-show="journeyKey == true">
          <div style="display: flex;">
            <div style="padding-top: 0.8rem">Select a Journey: &nbsp;</div>
            <select id="journeydd" data-index="{{$index}}" class="form-control input-sm" style="width: 135px;"
              ng-model="selectedJourney" ng-change="onJourneySelect(selectedJourney)"
              ng-options="journey for journey in journeysArray">
              <option disabled selected value="">Select a journey</option>
            </select>
          </div>
        </div>
        </div>
        <br/>
        <div class="row">
                <div class="col-sm-4 journeyDivs">
                        <div style="display: flex;padding:0 20px;">
                                <div style="padding-top: 0.8rem">Start Event : &nbsp;</div>
                                <select class="padding form-control" style="width:120px;" ng-model="st" ng-change="selectedSpecificStartEvent(st);">
                                                    <option ng-show="false" value="" selected disabled>Select Event</option>  
                                                    <option value="All" >All</option>                              
                                                    <option ng-selected="st==stack"  ng-repeat="stack in topGraphEvents">{{stack.name}}</option>  
                                                </select>
                        </div>    
                </div>
                <div class="col-sm-4 journeyDivs">
                        <div style="display: flex;padding:0 20px;">
                                <div style="padding-top: 0.8rem">End Event : &nbsp;</div>
                                <select class="padding form-control" style="width:120px;" ng-model="ed" ng-change="selectedSpecificEndEvent(ed);">
                                                    <option ng-show="false" value="" selected disabled>Select Event</option>  
                                                     <option value="All" >All</option>                             
                                                    <option ng-selected="ed==stack"  ng-repeat="stack in topEndEvents">{{stack.name}}</option>  
                                                </select>
                                       </div>         
                </div>

                <div class="col-sm-4 journeyDivs">
                  <div style="display: flex;padding:0 20px;">
                          <div style="padding-top: 0.8rem">Period : &nbsp;</div>
                          <select class="padding form-control" ng-model="period" ng-change="selectedPeriod(period)" style="width:120px;" >
                                              <option ng-show="false" value="Period" selected disabled>Period</option>  
                                              <!-- <option value="today">Today</option> -->
                                              <option value="yesterday">Yesterday</option>
                                              <option value="last7days">Last 7 Days</option>
                                              <option value="last30days">Last 30 Days</option>
                                              <option value="thismonth">This Month</option>
                                              <option value="lastmonth">Last Month</option> 
                          </select>
                   </div>         
          </div>
            </div>
       
        </div>

    <div class="form-group m-r-10" style="padding-left:20px;margin-top: 20px">
                        <!-- <label style="color:red" ng-show="isError">{{errorMsg}}</label> -->
                        <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="getJourneyEventDataN(1)">Preview</button>
                        <!-- <button class="btn btn-sm btn-primary m-r-5" ng-show="isEdit" type="button" ng-click="updateJourney()">Update</button> -->
                        <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="validateJourneyName()">Save</button>
                        <!-- <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="resetControls()">Cancel</button> -->
                        <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="reset()">Reset</button>

    </div> 
     <label style="color:red; font-weight: 600; padding-left: 20px;" ng-show="isError">{{errorMsg}}</label>
     <div class="row" >
        <div class="col-md-8"  style="position: relative; ">
            <div ng-if="isAvailable=='1'"><p style="font-weight:600; margin-left: 4px; color: red;">There is no available Journey for given start and end event</p>
            </div>
                <div id="container" style="min-width: 65em;"></div>
        </div>
        <div class="col-md-4" ngIf="pointArray.length" style="position: sticky;top: 50px;">
            <table class="table table-striped" id="journey_table" style="display: none;">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Value</th>
                    <th>Percentage</th>
                  </tr>
                </thead>
                <tbody> 
                </tbody>
              </table>
        </div>
    </div>
    

</div>
<style type="text/css">


#container {
    min-width: 80em;
    height: 70em;
    margin: 0;
    padding: 0;
}
.remove-padding{
    margin-top:-15px;
    margin-left: -15px;
    margin-right: -15px;
} 
.label{
    padding-top: 0.8rem;
}
.JourneyName{
    font-size: 2rem;
}
.textbx{
    border-color:#ccd0d4;
    height: 34px;
    border: 1px solid #ccd0d4;
    border-top-color: rgb(204, 208, 212);
    border-right-color: rgb(204, 208, 212);
    border-bottom-color: rgb(204, 208, 212);
    border-left-color: rgb(204, 208, 212);
background:#fff;

font-size: 12px;

padding: 6px 12px;

line-height: 1.42857143;
color: #555;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;
}
hr{
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 1px solid #eee;
    width:98%;
}
</style>
    