{% extends "base.html" %}
{% block content %}
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/home.css') }}"
/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<section class="container py-5">
    <div class="">
        <h1><span id="title" class="text-vhppink" id="collection-name">{{ cwid }}</span></h1>

    </div>
    
<link rel="stylesheet" href="/static/css/casestudies.css" />
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="simple-tab-0" data-bs-toggle="tab" href="#simple-tabpanel-0" role="tab" aria-controls="simple-tabpanel-0" aria-selected="true">Overview</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="simple-tab-1" data-bs-toggle="tab" href="#simple-tabpanel-1" role="tab" aria-controls="simple-tabpanel-1" aria-selected="false">Identifiers</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="simple-tab-2" data-bs-toggle="tab" href="#simple-tabpanel-2" role="tab" aria-controls="simple-tabpanel-2" aria-selected="false">Experimental data</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="simple-tab-3" data-bs-toggle="tab" href="#simple-tabpanel-3" role="tab" aria-controls="simple-tabpanel-3" aria-selected="false">Metabolism</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="simple-tab-4" data-bs-toggle="tab" href="#simple-tabpanel-4" role="tab" aria-controls="simple-tabpanel-4" aria-selected="false">Toxicology</a>
  </li>
</ul>
<div class="tab-content pt-5" id="tab-content">
  <div class="tab-pane active" id="simple-tabpanel-0" role="tabpanel" aria-labelledby="simple-tab-0">
<p>As given in the VHP4Safety Compound Wiki.</p>

        <table class="table table-bordered table-striped" id="info_table"> 
            <thead>
                <tr>
                    <th>Property</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>


<h2>3D structure</h2>

<p>Based on the SMILES in the VHP4Safety Compound Wiki.</p>

<span id="mydiv"></span>
<script>
  var jmolApplet0; // set up in HTML table, below
  jmol_isReady = function(applet) {
    Jmol._getElement(applet, "appletdiv").style.border="1px solid blue"
  }

   var Info = {
    j2sPath: "/static/js/j2s",
	width: 450,
	height: 450,
	debug: false,
	readyFunction: jmol_isReady,
  }
  jmolApplet0 = Jmol.getApplet("jmolApplet0", Info)
</script>

  </div>
  <div class="tab-pane" id="simple-tabpanel-1" role="tabpanel" aria-labelledby="simple-tab-1">
    <p>Based on data in the VHP4Safety Compound Wiki.</p>

    <table class="table table-bordered table-striped" id="id_table">
      <thead>
        <tr>
          <th>Property</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="tab-pane" id="simple-tabpanel-2" role="tabpanel" aria-labelledby="simple-tab-2">
    <table class="table table-bordered table-striped" id="expdata_table">
      <thead>
        <tr>
          <th>Property</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="tab-pane" id="simple-tabpanel-3" role="tabpanel" aria-labelledby="simple-tab-3">
    <div id="metabolism_div">
      No metabolism is found.
    </div>
  </div>
  <div class="tab-pane" id="simple-tabpanel-4" role="tabpanel" aria-labelledby="simple-tab-4">
    <table class="table table-bordered table-striped" id="tox_table">
      <thead>
        <tr>
          <th>Property</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

<script>
  $(document).ready(function () {
      // Fetch and populate the compound table
      $.getJSON("/get_compound_properties/{{ cwid }}", function (data) {
        console.log(data[0])
        // replace the Compound Wiki ID with the label
        document.getElementById("title").innerHTML = data[0].label
        const tableBody = $("#info_table tbody");
        tableBody.empty();
        tableBody.append(`<tr><td>Chemical formula</td><td>${data[0].formula}</td></tr>`);
        tableBody.append(`<tr><td>mass</td><td>${data[0].mass}</td></tr>`);
        tableBody.append(`<tr><td>SMILES</td><td>${data[0].SMILES}</td></tr>`);
        tableBody.append(`<tr><td>InChI</td><td>${data[0].inchi}</td></tr>`);
        tableBody.append(`<tr><td>InChIKey</td><td>${data[0].inchikey}</td></tr>`);

        // add a JmolJS applet
        $("#mydiv").html(Jmol.getAppletHtml("jmolApplet0"))
        Jmol.script(jmolApplet0, 'load smiles \"' + data[0].SMILES + "\"")
      });
      
      $.getJSON("/get_compound_identifiers/{{ cwid }}", function (data) {
        console.log(data)
        const tableBody = $("#id_table tbody");
        tableBody.empty();
        data.forEach((option) => {
          if (option.value != "") {
            formatterURL = option.formatterURL.replace("$1", option.value)
            if (option.formatterURL != "") {
              tableBody.append(`
                <tr>
                    <td>${option.propertyLabel}</td>
                    <td><a href="${formatterURL}">${option.value}</a></td>
                </tr>
              `);
            } else {
              tableBody.append(`
                <tr>
                    <td>${option.propertyLabel}</td>
                    <td>${option.value}</td>
                </tr>
              `);
            }
          }
        });
    });

    $.getJSON("/get_compound_expdata/{{ cwid }}", function (data) {
        console.log(data)
        const tableBody = $("#expdata_table tbody");
        tableBody.empty();
        data.forEach((option) => {
            tableBody.append(`
                <tr>
                    <td>${option.propEntityLabel}</td>
                    <td>${option.value}</td>
                    <td>${option.unitsLabel}</td>
                    <td>${option.source}</td>
                    <td>${option.doi}</td>
                </tr>
            `);
        });
    });
      
    $.getJSON("/get_compound_toxicology/{{ cwid }}", function (data) {
        console.log("Toxicology")
        console.log(data)
        const toxBody = $("#tox_table tbody");
        toxBody.empty();
        const metabolism_div = $("#metabolism_div");
        metabolism_div.empty();
        data.forEach((option) => {
          console.log(option)
          if (option.propertyLabel == "ToxBank Wiki" &&
              option.value != "")
            toxBody.append(`<tr><td>${option.propertyLabel}</td><td><a href="https://web.archive.org/web/20230415165239/${option.value}">${option.value}</a></td></tr>`);
          if (option.propertyLabel == "xenobiotic metabolism pathway" &&
              option.value != "")
            metabolism_div.append(`<iframe src ="https://pathway-viewer.toolforge.org/?id=${option.value}" width="900px" height="600px" style="overflow:hidden;"></iframe>`);
        });
    });
      
  })
  
</script>

{% endblock %}