{% extends 'templates/callluge/site_layout.html' %}
{% block content %}
{% load app_filters %}

    <div class="widget-box">
        <div class="col-md-12 col-sm-12">
            <div class="widget-title">
                <h2>{{request.session.name}}</h2>
                <div class="hor-menu"></div>
            </div>
        </div>
        <div class="widget-content">
            <form method="POST" name="rewrite" id="create-rewrite-form">
                {% csrf_token %}
                <div id="step1">
                    <div class="rewrite-wrap">
                        <p>Please select the campaign or campaigns to use for this rewrite.</p>
<!-- dual list box starts here -->
                        <!-- <div class="col-md-12">
                            <div class="row">
                                <div class="dual-list list-left col-md-5">
                                    <div class="well text-right">
                                        <div class="row">
                                            <div class="col-md-10">
                                                <div class="input-group">
                                                    <span class="input-group-addon icon-search"></span>
                                                    <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="btn-group">
                                                    <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
                                                </div>
                                            </div>
                                            <select id="available_campaigns" name="available_campaigns" multiple="multiple" size="15">
                                                {% for campaign in campaigns %}
                                                    <option value="{{campaign.pid}}">{{campaign.name}} ({{campaign.number.number}})</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <ul class="list-group available">
                                            <li class="list-group-item" data-id="34">Logout</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="list-arrows col-md-1 text-center">
                                    <button class="btn btn-default btn-sm move-left">
                                    <span class="glyphicon glyphicon-chevron-left"></span>
                                    </button>
                                    <button class="btn btn-default btn-sm move-right">
                                    <span class="glyphicon glyphicon-chevron-right"></span>
                                    </button>
                                </div>
                                <div class="dual-list list-right col-md-5">
                                    <div class="well">
                                        <div class="row">
                                            <div class="col-md-10">
                                                <div class="input-group">
                                                    <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                                                    <span class="input-group-addon icon-search"></span>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="btn-group">
                                                    <a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <ul class="list-group available">
                                            <li class="list-group-item" data-id="34">demo</li>
                                        </ul>
                                    </div>
                                </div>                                
                            </div>
                        </div> -->
<!-- end of dual list box --> 
<!-- ============================= -->

                        <div class="col-md-12">
                            <div class="row">
                                <div class="flex-container">
                                    <div class="col-md-5">
                                        <h4>Available Campaigns</h4>
                                        <select tabindex="1" id="available_campaigns" class="dlist-1" name="available_campaigns" multiple="multiple" size="15">
                                            {% for campaign in campaigns %}
                                                <option value="{{campaign.pid}}">{{campaign.name}} ({{campaign.number.number|phonenumber_format}})</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="add-rem">
                                            <a tabindex="2" href="" id="add"><i class="icon-right-line"></i></a>
                                            <a tabindex="3" href="" id="remove"><i class="icon-left-line"></i></a>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <h4>Selected Campaigns</h4>
                                        <select tabindex="4" id="selected_campaigns" class="dlist-1" name="selected_campaigns" multiple="multiple" size="15">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-wrap">
                                <button tabindex="5" type="button" value="Next" id="next" class="button hvr-sweep-to-right ripple">Next</button>
                                <a tabindex="6" type="cancel" value="cancel" id="cancel" class="button hvr-sweep-to-right cancel-light ripple" onclick="window.history.back();">Cancel</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="step2" style="display: none;">
                    <div class="rewrite-wrap">
                        <div class="flex-container">
                            <div class="col-md-12">
                                <h4>Referring Domain</h4>
                                <p>Only trigger this rewrite if the visitor comes from this domain. (e.g. google.com or search.yahoo.com)</p>
                                <div class="row">
                                    <div class="col-md-5 col-sm-5">
                                        <div class="form-group">
                                            <div class="input-group no-padding">
                                                <!-- <label for="">Name*</label> -->
                                                <!-- <input class="form-input" type="text" placeholder="Name" name="camp_name" id="campname"> -->
                                                <p><input tabindex="7" class="form-input" type="text" name="reffer_domain">(Optional) Please note : if the referring domain is left blank then this will apply to all the domains.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
                                <h4>Search Phrase</h4>
                                <p>Only trigger this rewrite if the visitor searched for this keyword to get to you. (e.g. my product)</p>
                                <div class="row">
                                    <div class="col-md-5 col-sm-5">
                                        <div class="form-group">
                                            <div class="input-group no-padding">
                                                <!-- <label for="">Name*</label> -->
                                                <!-- <input class="form-input" type="text" placeholder="Name" name="camp_name" id="campname"> -->
                                                <p><input tabindex="8" class="form-input" type="text" name="search_phrase">(Optional)</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
                                <div class="btn-wrap">
                                    <a tabindex="9" type="previous" value="previous" id="previous" class="button hvr-sweep-to-right cancel ripple">Previous</a>
                                    <button tabindex="10" type="submit" name="submit" value="Submit" id="submit" class="button hvr-sweep-to-right ripple">Next</button>
                                    <a tabindex="11"  type="cancel" value="cancel" id="cancel" class="button hvr-sweep-to-right cancel-light ripple" onclick="window.history.back();" >Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        function call_loader(){
      // $('.overlay').show();
      location.reload();
    }
    $(document).ready(function(){
        $('#submit').click(function() {
            $('#selected_campaigns option').prop('selected', true);
            var selectedOpts = $('#selected_campaigns option:selected');
            if (selectedOpts.length == 0) {
                alert("Please select a campaign");
                return false;
            }
        });
    $("#next").click(function(){
        $("#step1").hide();
        $("#step2").show();
    });
    $("#previous").click(function(){
        $("#step2").hide();
        $("#step1").show();
    });
    });
    (function () {
    $('#add').click(function (e) {
    var selectedOpts = $('#available_campaigns option:selected');
    if (selectedOpts.length == 0) {
    alert("Nothing to move.");
    e.preventDefault();
    }
    $('#selected_campaigns').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
    });
    $('#remove').click(function (e) {
    var selectedOpts = $('#selected_campaigns option:selected');
    if (selectedOpts.length == 0) {
    alert("Nothing to move.");
    e.preventDefault();
    }
    $('#available_campaigns').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
    });
        }(jQuery));
    </script>
   
{% endblock %}