<script lang="ts">
  import "../app.postcss";
  import { onMount } from "svelte";
  import { PUBLIC_BASE_URL } from "$env/static/public";
  import  type { company, oilprice } from '$lib/types/types'

  export let company_data: company;
  export let oil_price_data: oilprice;
  
  let price_of_oil: string = '';
  let company_name: string = '';
  let company_phone_number: string = '';

  onMount(async () => {
    await fetch(PUBLIC_BASE_URL + "/info/price/today", {
      method: "get",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((result) => (oil_price_data = result));

    if (oil_price_data["ok"] == true) {
      price_of_oil = oil_price_data["todays_price"];

    }
  });
  onMount(async () => {
    await fetch(PUBLIC_BASE_URL + "/info/company", {
      method: "get",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((result) => (company_data = result));

    if (company_data["ok"] == true) {
      company_name = company_data["company_name"];
      company_phone_number = company_data["company_phone_number"];
    }
  });
</script>

  <div class="grid grid-cols-12 bg-white overflow-hidden">
    <div class="col-span-12 md:col-span-3 text-3xl p-10 text-base-100  font-bold invisible md:visible h-0 md:h-auto">
      <div class="text-center pt-5">Call Today</div>
      <div class="text-center">{company_phone_number}</div>
    </div>

    <div class="col-span-12 md:col-span-6 md:p-10 text-center font-bold ">
      <div class="md:flex md:justify-center pb-5 md:pb-0 gap-5">
        <a
          class="normal-case text-8xl  text-primary"
          href="/"
        >
          Auburn
        </a>
        <a
          class="normal-case text-8xl  text-primary"
          href="/"
        >
          Oil
        </a>
      </div>
      <a
        class="normal-case text-3xl text-primary "
        href="/">Oil thats good for your system</a
      >
    </div>


    <div
      class=" col-span-12 md:col-span-3 md:p-10 text-3xl text-base-100  font-bold"
    >
      <div class="text-center pt-5">Todays Price</div>
      <div class="text-center">${price_of_oil}</div>
    </div>

  </div>


<div class="navbar bg-primary">
  <div class="navbar-start">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          ><path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h8m-8 6h16"
          /></svg
        >
      </div>
      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
      <ul
        tabindex="0"
        class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-white rounded-box w-52 font-bold text-blue-800 "
      >
        <li><a class="text-2xl py-2 hover:bg-base-100" href="/">Home</a></li>
        <li><a class="text-2xl py-2 hover:bg-base-100" href="/delivery">Oil Delivery</a></li>
        <li><a class="text-2xl py-2 hover:bg-base-100" href="/servicearea">Delivery Area</a></li>
        <li><a class="text-2xl py-2 hover:bg-base-100" href="/about">About Us</a></li>
        <li><a class="text-2xl py-2 hover:bg-base-100" href="/contact">Contact</a></li>
      </ul>
    </div>
    <a href="/" class="btn btn-ghost text-xl">AuburnOil</a>
  </div>
  <div class="navbar-center hidden lg:flex text-white">
    <ul class="menu menu-horizontal px-1 text-xl">
      <li><a href="/">Home</a></li>
      <li><a href="/delivery">Oil Delivery</a></li>
      <li><a href="/servicearea">Delivery Area</a></li>
      <li><a href="/about">About Us</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
  <div class="navbar-end"></div>
</div>

<div class="body bg-white text-black">
  <slot />
</div>


<div class="grid grid-cols-12 bg-secondary py-10 w-full">
  <div
    class="col-span-12 md:col-span-4 text-center text-white text-bold text-6xl "
  >
    <div class="flex justify-center pt-5">
      <div class=" text-white px-1">Auburn</div>
      <div class=" text-white px-1">Oil</div>
    </div>
  </div>
  <div
    class="col-span-12 md:col-span-4 text-center text-bold text-xl text-white pb-10"
  >
    <div class="">{company_phone_number}</div>
    <div class="">Worcester Ma</div>
    <div class="">Mon - Fri 8:00 am - 5:00 pm</div>
    <div class="">Sat Closed | Sun Closed</div>
  </div>
  <div class="col-span-4 text-center"></div>
  <div class="col-span-12 h-auto bg-primary text-white w-full ">
    <div class=" mx-auto max-w-7xl p-5">
      <div class="text-xl font-bold text-center">
        © 2023 by Rocket Services LLC - Auburn, MA | All Rights Reserved
      </div>
    </div>
  </div>
</div>
