﻿<html>
<head>
  <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
  <script data-main="five9_/Scripts/app/main.configuration" src="five9_/Scripts/app/require.js"></script>

  <link rel="stylesheet" type="text/css" href="five9_/assets/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="five9_/css/configuration.css">
  <link rel="stylesheet" type="text/css" href="five9_/css/spinner.css">
</head>
<body class="d-flex flex-column">
<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-general-tab" data-toggle="tab" href="#nav-general" role="tab" aria-controls="nav-general" aria-selected="true">General</a>
    <a class="nav-item nav-link" id="nav-entities-tab" data-toggle="tab" href="#nav-entities" role="tab" aria-controls="nav-entities" aria-selected="false">Entity Configuration</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-general" role="tabpanel" aria-labelledby="nav-general-tab">
    <div class="container-fluid mt-3 mb-3">
      <label for="five9_adapter_url">Network Domain</label>
      <div id="five9_adapter_url_group" class="input-group mb-3">
        <div class="input-group-prepend">
          <select id="five9_network_domain_type" class="form-control">
            <option value="com">COM</option>
            <option value="eu">UK</option>
            <option value="ca">CA</option>
            <option value="eu_NLD">EU</option>
            <option value="custom">Custom...</option>
          </select>
        </div>
        <input id="five9_adapter_url" type="text" class="form-control" aria-label="Text input with dropdown button">
      </div>

      <label for="five9_idp_login_url">IdP Login URL</label>
      <input id="five9_idp_login_url" type="url" class="form-control mb-3" placeholder="Enter IdP Login URL"/>

      <!--
      <div class="custom-control custom-checkbox mb-3">
        <input id="five9_login_without_sso" type="checkbox" class="form-check-input"/>
        <label for="five9_login_without_sso">Enable username/password authentication, in addition to SSO</label>
        </select>
      </div>
      -->

      <label for="five9_adapter_display_mode" class="d-none">Five9 Adapter Display Mode (<strong>applies to MS Dynamics Classic UI</strong>)</label>
      <select id="five9_adapter_display_mode" class="form-control mb-3 col-6 d-none">
        <option value="Embedded">Embedded</option>
        <option value="Floating">Floating</option>
        <option value="EmbeddedFloating">Embedded Floating</option>
      </select>

      <div class="row mb-3">
        <div class="col-6">
          <label for="five9_adapter_width">Five9 Adapter Width</label>
          <input id="five9_adapter_width"
                 type="number" min="0" max="1200" step="10"
                 class="form-control"
                 placeholder="300"/>
        </div>

        <div class="col-6">
          <label for="five9_adapter_height">Five9 Adapter Height</label>
          <input id="five9_adapter_height"
                 type="number" min="0" max="1200" step="10"
                 class="form-control"
                 placeholder="600"/>
        </div>
      </div>

      <label for="five9_predefined_campaign_field_name">Predefined Campaign Field Name</label>
      <input id="five9_predefined_campaign_field_name"
             class="form-control mb-3"
             placeholder="Enter Logical Name of the field, e.g. new_five9_campaingname"/>

             <div class="custom-control custom-checkbox mb-3 form-check">
                <input id="five9_multichannel_support" type="checkbox" class="form-check-input" data-details="five9_omni_info"/>
                <label for="five9_multichannel_support" class="form-check-label">Five9 Omnichannel support</label>
                <div id="five9_omni_info" class="alert alert-info">
                  <strong>Info!</strong> For Omnichannel functionality enable the "User must use the latest UI design in the integrated adapters" agent permission in the VCC Administrator application.
                </div>
              </div>

      <div class="custom-control custom-checkbox mb-3">
        <input id="five9_click_2_dial_search" type="checkbox" class="form-check-input"/>
        <label for="five9_click_2_dial_search">Click 2 Dial search</label>
      </div>

      <div class="custom-control custom-checkbox mb-3">
        <input id="five9_anisearch_use_wild_card_search" type="checkbox" class="form-check-input" data-details="#five9_anisearch_wild_card_search_info"/>
        <label for="five9_anisearch_use_wild_card_search">Use wildcard phone search</label>
        <div id="five9_anisearch_wild_card_search_info" class="alert alert-info">
          <strong>Info!</strong> Applied when 'Search By Phone Number' search type is selected as the default behavior for Voice interactions
        </div>
      </div>

      <div class="custom-control custom-checkbox mb-3">
        <input id="five9_create_when_no_match" type="checkbox" class="form-check-input" data-details="#five9_no_match_entities"/>
        <label for="five9_create_when_no_match">Show a new record form when no match</label>
        <select id="five9_no_match_entities" class="form-control mb-3 col-6 five9-entity-list">
        </select>
      </div>

      <div class="custom-control custom-checkbox mb-3">
        <input id="five9_new_interaction_popup" type="checkbox" class="form-check-input"/>
        <label for="five9_new_interaction_popup">Automatic screen pop confirmation (single match)</label>
      </div>

      <div class="card">
        <div class="card-header">
          Screen Pop Entities
        </div>
        <div id="five9_supported_entities" class="card-body">
        </div>
      </div>
    </div>
  </div>

  <div class="tab-pane fade" id="nav-entities" role="tabpanel" aria-labelledby="nav-entities-tab">
    <div class="container-fluid mt-3  mb-3">
      <div class="card">
        <div class="card-header">
          <label for="five9_entities" class="d-inline">Select entity to configure: </label>
          <select id="five9_entities" class="form-control d-inline col-6 five9-entity-list">
          </select>
        </div>
        <div class="card-body">
          <div class="alert alert-info">
            <strong>Important</strong> Query format depends on your Dynamics 365 version. For version 9.0 and higher,
            you must use the Web API endpoint query format (examples: "statuscode eq 1", "telephone1 eq '9876543210'").
            Otherwise you must use the 2011 API endpoint query format (example: "StatusCode/Value eq 1", "Telephone1 eq '9876543210'")
          </div>

          <label for="five9_entity_type">Record type</label>
          <select id="five9_entity_type" class="form-control mb-3 col-6">
            <option value="name">Person record</option>
            <option value="related">Related record</option>
            <option value="both">Both (appears in both lists Name and Related To)</option>
          </select>

          <div class="custom-control custom-checkbox mb-3">
            <input id="five9_entity_use_active_query" type="checkbox" class="form-check-input" data-details="#five9_entity_active_query"/>
            <label for="five9_entity_use_active_query">Apply record active filter query</label>
            <input id="five9_entity_active_query" class="form-control mb-3" placeholder="statuscode eq 1"/>
          </div>

          <label for="five9_entity_phone_fields">Phone Fields (if not specified fields with 'Phone' format type will be used)</label>
          <input id="five9_entity_phone_fields" type="text" class="form-control mb-3" placeholder="telephone1,mobilephone,<field_logical_name>,..."/>

          <label for="five9_entity_email_fields">Email Fields (if not specified fields with 'Email' format type will be used)</label>
          <input id="five9_entity_email_fields" type="text" class="form-control mb-3" placeholder="emailaddress1,emailaddress2,<field_logical_name>,..."/>

          <label for="five9_entity_voice_search_type">Default behavior for Voice interactions (when search by CAVs either hasn't been configured or has returned nothing)</label>
          <select id="five9_entity_voice_search_type" class="form-control mb-3 col-6">
            <option value="no_search">No Search</option>
            <option value="fields">Search By Phone Number</option>
            <option value="query">Search Query</option>
          </select>
          <div class="custom-control">
            <textarea id="five9_entity_voice_search_query" class="form-control mb-3" rows="3" placeholder="telephone1 eq '@number@'"></textarea>
          </div>

          <div class="five9_omnichannel_setting">
            <label for="five9_entity_text_search_type">Default behavior for Text interactions (when search by Custom fields either hasn't been configured or has returned nothing)</label>
            <select id="five9_entity_text_search_type" class="form-control mb-3 col-6">
              <option value="no_search">No Search</option>
              <option value="fields">Search By Email Address</option>
              <option value="query">Search Query</option>
            </select>
            <div class="custom-control">
              <textarea id="five9_entity_text_search_query" class="form-control mb-3" rows="3" placeholder="email1 eq '@email@'"></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="">
  <button id="five9_save" type="button" class="btn btn-primary col-3">Save</button>
</footer>

  <!-- OmniChannel UX uncheck confirmation -->
  <div class="modal" id="five9_omni_dialog" tabindex="-1" role="dialog" aria-labelledby="five9_omni_dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <p>You cannot undo your selection. To continue, click Yes.</p>
        </div>
        <div class="modal-footer">
          <button id="five9_omni_dialog_btn_cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button id="five9_omni_dialog_btn_ok" type="button" class="btn btn-primary">Yes</button>
        </div>
      </div>
    </div>
  </div>

<!-- Loading spinner -->
<div class="modal" id="five9_loading" tabindex="-1" role="dialog" aria-labelledby="five9_loading">
  <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="progress-container">
          <div id="circularG">
            <div id="circularG_1" class="circularG">
            </div>
            <div id="circularG_2" class="circularG">
            </div>
            <div id="circularG_3" class="circularG">
            </div>
            <div id="circularG_4" class="circularG">
            </div>
            <div id="circularG_5" class="circularG">
            </div>
            <div id="circularG_6" class="circularG">
            </div>
            <div id="circularG_7" class="circularG">
            </div>
            <div id="circularG_8" class="circularG">
            </div>
          </div>
        </div>
        <div class="progress-text" style="display: none;">
          <h2 class="font-weight-bold">Changes saved!</h2>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
