{% load i18n %}
<div class="whatsapp-setting-form">
  <form action="" id="id_whatsappSettingForm" class="layui-form" lay-filter="whatsappSettingForm">
    {% csrf_token %}
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card" style="height: 200px">
          <div class="layui-card-header"><i class="fa fa-commenting"></i><span style="padding-left: 5px">{% trans 'whatsappSetting_otherSetting' %}</span></div>
          <div class="layui-card-body" style="padding: 10px 0 0 60px">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label for="id_apikey" class="layui-form-label" style="width: 70px;margin-right: 10px;">{% trans 'whatsappSetting_api_key' %}<span
                  class="required">*</span></label>
                <div class="layui-input-inline">
                  <input type="text" id="id_apikey" name="whatsapp_apikey" autocomplete="off" placeholder=""
                         lay-verify="required" class="layui-input">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block layui-inline">
          <button class="layui-btn" id="whatsappSubmit" lay-submit="" lay-filter="whatsappSubmit">{% trans 'whatsappSetting_submit' %}</button>
        </div>
        <div class="layui-inline" id="whatsappClearDiv">
        </div>
      </div>
    </div>
  </form>
</div>
<script>
    layui.use('form', function () {
        var form = layui.form, $ = layui.jquery ;
        form.render();
        form.on('submit(whatsappSubmit)', function (data) {
            var csrf = data.field['csrfmiddlewaretoken'];
            var value = { whatsapp_apikey: data.field['whatsapp_apikey'] };
            var loadIndex = layer.load();
            $.ajax({
                url: "/base/api/systemSetting/"
                , type: "POST"
                , data: {'name': 'whatsapp_setting', value: JSON.stringify(value), csrfmiddlewaretoken: csrf}
                , dataType: "json"
                , success: function (response, xhr) {
                    layer.close(loadIndex);
                    layer.msg(gettext('action_notification_successful'), {icon: 6});
                    document.getElementById('whatsappClearDiv').innerHTML= "<button class='layui-btn' id='whatsappClear' lay-submit='' lay-filter='whatsappClear'>{% trans 'clear_system_settings' %}</button>"
                }
                , error: function (xhr, error, e) {
                    layer.close(loadIndex);
                    if (xhr.responseJSON.value) {
                        layer.msg(gettext(xhr.responseJSON.value[0]), {icon: 5});
                    } else {
                        layer.msg(gettext('action_notification_failed'), {icon: 5});
                    }
                }
            });
            return false
        });

        form.on('submit(whatsappClear)', function (data) {
            var csrf = data.field['csrfmiddlewaretoken'];

             layer.confirm(gettext("confirm_be_sure"),
            {
                title: gettext("btn_confirm")
                , icon: 3
                , btn: [gettext("btn_confirm"), gettext("btn_cancel")]
            },
            function (index) {
                var loadIndex = layer.load();
                $.ajax({
                    url: "/base/clear_system_settings/"
                    , type: "POST"
                    , data: {'name': 'whatsapp_setting', csrfmiddlewaretoken: csrf}
                    , dataType: "json"
                    , success: function (response, xhr) {
                        document.getElementById("id_whatsappSettingForm").reset();
                        layer.close(loadIndex);
                        layer.msg(gettext('action_notification_successful'), {icon: 6});
                        document.getElementById('whatsappClearDiv').innerHTML= ""
                    }
                    , error: function (xhr, error, e) {
                        layer.close(loadIndex);
                        if (xhr.responseJSON.value) {
                            layer.msg(gettext(xhr.responseJSON.value[0]), {icon: 5});
                        } else {
                            layer.msg(gettext('action_notification_failed'), {icon: 5});
                        }
                    }
                });
                layer.close(index);
            });
            return false
        });

        $.ajax({
            url: "/base/api/systemSetting/?name=whatsapp_setting"
            , type: "GET"
            , dataType: "json"
            , success: function (response, xhr) {
                var val = response.data[0];
                if (val) {
                    var val_dict = JSON.parse(val.value);
                    form.val('whatsappSettingForm', val_dict);
                    document.getElementById('whatsappClearDiv').innerHTML= "<button class='layui-btn' id='whatsappClear' lay-submit='' lay-filter='whatsappClear''>{% trans 'clear_system_settings' %}</button>"
                }
            }
            , error: function (xhr, error, e) {

            }
        });
    })
</script>