{% extends 'base.html.twig' %}
{% set titleName = "Chat Configuration" %}
{% block title %} POWER DATA | {{titleName}} {% endblock %}
{% block page %}{{titleName}}{% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{titleName}} {% endif %} {% endblock %}
 {% block css %}
     <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css' ) }} ">
     <style>
         .name-user {
             position: absolute;
             top: 0;
             left: 8px;
             background: #b0b3b5;
             margin: 0;
             padding: 0;
             height: 100%;
         }
     </style>

 {% endblock %}
{% block content %}
    <section class="content">
        <div class="container-fluid">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <!-- /.card-header -->
                        <div class="card-body">

                            {{ form_start(form) }}


                            <fieldset>
                                <div class="form-row ">
                                    <legend>Many Chat </legend>
                                    <div class="form-group col-3 ">
                                        <label class=" " for="role" >Statusb</label>
                                        {{ form_widget(form.manyChatStatus) }}
                                    </div>
                                    <div class="form-group col-3 ">
                                        <label class=" " for="role" >Token</label>
                                        {{ form_widget(form.manyChatToken) }}
                                    </div>
                                    <div class="form-group col-3 ">
                                        <label class=" " for="role" >Type Message</label>
                                        {{ form_widget(form.manyChatTypeMessage) }}
                                    </div>
                                    {% if manyChatOrderTags is not null  %}
                                        <div class="form-group col-3 ">
                                            <label class=" " for="role" >Order Tag</label>
                                            {{ form_widget(form.manyChatOrderTag) }}
                                        </div>
                                        <div class="form-group col-3 ">
                                            <label class=" " for="role" >Delivered Tag</label>
                                            {{ form_widget(form.manyChatDeliveredTag) }}
                                        </div>
                                    {% endif  %}
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-row ">
                                    <legend>Brevo </legend>
                                    <div class="form-group col-12 ">
                                        <a href="{{ path('app_brevo_visitor') }}" class="btn btn-secondary"> Visitors </a>
                                    </div>
                                    <div class="form-group col-4 ">
                                        <label class=" " for="role" >Status</label>
                                        {{ form_widget(form.brevoStatus) }}
                                    </div>
                                    <div class="form-group col-4 ">
                                        <label class=" " for="role" >Api Url</label>
                                        {{ form_widget(form.brevoApiUrl) }}
                                    </div>
                                    <div class="form-group col-4 ">
                                        <label class=" " for="role" >Api Key</label>
                                        {{ form_widget(form.brevoApiKey) }}
                                    </div>
                                    <div class="form-group col-12 ">
                                        <label class=" " for="role" >Agent ID</label>
                                        {{ form_widget(form.brevoAgentId) }}
                                    </div>
                                </div>
                            </fieldset>



                            {{ form_end(form) }}
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>




{% endblock %}
{% block script %}

    <!-- Bootstrap4 Duallistbox -->
    <script src="{{ asset('assets/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js' ) }} "></script>
    <script>
        //Bootstrap Duallistbox
        $('.duallistbox').bootstrapDualListbox()
        //Date picker
    </script>


    <script>

        function manyChatAttribut(value) {
            $("#config_manyChatToken").prop('required', value !== "0");
            $("#config_manyChatTypeMessage").prop('required', value !== "0");
        }
        $(document).ready(function(){
            manyChatAttribut( $("#config_manyChatStatus").val() )
        });

        $(document).on('change','#config_manyChatStatus', function () {
            manyChatAttribut(this.value)
        });


        function brevoAttribut(value) {
            $("#config_brevoApiUrl").prop('required', value !== "0");
            $("#config_brevoApiKey").prop('required', value !== "0");
            console.log("brevo");
            console.log(value !== "0");
        }
        $(document).ready(function(){
            brevoAttribut( $("#config_brevoStatus").val() )
        });
        $(document).on('change','#config_brevoStatus', function () {
            brevoAttribut(this.value)
        });

    </script>












{% endblock %}