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

    export let company_data: company;
    export let oil_data: priceitems;
    
    let company_name: string = '';
    let tel_number: string = '';

    let price_emergency: string = '';
    let price_prime: string = '';
    let price_same_day: string = '';

    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"];
        tel_number = company_data["company_phone_number"];
      }
    });
    onMount(async () => {
    await fetch(PUBLIC_BASE_URL + "/info/price/oil/items", {
      method: "get",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((result) => (oil_data = result));

    if (oil_data["ok"] == true) {
      price_emergency = oil_data["price_emergency"];
      price_prime = oil_data["price_prime"];
      price_same_day = oil_data["price_same_day"];

    }
  });

  </script>
  <title>Home Heating Oil Delivery</title>
  <div class="bg-secondary px-10">
    <div 
    class="max-w-7xl justify-center py-5 mx-auto font-bold  text-white"
    >
  <h1>Heating Oil Delivery</h1>
    </div>
  </div>
  
  <div class="max-w-7xl mx-auto px-10">
    <div class="grid grid-cols-12 max-w-7xl">
      <div class="col-span-12 lg:col-span-6">
        <div class="grid grid-cols-12">

          <div class="col-span-12 font-bold text-2xl my-10">
            We know it can be tough to order oil.  We make it simple!
          </div>
        
          
          <div class="col-span-12 font-bold text-xl text-primary">
            Worcester County
          </div>
          <div class="col-span-12 text-lg">
            <ul>100 Gallon Minimum to Worcester County</ul>
            <ul>Prime - ${price_prime}</ul>
            <ul>Same Day - ${price_same_day} + price oil</ul>
            <ul>After Hours Emergency - ${price_emergency} + price oil (prime included)</ul>
          </div>
  

          <div class="col-span-12 font-bold mt-10 text-xl text-primary">
            Payments Methods
          </div>
          <div class="col-span-12 text-lg">
            <ul>Cash on Delivery (C.O.D)</ul>
            <ul>Credit Card</ul>
            <ul>Money Order</ul>
            <ul>Check (with credit card hold till it clears)</ul>
          </div>


          <div class="col-span-12 mb-10">
            <ul>
              <div class="col-span-12 font-bold mt-10 text-xl text-primary">
                How to Order Oil
              </div>
              <div class="flex gap-5">
                
                <li class=" font-bold">
                  1.)  Call {tel_number} to place an order.
                </li>
              </div>
              <div class="flex gap-5">
        
                <li class=" font-bold">
                  2.) Give your name, address, fill location, and phone number.
                </li>
              </div>
              <div class="flex gap-5">
                <li class=" font-bold">
                  3.)  Decide if you want a fill or specific gallons
                </li>
              </div>
              <div class="flex gap-5">
                <li class=" font-bold">
                  4.)  Pay with above payments mentioned.

                </li>
              </div>
            </ul>
          </div>

          <div class="col-span-12 mx-auto  py-10">
          </div>
        </div>
      </div>
  
      <div class="col-span-12 md:col-span-6">
        <div class="col-span-12">
          <img alt="" class="w-full p-0 m-0" src="/images/truckauburn.jpg" />
        </div>
      </div>
  
      <div class="col-span-12  mb-10  
      text-bold bg-blue-oil text-white mt-10 text-5xl text-bold
       p-5 text-center">
        Call Today {tel_number}
      </div>
      
    </div>
  </div>
  
  

