<div class="row" >
    <form class="form-horizontal">
        <div class="form-group" style="float:left;padding-left:30px;margin-bottom:0px;">
            <h1 class="page-header">
                Setup Transaction Funnels (Customer Journey)
            </h1>
            Transaction Funnels are a sequence of Triggers/Events in your app which would help you better understand the customer’s journey while using your mobile app. This helps in better visualizing at which point in your transaction funnel, users drop of most or can be helped with in-app notifications or better messaging.
            <p>
        </div>        
    </form>
</div>

<div class="row"  style="display:block">
 
    <style type="text/css">
        .item-container {
            display: flex; /* Use flexbox to align items horizontally */
            align-items: center; /* Align items vertically center */
            margin-bottom: 10px; /* Optional: Add margin between each set */
        }
        .padding{
            padding: 6px 2px!important;
        }
        .select2-container.form-control .select2-choice{
            margin: -6px -2px!important;
        }

        /*********************Multiselect**************************************/
        .dropdown-toggle.btn-default {
            background: #ffffff;
            border-color: #ccd0d4;
            color: rgb(58, 58, 58);
            font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 12px;
        }

        .btn-default:focus,
        .btn-default:hover,
        .open .dropdown-toggle.btn-default {
            background: #ffffff;
            border-color: #ccd0d4;
            color: rgb(58, 58, 58);
            font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 12px;
        }


        .dropdown-menu>li>a:focus,
        .dropdown-menu>li>a:hover {
            background: rgb(247, 133, 91);
            font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 12px;
        }

        .dropdown-menu {
            background: white;
            /* color: white !important; */
            color: white;

        }
        .multiselect-selected-text{
            color: black;
            padding-right: 20px;
        }
        .multiselect dropdown-toggle btn btn-default{
         
    /* padding: 6px 2px!important; */
            border: 1px solid #ccd0d4;
            height: 35px ;
        }
 /*********************Multiselect**************************************/

        #p1{
            display: none;
        }
        #advance-daterange{
            display: none;
        }
        #ph{
            display: none;
        }

        .form-horizontal .form-group{
            margin-right: 0px;
        }

    </style>
    <div class="col-md-12 ui-sortable">

        <div class="panel panel-info" data-sortable-id="chart-js-6">
                <div class="panel-heading">
                    <h4 class="panel-title p-heading" >{{mode}} Funnels</h4>
                </div>
            <div class="panel-body" >
                
                <form class="form-inline" >
                    <div class="form-group m-r-10" style="padding-left:20px;padding-bottom:10px;padding-right:150px; display: flex; align-items: center;" > 
                     
                        User should have performed the below events in a sequence for 
                        &nbsp;&nbsp;
                        <select class="padding form-control" style="width:100px;" ng-model="funnel.unit" ng-change="showHideCustom({{'funnel.unit'}})">
                            <option ng-show="false" value="" selected disabled>Period</option>                              
                            <option ng-repeat="opt in currentUnits" >{{opt}}</option>  
                        </select>
        
                        <div class="form-group m-r-10" ng-show="showCustom">  
                        <input id="dur" type="text" style="width:80px; margin-left: 10px;" ng-model="funnel.duration"  class="form-control" name="timeduration" ng-keypress="filterNumberValue($event)" maxlength="3" placeholder="Duration"> 
                        <select class="form-control" style="width:100px; height:31px; border-radius:3px; margin-left: 10px;" ng-model="funnel.customunit" >
                            <option value="" ng-show="false" selected disabled>Period</option>  
                            <option ng-repeat="opt in units">{{opt}}</option>  
                        </select>
                        </div>
                        <div class="form-group" style="margin-left: 5px;" ng-show="showCustomWithDates">
                            <!-- <label class="col-md-3 control-label">Date Range</label> -->
                            <div class="input-group input-daterange" autocomplete="off" >
                                <input type="text" class="form-control" name="start" placeholder="Date Start" id="funnelStartDate" ng-model="funnel.startDate" style="width:150px;" autocomplete="off" />
                                <span class="input-group-addon">to</span>
                                <input type="text" class="form-control" name="end" placeholder="Date End" ng-model="funnel.endDate" id="funnelEndDate" autocomplete="off" />
                            </div>
                            
                        </div>
                        &nbsp;&nbsp;
                        and platform
                        &nbsp;&nbsp;
                        <select class="padding form-control" ng-model="platform"
                                style="background: #fff !important; width:100px;" multiple id="platformOpt">
                                <option value="Android">Android</option>
                                <option value="IOS">IOS</option>
                                <option value="Web">Web</option>
                        </select>
                    </div>
                    </div>
                    <hr/>
                    <div style="height:160px;overflow:auto">
                        <fieldset  data-ng-repeat="item in funnel.events" style="padding-left:44px;padding-bottom:10px;align-items: center;">
                            <div id="main1">
                                <div id="journey" class="form-group" ng-show ="journeyKey == true">
                                    <select id="journeydd" data-index="{{$index}}" class="form-control input-sm"  
                                         style="width: 135px;" 
                                         ng-model="item.selectedJourney"
                                         ng-change="onJourneySelect(item.selectedJourney)" 
                                         ng-options="journey for journey in journeysArray">
                                        <option disabled selected value="">Select a journey</option>
                                    </select>
                                </div>
                                &nbsp;
                                <span style="margin-top: -12px;" ng-show="$first">When user does</span> &nbsp;&nbsp;&nbsp;
                                <span style="margin-top: -12px;" ng-show="!$first" id="conditionMsg{{$index}}">And does...</span>&nbsp;&nbsp;&nbsp;
                                </br>
                                <div ng-show ="showJourneyDropdown == false" class="form-group m-r-10" style="display:inline-block;" >                             
                                    <select class="events_list padding form-control" style="width:135px;margin-left: -12px;" ng-model="item.selectedEvent" ng-options="eventItem as eventItem.event for eventItem in eventList track by eventItem.event" ng-change="operandChange('{{item.selectedEvent.event}}{{item.selectedAttribute.name}}');validateProperty($index);" ng-disabled="!$last && !isEdit">
                                        <option value="" ng-show="false" selected disabled> Event</option>                              
                                    </select>
                                    
                                </div>
                                <div ng-show ="showJourneyDropdown == true" id="event" class="form-group m-r-10" style="display:inline-block;" >                           
                                    <select class="events_list padding form-control" style="width:135px;margin-left: -12px;" ng-model="item.selectedEvent" ng-options="eventItem as eventItem.event for eventItem in eventListData[$index] track by eventItem.event" ng-change="operandChange('{{item.selectedEvent.event}}{{item.selectedAttribute.name}}');validateProperty($index);" ng-disabled=" (!item.selectedJourney || !$last  || isEdit) ">
                                        <option value="" ng-show="false" selected disabled> Event</option>                              
                                    </select>
                                    
                                </div>
                                <!-- Start div of Add and Remove Button For Event  -->
                                <div class="form-group" style="display:inline-block;">
                                    <button type="button" class="btn btn-danger btn-sm editable-submit"  ng-click="removeEventFromFunnel($index)" title="Remove Event"><i class="fa fa-minus"></i>
                                    </button> 
                                    <button type="button" class="btn btn-primary btn-sm editable-submit" ng-disabled="$index+1 == funnelSteps" ng-show="$last" ng-click="addNewEventToFunnel()" title="Add Event"><i class="fa fa-plus"></i>
                                    </button>                                    
                                </div>
                                <!--End Div of Add and Remove Button For Event  -->


                                <!--  Start div of attributes as ng-repeat -->
                                <div ng-repeat="attr in  getList(item.selectedEvent.list)" 
                                       ng-init="parentIndex = $parent.$parent.$index ;"
                                       ng-if="$index <= currentIndex || $index <= getMaxIndex(item.selectedEvent.event)" 
                                       class="form-group m-r-10 item-container"
                                       ng-show="item.selectedEvent.list.length > 0"
                                       style = "margin-left: 30px;" >

                                       <!--  Attributes select option -->
                                        <select class="padding form-control" 
                                                ng-if=" $index <=  getMaxLimit(parentIndex , item.selectedEvent.event)"
                                                style="width: 135px; margin-left: 12px; display: inline-block;"
                                                ng-model="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index]" 
                                                ng-change="updateSelection()"
                                                ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                                ng-options="option as option.name for option in item.selectedEvent.list track by option.name">
                                            <option value="" selected disabled ng-show="false">Attribute</option>
                                        </select>
                                
                                        <!--  operator for string select option -->

                                        <select ng-if="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].type=='string'"
                                                class="padding form-control" 
                                                style="display: inline-block; width:100px; margin-left: 12px;"
                                                ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                                ng-model="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].operator"
                                                ng-options="op.label as op.text for op in stringOperators">
                                            <option value="" selected disabled ng-show="false"> Operator</option>
                                        </select>
                                
                                        <!--  operator for number select option -->

                                        <select ng-if="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].type=='number'"
                                                class="padding form-control" 
                                                ng-model="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].operator"
                                                ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                                style="width:100px; display: inline-block;  margin-left: 12px;"
                                                ng-options="op.label as op.text for op in numberOperators">
                                            <option value="" selected disabled ng-show="false"> Operator</option>
                                        </select>
                                
                                          <!--  operator for boolean select option -->

                                        <select ng-if="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].type=='boolean'"
                                                class="padding form-control" 
                                                style="display: inline-block; width:100px; margin-left: 12px;"
                                                ng-model="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].operator"
                                                ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                                ng-options="op.label as op.text for op in booleanOperators">
                                            <option value="" ng-show="false" selected disabled> Operator</option>
                                        </select>
                                
                                        <!--  operator for date select option -->

                                        <select ng-if="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].type=='date'"
                                                class="padding form-control" 
                                                style="display: inline-block; width:100px; margin-left: 12px;"
                                                ng-model="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].operator"
                                                ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                                ng-options="op.label as op.text for op in dateOperators">
                                            <option value="" ng-show="false" selected disabled> Operator</option>
                                        </select>
                                
                                
                                
                                        <!--  operator Value Input  for String and Number -->
                                
                                        <input type="text"
                                               ng-if="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].type=='string' || multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].type=='number'"
                                               style="display:inline-block; width:90px; margin-left: 12px;"
                                               ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                               ng-model="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].attributeValue"
                                               placeholder="Enter Value" class="form-control" />
                                
                                         <!--  operator Value Input  for Date -->
                                        <input type="date"
                                               ng-if="multiSelectedAttributes[item.selectedEvent.event][$index].type=='date' && (multiSelectedAttributes[item.selectedEvent.event][$index].operator_$index=='eq' || multiSelectedAttributes[item.selectedEvent.event][$index].operator_$index=='btw' || multiSelectedAttributes[item.selectedEvent.event][$index].operator_$index=='nbtw' || multiSelectedAttributes[item.selectedEvent.event][$index].operator_$index=='ne') "
                                               style="display:inline-block; width:90px; margin-left: 12px;"
                                               ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                               ng-model="multiSelectedAttributes[item.selectedEvent.event][$index].attributeValue"
                                               placeholder="Enter Value" class="form-control" />
                                
                                        <input type="date"
                                               ng-if="multiSelectedAttributes[item.selectedEvent.event][$index].type=='date' && (multiSelectedAttributes[item.selectedEvent.event][$index].operator_$index=='btw' || multiSelectedAttributes[$index][item.selectedEvent.event].operator_$index=='nbtw') "
                                               style="display:inline-block; width:90px; margin-left: 12px;"
                                               ng-disabled="$index < getMaxAttributeIndex(parentIndex  , item.selectedEvent.event)"
                                               ng-model="multiSelectedAttributes[$index].attributeValue1"
                                               placeholder="Enter Value" 
                                               class="form-control"/>
                                
                                        <input type="date"
                                               class="form-control" 
                                               ng-if="multiSelectedAttributes[item.selectedEvent.event][$index].type=='date' && (multiSelectedAttributes[item.selectedEvent.event][$index].operator_$index=='contains' || multiSelectedAttributes[$index][item.selectedEvent.event].operator_$index=='in'  || multiSelectedAttributes[$index][item.selectedEvent.event].operator_$index=='nin' || multiSelectedAttributes[$index][item.selectedEvent.event].operator_$index=='startsWith' || multiSelectedAttributes[$index][item.selectedEvent.event].operator_$index=='endsWith' || multiSelectedAttributes[$index][item.selectedEvent.event].operator_$index =='doesnt startsWith' || multiSelectedAttributes[$index][item.selectedEvent.event].operator_$index == 'doesnt endsWith') "
                                               ng-model="multiSelectedAttributes[item.selectedEvent.event][$index].attributeValue1"
                                               ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                               placeholder="Enter Value" 
                                               style="width:160px;margin-left: 12px;" />
                                
                                         <!--  operator Value Input  for boolean  -->
                                        <select ng-if="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].type == 'boolean'"
                                                style="display:inline-block; width:160px; margin-left: 12px;" 
                                                class="padding form-control"
                                                ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                                ng-model="multiSelectedAttributes[parentIndex][item.selectedEvent.event][$index].attributeValue" >
                                            <option value="" selected disabled ng-show="false"> Value</option>
                                            <option value="true">True</option>
                                            <option value="false">False</option>
                                        </select>
                                
                                
                                        <!-- Minus/Remove Button  of attributes-->
                                        <div ng-show="showPlusMinusButton"
                                            ng-if=" $index <=  getMaxLimit(parentIndex , item.selectedEvent.event)"
                                             style="display: inline-block; margin-left: 12px;">

                                            <button type="button" 
                                                    ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                                    class="btn btn-sm btn-outline-secondary" 
                                                    ng-click="removeDropdownSet(parentIndex,item.selectedEvent.event, $index)"
                                                    title="Remove Attribute">
                                                    <i class="fa fa-minus fa-xs"></i>
                                            </button>
                                        </div>

                                      <!-- Plus/Add Button  of attributes-->


                                        <div ng-show="showPlusMinusButton"
                                            ng-if=" $index <=  getMaxLimit(parentIndex , item.selectedEvent.event)"
                                             style="display: inline-block;  margin-left: 12px;">

                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-secondary"
                                                    ng-disabled="$index < getMaxAttributeIndex(parentIndex , item.selectedEvent.event)"
                                                    ng-click="addDropdownSet(parentIndex,item.selectedEvent.event,$index)"
                                                    title="Add Attribute">
                                                <i class="fa fa-plus fa-xs"></i>
                                                
                                            </button>
                                        </div>
                                
                                    </div>
                        </div>
                        </fieldset>
                    </div>
                     
                    <hr/>
                    <div class="form-group m-r-10" style="padding-left:20px;padding-bottom:20px;">
                        <label style="color:red" ng-show="isError">{{errorMsg}}</label>
                        </br>
                        <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="openModel()">Save</button>
                        <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="resetControls()">Cancel</button>

                        <a class="btn btn-sm btn-primary m-r-5" type="button" href="dashboard?action=insideapp#/funnels/data">Back</a>

                    </div>
                </form>
                                    
            </div>
        </div>
    </div>
 </div>

<!-- Dialog  Start-->
<div class="modal fade" id="modal-dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Save Funnel</h4>
            </div>
            <div class="modal-body">
                
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Funnel Name</label>
                        <div class="col-md-9">
                            <input type="text" placeholder="Enter your funnel name" class="form-control" ng-model="funnel.name" ng-blur="validateFunnelName()" maxlength="50">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Funnel Description</label>
                        <div class="col-md-9">
                            <textarea rows="2" cols="50" placeholder="Enter funnel description" class="form-control" ng-model="funnel.description" maxlength="200"></textarea>
                        </div>
                    </div>
                </form>   
            </div>
            <div class="modal-footer">
                <label style="color:red" ng-show="isFunnelError">{{errorFunnelMsg}}</label>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="saveFunnel()" data-dismiss="modal" ng-disabled="!funnel.name.length>0">OK</button>
               
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="resetControls()" data-dismiss="modal">Cancel</button>
               
            </div>
        </div>
    </div>
</div>
<!-- Dialog  End-->

<style>
    #main1{ 
    margin: 0 auto;
}
#journey    {
    float: left;
    margin-right: 2%;
    margin-top: 20px;
}


</style>