<script lang="ts" setup>
import dayjs from "dayjs";
import AssignComponent from "~/components/dynamic-page/page-component/AssignComponent.vue";
import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentKey } from "@/definitions/enum";

const currentDateTime = ref<string>("");

onMounted(() => {
  currentDateTime.value = dayjs().format("dddd, DD/MM/YYYY, HH:mm");
});

const showMenuMobile = ref(false)
</script>

<template>
  <header id="header" class="main-header">
    <div class="main-header-topbar lg:block hidden">
      <div class="flex items-center !py-3px">
        <time class="text-capitalize text-white text-12px" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time>
        <div class="main-header-topbar-listag"></div>
        <div class="main-header-topbar-infor flex items-center">
          <div>
            <div class="text-white text-12px">
              <span>HOTLINE: </span>
              <a href="tel:0865015015"> 0123456789</a>
              <span> - </span>
              <a href="tel:0977456112">0123456789</a>
            </div>
          </div>
          <div class="flex items-center">
            <a class="flex" href=""><Icon class="text-12px" name="ic:baseline-facebook" /></a>
            <a class="flex" href=""><Icon class="" name="ion:logo-youtube" /></a>
          </div>
        </div>
      </div>
    </div>
    <div class="main-header-centerbar lg:block hidden">
      <div class="flex items-center">
        <div class="main-header-logo">
          <nuxt-link to="/"><img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
        </div>
        <div class="main-header-control">
          <div class="main-header-relations">
            <!-- <img src="~/assets/images/tienphong/sinhvien-logo.png" alt="">
            <img src="~/assets/images/tienphong/hht-online-logo.png" alt="">
            <img src="~/assets/images/tienphong/tamviet-logo.png" alt=""> -->
          </div>
          <div class="main-header-navbar">
            <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT']" />
          </div>
        </div>
      </div>
    </div>
    <div class="main-ads lg:block hidden">
      <div class="main-ads-container py-20px  border-y-1px border-#000">
        <div class="main-ads-content">
          <img src="~/assets/images/tienphong/main-ads.png" alt="" />
        </div>
      </div>
    </div>
    <div class="main-header-control lg:block hidden">
      <div class="header-control-container">
        <div class="border-b-1px border-#000 py-2">
          <div class="header-control_tag">
            <label>Xu hướng</label>
          </div>
          <div class="header-control_article">
            <h4>Thư du học sinh: Hoa Học Trò là “cánh cửa thần kỳ” dẫn tớ đến thế giới rộng lớn hơn</h4>
          </div>
          <div class="header-control_control">
            <div>
              <Icon name="material-symbols-light:search" />
            </div>
            <div>
              <img src="http://picsum.photos/1024/600?random=1" width="40" height="40" class="rounded-circle" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="main-header-mobile px-3 lg:hidden block">
      <div class="flex items-center justify-between py-4 border-b-1px border-solid border-#000">
        <div class="main-header-mobile-logo">
          <nuxt-link to="/"><img class="w-128px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
        </div>

        <div class="main-header-mobile-control flex gap-20px">
          <button class="bg-transparent" @click="showMenuMobile = true">
            <svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M0 0.75C0 0.375 0.328125 0 0.75 0H20.25C20.625 0 21 0.375 21 0.75C21 1.17188 20.625 1.5 20.25 1.5H0.75C0.328125 1.5 0 1.17188 0 0.75ZM0 8.25C0 7.875 0.328125 7.5 0.75 7.5H20.25C20.625 7.5 21 7.875 21 8.25C21 8.67188 20.625 9 20.25 9H0.75C0.328125 9 0 8.67188 0 8.25ZM20.25 16.5H0.75C0.328125 16.5 0 16.1719 0 15.75C0 15.375 0.328125 15 0.75 15H20.25C20.625 15 21 15.375 21 15.75C21 16.1719 20.625 16.5 20.25 16.5Z"
                fill="black"
              />
            </svg>
          </button>
          <button class="bg-transparent">
            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7656 22.7344L17.1094 16.125C18.6094 14.3906 19.4531 12.1875 19.4531 9.75C19.4531 4.40625 15.0469 0 9.70312 0C4.3125 0 0 4.40625 0 9.75C0 15.1406 4.35938 19.5 9.70312 19.5C12.0938 19.5 14.2969 18.6562 16.0312 17.1562L22.6406 23.8125C22.8281 23.9531 23.0156 24 23.25 24C23.4375 24 23.625 23.9531 23.7656 23.8125C24.0469 23.5312 24.0469 23.0156 23.7656 22.7344ZM9.75 18C5.15625 18 1.5 14.2969 1.5 9.75C1.5 5.20312 5.15625 1.5 9.75 1.5C14.2969 1.5 18 5.20312 18 9.75C18 14.3438 14.2969 18 9.75 18Z" fill="black"/>
