<style>
    div.wrapper div.top div.main-top div.ket button.item-option {
        border: 1px solid <?= $this->Settings_model->general()['navbar_color']; ?>;
    }

    div.wrapper div.top div.main-top div.ket button.btn-for-addcart {
        background-color: <?= $this->Settings_model->general()['btncolor']; ?>
    }

    div.wrapper div.top div.main-top div.ket button.btn-for-addcart:hover {
        background-color: #353535;
    }

    .hov:hover {
        background-color: #F6F6F6;
    }

    button.btn-add-rating {
        background-color: <?= $this->Settings_model->general()['btncolor']; ?>;
    }

    button.btn-add-rating:hover {
        background-color: #353535;
    }

    .top-rating {
        align-items: center;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }

    .top-rating .title {
        font-size: 18px;
    }

    .arrow-bottom-rating-rotate {
        transform: rotate(180deg);
        transition: 0.5s all;
    }

    .rating-star-view {
        color: orange;
        font-size: 14px;
        position: absolute;
        right: 1.25rem;
        top: 1.25rem;
    }

    .input-rating i {
        color: #444;
        cursor: pointer;
        font-size: 20px;
    }

    div.starrr a {
        color: orange;
        font-size: 25px;
    }

    div.product-wrapper div.main-product div.item-product div.stars-rating {
        bottom: 10px;
        position: absolute;
        right: 15px;
    }

    div.product-wrapper div.main-product div.item-product div.stars-rating i {
        color: orange;
        font-size: 14px;
    }

    div.product-wrapper div.main-product div.item-product {
        position: relative;
    }

    div.product-wrapper div.main-product div.item-product div.card-body p.newPrice {
        font-size: 16px;
    }

    div.product-wrapper div.main-product div.item-product div.stars-rating {
        bottom: 10px;
        position: absolute;
        right: 15px;
    }

    div.product-wrapper div.main-product div.item-product div.stars-rating i {
        color: orange;
        font-size: 14px;
    }

    @media screen and (max-width: 700px) {

        div.product-wrapper div.main-product div.item-product div.stars-rating i {
            font-size: 12px;
        }
    }
</style>
<?php include __DIR__ . '/../templates/star.php' ?>
<?php echo $this->session->flashdata('sweetalert'); ?>
<?php if ($this->Settings_model->general()['social_proof_status'] == 1) { ?>
    <?php $noooo = 1;
    foreach ($invoice->result_array() as $in) : ?>
        <input type="hidden" id="numberOfInvoiceTotalHomePage" value="<?= $invoice->num_rows(); ?>">
        <div class="social-proof" id="socialProofId-<?= $noooo; ?>">
            <div class="main">
                <?php $product_buy = $this->db->get_where('transaction', ['id_invoice' => $in['invoice_code']])->row_array();
                $product_real = $this->db->get_where('products', ['slug' => $product_buy['slug']])->row_array(); ?>
                <img src="<?= $product_real['ex_img'] == 1 ? $product_real['img'] : base_url() . 'assets/images/product/' . $product_real['img']; ?>" alt="img product">
                <div class="text">
                    <p><span class="font-bold"><?= strlen($in['name']) > 15 ? substr($in['name'], 0, 15) . '..' : $in['name']; ?></span> membeli
                    <p class="font-bold product_name"><?= $product_real['title'] ?></p>
                    </p>
                    <span class="verified"><img src="<?= base_url(); ?>assets/images/icon/verified.png" alt="verified icon"> Verified by <span class="app_name"><?= $this->Settings_model->general()['app_name']; ?></span></span>
                </div>
            </div>
        </div>
    <?php $noooo++;
    endforeach; ?>
<?php } ?>


