<div id="header">
  <a href="/" class="home_button">
  	<img loading="lazy" class="css-l68de9 e5kxa4l0" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F384b8e7f-b8c9-4b39-81c0-049a1a3f34eb%2F1a7713ee-6f7e-4ee4-81e0-8dce80f00f7e%2Fhome.svg&amp;blockId=eb14e6f8-6019-4033-98fd-72ba7ac84563">
   	제품보기
  </a>
  <a href="/about" class="about_button">
    <img loading="lazy" class="css-l68de9 e5kxa4l0" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F384b8e7f-b8c9-4b39-81c0-049a1a3f34eb%2F4ff13ddb-572a-44a1-8e8a-810f76a053a1%2Finfo.svg&amp;blockId=d28b8cee-00a6-44e1-a7c3-9590c6f78c1d">
    소개
  </a>
</div>


<script>
const isItemPage = document.querySelector('.notion-topbar a[href="/369bc469-c0e2-4a42-8430-5a76cef4694f"]')
let items
if (isItemPage) {
  items = [{
    url: location.pathname.substring(1),
    image: document.querySelector('.notion-page-content img').src,
    title: document.querySelector('h1.page-title').textContent
  }]
  const script1 = document.createElement('script');
  script1.src = "https://cdn.jsdelivr.net/npm/sweetalert2@11.11.1/dist/sweetalert2.all.min.js";
  document.head.appendChild(script1);

  const link = document.createElement('link');
  link.href = "https://cdn.jsdelivr.net/npm/sweetalert2@11.11.1/dist/sweetalert2.min.css";
  link.rel = "stylesheet";
  document.head.appendChild(link);

  const script2 = document.createElement('script');
  script2.src = "https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.js";
  document.head.appendChild(script2);
  const ctaHTML = `
  <div id="cta" style="display:none;">
    <button class="reset_items">
      <img loading="lazy" class="css-l68de9 e5kxa4l0"
        src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F384b8e7f-b8c9-4b39-81c0-049a1a3f34eb%2F04fba5ed-4e2a-4479-a18c-7cf2ea8b9393%2Freset.svg&amp;blockId=47486aa7-297f-424c-8c63-fb122cdfd8a6">
</button>
    <button class="call_price">
      <img loading="lazy" class="css-l68de9 e5kxa4l0"
        src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F384b8e7f-b8c9-4b39-81c0-049a1a3f34eb%2F66614c40-6690-44e3-8434-3819ca6a6b45%2Fphone-call.svg&amp;blockId=8647d170-d9b9-40cd-bde5-74dd944e5ece">
      견적 문의
      (<span class="selected_item_count">0</span>)
</button>
    <button class="select_item">
      이 상품 담기
</button>
</div>
  `
  document.body.insertAdjacentHTML('beforeend', ctaHTML)

  document.querySelector('button.call_price').addEventListener('click', callPrice)
  document.querySelector('button.reset_items').addEventListener('click', resetSelectedItems)

  document.querySelector('.select_item').addEventListener('click', (e) => {
    const callItems = JSON.parse(localStorage.getItem('callItems')) || []
    const item = items[0]
    const itemIsSelected = callItems.find(callItem => callItem.url == item.url)
    if (itemIsSelected) {
      removeItem(item)
    } else {
      addItem(item)
    }
    renderSelectedItem()
    renderCta()
  })
  renderCta()
  renderSelectedItem()
}

function callPrice() {
  const callItems = JSON.parse(localStorage.getItem('callItems')) || []
  if (callItems.length == 0) {
    Swal.fire({
      icon: "error",
      title: "선택한 상품이 없습니다",
      text: "상품을 먼저 선택하고 견적을 문의해주세요"
    });
    return
  }

  // 중간 선택 팝업 추가
  let itemsHtml = '';
  callItems.forEach(item => {
    itemsHtml += `
      <div class="selected-item">
        <img src="${item.image}" alt="${item.title}">
        <span>${item.title}</span>
        <button class="remove-item" data-url="${item.url}">X</button>
</div>
    `;
  });

  Swal.fire({
    title: '견적 문의할 상품',
    html: `
      <div class="selected-items-container">
        ${itemsHtml}
</div>
      <div class="additional-info">
        <label for="furniture-details">구매하실 가구의 종류와 개수를 입력해주세요</label>
        <textarea id="furniture-details" placeholder="예: 패디단상 1개, 패디의자 1개 진열대 1개"></textarea>
</div>
    `,
    showCancelButton: true,
    confirmButtonText: '견적 문의하기',
    cancelButtonText: '취소',
    didOpen: () => {
      // X 버튼 클릭 이벤트 처리
      document.querySelectorAll('.remove-item').forEach(button => {
        button.addEventListener('click', (e) => {
          const callItems = JSON.parse(localStorage.getItem('callItems')) || []
          const url = e.target.dataset.url;
          const newCallItems = callItems.filter(item => item.url !== url);
          localStorage.setItem('callItems', JSON.stringify(newCallItems));
          e.target.closest('.selected-item').remove();

          // 모든 항목이 제거되었는지 확인
          if (newCallItems.length === 0) {
            Swal.close();
            renderCta();
            renderSelectedItems(getItems());
            Swal.fire({
              icon: "error",
              title: "선택한 상품이 없습니다",
              text: "상품을 먼저 선택하고 견적을 문의해주세요"
            });
          }
        });
      });
    }
  }).then((result) => {
    if (result.isConfirmed) {
      // 사용자가 입력한 추가 정보 가져오기
      const additionalInfo = document.getElementById('furniture-details').value;

      // 업데이트된 callItems 가져오기 (사용자가 X 버튼으로 삭제했을 수 있으므로)
      const updatedCallItems = JSON.parse(localStorage.getItem('callItems')) || [];
      if (updatedCallItems.length === 0) {
        Swal.fire({
          icon: "error",
          title: "선택한 상품이 없습니다",
          text: "상품을 먼저 선택하고 견적을 문의해주세요"
        });
        return;
      }

      // 메시지 생성 (추가 정보를 최상단에 배치)
      let messagePrefix = additionalInfo ? `${additionalInfo}\n\n` : '';
      let message = `[H견적]\n${messagePrefix}${updatedCallItems.map(item => `https://www.dvdbnh.com/${item.url}`).join('\n')}`;
      message = message.replace(/(\n|\r\n)/g, "%0a");

      sendSmsMessage(message);
    }
    renderCta();
    if (typeof renderSelectedItems == 'function') {
      renderSelectedItems(getItems());
    } else {
      renderSelectedItem();
    }
  });
}

