{% extends 'default/form.html.twig' %} 

{% block content %}
    {{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
        <div class="row">
            {% if not form.vars.valid %} 
                {# Loop through every form item #}
                {% for child in form.children %}
                    {# Display the errors of the form item #}
                    {% for error in child.vars.errors %}
                        <div id='erreur' class="alert alert-danger">{{error.message}}</div>
                    {% endfor %}
                {% endfor %}
            {% endif %}
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-floating mb-3">
                    {{ form_widget(form.name, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Campaign.Name'|trans}}"}}) }}
                    {{ form_label(form.name, 'Form.Campaign.Name' | trans) }}
                </div>
            </div>
            <div class="col-md-6">
                <h5>{{'Form.Campaign.Active' | trans}} <span class="text-danger">*</span></h5>
                <div class="form-check">
                    {% for v in form.active %}
                        {{ form_widget(v, {'attr': {'class': ''}}) }}  {{ form_label(v) }}
                        <span class='m-l-60'></span>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-floating mb-3">
                    {{ form_widget(form.description, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Campaign.Description'|trans}}"}}) }}
                    {{ form_label(form.description, 'Form.Campaign.Description' | trans) }}
                </div>
            </div>
        </div>

        <div class="form-group">
            <h5>{{'Form.Campaign.Group' | trans}} <span class="text-danger">*</span></h5>
            <blockquote>
                <div class="row">
                    <div class="col-md-12">
                        <!--h5>{{'Form.Campaign.Send.Sticker.Channel' | trans}} <span class="text-danger">*</span></h5-->
                        <div class="form-check">
                            {% for v in form.memberGroups %}
                                {{ form_widget(v, {'attr': {'class': ''}}) }}  {{ form_label(v) }}
                                <span class='m-l-60'></span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </blockquote>
        </div>
        
        <div class="form-group primary">
            <h5>{{'Form.Campaign.Sending.Help' | trans}} <span class="text-danger">*</span></h5>
            <blockquote>
                {# <button type="button" id='check-all' class="btn btn-sm btn-success text-white">{{'Form.checkAll' | trans}}</button>
                <button type="button" id='uncheck-all' class="btn btn-sm btn-danger text-white">{{'Form.uncheckAll' | trans}}</button> #}
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-check">
                            {% for t in form.sending %}  
                                {{ form_widget(t, {'attr': {'class': 'm-b-10 m-l-30 sendingCheck'}}) }} {{ form_label(t) }}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-3" id='repeat'>
                        <div class="form-floating mb-3">
                            {{ form_widget(form.repetition, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Campaign.Frequency.Repeat.Label'|trans}}"}}) }}
                            {{ form_label(form.repetition, 'Form.Campaign.Frequency.Repeat.Label' | trans) }}
                            <span class="help-block text-info">
                                <small><i>{{ 'Form.Campaign.Frequency.Repeat.Help' | trans }}</i></small> 
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3" id='frequency'>
                        <div class="form-floating mb-3">
                            {{ form_widget(form.frequency, {'attr': {'class': 'form-control form-select', 'placeholder':"{{'Form.Campaign.Frequency.Help'|trans}}"}}) }}
                            {{ form_label(form.frequency, 'Form.Campaign.Frequency.Label' | trans) }}
                            <span class="help-block text-info">
                                <small><i>{{ 'Form.Campaign.Frequency.Help' | trans }}</i></small> 
                            </span>
                        </div>
                    </div>
                    <div class="col-md-1" id='heure'>
                        <div class="form-floating mb-3">
                            {{ form_widget(form.heure, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Campaign.Frequency.Time'|trans}}"}}) }}
                            {{ form_label(form.heure, 'Form.Campaign.Frequency.Time' | trans) }}
                        </div>
                    </div>
                    <div class="col-md-2" id='timezone'>
                        <div class="form-floating mb-3">
                            {{ form_widget(form.timezone, {'attr': {'class': 'form-control form-select', 'placeholder':"{{'Form.Campaign.Frequency.Timezone.Label'|trans}}"}}) }}
                            {{ form_label(form.timezone, 'Form.Campaign.Frequency.Timezone.Label' | trans) }}
                            <span class="help-block text-info">
                                <small><i>{{ 'Form.Campaign.Frequency.Timezone.Help' | trans }}</i></small> 
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3" id='semaine'>
                        <div class="form-floating mb-3">
                            {{ form_widget(form.semaine, {'attr': {'class': 'form-control form-select', 'placeholder':"{{'Form.Campaign.Frequency.Week.Label'|trans}}"}}) }}
                            {{ form_label(form.semaine, 'Form.Campaign.Frequency.Week.Label' | trans) }}
                            <span class="help-block text-info">
                                <small><i>{{ 'Form.Campaign.Frequency.Week.Help' | trans }}</i></small> 
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3" id='jour'>
                        <div class="form-floating mb-3">
                            {{ form_widget(form.jour, {'attr': {'class': 'form-control form-select', 'placeholder':"{{'Form.Campaign.Frequency.Date.Label'|trans}}"}}) }}
                            {{ form_label(form.jour, 'Form.Campaign.Frequency.Date.Label' | trans) }}
                            <span class="help-block text-info">
                                <small><i>{{ 'Form.Campaign.Frequency.Date.Help' | trans }}</i></small> 
                            </span>
                        </div>
                    </div>
                </div>
            </blockquote>
        </div>

        <div class="form-group primary">
            <h5>{{'Form.Campaign.Channel.Help' | trans}} <span class="text-danger">*</span></h5>
            <blockquote>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.smsProvider, {'attr': {'class': 'form-control form-select', 'placeholder':"{{'Form.Campaign.Channel.SMS'|trans}}"}}) }}
                            {{ form_label(form.smsProvider, 'Form.Campaign.Channel.SMS' | trans) }}
                            <span class="help-block text-info">
                                <small><i>{{ 'Form.Campaign.Channel.SMS.Help' | trans }}</i></small> 
                            </span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.voiceProvider, {'attr': {'class': 'form-control form-select', 'placeholder':"{{'Form.Campaign.Channel.Voice'|trans}}"}}) }}
                            {{ form_label(form.voiceProvider, 'Form.Campaign.Channel.Voice' | trans) }}
                            <span class="help-block text-info">
                                <small><i>{{ 'Form.Campaign.Channel.Voice.Help' | trans }}</i></small> 
                            </span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.whatsAppProvider, {'attr': {'class': 'form-control form-select', 'placeholder':"{{'Form.Campaign.Channel.WhatsApp'|trans}}"}}) }}
                            {{ form_label(form.whatsAppProvider, 'Form.Campaign.Channel.WhatsApp' | trans) }}
                            <span class="help-block text-info">
                                <small><i>{{ 'Form.Campaign.Channel.WhatsApp.Help' | trans }}</i></small> 
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.smsSenderID, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Campaign.Channel.SMS.SenderID'|trans}}"}}) }}
                            {{ form_label(form.smsSenderID, 'Form.Campaign.Channel.SMS.SenderID' | trans) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.voiceSenderID, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Campaign.Channel.Voice.SenderID'|trans}}"}}) }}
                            {{ form_label(form.voiceSenderID, 'Form.Campaign.Channel.Voice.SenderID' | trans) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.whatsAppSenderID, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Campaign.Channel.WhatsApp.SenderID'|trans}}"}}) }}
                            {{ form_label(form.whatsAppSenderID, 'Form.Campaign.Channel.WhatsApp.SenderID' | trans) }}
                        </div>
                    </div>
                </div>
            </blockquote>
        </div>

        <div class="form-group">
            <h5>{{'Form.Campaign.Message.Help' | trans}} <span class="text-danger">*</span></h5>
            <blockquote>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-floating mb-3">
                            {{ form_widget(form.text, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Campaign.Text'|trans}}"}}) }}
                            {{ form_label(form.text, 'Form.Campaign.Text' | trans) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5>{{'Form.Campaign.Send.Text.Channel' | trans}} <span class="text-danger">*</span></h5>
                        <div class="form-check">
                            {% for v in form.textChannel %}
                                {{ form_widget(v, {'attr': {'class': ''}}) }}  {{ form_label(v) }}
                                <span class='m-l-60'></span>
                            {% endfor %}
                        </div>
                    </div>   
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            {{ form_label(form.fileImage, 'Form.Campaign.Image' | trans) }}
                            {{ form_widget(form.fileImage, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5>{{'Form.Campaign.Send.Image.Channel' | trans}} <span class="text-danger">*</span></h5>
                        <div class="form-check">
                            {% for v in form.imageChannel %}
                                {{ form_widget(v, {'attr': {'class': ''}}) }}  {{ form_label(v) }}
                                <span class='m-l-60'></span>
                            {% endfor %}
                        </div>
                    </div>   
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            {{ form_label(form.fileAudio, 'Form.Campaign.Audio' | trans) }}
                            {{ form_widget(form.fileAudio, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5>{{'Form.Campaign.Send.Audio.Channel' | trans}} <span class="text-danger">*</span></h5>
                        <div class="form-check">
                            {% for v in form.audioChannel %}
                                {{ form_widget(v, {'attr': {'class': ''}}) }}  {{ form_label(v) }}
                                <span class='m-l-60'></span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            {{ form_label(form.fileVideo, 'Form.Campaign.Video' | trans) }}
                            {{ form_widget(form.fileVideo, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5>{{'Form.Campaign.Send.Video.Channel' | trans}} <span class="text-danger">*</span></h5>
                        <div class="form-check">
                            {% for v in form.videoChannel %}
                                {{ form_widget(v, {'attr': {'class': ''}}) }}  {{ form_label(v) }}
                                <span class='m-l-60'></span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            {{ form_label(form.fileSticker, 'Form.Campaign.Sticker' | trans) }}
                            {{ form_widget(form.fileSticker, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5>{{'Form.Campaign.Send.Sticker.Channel' | trans}} <span class="text-danger">*</span></h5>
                        <div class="form-check">
                            {% for v in form.stickerChannel %}
                                {{ form_widget(v, {'attr': {'class': ''}}) }}  {{ form_label(v) }}
                                <span class='m-l-60'></span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </blockquote>
        </div>

        <div class="form-group">
            <div class="ms-auto mt-3 mt-md-0">
                <button type="submit" class="btn btn-success text-white">{{'Form.Submit' | trans}}</button>
                <a href='{{path('campaign')}}' class="btn btn-warning text-white"><i class='ti-control-backward'></i> {{'Form.Return' | trans}}</a>
            </div>
        </div>
        {{ form_rest(form) }}
    {{ form_end(form) }}

    
{% endblock %}
{% block custom_js %}
    {{parent()}}
    <script type="text/javascript">
        $(document).ready(function() {
            $("#frequency").hide();
            //$("#heure").hide();
            //$("#timezone").hide();
            $("#semaine").hide();
            $("#jour").hide();
            $("#repeat").hide();
            $("#campaign_sending_0").prop("checked", true);

            {# Function to manage sending option #}
            $(".sendingCheck").change(function() {
                var id = this.id;
                var valTab = id.split("_");
                var val = valTab[2];
                if(this.checked) {
                    if (val == 1) {
                        $("#frequency").show();
                        $("#repeat").show();
                    }
                    else {
                        $("#frequency").hide(); $("#campaign_frequency").val(''); 
                        //$("#heure").hide(); $("#campaign_heure").val(''); 
                        //$("#timezone").hide(); $("#campaign_timezone").val(''); 
                        $("#semaine").hide(); $("#campaign_semaine").val(''); 
                        $("#jour").hide(); $("#campaign_jour").val(''); 
                        $("#repeat").hide(); $("#campaign_repetition").val('1'); 
                    }
                }           
            });
            
            $("#campaign_frequency").change(function() {
                //$("#heure").hide(); $("#campaign_heure").val(''); 
                //$("#timezone").hide(); $("#campaign_timezone").val(''); 
                $("#semaine").hide(); $("#campaign_semaine").val(''); 
                $("#jour").hide(); $("#campaign_jour").val(''); 

                var val = $("#campaign_frequency").val(); {# .prop('selectedIndex') #}
                if (val == 1) { /* Daily */
                    //$("#heure").show();
                    //$("#timezone").show();
                } else if (val == 2) { /* Weekly */
                    $("#semaine").show();
                } else if (val == 3) { /* Monthly */
                    $("#jour").show();
                } 
            });
        });
       
    </script>
{% endblock %}
{#% block validation %}{% endblock %#}