{% load app_filters %}

<div class="widget-content">
    <form method="POST" name="rewrite" id="create-rewrite-form" action="/rewrites/add-rewrites/">
        {% csrf_token %}
        <input type="hidden" id="hid_rewrite_id" name="rewrite_id" value="{{rewrite_id}}">
        <div id="step1">
            <div class="rewrite-wrap">
                <p>Please select the campaign or campaigns to use for this rewrite.</p>
                <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 available_campaigns %}
                                    {% if campaign.pid %}
                                        <option value="{{campaign.pid}}">{{campaign.name}} ({{campaign.number.number|phonenumber_format}})</option>
                                    {% endif %}
                                    {% 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">
                                    {% for campaign in assosiated_campaigns %}
                                        {% if campaign.campaign.pid %}
                                        <option value="{{campaign.campaign.pid}}">{{campaign.campaign.name}} ({{campaign.campaign.number.number|phonenumber_format}})</option>
                                        {% endif %}
                                    {% endfor %}                
                                </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">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">
                                        <p><input class="form-input" type="text" name="reffer_domain" value="{{ref_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">
                                        <p><input class="form-input" type="text" name="search_phrase" value="{{search_phase}}">(Optional)</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="btn-wrap">
                            <a type="previous" value="previous" id="previous" class="button hvr-sweep-to-right cancel ripple">Previous</a>
                            <button type="submit" name="submit" value="Submit" id="submit_camp" class="button hvr-sweep-to-right ripple">Next</button>
                            <a  type="cancel" value="cancel" id="cancel" class="button hvr-sweep-to-right cancel-light ripple">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="hid_available_campaigns" id="hid_available_campaigns" value="{{available_campaigns|length}}">
        <input type="hidden" name="jsrw" id="jsrw">
    </form>
</div>

<script type="text/javascript">
    $(document).ready(function(){
  
        $("#next").click(function(){
            //$('#selected_campaigns option').attr('selected', true);
            jsrw = new Array();
            $. each($("#selected_campaigns option"), function(){
                jsrw.push($(this).val());
            })            
            
            $('#jsrw').val(jsrw);

            $("#step1").hide();
            $("#step2").show();
        });

        $('.cancel-light').click(function(){
            $('#myModal').modal('toggle');
        });

        $('#submit_camp').click(function(){
            if($('#hid_available_campaigns').val() == 0){
                alert("Sorry, No Available Campaigns");
                return false;
            }
            if ($('#jsrw').val().length == 0) {
                alert("Please select a campaign");
                return false;
            }
        });

        
        $("#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>