// SMS 메시지 보내는 함수로 분리
function sendSmsMessage(message) {
  const userAgent = navigator.userAgent.toLocaleLowerCase();
  let smsUrl;
  const phoneNumber = '010-7762-8946';

  if (userAgent.search('android') > -1) {
    smsUrl = `sms:${phoneNumber}?body=${message}`;
    window.open(smsUrl, '_blank');
  } else if (userAgent.search('iphone') > -1 || userAgent.search('ipad') > -1) {
    smsUrl = `sms:${phoneNumber}&body=${message}`;
    window.open(smsUrl, '_blank');
  } else {
    Swal.fire({
      icon: "info",
      title: "PC 견적 문의",
      text: "견적을 문의할 핸드폰 종류를 알려주세요",
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: "안드로이드",
      denyButtonText: "아이폰 & 아이패드",
    }).then((result) => {
      if (result.isConfirmed) {
        smsUrl = `sms:${phoneNumber}?body=${message}`;
      } else if (result.isDenied) {
        smsUrl = `sms:${phoneNumber}&body=${message}`;
      } else if (result.isDismissed) {
        return;
      }
      Swal.fire({
        icon: "info",
        title: "QR을 찍어서 문의하세요",
        html: `<div id="qrcode"></div>`
      });
      const qrcode = new QRCode(document.getElementById('qrcode'), {
        text: smsUrl,
        width: 256,
        height: 256,
        colorDark : '#000',
        colorLight : '#fff',
        correctLevel : QRCode.CorrectLevel.L
      });
    });
  }
}

function resetSelectedItems() {
  const callItems = JSON.parse(localStorage.getItem('callItems')) || []
  if (callItems.length == 0) {
    Swal.fire({
      icon: "error",
      title: "선택한 상품이 없습니다",
      text: "초기화할 상품이 없습니다."
    });
    return
  }

  // 담긴 상품 목록 HTML 생성
  let itemsHtml = '';
  callItems.forEach(item => {
    itemsHtml += `
<div class="selected-item">
  <img src="${item.image}" alt="${item.title}">
  <span>${item.title}</span>
</div>
    `;
  });

  Swal.fire({
    icon: "warning",
    title: "담긴 상품을 초기화하시겠습니까?",
    html: `
<p>다음 상품 목록을 모두 삭제하시겠습니까?</p>
<div class="selected-items-container">
  ${itemsHtml}
</div>
    `,
    showCancelButton: true,
    confirmButtonText: "초기화할게요",
    cancelButtonText: "취소할게요",
  }).then((result) => {
    if (result.value) {
      localStorage.removeItem('callItems')
      renderCta()
      renderSelectedItems(getItems())
    }
  });
}

function addItem(item) {
  const callItems = JSON.parse(localStorage.getItem('callItems')) || []
  // 이미 선택된 아이템이 있는지 확인
  if (callItems.find(callItem => callItem.url == item.url)) {
    return
  }
  callItems.push({
    url: item.url,
    image: item.image,
    title: item.title
  })
  localStorage.setItem('callItems', JSON.stringify(callItems))
}

function removeItem(item) {
  const callItems = JSON.parse(localStorage.getItem('callItems')) || []
  const newCallItems = callItems.filter(callItem => callItem.url != item.url)
  localStorage.setItem('callItems', JSON.stringify(newCallItems))
}

function renderSelectedItem() {
  const callItems = JSON.parse(localStorage.getItem('callItems')) || []
  const item = items[0]
  const selectItem = document.querySelector('.select_item')
  // 담긴 아이템을 선택된 상태로 렌더링
  if (callItems.find(callItem => callItem.url == item.url)) {
    selectItem.classList.add('selected')
    selectItem.textContent = '선택 취소'
  } else {
    selectItem.classList.remove('selected')
    selectItem.textContent = '이 상품 담기'
  }
}

function renderCta() {
  const callItems = JSON.parse(localStorage.getItem('callItems')) || []
  const cta = document.querySelector('#cta')
  cta.style.display = 'flex';
  cta.querySelector('.selected_item_count').textContent = callItems.length
}

document.querySelector('.oopy-footer').innerHTML += '<div>다비다 | 사업자등록번호: 404-09-54550</div>'

document.querySelector('button.call_price') && document.querySelector('button.call_price').addEventListener('click', callPrice)
document.querySelector('button.reset_items') && document.querySelector('button.reset_items').addEventListener('click', resetSelectedItems)

renderCta()
</script>


다비다 B&H 소개