document.addEventListener("DOMContentLoaded", () => {
	// get this element count-down_wrapper p-single-count-down
	let countDown = document.querySelector(".p-single-count-down");
	// get text from css computed styles --custom-title1
	let title1 = getComputedStyle(document.body).getPropertyValue("--custom-title1").slice(1, -1);
	// create a new div and insert it inside of it after start
	let newDiv = document.createElement("div");
	newDiv.classList.add("discount-ends-title", "dm-text-main");
	newDiv.innerHTML = title1;
	countDown.insertAdjacentElement("afterbegin", newDiv);
});

if (window.customCardProps?.custom_pc) {
	// start custom custom product card
	window.run_product_card = function (_this) {
		let lang = document.documentElement.getAttribute("lang");
		const remained = salla.lang.get("pages.products.remained");
		const donationPH = salla.lang.get("pages.products.donation_placeholder");
		const startingPrice = salla.lang.get("pages.products.starting_price");
		const outOfStock = salla.lang.get("pages.products.out_of_stock");
		const calories = salla.lang.get("pages.products.calories");
		_this.product_preview_down = window.customCardProps?.product_preview_down;
		_this.p_atc_btn_hidden = window.customCardProps?.p_atc_btn_hidden;
		_this.product_preview_icon_hide = window.customCardProps?.product_preview_icon_hide;
		_this.preview_text = window.customCardProps?.preview_text;
		_this.is_price_ratio_on = window.customCardProps?.is_price_ratio_on;
		_this.price_ratio_place = window.customCardProps?.price_ratio_place;
		_this.price_ratio_word = window.customCardProps?.price_ratio_word;
		_this.small_atc = window.customCardProps?.small_atc;
		_this.custom_pc = window.customCardProps?.custom_pc;
		console.log(_this.product);

		_this.show_pc_ratings = window.customCardProps?.show_pc_ratings;

		if (_this.show_pc_ratings == "hide") {
			_this.show_pc_ratings = false;
		}
		let product_ration_html = undefined;
		if (_this?.product?.is_on_sale) {
			_this.product_ratio_percent = Math.round(
				((_this.product?.regular_price - _this.product?.sale_price) / _this.product?.regular_price) * 100
			);
			product_ration_html = `
			<div class="sale-ratio-wrapper  ${
				_this.price_ratio_place == "down"
					? "price-ratio-down relative"
					: "price-ratio-over badge badge--ribbon badge--primary whitespace-nowrap absolute left-4 right-auto top-4"
			}">
				<span class="sale-ratio">
				${_this.price_ratio_word}
				${_this.product_ratio_percent}%
				</span>
			</div>`;
		}

		_this.innerHTML = `
       
          <div class="${_this.horizontal ? `s-product-card-image flex` : ""} product-block__thumb relative custom-custom ${
			_this.product.rating ? "has-rating" : ""
		}">
		  ${_this.product.is_on_sale && _this.is_price_ratio_on && _this.price_ratio_place == "over" ? `${_this.product_ration_html || ""}` : ``}

            ${
							_this.product.promotion_title
								? `<span class="badge badge--ribbon badge--primary absolute right-0 top-0 p-3 rounded-sm my-bg-light">${_this.product.promotion_title}</span>`
								: _this.showQuantity && _this.product.quantity
								? `<span class="badge badge--ribbon badge--primary">${remained} ${_this.product.quantity}</span>`
								: _this.showQuantity && _this.product.is_out_of_stock
								? `<div class="out-badge ${_this.horizontal ? "" : "max-w-[calc(100%-60px)]"}">${outOfStock}</div>`
								: ""
						}
            <a href="${_this.product.url}" class="thumb-wrapper mjksa px-0 flex flex-col" aria-label="${_this.product.name}">
              <img class="lazy-load lazy m-auto" width="200" height="200" src="https://cdn.salla.sa/form-builder/MXqItqjkdBv0bbcLPibHcka91DI1liQNXKVclxTw.png" data-src="${
								_this.product.image.url
							}" alt="${_this.product.image.alt}" />
            </a>
			${
				_this.product_preview_down
					? ``
					: `
			<div onclick="window.showPreview(this)" data-id="${_this.product.id}" title="عرض سريع"
			data-img="${_this.product.image.url}" class="showPreviewBtn absolute">
			<i class="sicon-eye"></i>
			</div>
			`
			}
          </div>
          
          ${
						_this.showWishlist
							? `<span class="btn--product-like">
                  <salla-button loader-position="center" shape="icon" size="small" color="danger" class="btn--delete" onclick="salla.wishlist.remove(${_this.product.id})">
                      <i class="sicon-cancel"></i>
                  </salla-button>
                </span>`
							: ""
					}
          <div class="relative wide  ${_this.horizontal ? "s-product-card-content" : "product-block-outer"} donating-wrap">
            <div class="product-block__info pb-1">
			<div class="product-count-down-mjksa ${_this.is_price_ratio_on ? "gggg" : "gg"}">
				${
					_this.product.is_on_sale && _this.product.discount_ends
						? `
					<salla-count-down
					class="pc-count-down"
					  boxed=true
					  digits="en"
					  labeled="false"
					  date="${new Date(_this.product.discount_ends * 1000).toLocaleString("en-US", { timeZone: "UTC" })}"
					  size="sm">
					</salla-count-down>
					`
						: ``
				}
			</div>
              <a href="${_this.product.url}" class="product-title px-3">
			  
				<div class="product-category-name"></div>
				<p class="product-subtitle pc-t">${!!_this.product.subtitle ? _this.product.subtitle : ""}</p> 
                <h2 class="title title--primary title--small my-2 pc-t">${_this.product.name}</h2>
					
              </a> 

			  ${
					_this.product.rating && _this.show_pc_ratings
						? `
			  	<span class="rating-wrapper pc-rating">
			  		<salla-rating-stars value="${_this.product.rating.stars}" ></salla-rating-stars>
			  	</span>
			 
			  `
						: ""
				}

              ${
								_this.product.calories
									? `<div class="font-sm mt-5 mb-10">
                      <i class="d-inline-block sicon-fire color-danger t-red mr-1 ml-0"></i>
                      <strong>${_this.product.calories}</strong> ${calories}
                    </div>`
									: ""
							}
            ${
							_this.product.is_donation
								? `
								<!--{% component 'product.donation-progress-bar' with {'product': product, 'is_cart': is_cart} %}-->
								<salla-progress-bar donation="${product.is_donation}"></salla-progress-bar>
								<div class="border-color mb-2.5 w-full">
                ${
									_this.product.can_donate
										? `
				<label for="donation-amount"
				class="block text-sm mb-2.5"> 
				قيمة التبرع 
					<span class="text-red-500 t-red">*</span>
				</label>
				<input
				type="text"
				data-digits
				id="donation-amount"
				name="donating_amount"
				class="h-9 form-input"
				placeholder="${donationPH}"/>
				`
										: ""
								}
            </div>

             <!--   <div class="form mt-10 mb-10">
                  <div class="form-group">
                    {{ csrf_field() }} 
                    <div class="input-group input-group--end">
                      <input placeholder="${donationPH}"
                             type="text"
                             id="donation_amount_${_this.product.id}"
                             name="donation_amount"
                             class="form-control form-control--short _parseArabicNumbers"
                             value="${salla.url.is_page("cart") ? _this.product.price : ""}"
                             data-digits-with-decimal
                             data-digits
                             ${!_this.product.can_donate ? "disabled" : ""} />
                      <span class="input-group-addon"> ${salla.config.currency().symbol} </span>
                    </div>
                  </div>
                </div>-->`
								: ""
						}
            <div class="price-wrapper mb-2.5 px-2">
			
              				${
												_this.product.is_on_sale
													? `<span class="color-danger text-danger t-red text-primary text-lg font-bold">${salla.money(
															_this.product.sale_price
													  )}</span><small class="before-price pc-t text-sm mx-2 line-through">${salla.money(
															_this.product.regular_price
													  )}</small>`
													: _this.product.starting_price
													? `${startingPrice}<span class="pc-t mx-1">${salla.money(_this.product.starting_price)}</span>`
													: `<span class="pc-t">${salla.money(_this.product.price)}</span>`
											}
							${_this.product?.is_on_sale && _this.is_price_ratio_on && _this.price_ratio_place == "down" ? `${_this.product_ration_html || ""}` : ``}
							</div>
							${
								_this.has_count_down
									? `<div class="count-down_wrapper inside_product">
							<salla-count-down
								date="${new Date(_this.count_date) / 1000 > Math.floor(Date.now() / 1000) ? `${_this.count_date}` : ``}"
  								color="#baf2e5"
  								digits="en"
								labeled="true"
  								size="md">
							</salla-count-down>
							</div>
							`
									: ""
							}
             			${
										!_this.hideAddBtn
											? `<div class="btn btn--floated btn--add-to-cart btn--add-to-cart ${_this.product.status == "out" ? "disabled" : ""}">
									  ${
											_this.p_atc_btn_hidden
												? ``
												: `
									  
									 
                   <salla-add-product-button 
                                class="w-full aaliicon-add-to-cart-outer"
                                product-status="${_this.product.status}"
                                product-type="${_this.product.type}"
                                product-id="${_this.product.id}"
                                loader-position="end"
								product-status="${_this.product.status}"
                                ${
																	_this.product.notify_availability
																		? `
                                    ${_this.product.notify_availability.subscribed ? "is-subscribed" : ""}
                                    channels="${_this.product.notify_availability.channels.join("")}"
                                    subscribed-options="${JSON.stringify(_this.product.notify_availability.subscribed_options)}"
                                    ${_this.product.notify_availability.options ? "notify-options-availability" : ""}`
																		: ""
																}
																>
																${_this.product.add_to_cart_label !== undefined ? _this.product.add_to_cart_label : ""}
                        </salla-add-product-button>
						 `
										}
					
                  </div>
				  ${
						!_this.product_preview_down
							? ``
							: `
					<div onclick="window.showPreview(this);" data-id="${_this.product.id}" title="عرض سريع"
					data-img="${_this.product.image.url}" class="showPreviewBtn static preview-btn-down">
					<i class="sicon-eye mx-1 ${_this.product_preview_icon_hide ? "hidden" : ""}"></i>
					<span class="mx-1">${_this.preview_text}</span>
					</div>`
					}
				 
				  `
											: ""
									}`;
	};
	//
	//
	//
	// end if window.customCardProps?.custom_pc
}
// test bb