$( document ).ready(function() {

  $.fn.jarvan_select = function (options) {
    if (!$.fn.jarvan_select.setup_done) {
        $.fn.jarvan_select.setup();
    }
    var settings = $.extend({}, $.fn.jarvan_select.defaults, options);

    return this.each(function () {
      var $select = $(this);
      $select.hide();
      var id = $select[0].id;
      
      $("#filters_"+id).val("");
      //$("#"+id).val("");
  
      var label = $select[0].dataset.label || "";
      if(w.lang_translate) {
        label = w.lang_translate(label);
      }

  
      try {
        $('#'+id+' option[value='+$select.val()+']').attr('selected','selected');
      } catch(e) {}

      $.fn.jarvan_select.set("apply_action_" + id, settings.apply_action);

      if($("#filter_" + id)[0]){
        return;
      }

      var height = (settings.title == "" ? "35px" : "");
      var width = settings.width + "px";
      var html = `
  <div class="mb4" id="filter_` + id + `" style='width:`+width+`;height:` + height + `;cursor:pointer' onclick="$.fn.jarvan_select.create_filter_box('` + id + `')">


    <div class="form-floating mb-4" id="container_filters_` + id + `">
    <input readonly type="text" class="form-control" style="background-color:white"
    id="filters_` + id + `"  value = "" autocomplete='off'>
  <label for="filters_` + id + `">`+label+`</label>
    </div>

    <div style='display:none'>
` + $select[0].outerHTML + `
    </div>
</div>
`;

      $select.replaceWith(html);

      $.fn.jarvan_select.set("filter_field_name", id);
      $.fn.jarvan_select.rebuild_filter_body();

      $("#filter_container2").show();

    });
  };

  $.fn.jarvan_select.defaults = {
    apply_action: function () {
    },
    title: "__",
    width: "100%"
  };


  $.fn.jarvan_select.setup = function () {
    $.fn.jarvan_select.setup_done = true;
    $('head').append(`
<style>

#filters { width:100%; clear:both; background-color:#fff;height:76px; padding:6px 0 0px 0; display:table;max-width:calc(1600px); left:20px}
.filter_field { float:left; border:1px solid #ddd; border-radius:4px; height:35px; overflow:hidden; background-color:#f5f5f5;}
.filter_field .title { display:none; width:calc(100% - 20px); margin:8px 10px 0 10px; font-size:1rem; }
.filter_field .text { width:calc(100% - 20px); margin:0px 10px; font-size:1rem;  height:36px;cursor:pointer; line-height:36px;color:#666;}

select {height:58px; width:100%; color:white;border-color:white;}

#filter_box { height:400px; display:none; position:absolute; border:1px solid #999; background-color:#f5f5f5; overflow:hidden; border-radius:4px }
#filter_box input { border:0;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 18px 18px;
        background-position: 95% center; 
        width:calc(100% - 21px); }
#filter_box_body { margin-top:3px;overflow:auto;height: 362px;background-color:#eee; cursor:pointer; overflow-x:hidden;}        
#filter_box_body div { cursor:pointer; width:100%;  padding:5px 10px; line-height:26px; font-size:1rem; }
#filter_box_body div.selected { background-color:#eff; }
#filter_box_body div:hover { background-color:#ddd; }
.filter_search, .filter_search:focus { border:0; margin:0; padding:0; font-size:1rem; }
#filter_box .clear_all {border-bottom:1px solid #ccc;text-align:right}
#filter_box .apply {text-align:center;width:80px;float:right;cursor:pointer; border-top:1px solid #ccc;height:36px;line-height:36px; text-align:right; font-size:1rem; padding:0;}
#filter_box .clear { color:#ccc;text-align:center;width:80px;float:left;cursor:pointer; border-top:1px solid #ccc;height:36px;line-height:36px; text-align:left; font-size:1rem; padding:0;}
#filter_box .clear span {margin-left:20px}
#filter_box .all { text-align:center;width:80px;float:left;cursor:pointer; border-top:1px solid #ccc;height:36px;line-height:36px; text-align:left; font-size:1rem; padding:0;}
#filter_box .apply:hover  { background-color:#efe; }
#filter_box .clear:hover  { background-color:#fee; }
#filter_box .all:hover  { background-color:#eff; }
#filter_box input { }
#filter_layer { 
    cursor:pointer; display:none; width:100%; 
    height:calc(100% - 0px); position:fixed; 
    top:0px; left:0; z-index:99; background-color:#fafafa;}
    
</style>
  `);


    $.fn.jarvan_select.values = {};
    $.fn.jarvan_select.set = function (k, v) {
      $.fn.jarvan_select.values[k] = v;
    };
    $.fn.jarvan_select.get = function (k) {
      return ($.fn.jarvan_select.values[k] || null);
    };
    var d = document.createElement("div");
    d.id = 'filter_box_container';
    document.body.appendChild(d);

    d3 = document.createElement("div");
    d3.id = 'filter_layer';
    document.body.appendChild(d3);

    $("#filter_layer").click(function () {
      $.fn.jarvan_select.toggle_layer("hide");
    });
  };

  $.fn.jarvan_select.create_filter_box = function (field_name) {

    var label = $("#"+field_name)[0].dataset.label || "";
      if(w.lang_translate) {
        label = w.lang_translate(label);
    }

//console.log("create_filter_box");
    var html = `
    <div class="form-floating" id="container_filter_search">
    <input type="text" 
    class="form-control" 
    style="margin:0;width:100%;" 
    onkeyup='$.fn.jarvan_select.rebuild_filter_body()' id='filter_search'
    autocomplete='off'
    >
  <label for="filter_search">`+label+`</label>
<img id="filter_search_image" src = "/static/buscar.png" style="position:absolute;margin:-27px 0 0 15px">
</div>
    
  <div id='filter_box_body'></div>

<!--
  <div onclick='$.fn.jarvan_select.filter_all(true)' class='all'><div style="text-align:center">ALL</div></div>
  <div class='clear' onclick='$.fn.jarvan_select.filter_all(false)'><span id='filter_clear_all'>CLEAR</span></div>
  <div onclick='$.fn.jarvan_select.apply()' class='apply'><div style="text-align:center">APPLY</div></div>
-->
`;

    $("#filter_box_container").html("<div id='filter_box'></div>");

    var offset = $("#filters_" + field_name).offset();
    $.fn.jarvan_select.set("filter_field_name", field_name);

//console.log("offset.top", offset.top);

    $("#filter_box").css("width",$("#container_filters_" + field_name).width()+"px").css("z-index", 100).css("left", (offset.left) + "px").css("top", offset.top + "px").html(html);
    window.setTimeout(function() { 
        $.fn.jarvan_select.toggle_layer("show");
        $("#filter_search").focus();

        var clickEvent;

        if ('onpointerdown' in window) {
            // use 'pointerdown' if pointerEvent API is supported
            clickEvent = 'pointerdown';
            //console.log('pointerEvents used');
        } else if ('ontouchstart' in window) {
            // use 'touchstart' if touch device
            clickEvent = 'touchstart';
            //console.log('touch device');
        } else {
            // else use mouse event
            clickEvent = 'click';
            //console.log('old fashioned mouse events');
        }

        $("#filter_layer").on(clickEvent, function(e) {
            $.fn.jarvan_select.toggle_layer("hide");
        });
     },100);

    $.fn.jarvan_select.rebuild_filter_body();


    $.fn.jarvan_select.interval = window.setInterval(function() {
       $.fn.jarvan_select.position_box(field_name);
    },100);
    $.fn.jarvan_select.position_box(field_name);

    
  };
  
  $.fn.jarvan_select.position_box = function() {
    let is_mobile = (/Mobi/.test(navigator.userAgent));
    let wh = $(window).height();
    let b = document.querySelector("#filter_box").getBoundingClientRect().bottom;
    //console.log("b", b, $("#filter_box").css("position"), $("#filter_box").css("bottom"));
    let is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    if(is_safari && is_mobile) {
        let wh = $(window).height();
        $("#filter_box").css("position", "fixed").css("bottom", "").css("top", "20px");
        //$("#filter_layer").css("background-color", "red");


    } else {
        $("#filter_layer").css("background-color", "#ffffff22");
        if(b>wh) {

            $("#filter_box").css("position", "fixed").css("bottom", 5).css("top", "");
            //$(document.body).height("300px").css("overflow", "hidden")
            //console.log("fix bottom");
            //window.scrollBy({top: b-wh+20, behavior: "instant"});  
        }
    }
    if($("#filter_search").val()) {
        $("#filter_search_image").hide();
    } else {
        $("#filter_search_image").show();
    }
  }

  $.fn.jarvan_select.toggle_layer = function(show_hide) {
    if(show_hide=="show") {
        window.setInterval(function() {
            let wh = $(window).height();
            //$("#filter_search").val(window.pageYOffset +"/"+window.scrollY + " / " + wh + " / " + document.querySelector("#filter_box").getBoundingClientRect().top + " / " + document.querySelector("#filter_box").getBoundingClientRect().bottom);

        },500);
        $.fn.jarvan_select.old_body_overflow = $("body").css("overflow");
        $("#filter_layer").show();
        $("#filter_box").show();
        $("#filter_search").focus();
        $("body").css("overflow", "hidden");
    } else {
        window.clearInterval($.fn.jarvan_select.interval);
        $("#filter_search").blur();
        $("#filter_layer").hide();
        $("#filter_box").hide();
        $("body").css("overflow", $.fn.jarvan_select.old_body_overflow);
    }
  }

  $.fn.jarvan_select.rebuild_filter_body = function () {
    var filter_search = $("#filter_search").val() || "";
    var field_name = $.fn.jarvan_select.get("filter_field_name");
    var filter_object = {
      selected: [],
      unselected: []
    };
    var options = document.getElementById(field_name).options;

    var opt, i, iLen;
    for (i = 0, iLen = options.length; i < iLen; i++) {
      opt = options[i];

      if (opt.selected) {
        filter_object.selected.push({
          value: opt.value,
          text: opt.text
        });
      }
      else {
        if (filter_search == '' || opt.text.toLowerCase().indexOf(filter_search.toLowerCase()) >= 0) {
          filter_object.unselected.push({
            value: opt.value,
            text: opt.text
          });
        }
      }
    }

    var filters_text = "";
    var html = "";
    var show_clear_all = false;
    for (i in filter_object.selected) {
      if (filter_object.selected.hasOwnProperty(i)) {
        opt = filter_object.selected[i];
        var id = opt.text.substring(opt.text.length-3);
        var premium="";
        if(id>199) {
          premium = "<span style='display:;background-color:#ff6f00;color:white;line-height:11px;padding:0px 4px;border-radius:2px;font-size:9px;margin-bottom:2px'>A</span>";
        } else if(id>99) {
          premium = "<span style='display:;background-color:#4b830d;color:white;line-height:11px;padding:0px 4px;border-radius:2px;font-size:9px'>S</span>";
        }
        premium="";

        html += "<div onclick='$.fn.jarvan_select.select_filter_option(`" + opt.value + "`, false)' class='selected'>"+premium+"" + opt.text + "</div>";
        filters_text += (filters_text == "" ? "" : ", ") + premium+"" +opt.text;
      }
    }
    if (filter_object.selected.length > 0) {
      show_clear_all = true;
    }
    for (i in filter_object.unselected) {
      if (filter_object.unselected.hasOwnProperty(i)) {
        opt = filter_object.unselected[i];
        var id = opt.text.substring(opt.text.length-3);
        var premium="";
        if(id>199) {
          premium = "<span style='display:;background-color:#ff6f00;color:white;line-height:11px;padding:0px 4px;border-radius:2px;font-size:9px;margin-bottom:2px'>A</span>";
        } else if(id>99) {
          premium = "<span style='display:;background-color:#4b830d;color:white;line-height:11px;padding:0px 4px;border-radius:2px;font-size:9px'>S</span>";
        }
        premium="";
        html += "<div onclick='$.fn.jarvan_select.select_filter_option(`" + opt.value + "`, true)'>" +premium+""+ opt.text +"</div>";
      }
    }
    $("#filter_box_body").html(html);
    $("#filter_clear_all").css("color", (show_clear_all ? '#000' : '#ccc'));
    if ($("#filter_" + field_name)[0].onchange && $("#filter_" + field_name)[0].onchange != "") {
      $("#filter_" + field_name)[0].onchange();
    }
    if (filters_text == "") {
      filters_text = "";
    }
    $("#filters_" + field_name).val(filters_text.replace(/\&nbsp;/g, " "));


    $("#filter_box").css("height", (34+(Math.min(options.length+1,7)) *36)+"px")
    $("#filter_box_body").css("height",-28+((Math.min(options.length+1,7)) *36)+"px")
/*
    if(options.length<8) {
      $("#filter_box").css("height", (34+options.length*36)+"px")
    } else {
      $("#filter_box").css("height", (34+options.Math.min(8,options.length)*36)+"px")
    }
*/
  };
  

  $.fn.jarvan_select.filter_all = function (sel) {
    var field_name = $.fn.jarvan_select.get("filter_field_name");
    $('#' + field_name).children("option").prop("selected", sel);
    $.fn.jarvan_select.rebuild_filter_body();
  };
  $.fn.jarvan_select.select_filter_option = function (option, selected) {
    var field_name = $.fn.jarvan_select.get("filter_field_name");
    var vals = $('#' + field_name).val() || [];
    if(Array.isArray(vals)) {
      if (!selected) {
        $.fn.jarvan_select.remove(vals, option);
      }
      else {
        vals.push(option);
      }
    } else {
      vals = option;  
    }
    $('#' + field_name).val(vals);
    $.fn.jarvan_select.rebuild_filter_body();
    $.fn.jarvan_select.apply();
  };
  $.fn.jarvan_select.remove = function (array, element) {
    const index = array.indexOf(element);
    array.splice(index, 1);
  };

  /*
  $.fn.jarvan_select.draw_filter_field = function (field_name, field) {
    //   debugger;
    var options = field.data;
    var multiple = (field.multiple ? "multiple" : "");
    var html = "<div class='title'>" + field.title + "</div><div onclick='$.fn.jarvan_select.create_filter_box(this.id.split(`filters_`)[1])' class='text' id='filters_" + field_name + "'>Select ></div>" + "<select style='display:none' onchange='$.fn.jarvan_select.changed_filter(`" + field_name + "`)' " + multiple + " id='filter_" + field_name + "'>";
    var printed_list = {};
    for (var option in options) {
      if(options.hasOwnProperty(option)) {  
        var txt = options[option].name || options[option].id;
        if (!printed_list[options[option].id]) {
          printed_list[options[option].id] = true;
          html += "<option value='" + options[option].id + "'>" + txt + "</option>";
        }
      }
    }
    html += "</select>";
    $("#filter_field_" + field_name).html(html);
    $.fn.jarvan_select.changed_filter(field_name);
//    w.sort_select("filter_" + field_name);
  };
*/
  $.fn.jarvan_select.apply = function () {
    var field_name = $.fn.jarvan_select.get("filter_field_name");

    $.fn.jarvan_select.get("apply_action_" + field_name)();

    $.fn.jarvan_select.toggle_layer("hide");
    if($('#' + field_name)[0].onchange) {
      $('#' + field_name)[0].onchange();
    }
  };
});