{# @var craft \craft\web\twig\variables\CraftVariable #}
{#
/**
 * Cookie Consent Banner plugin for Craft CMS 3.x
 *
 * Cookie Consent Banner Settings.twig
 *
 * @author    Mark @ A Digital
 * @copyright Copyright (c) 2018 Mark @ A Digital
 * @link      https://adigital.agency
 * @package   CookieConsentBanner
 * @since     1.0.0
 */
#}

{% import "_includes/forms" as forms %}

{% macro configWarning(setting) -%}
  {% set setting = '<code>'~setting~'</code>' %}
  {{ "This is being overridden by the {setting} config setting in your {file} config file."|t('cookie-consent-banner', {
    setting: setting,
    file: 'cookie-consent-banner.php'
  })|raw }}
{%- endmacro %}

{% from _self import configWarning %}


<div id="tab-display-options" style="padding-bottom: 72px;">
  
  {{ forms.selectField({
      label: "Acceptance Type"|t,
      instructions: "Set the type of user action prompted by the banner"|t,
      id: 'type',
      name: 'type',
      options: { 'info': "Info"|t, 'opt-out': "Opt-out"|t, 'opt-in': "Opt-in"|t},
      disabled: 'type' in overrides,
      warning: 'type' in overrides ? configWarning('type'),
      value: settings.type
  }) }}
  
  {{ forms.selectField({
      label: "Position"|t,
      instructions: "Where the cookie consent model is placed"|t,
      id: 'position',
      name: 'position',
      options: { top: "Top"|t, toppush: "Top Pushdown"|t, bottom: "Bottom"|t, left: "Left"|t, right: "Right"|t, "bottom-left": "Bottom Left", "bottom-right":"Bottom Right"},
      disabled: 'position' in overrides,
      warning: 'position' in overrides ? configWarning('position'),
      value: settings.position
  }) }}
  
  {{ forms.selectField({
      label: "Layout"|t,
      instructions: "The layout-style of the modal"|t,
      id: 'layout',
      name: 'layout',
      disabled: 'layout' in overrides,
      warning: 'layout' in overrides ? configWarning('layout'),
      options: { block: "Block"|t, classic: "Classic"|t, edgeless: "Edgeless"|t, wire: "Wire"|t },
      value: settings.layout
  }) }}
  <hr>
  {{ forms.selectField({
      label: "Palette"|t,
      instructions: "A base colour palette for the modal"|t,
      id: 'palette',
      name: 'palette',
      disabled: 'palette' in overrides,
      warning: 'palette' in overrides ? configWarning('palette'),
      options: { default: "Default"|t,  ice: "Ice"|t,  cleanblue: "Clean Blue"|t,  greenblack: "Green on Black"|t,  pink: "Pink"|t,  purple: "Purple"|t,  blue: "Blue"|t,  red: "Red"|t,  white: "White"|t,  graygreen: "Green on Dark Gray"|t,  orange: "Orange"|t,  whitegreen: "Green on white"|t},
      value: settings.palette
  }) }}
  
  {{ forms.colorField({
      label: "Banner Background"|t,
      instructions: "Background color for the modal banner"|t,
      id: 'palette_banner',
      name: 'palette_banner',
      disabled: 'palette_banner' in overrides,
      warning: 'palette_banner' in overrides ? configWarning('palette_banner'),
      value: settings.palette_banner
  }) }}
  
  {{ forms.colorField({
      label: "Button Background"|t,
      instructions: "Background color for the modal button"|t,
      id: 'palette_button',
      name: 'palette_button',
      disabled: 'palette_button' in overrides,
      warning: 'palette_button' in overrides ? configWarning('palette_button'),
      value: settings.palette_button
  }) }}
  
  {{ forms.colorField({
      label: "Banner Text"|t,
      instructions: "Color for the modal banner text"|t,
      id: 'palette_banner_text',
      name: 'palette_banner_text',
      disabled: 'palette_banner_text' in overrides,
      warning: 'palette_banner_text' in overrides ? configWarning('palette_banner_text'),
      value: settings.palette_banner_text
  }) }}
  
  {{ forms.colorField({
      label: "Button Text"|t,
      instructions: "Color for the modal button text"|t,
      id: 'palette_button_text',
      name: 'palette_button_text',
      disabled: 'palette_button_text' in overrides,
      warning: 'palette_button_text' in overrides ? configWarning('palette_button_text'),
      value: settings.palette_button_text
  }) }}
  
  {{ forms.colorField({
      label: "Link Text"|t,
      instructions: "Color for the modal link text"|t,
      id: 'palette_link',
      name: 'palette_link',
      disabled: 'palette_link' in overrides,
      warning: 'palette_link' in overrides ? configWarning('palette_link'),
      value: settings.palette_link
  }) }}
  
  {{ forms.colorField({
      label: "Left Button Background"|t,
      instructions: "Color for the left modal button (where two are included)"|t,
      id: 'palette_left_button_bg',
      name: 'palette_left_button_bg',
      disabled: 'palette_left_button_bg' in overrides,
      warning: 'palette_left_button_bg' in overrides ? configWarning('palette_left_button_bg'),
      value: settings.palette_left_button_bg
  }) }}
  
  {{ forms.colorField({
      label: "Left Button Text"|t,
      instructions: "Color for the left modal button text (where two are included)"|t,
      id: 'palette_left_button_text',
      name: 'palette_left_button_text',
      disabled: 'palette_left_button_text' in overrides,
      warning: 'palette_left_button_text' in overrides ? configWarning('palette_left_button_text'),
      value: settings.palette_left_button_text
  }) }}
  <hr>
  {{ forms.textField({
      label: "Dismiss on Scroll"|t,
      id: 'dismiss_on_scroll',
      name: 'dismiss_on_scroll',
      instructions: "If the banner should dismiss on scroll, enter the number of pixels the user must scroll vertically to dismiss"|t,
      disabled: 'dismiss_on_scroll' in overrides,
      warning: 'dismiss_on_scroll' in overrides ? configWarning('dismiss_on_scroll'),
      value: settings.dismiss_on_scroll,
      errors: settings.getErrors('dismiss_on_scroll')
  }) }}
  {{ forms.textField({
      label: "Dismiss on Timeout"|t,
      id: 'dismiss_on_timeout',
      name: 'dismiss_on_timeout',
      instructions: "If the banner should dismiss on timeout, enter the number of seconds to wait before dismissal"|t,
      disabled: 'dismiss_on_timeout' in overrides,
      warning: 'dismiss_on_timeout' in overrides ? configWarning('dismiss_on_timeout'),
      value: settings.dismiss_on_timeout,
      errors: settings.getErrors('dismiss_on_timeout')
  }) }}
</div>
<div id="tab-banner-text" style="padding-bottom: 72px;">
  {{ forms.textField({
      label: "Learn More Link"|t,
      id: 'learn_more_link',
      name: 'learn_more_link',
      instructions: "Link to learn more about the Cookie law"|t,
      disabled: 'learn_more_link' in overrides,
      warning: 'learn_more_link' in overrides ? configWarning('learn_more_link'),
      value: settings.learn_more_link,
      errors: settings.getErrors('learn_more_link')
  }) }}
  
  {{ forms.selectField({
      label: "Link Open Behaviour"|t,
      instructions: "The link open behaviour for the 'Learn More' link"|t,
      id: 'target',
      name: 'target',
      disabled: 'target' in overrides,
      warning: 'target' in overrides ? configWarning('target'),
      options: { _blank: "New Tab"|t, _self: "Same Tab"|t },
      value: settings.palette
  }) }}
  
  {{ forms.textField({
      label: "Learn More Text"|t,
      id: 'learn',
      name: 'learn',
      instructions: "Text displayed on the learn more link"|t,
      disabled: 'learn' in overrides,
      warning: 'learn' in overrides ? configWarning('learn'),
      value: settings.learn,
      errors: settings.getErrors('learn')
  }) }}
  
  {{ forms.textField({
      label: "Allow Text"|t,
      id: 'allow',
      name: 'allow',
      instructions: "Text displayed on the 'Allow' modal button if shown"|t,
      disabled: 'allow' in overrides,
      warning: 'allow' in overrides ? configWarning('allow'),
      value: settings.allow,
      errors: settings.getErrors('allow')
  }) }}
  
  {{ forms.textField({
      label: "Decline Text"|t,
      id: 'decline',
      name: 'decline',
      instructions: "Text displayed on the 'Decline' modal button if shown"|t,
      disabled: 'decline' in overrides,
      warning: 'decline' in overrides ? configWarning('decline'),
      value: settings.decline,
      errors: settings.getErrors('decline')
  }) }}
  <hr>
  {{ forms.textareaField({
      label: "Message"|t,
      id: 'message',
      name: 'message',
      instructions: "Message displayed on the dialog, keep it short and meaningful"|t,
      disabled: 'message' in overrides,
      warning: 'message' in overrides ? configWarning('message'),
      value: settings.message,
      errors: settings.getErrors('message'),
      rows: 3
  }) }}
  
  
  {{ forms.textField({
      label: "Dismiss Button Text"|t,
      id: 'dismiss',
      name: 'dismiss',
      instructions: "text displayed on the Dismiss button, keep it short (1-2 words)"|t,
      disabled: 'dismiss' in overrides,
      warning: 'dismiss' in overrides ? configWarning('dismiss'),
      value: settings.dismiss,
      errors: settings.getErrors('dismiss')
  }) }}
</div>
<div id="tab-include-options" style="padding-bottom: 72px;">
  {{ forms.lightswitchField({
      label: "Preload CSS"|t,
      id: 'preload_css',
      name: 'preload_css',
      instructions: "If the CSS reference for the cookie banner should be preloaded, enable this field"|t,
      disabled: 'preload_css' in overrides,
      warning: 'preload_css' in overrides ? configWarning('preload_css'),
      on: settings.preload_css
  }) }}
  
  
  {{ forms.lightswitchField({
      label: "Async JS"|t,
      id: 'async_js',
      name: 'async_js',
      instructions: "If the JS reference should be loaded aynchronously, enable this field"|t,
      disabled: 'async_js' in overrides,
      warning: 'async_js' in overrides ? configWarning('async_js'),
      on: settings.async_js
  }) }}
  
  
  {{ forms.lightswitchField({
      label: "Defer JS"|t,
      id: 'defer_js',
      name: 'defer_js',
      instructions: "If the JS reference should be deferred, enable this field"|t,
      disabled: 'defer_js' in overrides,
      warning: 'defer_js' in overrides ? configWarning('defer_js'),
      on: settings.defer_js
  }) }}
  
  {{ forms.lightswitchField({
      label: "Auto-inject"|t,
      id: 'auto_inject',
      name: 'auto_inject',
      instructions: "If the banner should be auto-injected on every page, enable this field"|t,
      disabled: 'auto_inject' in overrides,
      warning: 'auto_inject' in overrides ? configWarning('auto_inject'),
      on: settings.auto_inject
  }) }}
  
  {{ forms.lightswitchField({
      label: "Disable in Live Preview"|t,
      id: 'disable_in_live_preview',
      name: 'disable_in_live_preview',
      instructions: "If the banner should not display in live preview, enable this field"|t,
      disabled: 'disable_in_live_preview' in overrides,
      warning: 'disable_in_live_preview' in overrides ? configWarning('disable_in_live_preview'),
      on: settings.disable_in_live_preview
  }) }}
  
  {{ forms.lightswitchField({
      label: "Honour Do Not Track Header"|t,
      id: 'honour_do_not_track_header',
      name: 'honour_do_not_track_header',
      instructions: "If the banner should not be displayed when a user has the 'Do Not Track' header, enable this field."|t,
      disabled: 'honour_do_not_track_header' in overrides,
      warning: 'honour_do_not_track_header' in overrides ? configWarning('honour_do_not_track_header'),
      on: settings.honour_do_not_track_header
  }) }}
  <hr>
  {% set allEntryTypes = {} %}
  {% for section in craft.app.sections.allSections %}
    {% for entryType in section.getEntryTypes() %}
      {% set allEntryTypes = allEntryTypes|merge([{ value: entryType.uid, label: entryType.name }]) %}
    {% endfor %}
  {% endfor %}
  <div class="field">
    <div class="heading">
      <label>{{ "Excluded Entry Types"|t }}</label>
      <div class="instructions">
        <p>{{ "If the banner is auto injected and should not display on certain entry types, select them with these fields"|t }}</p>
      </div>
    </div>
    <div class="input ltr">
      {{ forms.checkboxGroup({
  	    id: "excluded_entry_types",
  	    name: "excluded_entry_types",
  	    errors: settings.getErrors('excluded_entry_types'),
          disabled: 'excluded_entry_types' in overrides,
          warning: 'excluded_entry_types' in overrides ? configWarning('excluded_entry_types'),
          options: allEntryTypes,
  	    values: settings.excluded_entry_types
      })  }}
    </div>
  </div>
  <hr>
  {% set allCategories = {} %}
  {% for category in craft.categories.all() %}
    {% set allCategories = allCategories|merge([{ value: category.uid, label: category.title }]) %}
  {% endfor %}
  <div class="field">
    <div class="heading">
      <label>{{ "Excluded Categories"|t }}</label>
      <div class="instructions">
        <p>{{ "If the banner is auto injected and should not display on certain categories, select them with these fields"|t }}</p>
      </div>
    </div>
    <div class="input ltr">
      {{ forms.checkboxGroup({
  	    label: "Excluded Categories"|t,
  	    id: "excluded_categories",
  	    name: "excluded_categories",
  	    errors: settings.getErrors('excluded_categories'),
          disabled: 'excluded_categories' in overrides,
          warning: 'excluded_categories' in overrides ? configWarning('excluded_categories'),
  	    options: allCategories,
  	    instructions: "If the banner should not display on certain entry categories, select them with these fields"|t,
  	    values: settings.excluded_categories
      })  }}
    </div>
  </div>
</div>
<div id="tab-cookie-options" style="padding-bottom: 72px;">
   {{ forms.textField({
      label: "Expiry Days"|t,
      id: 'expiry_days',
      name: 'expiry_days',
      type: 'number',
      min: '-1',
      instructions: "Set the days before the cookie should expire in this field"|t,
      disabled: 'expiry_days' in overrides,
      warning: 'expiry_days' in overrides ? configWarning('expiry_days'),
      value: settings.expiry_days,
      errors: settings.getErrors('expiry_days')
  }) }} 
  
  {{ forms.lightswitchField({
      label: "Secure Only"|t,
      id: 'secure_only',
      name: 'secure_only',
      instructions: "If the cookie should only be set on https://, enable this field"|t,
      disabled: 'secure_only' in overrides,
      warning: 'secure_only' in overrides ? configWarning('secure_only'),
      on: settings.secure_only
  }) }}
  
  
  {{ forms.lightswitchField({
      label: "Revokable"|t,
      id: 'revokable',
      name: 'revokable',
      instructions: "If permission should be revokable, enable this field"|t,
      disabled: 'revokable' in overrides,
      warning: 'revokable' in overrides ? configWarning('revokable'),
      on: settings.revokable
  }) }}
</div>
<br>

{% do view.registerAssetBundle("adigital\\cookieconsentbanner\\assetbundles\\cookieconsentbanner\\CookieConsentBannerAsset") %}
{% js %}
  // Critical CSS
  $("link[rel='preload']").each(function(){
    $(this).clone().attr("rel", "stylesheet").appendTo("head");
  });

  var themes = {
    'default':    {
      "popup":  {
        "background": "#000"
      },
      "button": {
        "background": "#f1d600"
      }
    },
    'ice':        {
      "popup":  {
        "background": "#eaf7f7",
        "text":       "#5c7291"
      },
      "button": {
        "background": "#56cbdb",
        "text":       "#ffffff"
      }
    },
    'cleanblue':  {
      "popup":  {
        "background": "#252e39"
      },
      "button": {
        "background": "#14a7d0"
      }
    },
    'greenblack': {
      "popup":  {
        "background": "#000",
        "text":       "#0f0"
      },
      "button": {
        "background": "#0f0"
      }
    },
    'pink':       {
      "popup":  {
        "background": "#3937a3"
      },
      "button": {
        "background": "#e62576"
      }
    },
    'purple':     {
      "popup":  {
        "background": "#64386b",
        "text":       "#ffcdfd"
      },
      "button": {
        "background": "#f8a8ff",
        "text":       "#3f0045"
      }
    },
    'blue':       {
      "popup":  {
        "background": "#237afc"
      },
      "button": {
        "background": "#fff",
        "text":       "#237afc"
      }
    },
    'red':        {
      "popup":  {
        "background": "#aa0000",
        "text":       "#ffdddd"
      },
      "button": {
        "background": "#ff0000"
      }
    },
    'white':      {
      "popup":  {
        "background": "#edeff5",
        "text":       "#838391"
      },
      "button": {
        "background": "#4b81e8"
      }
    },
    'graygreen':  {
      "popup":  {
        "background": "#3c404d",
        "text":       "#d6d6d6"
      },
      "button": {
        "background": "#8bed4f"
      }
    },
    'orange':     {
      "popup":  {
        "background": "#eb6c44",
        "text":       "#ffffff"
      },
      "button": {
        "background": "#f5d948"
      }
    },
    'whitegreen': {
      "popup":  {
        "background": "#efefef",
        "text":       "#404040"
      },
        "button": {
        "background": "#8ec760",
        "text":       "#ffffff"
      }
    }
  };
  window.addEventListener("load", function () {
    var banner_bg   = $("input[name='settings[palette_banner]']");
    var button_bg   = $("input[name='settings[palette_button]']");
    var banner_text = $("input[name='settings[palette_banner_text]']");
    var button_text = $("input[name='settings[palette_button_text]']");
    var button_text = $("input[name='settings[palette_button_text]']");
    var link_text = $("input[name='settings[palette_link]']");
    var left_button_bg = $("input[name='settings[palette_left_button_bg]']");
    var left_button_text = $("input[name='settings[palette_left_button_text]']");

    $('#settings-palette').on('change', function () {
      update_palette($(this).val());
    });

    $(document).on('change', "#settings-position, #settings-layout, input[name='settings[palette_banner]'], input[name='settings[palette_button]'], input[name='settings[palette_banner_text]'], input[name='settings[palette_button_text]'], input[name='settings[palette_link]'], input[name='settings[palette_left_button_bg]'], input[name='settings[palette_left_button_text]'], #settings-message, #settings-dismiss, #settings-learn, #settings-allow, #settings-decline, #settings-target, #settings-type", function () {
      update_demo();
    });

    function update_palette(sel) {
      var palette = themes[sel];

      console.log(palette);

      banner_bg.val(palette.popup.background || '#000000');
      button_bg.val(palette.button.background || '#f1d600');
      banner_text.val(palette.popup.text || '#ffffff');
      button_text.val(palette.button.text || '#000000');
      link_text.val(palette.popup.link || '#ffffff');
      left_button_bg.val(palette.button.background || '#f1d600');
      left_button_text.val(palette.button.text || '#000000');

      update_demo();
    }

    function update_demo() {
      console.log('updating demo...');
      $('.cc-window').remove();

      window.cookieconsent.initialise({
        "palette":  {
          "popup":  {
            "background": (banner_bg.val().charAt(0) != "#" ? "#" : "") + banner_bg.val(),
            "text":       (banner_text.val().charAt(0) != "#" ? "#" : "") + banner_text.val(),
            "link":       (link_text.val().charAt(0) != "#" ? "#" : "") + link_text.val()
          },
          "button": {
            "background": $('#settings-layout').val() == 'wire' ? 'transparent' : (button_bg.val().charAt(0) != "#" ? "#" : "") + button_bg.val(),
            "text":       $('#settings-layout').val() == 'wire' ? (button_bg.val().charAt(0) != "#" ? "#" : "") + button_bg.val() : (button_text.val().charAt(0) != "#" ? "#" : "") + button_text.val(),
            "border":     $('#settings-layout').val() == 'wire' ? (button_bg.val().charAt(0) != "#" ? "#" : "") + button_bg.val() : undefined
          },
          "highlight": {
	        "background": $('#settings-layout').val() == 'wire' ? 'transparent' : (left_button_bg.val().charAt(0) != "#" ? "#" : "") + left_button_bg.val(),
            "text":       $('#settings-layout').val() == 'wire' ? (left_button_bg.val().charAt(0) != "#" ? "#" : "") + left_button_bg.val() : (left_button_text.val().charAt(0) != "#" ? "#" : "") + left_button_text.val(),
            "border":     $('#settings-layout').val() == 'wire' ? (left_button_bg.val().charAt(0) != "#" ? "#" : "") + left_button_bg.val() : undefined
          }
        },
        "position": $('#settings-position').val() == 'toppush' ? 'top' : $('#settings-position').val(),
        "static":   $('#settings-position').val() == 'toppush',
        "theme":    $('#settings-layout').val(),
        "type":     $("#settings-type").val(),
        "content":  {
          "message": $("#settings-message").val(),
          "dismiss": $("#settings-dismiss").val(),
          "link":    $("#settings-learn").val(),
          "href":    $("#settings-learn_more_link").val(),
          "allow":   $("#settings-allow").val(),
          "deny":   $("#settings-decline").val(),
          "target":   $("#settings-target").val(),
        },
	    revokable: $("input[name='settings[revokable]']").val() === "1" ? true : false,
	    dismissOnScroll: $("#settings-dismiss_on_scroll").val() > 0 ? parseInt($("#settings-dismiss_on_scroll").val()) : false,
	    dismissOnTimeout: $("#settings-dismiss_on_timeout").val() > 0 ? (parseInt($("#settings-dismiss_on_timeout").val()) * 1000) : false,
        cookie: {
	      expiryDays: $("#settings-expiry_days").val() !== 0 ? $("#settings-expiry_days").val() : 365,
	      secure: $("input[name='settings[secure_only]']").val() === "1" ? true : false,
        }
      });
    }

    update_demo();
  });
{% endjs %}