<style>
    .label__value {
        color: #717a98 !important;
    }

    .label__title {
        color: #30acac !important;
    }
        /* Custom styles for the select element */
        .custom-dropdown {
      position: relative;
      display: inline-block;
    }

    .custom-dropdown select {
      width: 200px;
      padding: 10px;
      font-size: 12px;
      border: none;
      border-radius: 4px;
      background-color: #f2f2f2;
      color: #333;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    .custom-dropdown::after {
      content: "\25BC";
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      font-size: 14px;
      color: #555;
    }
    
    /* Custom style for the option elements within the select */
    .custom-dropdown select option {
      background-color: #fff;
      color: #333;
    }
    
    /* Custom style for the hover state of the option elements */
    .custom-dropdown select option:hover {
      background-color: #f2f2f2;
    }
</style>

<!--Campaign Modal starts-->

<div class="modal fade" id="campModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 style="font-size: 18px;">Launch Campaign</h3>
            </div>  
                <div class="modal-body">
                    <div class="form-group" id="funnel_steps">
                        <div ng-repeat="step in funnelStats"> 
                            <div class="radio">
                                <label style="font-size: 14px;" ><input type="radio" class="campaign"  value="{{step.key}}+h" name="step{{$index+1}}">Users who have done Step {{$index+1}} of {{funnelStats.length}}</label>
                            </div>
                            <div class="radio" ng-show="{{$index+1 == funnelStats.length && !(funnelStats.length == 1)}}">
                                <label style="font-size: 14px;"><input type="radio" class="campaign" value="{{step.key}}+hn" name="step{{$index+1}}">Users who have not done Step {{$index+1}} of {{funnelStats.length}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="aud_detail" style="display: none;">
                        <label for="">Audience Name</label>
                        <input type="text"  id="aud_name" class="form-control"><br>
                        <label for="" >Audience Description</label>
                        <textarea class="form-control" id="aud_description" rows="2"></textarea>
                        
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-sm btn-danger" ng-click="cancelStep()" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-sm btn-primary" id="next" ng-click="nextStep()">Next</button>
                    <button type="button" class="btn btn-sm btn-primary" id="save_aud" style="display: none;"  ng-click="createAud()">Launch</button>
                </div>
                
            
        </div>
    </div>
</div>
<!--Campaign Modal starts-->
<!--Download funnel Modal starts-->
<div class="modal fade" id="downModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 style="font-size: 18px;">Export Funnel Data</h3>
            </div>  
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col col-md-7" id="_download">
                            <div ng-repeat="step in funnelStats">
                                <div class="radio">
                                    <label style="font-size: 14px;" >
                                        <input class="statsHaveDone exports" type="checkbox"  value="{{step.key}}+h" name="{{$index}}" ng-model="stepHaveCheck" ng-change="exportCheck()">
                                        Users who have done Step {{$index+1}} of {{funnelStats.length}}
                                    </label>
                                </div>
                                <div class="radio" ng-show="{{$index+1 == funnelStats.length && !(funnelStats.length == 1)}}"> 
                                    <label style="font-size: 14px;">
                                        <input type="checkbox" class="statsHaveNotDone exports"  value="{{step.key}}+hn" name="{{$index}}"  ng-model="stepHaveNotCheck" ng-change="exportCheck()">
                                        Users who have not done Step {{$index+1}} of {{funnelStats.length}}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col col-md-5" style="margin-top: 10px;" >
                            <button type="button" ng-click="selectedColumn()"  class="btn btn-sm btn-primary" data-toggle="modal" data-target="#attributeModal">Select columns</button>
                        </div>
                        <div ng-show="attrArray.length > 0" class="col col-md-5" style="margin-top: 10px; display: flex;" >
                            <div class="custom-dropdown">
                            <select class="form-control" style="width: 130px;" ng-model="sortedAttribute" ng-change="selectSortedAttr(sortedAttribute)"
                                ng-options="funnel as funnel.value for funnel in attrArray">
                                <option value="" ng-model="default">Sort Attribute</option>
                            </select>
                            </div>
                             <div class="custom-dropdown">
                            <select  name="" id="SortBy_" ng-model="sortValue" ng-change="selectedSortValue(sortValue)" style="width: 100px; margin-left: 5px;" hidden>
                                <option value="">Sort By</option>
                                <option value="ASC">ASC</option>
                                <option value="DESC">DESC</option>
                            </select>
                        </div>
                    </div>
                    
                </div>
                </div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-sm btn-primary" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-sm btn-primary" id="next" ng-click="downloadFunnel()">Export</button>
                </div>
        </div>
    </div>
</div>
<!--Download funnel Modal starts-->
     <!-- attribute modal starts here -->
     <div class="modal fade" id="attributeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 style="font-size: 18px;">Select Attributes</h3>
            </div>  
                <div class="modal-body">
                    <div class="row" ng-show="filteredSelectedAttribute.length > 0">
                        <div class="col col-md-4">
                          <label style="font-weight: bold;" for="">Select All</label> 
                        </div>
                        <div class="col col-md-4">
                          <input id="selectAll" type="checkbox" name="column" value="" ng-model="selectAll" ng-click="selectAllColumns(selectAll)">
                        </div>
                      </div>
                    
                        <div ng-repeat="step in filteredSelectedAttribute">
                            <h4 for="">{{step.events.eventName}}</h4>
                            <div class="row">
                                <div class="col col-md-4">
                                    <label for="">{{step.events.eventName}}_Date</label>
                                </div>
                                <div class="col col-md-4">
                                    <input type="checkbox" class="dateCol allSelectColumn" name="column" value="{{step.events.eventName}}_Date" ng-model="dateCol" ng-click="AttributeCheck(attr)">
                                </div>
                            </div>
                            <div ng-repeat= "attr in step.events.list">
                                <div class="row">
                                <div class="col col-md-4">
                                  <label for="">{{attr.name}}</label>
                                </div>
                                <div class="col col-md-8">
                                    <input type="checkbox" class="attr allSelectColumn" name="{{step.events.eventName}}" value="{{attr.name}}" data-index="{{$parent.$index}}" ng-model="attrCol" ng-click="AttributeCheck(attr)">
                                </div>
                               </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-sm btn-primary" ng-click="selectedArributes()" data-dismiss="modal">Done</button>
                    <!-- <button class="btn btn-sm btn-primary" id="next" ng-click="downloadFunnel()">Export</button> -->
                </div>
        </div>
    </div>
</div>
     <!-- attribute modal ends here -->

<!-- <div ng-if="selectedFunnel.unit=='Custom'"><strong>Last {{selectedFunnel.duration}} {{selectedFunnel.customunit}}</strong></div>
 <div ng-if="selectedFunnel.unit!='Custom'"><strong>{{selectedFunnel.unit}} {{selectedFunnel.duration}} {{selectedFunnel.customunit}}</strong></div> -->
 <img style="width:140px;
 height: 110px;
 margin-left: 30%;
 position: absolute;
 margin-top: 15%;
 z-index: 1000;
 margin-left: 31%;" id="funnel_loader" src="https://gccuat.appice.io/assets/img/global_loader.gif">

<form class="form-inline" style="float:right;">
    <div class="form-group" id="funnel_drop">
        <select class="form-control" ng-model="selectedFunnel" ng-change="getFunnelStats(selectedFunnel)"
            ng-options="funnel as funnel.name for funnel in eventFunnels">
            <option value="" ng-model="default">Select Funnel</option>
        </select>
    </div>
    <div class="form-group">
        <a class="btn btn-primary m-r-5" type="button" data-toggle="modal" id="launchcampbtn-funnel" data-target="#campModal">
            Launch Campaign
        </a>
    </div>
    <!-- funnel download/export button -->
    <div class="form-group" ng-show="FEAPPS">
        <a class="btn btn-primary m-r-5" type="button" id="exportFunnelBtn" data-toggle="modal" data-target="#downModal">
            Funnel Export
        </a>
    </div>
    <!-- actorProperty in funnels is not been implemented yet, it will be done in the future implementation
    <div class="form-group">
        <select class="form-control" ng-model="actorProperty" ng-change="getFunnelStatsBy()"
            ng-options="showBy.key as showBy.name for showBy in funnelShowBy">
        </select>
    </div> -->

</form>
<div class="panel panel-info">

    <div class="panel-body">
        <h3>{{funnelName}}</h3>
        <div ng-if="funnelStats.length > 0" style="-webkit-transform: rotate(-90deg);
                    -moz-transform: rotate(-90deg);
                    transform: rotate(-91deg);
                    position: absolute;
                    margin-left: -36px;
                    top: 450px;">
            <!-- <strong ng-if="actorProperty=='did'"> No of Usres</strong>
                    <strong ng-if="actorProperty=='sid'"> No of Session</strong> -->
        </div>
        <div class="row" style="padding-top:30px;padding-left:20px;height:400px;">
            <div class="funnel"></div>
        </div>
    </div>
</div>