</svg>

          </button>
        </div>
      </div>
    </div>
<!-- navigation header -->
  <div class="main-header-mobile-navigation fixed inset-0 bg-white z-999" v-if="showMenuMobile">
    <div class="main-header-mobile px-3">
      <div class="flex items-center justify-between py-4">
        <div class="main-header-mobile-logo"  @click="showMenuMobile = false">
          <nuxt-link to="/"><img class="w-128px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
        </div>

        <div class="main-header-mobile-control flex gap-20px">
          <button class="bg-transparent" @click="showMenuMobile = false">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>
          </button>
        </div>
      </div>
    </div>
    <div class="p-3">
      <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT']" />
    </div>
  </div>
  </header>

</template>

<style lang="scss">
.main-header {
  .main-header-topbar {
    background: #ed1c24;
    > div {
      max-width: 1385px;
      padding: 5px 20px;
      margin: 0 auto;
      justify-content: space-between;
    }

    .main-header-topbar-listag {
      flex: 1;
    }

    .main-header-topbar-infor {
      gap: 30px;
      a {
        color: #ffffff;
        padding: 0 6px;
        svg {
          font-size: 20px;
        }
      }
    }
  }
  .main-header-centerbar {
    padding: 20px 0px;
    > div {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0px 27.5px;
    }
    .main-header-control {
      flex: 1;
      .main-header-relations {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
      }
    }
    .main-header-navbar {
      margin-top: 20px;
    }
  }
  .main-ads {
    max-width: 1440px;
    margin: 0px auto;
    padding: 0px 27.5px;
    // border-top: 1px solid #000000;
    // border-bottom: 1px solid #000000;

    .main-ads-content {
      width: 100%;
      max-width: 970px;

      // height: 250px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }
  }
  .main-header-control {
    .header-control-container {
      max-width: 1440px;
      margin: 0px auto 10px auto;
      padding: 0 27.5px;
      // border-bottom: 1px solid #000000;
      > div {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-left: 12px;
      }
    }

    .header-control {
      &_tag {
        position: relative;
        height: 30px;
        label {
          font-size: 12px;
          text-transform: uppercase;
          padding: 0 16px 0 12px;
          display: flex;
          align-items: center;
          height: 100%;
          margin: 0;
          border: 1px solid #000;
          line-height: 1.8;
          font-weight: 300;
        }
        &::after {
          position: absolute;
          content: "";
          display: block;
          width: 12px;
          height: 100%;
          background-color: #ed1c24;
          left: -12px;
          top: 0;
        }
      }
      &_article {
        flex: 1;
        h4 {
          font-size: 16px;
          font-weight: 700;
          margin: 0;
        }
      }
      &_control {
        display: flex;
        align-items: center;
        gap: 20px;
        svg {
          font-size: 36px;
        }

        img {
          width: 32px;
          height: 32px;
          object-fit: cover;
          border-radius: 999px;
        }
      }
    }
  }

  .main-header-mobile-navigation {
    & > div > nav > div {
      justify-content: flex-start;
    }

    & .navigation-container {
      flex-direction: column;
      gap: 0px;
      width: 100%;
      align-items: start;

      & > .navigation-branch {
        width: 100%;

        border-top: 1px solid #dee2e6;
        &:first-child {
          border: transparent;
        }

        & > .navigation-item {
        width: 100%;
        height: 100%;

        & > a {
          font-family: "Gelasio", serif !important;
          text-transform: uppercase;
          font-weight: 800!important;
          display: block;
          font-size: 16px;
          padding: 8px 0;
          width: 100%;
          height: 100%;

        }
       }
      }
       
    }
  }
}
</style>
