<div class="panel panel-default websky-iranmap-panel" id="websky-iranmap-dashboard">
  <div class="panel-heading">
    <h3 class="panel-title"><i class="fa fa-map-o"></i> {{ heading_title }}</h3>
  </div>
  <div class="panel-body">
    <div class="websky-iranmap-layout">
      <div class="websky-iranmap-canvas" aria-live="polite">
        <div class="websky-iranmap-loading"><i class="fa fa-spinner fa-spin"></i> {{ text_loading }}</div>
      </div>
      <div class="websky-iranmap-summary">
        <div class="websky-iranmap-selected">
          <span class="websky-iranmap-selected-name">ایران</span>
          <strong class="websky-iranmap-selected-orders">۰ {{ text_orders }}</strong>
          <small class="websky-iranmap-selected-sales">—</small>
        </div>
        <div class="websky-iranmap-top"></div>
        <div class="websky-iranmap-legend"><span></span><em>{{ text_no_orders }}</em><span></span><em>{{ text_sales }}</em></div>
      </div>
    </div>
    <div class="websky-iranmap-tooltip" role="tooltip" hidden></div>
  </div>
</div>
<style type="text/css">
.websky-iranmap-panel .panel-body{position:relative;height:290px;min-height:0;padding:12px;overflow:hidden;box-sizing:border-box}.websky-iranmap-layout{display:flex;gap:16px;height:266px;min-height:0;direction:rtl}.websky-iranmap-canvas{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center}.websky-iranmap-canvas svg{display:block;width:100%;max-width:520px;height:260px}.websky-iranmap-canvas path{fill:#e8f3f8;stroke:#fff;stroke-width:1.6;cursor:pointer;transition:fill .18s ease,opacity .18s ease,transform .18s ease;transform-origin:center}.websky-iranmap-canvas path:hover,.websky-iranmap-canvas path:focus,.websky-iranmap-canvas path.is-active{fill:#155f86!important;outline:none;opacity:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}.websky-iranmap-loading{color:#8495a2}.websky-iranmap-summary{width:190px;height:100%;min-height:0;display:flex;flex-direction:column;gap:12px}.websky-iranmap-selected{flex:0 0 auto;border-radius:9px;padding:14px;background:linear-gradient(135deg,#f6fbfd,#edf6fa);border:1px solid #dbeaf1}.websky-iranmap-selected-name{display:block;color:#34495e;font-weight:700;margin-bottom:7px}.websky-iranmap-selected-orders{display:block;color:#1e91cf;font-size:16px}.websky-iranmap-selected-sales{display:block;color:#687982;margin-top:5px;line-height:1.6}.websky-iranmap-top{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-left:4px;display:flex;flex-direction:column;gap:6px}.websky-iranmap-top button{flex:0 0 auto;border:0;background:#f7f9fa;border-radius:6px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;color:#53636c;text-align:right}.websky-iranmap-top button:hover{background:#edf4f7;color:#1e91cf}.websky-iranmap-top b{font-size:11px;background:#e5eff4;border-radius:10px;padding:1px 7px}.websky-iranmap-legend{flex:0 0 auto;display:grid;grid-template-columns:12px 1fr;gap:5px 7px;align-items:center;margin-top:auto;font-size:10px;color:#7b8b94}.websky-iranmap-legend span{width:12px;height:12px;border-radius:3px;background:#e8f3f8}.websky-iranmap-legend span:nth-of-type(2){background:{{ map_color }}}.websky-iranmap-legend em{font-style:normal}.websky-iranmap-tooltip{position:fixed;z-index:10050;pointer-events:none;background:rgba(24,40,52,.94);color:#fff;border-radius:7px;padding:8px 10px;line-height:1.7;font-size:12px;box-shadow:0 5px 16px rgba(0,0,0,.2);white-space:nowrap}.websky-iranmap-tooltip strong{display:block;font-size:13px}.websky-iranmap-tooltip small{display:block;color:#c9d9e2}.websky-iranmap-error{color:#c0392b;text-align:center}.websky-iranmap-panel[dir="ltr"] .websky-iranmap-layout{direction:ltr}.websky-iranmap-panel[dir="ltr"] .websky-iranmap-top{padding-right:4px;padding-left:0}.websky-iranmap-panel[dir="ltr"] .websky-iranmap-top button{text-align:left}@media(max-width:767px){.websky-iranmap-panel .panel-body{height:auto;min-height:300px;overflow:visible}.websky-iranmap-layout{display:block;height:auto;min-height:275px}.websky-iranmap-canvas svg{height:250px}.websky-iranmap-summary{width:auto;height:auto}.websky-iranmap-top{display:none}.websky-iranmap-selected{display:flex;gap:12px;align-items:center;justify-content:space-between}.websky-iranmap-selected-name{margin:0}.websky-iranmap-selected-sales{margin:0}}
</style>
<script type="text/javascript"><!--
(function($) {
  'use strict';

  var root = $('#websky-iranmap-dashboard');
  var canvas = root.find('.websky-iranmap-canvas');
  var tooltip = root.find('.websky-iranmap-tooltip');
  var provinces = {{ provinces_json }};
  var values = {};
  var baseColor = '{{ map_color }}';

  function faNumber(value) {
    if (document.documentElement.lang && document.documentElement.lang.toLowerCase().indexOf('fa') === 0) {
      return String(value).replace(/[0-9]/g, function(digit) { return '۰۱۲۳۴۵۶۷۸۹'[digit]; });
    }
    return value;
  }

  function escapeHtml(value) {
    return $('<div>').text(value == null ? '' : value).html();
  }

  function hexToRgb(hex) {
    return [parseInt(hex.substr(1, 2), 16), parseInt(hex.substr(3, 2), 16), parseInt(hex.substr(5, 2), 16)];
  }

  function shade(value, maximum) {
    if (!value || !maximum) return '#e8f3f8';
    var rgb = hexToRgb(baseColor);
    var intensity = 0.28 + (0.72 * Math.sqrt(value / maximum));
    return 'rgb(' + $.map(rgb, function(channel) { return Math.round(255 - ((255 - channel) * intensity)); }).join(',') + ')';
  }

  function selectProvince(code) {
    var item = values[code] || {total: 0, amount: '{{ text_no_orders|e('js') }}'};
    root.find('path').removeClass('is-active').filter('[data-id="' + code + '"]').addClass('is-active');
    root.find('.websky-iranmap-selected-name').text(provinces[code] || code);
    root.find('.websky-iranmap-selected-orders').text(faNumber(item.total) + ' {{ text_orders|e('js') }}');
    root.find('.websky-iranmap-selected-sales').text(item.total ? item.amount : '{{ text_no_orders|e('js') }}');
  }

  function bindMap(json) {
    values = json.provinces || {};
    var maximum = 0;
    $.each(values, function(code, item) { maximum = Math.max(maximum, parseInt(item.total, 10) || 0); });

    canvas.find('svg').removeAttr('width height style').attr({'role': 'img', 'aria-label': '{{ heading_title|e('js') }}', 'preserveAspectRatio': 'xMidYMid meet'});
    canvas.find('path').each(function() {
      var path = $(this);
      var code = path.attr('data-id') || path.attr('id');
      var item = values[code] || {total: 0, amount: '{{ text_no_orders|e('js') }}'};
      var name = provinces[code] || path.attr('data-name') || code;
      path.attr({'data-id': code, 'tabindex': '0', 'role': 'button', 'aria-label': name + ': ' + item.total + ' {{ text_orders|e('js') }}'}).css('fill', shade(parseInt(item.total, 10), maximum));
    });

    canvas.on('mouseenter focus', 'path', function(event) {
      var code = $(this).attr('data-id');
      var item = values[code] || {total: 0, amount: '{{ text_no_orders|e('js') }}'};
      tooltip.html('<strong>' + escapeHtml(provinces[code] || code) + '</strong><span>' + faNumber(item.total) + ' {{ text_orders|e('js') }}</span><small>' + escapeHtml(item.total ? item.amount : '{{ text_no_orders|e('js') }}') + '</small>').prop('hidden', false);
      if (event.type === 'focus') {
        var rect = this.getBoundingClientRect();
        tooltip.css({left: rect.left + (rect.width / 2) - (tooltip.outerWidth() / 2), top: rect.top - tooltip.outerHeight() - 8});
      }
    }).on('mousemove', 'path', function(event) {
      tooltip.css({left: event.clientX + 14, top: event.clientY + 14});
    }).on('mouseleave blur', 'path', function() {
      tooltip.prop('hidden', true);
    }).on('click keydown', 'path', function(event) {
      if (event.type === 'click' || event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        selectProvince($(this).attr('data-id'));
      }
    });

    var top = [];
    $.each(values, function(code, item) { if (item.total > 0) top.push({code: code, total: parseInt(item.total, 10)}); });
    top.sort(function(a, b) { return b.total - a.total; });
    $.each(top.slice(0, 5), function(index, item) {
      $('<button type="button"><span></span><b></b></button>').find('span').text(provinces[item.code] || item.code).end().find('b').text(faNumber(item.total)).end().attr('data-code', item.code).appendTo(root.find('.websky-iranmap-top'));
    });
    root.find('.websky-iranmap-top').on('click', 'button', function() { selectProvince($(this).attr('data-code')); });

    var first = top.length ? top[0].code : 'IR.TH';
    selectProvince(first);
  }

  $.when($.get('{{ map_url }}'), $.getJSON('{{ data_url }}')).done(function(mapResponse, dataResponse) {
    var mapDocument = typeof mapResponse[0] === 'string' ? $.parseXML(mapResponse[0]) : mapResponse[0];
    var svg = mapDocument.documentElement;
    canvas.empty().append(document.importNode(svg, true));
    bindMap(dataResponse[0]);
  }).fail(function() {
    canvas.html('<div class="websky-iranmap-error"><i class="fa fa-exclamation-triangle"></i><br>{{ text_load_error|e('js') }}</div>');
  });
})(jQuery);
//--></script>
