edit.html.twig

edit.html.twig

{% extends ':default:index.html.twig' %}

{% block content -%}
    <div class="edit-usage">
        <h2>Edit Usage</h2>

        <div class="row">
            <div class="col-xs-12 col-md-10">
                <div class="well well-sm">

                    {{ form_start(edit_form, { 'attr': {'class': 'form-horizontal'} })}}

                   <!-- Name Selection -->
                    <div class="form-group form-name">
                            <div class="col-xs-12 col-sm-3 col-sm-3">
                                {{ form_label(edit_form.name) }}
                            </div>
                            <div class="col-xs-12 col-sm-3 col-sm-3">
                                {{ form_widget(edit_form.name) }}

                            </div>
                            <div class="col-xs-12 col-sm-3 col-sm-3">
                                <p class="text-warning">{{ entity.act }}</p>
                                <input type="hidden" name="campaigntool_campaigntoolbundle_usage[act]" id="campaigntool_campaigntoolbundle_usage_act" value="{{ entity.act }}"> </input>
                            </div>

                        </div>

                    <hr>

                    <!-- Controlling and Marketing Channel Selection -->
                    <div class="form-group form-category">
                            <div class="col-xs-12 col-sm-3 col-sm-3">
                                <label>Parent Category</label>
                                <p>
                                    <a href="{{ path('campaign_tool_category') }}">
                                        Manage Categories
                                    </a>
                                </p>
                            </div>
                            <div class="col-xs-12 col-sm-9 col-sm-9">
                                <input type="hidden" name="campaigntool_campaigntoolbundle_usage[categoryId]" id="campaigntool_campaigntoolbundle_usage_categoryId"> </input>
                                <div class="tree tree-parent-cat well">
                                    {% for ControllingChannelName, ControllingChannelId in ChannelTree %}
                                        <ul>
                                            <li class="ControllingChannel">
                                                <span class="item">
                                                    <i class="icon arrow-down"></i>
                                                        {% for id in ControllingChannelId|keys %}
                                                            <span data-id="{{id}}">{{ControllingChannelName}}</span>
                                                        {% endfor %}
                                                </span>
                                                {% for MarketingChannels in ControllingChannelId %}
                                                    {% for MarketingChannelName, MarketingChannelId in MarketingChannels %}
                                                        <ul>
                                                            <li class="MarketingChannel" data-id="{{MarketingChannelId}}">
                                                            <span class="item">
                                                                <i class="icon arrow-right"></i>

                                                                    <span>{{MarketingChannelName}}</span>

                                                             </span>
                                                            </li>
                                                        </ul>
                                                    {% endfor %}
                                                {% endfor %}

                                            </li>
                                        </ul>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-9">
                                <b>Category Assigned</b>  <span class="assigned-cat">/ {{entityMarketingChannel.controllingChannel.name}} / {{entityMarketingChannel.name}}</span>
                            </div>
                    </div>

                    <hr>

                    <div class="form-group form-phone">
                        <div class="col-xs-12 col-sm-3 col-sm-3">
                            <label>Phone Number</label>
                        </div>
                        <div class="col-xs-12 col-sm-9 col-sm-9">

                            {% for key, EntityTelephonenumber in entity.telephoneNumbers %}
                                <div class="col-sm-6">
                                    <label class="label-phone">{{EntityTelephonenumber.region.name }}</label>


                                    <select class="selectpicker" name="campaigntool_campaigntoolbundle_usage[telephoneNumbers][{{ key }}]">


                                        {% for telephonenumber in AllRegionsWithTelephoneNumbers[EntityTelephonenumber.region.name] %}
                                            {

                                            {% if telephonenumber.telephonenumber == EntityTelephonenumber.telephoneNumber %}
                                                <option selected="true" class="EditTelephoneNumber" data-id="{{ key }}" value="{{EntityTelephonenumber.id }}">{{EntityTelephonenumber.telephoneNumber }}</option>
                                            {% else %}
                                                <option class="EditTelephoneNumber" data-id="{{ key }}" value="{{telephonenumber.id }}">{{telephonenumber.telephonenumber}}</option>
                                            {% endif %}
                                            }
                                        {% endfor %}

                                    </select>
                                    <input type="radio" name="optradio">

                                </div>
                            {% endfor %}
                        </div>
                        <div class="col-xs-12 col-sm-3 col-sm-3">

                        </div >
                        <div class="col-xs-12 col-sm-9 col-sm-9">
                            <div class="col-sm-3">
                                <select id = "SelectNewRegion">
                                    {% for region, telephonenumber in AllRegionsWithTelephoneNumbers %}
                                        {
                                        {% if region not in entityRegions%}
                                            {
                                            <option>{{region}}</option>
                                            }
                                        {% endif %}
                                        }
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <select id = "SelectNewTelephoneNumbers">

                                </select>
                            </div>
                            <div class="col-sm-3">
                                <button type="button" class="btn btn-warning" id="AddNewTelephoneNumber">Add</button>
                            </div>
                        </div>

                    </div>

                    <hr>

                    <!-- Campaign Alias Selection -->
                    <div class="form-group form-camp-aliases">
                        <div class="col-xs-12 col-sm-3 col-sm-3">
                            <label>Campaign Aliases</label>
                            <p>
                                <a href="{{ path('campaign_tool_category') }}">
                                    Manage Campaign
                                </a>
                            </p>

                        </div>

                        <div class="col-xs-12 col-sm-9 col-sm-9">
                            <div class="tree tree-campaign-aliases well">
                                <ul>
                                    {% for campaignAlias in entity.campaignAliases %}
                                        <li>
                                                        <span class="item">
                                                            <i class="icon arrow-right"></i>
                                                            <span>{{campaignAlias.name }}</span>
                                                         </span>
                                        </li>
                                    {% endfor %}
                                </ul>

                            </div>
                        </div>

                    </div>

                    <hr>

                    <!-- Form Submit Buttons -->
                    <div class="form-group">
                        <div class="col-sm-10">
                        </div>
                        <div class="col-sm-2">
                            <a class="btn" href="{{ path('campaign_tool_usage') }}">
                                Cancel
                            </a>
                            {{ form_widget(edit_form.submit) }}
                        </div>
                    </div>

                    {{ form_row(edit_form._token) }}
                    {{ form_end(edit_form,  {'render_rest': false}) }}

                </div>

            </div>

        </div>
    </div>
    <script>

        //Global Variable
        var AllRegionsWithTelephoneNumbers = {};

        // On Change, populate the neighbouring dropdown
        $('#SelectNewRegion').on('change', function()
        {
            //For Debug
            console.log('Value Selected:   '+this.value);

            var TelephoneNumbersForSelectedRegion = AllRegionsWithTelephoneNumbers[this.value];

            // For Debug
            console.log('Region Telephonenumber Array Now contains the following Telephone Numbers:   ' + TelephoneNumbersForSelectedRegion);

            //Empty the TelephoneNumbers Dropdown
            $('#SelectNewTelephoneNumbers').empty();

            //Populate Dropdown with Telephone numbers based on Selected Region
            $.each(TelephoneNumbersForSelectedRegion, function (i, item)
            {
                // For Debug
                console.log('Adding Option to Dropdown:   '+item);

                $('#SelectNewTelephoneNumbers').append($('<option>', {
                    value: item,
                    text : item
                }));
            });


        });

        $('#AddNewTelephoneNumber').click(function()
        {
            alert($('#SelectNewTelephoneNumbers').val());
        });

        $('.MarketingChannel').click(function()
        {
            var selectedtext = $.trim($(this).text());
            var selectedid = $(this).attr("data-id");

            //For Debug
            console.log('Marketing Channel was selected:   ' + selectedtext + ' ' + selectedid);

            $('#campaigntool_campaigntoolbundle_usage_categoryId').val(selectedid);
            console.log($('#campaigntool_campaigntoolbundle_usage_categoryId').val());
        });

    
        $(document).ready(function ()
        {
            // Transfer the Twig variable to Javascript
            {% for region, telephonenumbers in AllRegionsWithTelephoneNumbers %}
            {
                AllRegionsWithTelephoneNumbers['{{ region }}'] = new Array();
                {% for telephonenumber in telephonenumbers %}
                {
                    AllRegionsWithTelephoneNumbers['{{ region }}']['{{ telephonenumber.telephonenumber }}'] = new Array();
                    AllRegionsWithTelephoneNumbers['{{ region }}']['{{ telephonenumber.telephonenumber }}'].push('{{ telephonenumber.id }}');
                }
                {% endfor %}
            }
            {% endfor %}

            // For Debug
            console.log('Populated Region Telephonenumber Array');
            console.log(AllRegionsWithTelephoneNumbers);


        });

    </script>


{% endblock %}