$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });


  $('#myTab a').on('click', function (e) {
    e.preventDefault();
    $(this).tab('show');
  });

  function createAllDTable() {
    var table = new Tabulator("#allDTable", {
      columns: [{
          title: "ID",
          field: "id",
          visible: false
        },
        {
          title: "R1 (mm)",
          field: "R1"
        },
        {
          title: "R2 (mm)",
          field: "R2"
        },
        {
          title: "Efficiency (%)",
          field: "Eff",
          headerFilter: true,
          headerFilterPlaceholder: 'greater than',
          headerFilterFunc: ">="
        },
        {
          title: "KZVS",
          field: "KZVS",
          headerFilter: true,
          headerFilterPlaceholder: 'greater than',
          headerFilterFunc: ">="
        },
        {
          title: "Vib. Velcoity RMS (m/s)",
          field: "vibVel",
          headerFilterPlaceholder: 'less than',
          headerFilter: true,
          headerFilterFunc: "<="
        },
        {
          title: "Score",
          field: "score",
          headerFilterPlaceholder: 'greater than',
          headerFilter: true,
          headerFilterFunc: ">="
        },
      ],
      height: "540px",
      layout: "fitColumns",
      pagination: "local", //paginate the data
      paginationSize: 15,
      tooltips:true,
      tooltipsHeader:true,
    });
    return table
  }

  function createBestTable() {
    var table = new Tabulator("#bestDTable", {
      columns: [{
          title: "ID",
          field: "id",
          visible: false,
          align:"center",
        },
        {
          title: "R1 (mm)",
          field: "R1",
          align:"center",
        },
        {
          title: "R2 (mm)",
          field: "R2",
          align:"center",
        },
        {
          title: "Rad (mm)",
          field: "Rad",
          align:"center",
        },
        {
          title: "L1",
          field: "L1",
          align:"center",
        },
        {
          title: "C1",
          field: "C1",
          align:"center",
        },
        {
          title: "R",
          field: "R",
          align:"center",
        },
        {
          title: "Cin",
          field: "Cin",
          align:"center",
        },
        {
          title: "Cout",
          field: "Cout",
          align:"center",
        },
        {
          title: "N1",
          field: "N1",
          align:"center",
        },
        {
          title: "Efficiency (%)",
          field: "Eff",
          align:"center",
        },
        {
          title: "KZVS",
          field: "KZVS",
          align:"center",
        },
        {
          title: "Vib. Velcoity RMS (m/s)",
          field: "vibVel",
          align:"center",
        },
      ],
      layout: "fitColumns",
      tooltips:true,
      tooltipsHeader:true,
    });
    return table
  }

  var bestdataJSON = []
  function bestJSONData(data) {
    var result = [];
      var element = {
        "R1": data.R1[data.bd].toPrecision(2),
        "R2": data.R2[data.bd].toPrecision(2),
        "Eff": data.Eff[data.bd].toPrecision(4),
        "KZVS": data.KZVS[data.bd].toPrecision(4),
        "vibVel": data.vibVel[data.bd].toPrecision(4),
        "score": data.score[data.bd].toPrecision(3),
        "L1": data.L1[data.bd].toExponential(2),
        "C1": data.C1[data.bd].toExponential(4),
        "R": data.R[data.bd].toPrecision(4),
        "Cin": data.Cin[data.bd].toExponential(4),
        "Cout": data.Cout[data.bd].toExponential(4),
        "N1": data.N1[data.bd].toPrecision(4),
        "VDC": data.VDC,
        "RL": data.RL,
        "fS": data.fS[data.bd],
        "Rad":data.Rad,
        "Phi":data.phi,
        "mosCout":data.mosCout,
        "VoutP":data.VoutP,
      }
      result.push(element)
      bestdataJSON = JSON.stringify(result);
  }

  var data = [];
  $("#inputSpec").submit(function (event) {
    if (screen.width <= 576){
      closeSidebar()
    }
    event.preventDefault()
    $.ajax({
      url: '/PTDesigner/receivedataRD',
      data: $('form').serialize(),
      type: 'POST',
      success: function (response) {

        Plotly.purge('Vout_plot');
        Plotly.purge('Vcin_plot');
        Plotly.purge('eff_Plot_1');
        Plotly.purge('vib_vel_plot');
        Plotly.purge('allDTable');
        Plotly.purge('score_plot');
        Plotly.purge('KZVS_plot');

        if (typeof window.table != "undefined") {
          window.table.clearData();
          window.besttable.clearData();
        }

        $("#numb").html('No devices Found!')
        data = JSON.parse(response);

        $('#loading-spinner').html(`<strong>Loading...</strong>
        <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>`);
        
        console.log(data)
        JSONData(data);
        window.table = createAllDTable()
        window.table.setData(dataJSON)
        window.table.setSort("score", "desc")
        drawCharts(data);
        bestJSONData(data)
        window.besttable = createBestTable()
        window.besttable.setData(bestdataJSON)

        var str = ""
        str += "<p>Number of Potential Devices: "
        str += data.NumbOfD
        str += "<Br>"
        str += "Radius: "
        str += data.Rad
        str += "mm"
        str += "<Br>"
        str += "Resonant Freq.: "
        str += data.ResFreq / 1e3
        str += "kHz"
        str += "</p>"

        $("#numb").html(str)
        console.log(bestdataJSON)

        $.ajax({
          url: '/PTDesigner/receivebestdataRD',
          data: bestdataJSON,
          type: 'POST',
          success: function (response) {
            spiceData = JSON.parse(response)
            console.log(spiceData)
            str =[]
            // str += 'Circuit Efficiency: '
            // str += spiceData.CircuitEff.toPrecision(3)
            // str += '%'
            str += 'Load: '
            str += data.RL.toPrecision(4)
            str += ' Ohms'
            str += '<br>Vout<sub>RMS</sub>: '
            str += spiceData.VoutRMS.toPrecision(3)
            str += 'V'
            $('#extraResults').html(str)

            drawBestChart(spiceData)
            $('#circuitInfo').show()
            $('#loading-spinner').html(``);
          },
          error: function (error) {
            // console.log(error);
          }
        });

      },
      error: function (error) {
        console.log(error);
      }
    });


  });

  var dataJSON = []

  function JSONData(data) {
    var result = [];
    for (i = 0; i < data.R1.length; ++i) {
      var element = {
        "id": i,
        "R1": data.R1[i].toPrecision(2),
        "R2": data.R2[i].toPrecision(2),
        "Eff": data.Eff[i].toPrecision(4),
        "KZVS": data.KZVS[i].toPrecision(4),
        "vibVel": data.vibVel[i].toPrecision(4),
        "score": data.score[i].toPrecision(3),
      };
      result.push(element)
    }
    dataJSON = JSON.stringify(result);
  }

  function openSidebar() {
    if (screen.width > 576){
      $(".sidebar-wrapper").width(300);
      document.getElementById("page-content-wrapper").style.marginLeft = "300px"
    } else{
      $(".sidebar-wrapper").width('100%');
      document.getElementById("page-content-wrapper").style.marginLeft = "100%"
    }
    $('#buttonDiv').show();
    $('#sidebarOpen').hide();
  }

  function closeSidebar() {
      $(".sidebar-wrapper").width(0);
      document.getElementById("page-content-wrapper").style.marginLeft = "0px"
      $('#buttonDiv').hide();
      $('#sidebarOpen').show();
  }

$(document).ready(function () {
  $('[data-toggle="tooltip"]').tooltip();
  $('#circuitInfo').hide();
  if (screen.width > 720){
    // $('#buttonDiv').hide();
    // $('#sidebarOpen').hide();
    openSidebar()
    $('#sidebarOpen').hide();
  }
  
});