<script lang 'ts'></script>

<section class="overflow-hidden text-white h-full pb-8">
  <main class="overflow-hidden">
    <div class="flex flex-row items-center">
      <label
        for="clinicalTrialInfo"
        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
      >
        Clinical Trials
      </label>
      <InfoModal
        title={"Clinical Trial"}
        content={"Info description coming soon! But first a word of our sponsor skillshare... just kidding"}
        id={"clinicalTrialInfo"}
      />
    </div>

    {#if data?.user?.tier === "Pro"}
      {#if isLoaded}
        {#if rawData?.length >= 5}
          <div class="w-full flex flex-col items-start">
            <div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full">
              The Biotech company {$displayCompanyName} has conducted a total of
              {abbreviateNumber(rawData?.length)} clinical trials. Out of these,
              {numOfActive === 0 ? "none" : numOfActive} are currently active,
              {numOfCompleted} have been completed, {numOfTerminated} were terminated
              and {numOfResults} trials have produced results.
            </div>
          </div>

          <div class="pb-2 rounded-md bg-default">
            <div class="app w-full h-[300px] mt-5">
              <Chart {init} options={optionsData} class="chart" />
            </div>
          </div>

          <!--
        <h2 class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3">
          Latest Information
        </h2>

        <div class="rounded-md sm:min-h-[330px]">
          <div class="w-full m-auto h-auto max-h-[500px] overflow-x-scroll sm:overflow-hidden sm:overflow-y-scroll scroller ">
          <table class="table table-sm table-compact table-pin-rows table-pin-cols w-full">
            <thead>
              <tr>
                <th class="text-white shadow-md font-semibold text-sm text-start bg-default">Drug</th>
                <th class="text-white shadow-md font-semibold text-sm text-start bg-default">Stage</th>
                <th class="text-white shadow-md font-semibold text-sm text-center bg-default">Phase Status</th>
                <th class="text-white shadow-md font-semibold text-sm text-end bg-default">Result</th>
              </tr>
            </thead>
            <tbody>
              {#each displayList as item,index}
              <tr on:click={() => handleViewData(item)} class="border-y border-gray-800 odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-default border-b-[#09090B] cursor-pointer">
               
                  <td class="text-white font-medium whitespace-nowrap">
                   {item["Interventions"]?.length === 0 ? '-' : item["Interventions"]?.length > charNumber ? formatString(item["Interventions"]?.slice(0,charNumber)) + "..." : formatString(item["Interventions"])}
                  </td>
                  <td class="text-white font-medium w-full text-start">
                    {item['Start Date'] === null ? 'n/a' : new Date(item["Start Date"])?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                   </td>
              
                  <td class="text-white text-start font-medium">
                    {formatString(item['Study Status'])}
                  </td>

                  <td class="text-white text-center font-medium">
                    {item['Phases'] !== 'NA' ? formatString(item["Phases"])?.replace('Phase','') : '-'}
                  </td>
              
                  <td class="text-white text-end font-medium ">
                    {formatString(item["Study Results"])}
                  </td>
                  
              
              </tr>
              {/each}
            </tbody>
          </table>
        </div>
        </div>
         -->
        {/if}
      {:else}
        <div class="flex justify-center items-center h-80">
          <div class="relative">
            <label
              class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
            >
              <span class="loading loading-spinner loading-md text-gray-400"
              ></span>
            </label>
          </div>
        </div>
      {/if}
    {:else}
      <div
        class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"
      >
        <svg
          class="mr-1.5 w-5 h-5 inline-block"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          ><path
            fill="#A3A3A3"
            d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
          /></svg
        >
        Unlock content with
        <a
          class="inline-block ml-2 text-blue-400 hover:sm:text-white"
          href="/pricing">Pro Subscription</a
        >
      </div>
    {/if}
  </main>
</section>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="clinicalDesktopModal" class="modal-toggle" />

<label
  for="clinicalDesktopModal"
  class="hidden lg:modal modal-bottom sm:modal-middle cursor-pointer"
>
  <label for="clinicalDesktopModal" class="cursor-pointer modal-backdrop"
  ></label>

  <!-- svelte-ignore a11y-label-has-associated-control -->
  <label
    class="modal-box w-full relative bg-primary h-auto max-h-[900px] overflow-y-scroll"
  >
    <label
      for="clinicalDesktopModal"
      class="cursor-pointer absolute right-5 top-2 bg-primary text-2xl text-white"
    >
      ✕
    </label>

    <h3 class="text-xl font-semibold text-white mt-10">
      Title: {trialTitle}
    </h3>
    <p class="py-4 text-gray-200 bg-primary w-full">
      <span class="font-semibold text-white">Brief Summary:</span>
      {trialSummary}
    </p>

    <table
      class="table table-sm table-compact bg-primary w-full mt-5 mb-10 text-white"
    >
      <tbody>
        <!-- row 1 -->
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">NCT Number</td>
          <td class="bg-primary">{trialId}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Start Date</td>
          <td class="bg-primary">{trialStart}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">End Date</td>
          <td class="bg-primary">{trialEnd}</td>
        </tr>
        <!-- row 2 -->
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Study Status</td>
          <td class="bg-primary">{trialStage}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Phase Status</td>
          <td class="bg-primary">{trialPhase}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Study Results</td>
          <td class="bg-primary">{trialResult}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Sex</td>
          <td class="bg-primary">{formatString(trialSex)}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Age</td>
          <td class="bg-primary"
            >{formatString(trialAge)?.replace("Older_adult", "Older Adult")}</td
          >
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Sponsor</td>
          <td class="bg-primary">{trialSponsor}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Enrollment</td>
          <td class="bg-primary">{trialEnrollment}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Study Type</td>
          <td class="bg-primary">{trialStudyType}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Funder Type</td>
          <td class="bg-primary">{trialFunderType}</td>
        </tr>
        <tr class="border-b border-slate-700">
          <td class="bg-primary font-semibold">Website</td>
          <td class="bg-primary"
            ><a
              class="text-blue-400 sm:hover:text-white"
              href={trialLink}
              rel="noopener noreferrer"
              target="_blank">{trialLink}</a
            ></td
          >
        </tr>
      </tbody>
    </table>
  </label>
</label>

<!--Start ETF Modal-->
<div class="lg:hidden drawer drawer-end z-40 overflow-hidden w-screen">
  <input id="clinicalMobileModal" type="checkbox" class="drawer-toggle" />
  <div class="drawer-side overflow-hidden">
    <div class="bg-default min-h-screen w-screen pb-20 overflow-hidden">
      <label for="clinicalMobileModal" class="absolute left-6 top-6">
        <svg
          class="w-6 h-6 inline-block mb-0.5"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          ><path
            fill="#fff"
            d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
          /></svg
        >
      </label>

      <div class="w-full overflow-hidden overflow-y-scroll p-2">
        <h3 class="text-xl font-semibold text-white mt-14 p-3">
          Title: {trialTitle}
        </h3>
        <p class="py-4 text-gray-200 w-full p-3">
          <span class="font-semibold text-white">Brief Summary:</span>
          {trialSummary}
        </p>

        <table
          class="table table-sm table-compact w-full mt-5 mb-10 text-white"
        >
          <tbody>
            <!-- row 1 -->
            <tr class="border-b border-slate-700 odd:bg-odd">
              <td class="font-semibold w-full">NCT Number</td>
              <td class="">{trialId}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Start Date</td>
              <td class="">{trialStart}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">End Date</td>
              <td class="">{trialEnd}</td>
            </tr>
            <!-- row 2 -->
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Study Status</td>
              <td class="">{trialStage}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Phase Status</td>
              <td class="">{trialPhase}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Study Results</td>
              <td class="">{trialResult}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Sex</td>
              <td class="">{formatString(trialSex)}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Age</td>
              <td class=""
                >{formatString(trialAge)?.replace(
                  "Older_adult",
                  "Older Adult",
                )}</td
              >
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Sponsor</td>
              <td class="">{trialSponsor}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Enrollment</td>
              <td class="">{trialEnrollment}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Study Type</td>
              <td class="">{trialStudyType}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Funder Type</td>
              <td class="">{trialFunderType}</td>
            </tr>
            <tr
              class="border-b border-slate-700 odd:bg-odd even:bg-default"
            >
              <td class="font-semibold">Website</td>
              <td class=""
                ><a
                  class="text-blue-400 sm:hover:text-white"
                  href={trialLink}
                  rel="noopener noreferrer"
                  target="_blank">{trialLink}</a
                ></td
              >
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!--End ETF Modal-->

<style>
  .app {
    height: 300px;
    max-width: 100%; /* Ensure chart width doesn't exceed the container */
  }

  @media (max-width: 640px) {
    .app {
      height: 210px;
    }
  }

  .chart {
    width: 100%;
  }
</style>