<div class="wrapper">
    <script>
        fbq('track', 'ViewContent');
    </script>
    <?php $setting = $this->db->get('settings')->row_array(); ?>
    <div class="top">
        <div class="main-top">
            <div class="img img-detail-product-slick">
                <img src="<?= $product['ex_img'] == 1 ? $product['img'] : base_url() . 'assets/images/product/' . $product['img']; ?>" alt="produk" class="jumbo-thumb">
                <?php foreach ($img->result_array() as $d) : ?>
                    <img src="<?= $d['ex_img'] == 1 ? $d['img'] : base_url() . 'assets/images/product/' . $d['img']; ?>" alt="produk" class="jumbo-thumb">
                <?php endforeach; ?>
            </div>
            <div class="ket">
                <h1 class="title"><?= $product['title']; ?></h1>
                <?php if ($product['discount'] == 0) { ?>
                    <h4 class="price real-price-this-product">Rp. <?= str_replace(",", ".", number_format($product['price'])); ?></h4>
                <?php } else { ?>
                    <div class="price-col">
                        <?php $diskonnya = ($product['price'] * $product['discount']) / 100 ?>
                        <h4 class="price changed-price-this-product">Rp. <?= str_replace(",", ".", number_format($product['price'] - $diskonnya)); ?></h4>
                        <p class="oldPrice real-price-this-product">Rp. <span class="linet"><?= str_replace(",", ".", number_format($product['price'])); ?></span> <span class="badge badge-danger"><?= $product['discount']; ?>%</span></p>
                    </div>
                <?php } ?>
                <?php if ($color->num_rows() > 0) { ?>
                    <input type="hidden" id="hiddenColorTrueOrFalse" value="true">
                    <h3 class="title-sub">Warna</h3>
                    <?php foreach ($color->result_array() as $c) : ?>
                        <button class="item-option mb-2 item-option-select-variant-product-color" value="<?= $c['color']; ?>"><?= $c['color']; ?></button>
                    <?php endforeach; ?>
                    <p class="errorMsgForColor">Pilih warna dulu</p>
                <?php } else { ?>
                    <input type="hidden" id="hiddenColorTrueOrFalse" value="false">
                <?php } ?>
                <?php if ($variant->num_rows() > 0) { ?>
                    <input type="hidden" id="hiddenVariantTrueOrFalse" value="true">
                    <h3 class="title-sub"><?= $product['variant_name'] ?></h3>
                    <?php foreach ($variant->result_array() as $v) : ?>
                        <button class="item-option mb-2 item-option-select-variant-product-size" value="<?= $v['type']; ?>"><?= $v['type']; ?></button>
                    <?php endforeach; ?>
                    <p class="errorMsgForColor">Pilih <?= strtolower($product['variant_name']); ?> dulu</p>
                <?php } else { ?>
                    <input type="hidden" id="hiddenVariantTrueOrFalse" value="false">
                <?php } ?>
                <h3 class="title-sub">Jumlah</h3>
                <button class="buttonPlusMinus plusMinusLeft" onclick="minusProduct('<?= $product['wholesaler_count']; ?>')">-</button>
                <!--
                --><input type="text" value="1" id="qtyProduct" onkeyup="checkStockDetailProduct('<?= $product['stock']; ?>', this.value)" class="valueJml">
                <!--
                --><button class="buttonPlusMinus plusMinusRight" onclick="plusProduct(<?= $product['stock']; ?>, '<?= $product['wholesaler_count']; ?>')">+</button>
                <?php if ($product['stock'] > 0) { ?>
                    <button class="btn-for-addcart font-weight-bold" onclick="orderNow()">PESAN SEKARANG</button>
                <?php } ?>
                <p class="more-info"><?= $product['name']; ?> | Berat: <?= $product['weight']; ?> gr | Stok: <?= $product['stock']; ?></p>
            </div>
        </div>
    </div>
    <div class="top-desc">
        <h4 class="title-desc">Deskripsi</h4>
        <button class="share">
            <i class="fa fa-share-alt"></i> Share
        </button>
        <div class="share-dd">
            <a target="_blank" href="https://facebook.com/share.php?u=<?= base_url(); ?>p/<?= $product['slugP']; ?>" style="color: #3b5998">
                <i class="fab fa-facebook-square"></i>
            </a>
            <a target="_blank" href="https://wa.me?text=<?= base_url(); ?>p/<?= $product['slugP']; ?>" style="color: #03AC0E">
                <i class="fab fa-whatsapp-square"></i>
            </a>
            <a target="_blank" href="https://twitter.com/intent/tweet?url=<?= base_url(); ?>p/<?= $product['slugP']; ?>" style="color: #1da1f2">
                <i class="fab fa-twitter-square"></i>
            </a>
            <a onclick="copyFunction()" style="color: #F1B44C; cursor: pointer;">
                <i class="fas fa-share-alt-square"></i>
            </a>
            <small style="display: none;" class="msgSuccessCopyLink text-success">Berhasil menyalin link</small>
        </div>
        <input style="position: absolute;  left: -1000%;" type="text" value="<?= base_url(); ?>p/<?= $product['slugP']; ?>" id="inputForTextSlug">
        <script>
            function copyFunction() {
                var copyText = document.getElementById("inputForTextSlug");
                copyText.select();
                copyText.setSelectionRange(0, 99999);
                document.execCommand("copy");
                document.querySelector(".msgSuccessCopyLink").style.display = "block";
                setTimeout(function() {
                    document.querySelector(".msgSuccessCopyLink").style.display = "none";
                }, 1500);
            }
        </script>
    </div>
    <hr>
    <div class="description">
        <?php
        $descChange = str_replace('<figure class="media"><oembed url="https://www.youtube.com/watch?v=', '<iframe src="https://www.youtube.com/embed/', $product['description']);
        $descChange = str_replace('"></oembed></figure>', '"></iframe>', $descChange);
        ?>
        <?= nl2br($descChange); ?>
    </div>
    <hr>
    <div class="rating">
        <div class="top-rating mb-3">
            <h4 class="title">Review Pelanggan</h4>
            <span><i class="fa fa-chevron-down"></i></span>
        </div>
        <div class="main-rating mt-2">
            <?php foreach ($rating->result_array() as $data) : ?>
                <div class="card mb-3">
                    <div class="card-body">
                        <p class="mb-1"><strong><?= $data['name'] ?></strong></p>
                        <div class="rating-star-view"><?= rattingStars(round($data['star'], 1)); ?></div>
                        <p class="mb-0 text-secondary">"<?= $data['review'] ?>"</p>
                    </div>
                </div>
            <?php endforeach; ?>
            <?= $this->pagination->create_links(); ?>
        </div>
        <div class="input-rating">
            <div class="card">
                <div class="card-header">
                    <p class="mb-0">Berikan Rating</p>
                </div>
                <div class="card-body">
                    <form action="<?= base_url(); ?>products/save_rating/<?= $product['productId']; ?>" method="post">
                        <div class="form-group">
                            Pilih Rating: <div class="starrr"></div>
                            <input type="hidden" name="rating-star" class="starrr-rating-star-count">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Nama Lengkap" autocomplete="off" required name="rating-name">
                        </div>
                        <div class="form-group">
                            <textarea name="rating-review" rows="3" class="form-control" required placeholder="Tulis Review"></textarea>
                        </div>
                        <button class="btn text-light px-4 btn-add-rating">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <?php if ($related->num_rows() > 0) { ?>
        <div class="product-wrapper best-product">
            <br>
            <h2 class="title">Produk Terkait</h2>
            <a href="<?= base_url(); ?>c/<?= $product['cSlug'] ?>" class="float-right mt-2">Lihat semua</a>
            <br><br>
            <div class="main-product">
                <?php foreach ($related->result_array() as $p) : ?>
                    <div>
                        <a href="<?= base_url(); ?>p/<?= $p['slug']; ?>">
                            <div class="item-product hov">
                                <img src="<?= $p['ex_img'] == 1 ? $p['img'] : base_url() . 'assets/images/product/' . $p['img']; ?>" class="card-img-top">
                                <div class="card-body">
                                    <?php if ($p['discount'] == 0) { ?>
                                        <p class="card-text line-3 mb-0"><?= $p['title']; ?></p>
                                        <p class="newPrice">Rp. <?= str_replace(",", ".", number_format($p['price'])); ?></p>
                                    <?php } else { ?>
                                        <p class="card-text mb-0"><?= $p['title']; ?></p>
                                        <p class="oldPrice mb-0">Rp. <?= str_replace(",", ".", number_format($p['price'])); ?></p>
                                        <?php $diskonnya = ($p['price'] * $p['discount']) / 100 ?>
                                        <p class="newPrice">Rp. <?= str_replace(",", ".", number_format($p['price'] - $diskonnya)); ?></p>
                                    <?php } ?>
                                    <div class="stars-rating">
                                        <?php $starsRating = $this->Products_model->rowRatingByProduct($p['id']); ?>
                                        <?php if ($starsRating == 0) { ?>
                                            <i class="far fa-star"></i> <small class="text-muted"><?= round($starsRating, 1) ?></small>
                                        <?php } else { ?>
                                            <i class="fa fa-star"></i> <small class="text-muted"><?= round($starsRating, 1) ?></small>
                                        <?php } ?>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
                <div class="clearfix"></div>
            </div>
        </div>
    <?php } ?>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
    function plusProduct(stock, wholesalerCount, wholesalerPrice) {
        let inputJml;
        inputJml = parseInt($("input.valueJml").val());
        inputJml = inputJml + 1;
        if (inputJml <= stock) {
            $("input.valueJml").val(inputJml);
            $.ajax({
                url: `<?= base_url(); ?>products/get_wholesaler_by_count_and_id?type=plus&id=<?= $product['productId']; ?>&count=${inputJml}`,
                method: "get",
                success: function(response) {
                    console.log(response);
                    if (response != 0) {
                        if (parseInt('<?= $product['discount'] ?>') == 0) {
                            const wholeSaler = new Intl.NumberFormat(['ban', 'id']).format(response);
                            $(".real-price-this-product").text("Rp. " + wholeSaler);
                        } else {
                            const discountnya = (parseInt(response) * parseInt('<?= $product['discount']; ?>')) / 100;
                            const wholeSaler = new Intl.NumberFormat(['ban', 'id']).format(parseInt(response));
                            $(".changed-price-this-product").html("Rp. " + new Intl.NumberFormat(['ban', 'id']).format(parseInt(response) - discountnya))
                            $(".real-price-this-product").html(`Rp. <span class="linet">${wholeSaler}</span> <span class="badge badge-danger"><?= $product['discount']; ?>%</span>`);
                        }
                    }
                }
            })
        }
    }

    function minusProduct(wholesalerCount) {
        let inputJml;
        inputJml = parseInt($("input.valueJml").val());
        inputJml = inputJml - 1;
        if (inputJml >= 1) {
            $("input.valueJml").val(inputJml);
            $.ajax({
                url: `<?= base_url(); ?>products/get_wholesaler_by_count_and_id?type=minus&id=<?= $product['productId']; ?>&count=${inputJml}`,
                method: "get",
                success: function(response) {
                    console.log(response);
                    if (response != 0) {
                        if (parseInt('<?= $product['discount'] ?>') == 0) {
                            const wholeSaler = new Intl.NumberFormat(['ban', 'id']).format(response);
                            $(".real-price-this-product").text("Rp. " + wholeSaler);
                        } else {
                            const discountnya = (parseInt(response) * parseInt('<?= $product['discount']; ?>')) / 100;
                            const wholeSaler = new Intl.NumberFormat(['ban', 'id']).format(parseInt(response));
                            $(".changed-price-this-product").html("Rp. " + new Intl.NumberFormat(['ban', 'id']).format(parseInt(response) - discountnya))
                            $(".real-price-this-product").html(`Rp. <span class="linet">${wholeSaler}</span> <span class="badge badge-danger"><?= $product['discount']; ?>%</span>`);
                        }
                    } else {
                        if (parseInt('<?= $product['discount'] ?>') == 0) {
                            const wholeSaler = new Intl.NumberFormat(['ban', 'id']).format('<?= $product['price'] ?>');
                            $(".real-price-this-product").text("Rp. " + wholeSaler);
                        } else {
                            const discountnya = (parseInt('<?= $product['price'] ?>') * parseInt('<?= $product['discount']; ?>')) / 100;
                            const wholeSaler = new Intl.NumberFormat(['ban', 'id']).format(parseInt('<?= $product['price'] ?>'));
                            $(".changed-price-this-product").html("Rp. " + new Intl.NumberFormat(['ban', 'id']).format(parseInt('<?= $product['price'] ?>') - discountnya))
                            $(".real-price-this-product").html(`Rp. <span class="linet">${wholeSaler}</span> <span class="badge badge-danger"><?= $product['discount']; ?>%</span>`);
                        }
                    }
                }
            })
        }
    }

    function addCart() {
        $.ajax({
            url: "<?= base_url(); ?>cart/add_to_cart",
            type: "post",
            data: {
                id: <?= $product['productId']; ?>,
                qty: $("#qtyProduct").val()
            },
            success: function(data) {
                $(".navbar-cart-inform").html(`<i class="fa fa-shopping-cart"></i> Keranjang(<?= count($this->cart->contents()) + 1; ?>)`);
                swal({
                        title: "Berhasil Ditambah ke Keranjang",
                        text: `<?= $product['title']; ?>`,
                        icon: "success",
                        buttons: true,
                        buttons: ["Lanjut Belanja", "Lihat Keranjang"],
                    })
                    .then((cart) => {
                        if (cart) {
                            location.href = "<?= base_url(); ?>cart"
                        }
                    });
            }
        })
    }

    // slider product
    const containerImgProduct = document.querySelector("div.wrapper div.top div.main-top div.img");
    const jumboImgProduct = document.querySelector("div.wrapper div.top div.main-top div.img img.jumbo-thumb");
    const jumboHrefImgProduct = document.querySelector("div.wrapper div.top div.main-top div.img a");
    const thumbsImgProduct = document.querySelectorAll("div.wrapper div.top div.main-top div.img div.img-slider img.thumb");

    containerImgProduct.addEventListener('click', function(e) {
        if (e.target.className == 'thumb') {
            jumboImgProduct.src = e.target.src;
            jumboHrefImgProduct.href = e.target.src;

            thumbsImgProduct.forEach(function(thumb) {
                thumb.className = 'thumb';
            })
        }
    })
</script>