<?php  

$prd_cate = $this->db->select('*')->where('cat_id', $product[0]['cat_id'])->get('category')->result_array();

$prd_subcate = $this->db->select('*')->where('sub_cat_id', $product[0]['sub_cat_id'])->get('sub_category')->result_array();
$inventory_data = $this->db->select('*')->where('prd_id', $product[0]['prd_id'])->get('inventory')->result_array();

$prd_image=explode(",", $product[0]['p_img']);

$review_data=$this->db->select('*')->from('review a')->join('customer b', 'b.c_id=a.c_id', 'left')->where('a.prd_id', $product[0]['prd_id'])->order_by('a.rev_id','desc')->get()->result_array(); 

$num_review=sizeof($review_data);
$total_quantity=0;
foreach ($inventory_data as $key =>  $size) {                                                
    $total_quantity=$total_quantity+$size['available_stock'];
}
$total_review=0;

foreach ($review_data as  $rdata) {

    $total_review=$total_review+$rdata['rating'];

}

 
if ($total_review>0) {

$average_review=$total_review/$num_review;
}
else
{
$average_review=0;
}
$upd_prd= "UPDATE `product` SET hit=hit+1 WHERE prd_id='".$product[0]['prd_id']."'";



        $this->db->query($upd_prd);



if($product[0]['discount_type']==''){

    $discount='';

} else{

    if($product[0]['discount_type']=='Price'){

        $discount='₹'.$product[0]['discount'].' Off';

    }else{
        $discount_p=round($product[0]['discount'], 2);
        $discount=$discount_p.'% Off';

    }

}

?>



    <div class="offcanvas-overlay"></div>





    <!-- Page Title/Header Start -->

    <div class="page-title-section section" data-bg-image="assets/images/bg/page-title-1.webp">

        <div class="container">

            <div class="row">

                <div class="col">



                    <div class="page-title">

                        <h1 class="title">Product Details</h1>

                        <ul class="breadcrumb">

                            <li class="breadcrumb-item"><a href="<?php echo base_url(); ?>">Home</a></li>

                            <li class="breadcrumb-item"><a href="">Products</a></li>

                            <li class="breadcrumb-item active"><?php echo $product[0]['p_title']; ?></li>

                        </ul>

                    </div>



                </div>

            </div>

        </div>

    </div>

    <!-- Page Title/Header End -->


<style type="text/css">
    span.old {
    text-decoration: line-through;
    color: #aaa;
}




</style>

    <!-- Single Products Section Start -->

    <div class="section section-padding border-bottom">

        <div class="container">

            <div class="row learts-mb-n40">
                
                
                <!-- Product Images Start -->

                <!--<div class="col-lg-6 col-12 learts-mb-40">
                    <div class="product-images">
                            <span class="DisCnt"><?php echo $discount;?></span>
                            <?php if ($total_quantity<1) { ?>
                            <div class="outStock">
                                Out of Stock
                            </div>
                        <?php } ?>
                        <div class="product-gallery-slider">

                            <div class="original">

                                <img src="<?php echo base_url(); ?>uploads/product/<?php echo $product[0]['primary_image']; ?>" alt="Product Image">

                            </div>

                            <?php 



                              $img_sl=1;

                              foreach ($prd_image as $key_image_details) {                             



                              ?>

                            <div>

                                <img src="<?php echo base_url(); ?>uploads/product/<?php echo $key_image_details;?>" alt="Product Image">

                            </div>

                        <?php } ?>

                        </div>
                        

                        <div class="product-thumb-slider">

                            <div class="item">

                                <img src="<?php echo base_url(); ?>uploads/product/<?php echo $product[0]['primary_image']; ?>" alt="Product Image">

                            </div>

                            <?php 



                              $img_sl=1;

                              foreach ($prd_image as $key_image_details) {                             



                              ?>

                            <div class="item">

                                <img src="<?php echo base_url(); ?>uploads/product/<?php echo $key_image_details;?>" alt="Product Image">

                            </div>

                        <?php } ?>

                        </div>

                    </div>
                    
                    

                </div> -->
                
                
   <style type="text/css">
       
.product_details_image{
    padding: 20px;
    border: 1px solid #ccc;
}
.details_image img{
   /* display: table;
    margin: 0 auto;
    height: 400px;
    margin-bottom: 20px;*/
}
.show div img{
  width: 600px !important;
  height:650px !important;
}

 .tablink {
    border: 1px solid #ccc;
    padding: 6px;
    margin-right: 10px;
 }
 .tablink img {
     height: 50px;
     margin: 0;
 }
 .videoCls{
        position: relative;
    top: 21px;
    height: 64px;
 }
   </style>             
                      
                
                
               
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/main-zoom.css">
  <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
                <div class="col-md-4">
                    
                    <!-- <div class="show detailImg" href="<?php echo base_url(); ?>uploads/product/<?php echo $product[0]['primary_image']; ?>">
                        <?php if ($total_quantity<1) { ?>
                            <div class="outStock">
                                Out of Stock
                            </div>
                        <?php } ?>
                        <img src="<?php echo base_url(); ?>uploads/product/<?php echo $product[0]['primary_image']; ?>" id="show-img">
                      </div>
                      <div class="small-img">
                        <div class="small-container">
                          <div id="small-img-roll">
                            <img src="<?php echo base_url(); ?>uploads/product/<?php echo $product[0]['primary_image']; ?>" class="show-small-img" alt="Product Image">
                            <?php 



                              $img_sl=1;

                              foreach ($prd_image as $key_image_details) {                             



                              ?>
                            <img src="<?php echo base_url(); ?>uploads/product/<?php echo $key_image_details;?>" class="show-small-img" alt="Product Image">
                            <?php } ?>
                          </div>
                        </div>
                      </div> -->


                      <!-- <div style="margin-top: 40px;"></div> -->


                <div class="product_details_image">
                    <div class="details_image">

                        <div id="main_img" class="tabcontent">
                            <div class="show show1" href="<?php echo base_url(); ?>uploads/product/<?php echo $product[0]['primary_image']; ?>">
                            <img src="<?php echo base_url(); ?>uploads/product/<?php echo $product[0]['primary_image']; ?>" alt="image" class="img-responsive">
                            </div>
                        </div>
                        <?php 



                              $img_sl=1;

                              foreach ($prd_image as $key => $key_image_details) {                             



                              ?>
                        <div id="di<?php echo $key; ?>" class="tabcontent">
                            <div class="show show2" href="<?php echo base_url(); ?>uploads/product/<?php echo $key_image_details;?>">
                            <img src="<?php echo base_url(); ?>uploads/product/<?php echo $key_image_details;?>" alt="image" class="img-responsive">
                            </div>
                        </div>
                    <?php } if($product[0]['video']!='') { ?>


                        <video width="100%" height="400" id="videoD" class="tabcontent" controls="">
                          <source src="https://gaineronline.com/uploads/pvideo/<?php echo $product[0]['video']; ?>" type="video/mp4">
                          <source src="https://gaineronline.com/uploads/pvideo/<?php echo $product[0]['video']; ?>" type="video/ogg">
                        </video>
                    <?php } ?>
                        <button class="tablink" onclick="openCity('main_img')"  id="defaultOpen"><img src="<?php echo base_url(); ?>uploads/product/<?php echo $product[0]['primary_image']; ?>" alt="image"></button>
                        <?php 



                              $img_sl=1;

                              foreach ($prd_image as $key => $key_image_details) {                             



                              ?>
                        <button class="tablink" onclick="openCity('di<?php echo $key; ?>')"> <img src="<?php echo base_url(); ?>uploads/product/<?php echo $key_image_details;?>" alt="image"></button>
                    <?php }  if($product[0]['video']!='') { ?>

                        
                        <button class="tablink videoCls" onclick="openCity('videoD')"><video width="40" height="50">
                          <source src="https://gaineronline.com/uploads/pvideo/<?php echo $product[0]['video']; ?>" type="video/mp4">
                          <source src="https://gaineronline.com/uploads/pvideo/<?php echo $product[0]['video']; ?>" type="video/ogg">
                        </video></button>
                    <?php } ?>

                        <script>
                            function openCity(cityName, elmnt, color) {
                                var i, tabcontent, tablinks;
                                tabcontent = document.getElementsByClassName("tabcontent");
                                for (i = 0; i < tabcontent.length; i++) {
                                    tabcontent[i].style.display = "none";
                                }
                                tablinks = document.getElementsByClassName("tablink");
                                for (i = 0; i < tablinks.length; i++) {
                                    tablinks[i].style.backgroundColor = "";
                                }
                                document.getElementById(cityName).style.display = "block";
                                elmnt.style.backgroundColor = color;

                            }
                            // Get the element with id="defaultOpen" and click on it
                            document.getElementById("defaultOpen").click();

                        </script>
                    </div>
                </div>

                    
                </div>
        
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>        
  <script src="<?php echo base_url(); ?>assets/js/zoom-image.js"></script>
  <script src="<?php echo base_url(); ?>assets/js/main-zoom.js"></script>

                <!-- Product Images End -->


                <!-- Product Summery Start -->

                <div class="col-lg-8 col-12 learts-mb-40">

                    <div class="product-summery">

                        <h3 class="product-title"><?php echo $product[0]['p_title']; ?></h3>
                        
                        <div class="product-price"><span class="old">₹<?php echo $product['0']['p_mrp'];?></span>&nbsp; ₹<?php echo $product[0]['p_sell_price']; ?></div>



                        <div class="product-ratings">

                            <i data-star="<?php echo $average_review; ?>"></i>

                            <a href="#reviews" class="review-link">(<?php echo $average_review; ?>)</a>

                        </div>
                        <?php 
                        
                        if ($product['0']['seller_id']==0) {
                         ?>
                        <div class="product-description">
                            <p>Seller : <strong>Top 10</strong></p>

                            <p><?php echo $product[0]['disclaimer']; ?></p>

                        </div>
                    <?php } else {
                        $seller_data = $this->db->select('*')->where('id', $product[0]['seller_id'])->get('sellers')->result_array();
                        ?>
                        <div class="product-description">
                            <p>Seller : <strong><?php echo $seller_data[0]['s_name']; ?></strong></p>

                            <p><?php echo $product[0]['disclaimer']; ?></p>

                        </div>
                    <?php } ?>
                        <div class="product-variations">

                            <table>

                                <tbody>

                                    <tr>

                                        <td class="label"><span>Size</span></td>

                                        <td>

                                            

                                            <div class="radio-group">

                                                <?php 
                                                $checked_radio=0;
                                                $product_size=explode(',', $product[0]['product_size']); 
                                                $total_quantity=0;
                                                foreach ($inventory_data as $key =>  $size) {                                                
                                                    $total_quantity=$total_quantity+$size['available_stock'];
                                                    
                                                ?>

                                                <input type="radio" id="<?php echo $size['size']; ?>" class="size"  name="size" value="<?php echo $size['size']; ?>" <?php if($checked_radio==0){ if ($size['available_stock']>0){ $checked_radio=1; ?> checked="" <?php } } ?> <?php if ($size['available_stock']<1){ ?> disabled onclick="SizeOutOfStock()" <?php } ?> ><label for="<?php echo $size['size']; ?>"  <?php if ($size['available_stock']<1){ ?> onclick="SizeOutOfStock()" <?php } ?>><?php echo $size['size']; ?></label>

                                            <?php } ?>

                                                

                                            </div>

                                        </td>

                                        <!-- <td class="value">

                                            <div class="product-sizes">

                                                <?php $product_size=explode(',', $product[0]['product_size']); 

                                                foreach ($product_size as  $size) {                                                

                                                ?>

                                                <a href="#"><?php echo $size; ?></a>

                                            <?php } ?>

                                                

                                            </div>

                                        </td> -->

                                    </tr>

                                    <tr>

                                        <td class="label"><span>Colour</span></td>





                                        <td>

                                            <div class="radio-group">

                                                <?php $product_color=explode(',', $product[0]['product_colour']); 

                                                foreach ($product_color as  $key => $colour) {                                                

                                                ?>

                                                <input type="radio" id="<?php echo $colour; ?>" class="colour"  name="colour" value="<?php echo $colour; ?>" <?php if($key==0){ ?> checked <?php } ?>><label for="<?php echo $colour; ?>"><?php echo $colour; ?></label>

                                            <?php } ?>

                                                

                                            </div>

                                        </td>



                                        <!-- <td class="value">

                                            <div class="product-sizes">

                                                <?php $product_color=explode(',', $product[0]['product_colour']); 

                                                foreach ($product_color as  $colour) {                                                

                                                ?>

                                                <a href="#"><?php echo $colour; ?></a>

                                            <?php } ?>

                                                

                                            </div>

                                        </td> -->

                                    </tr>

                                    

                                    <tr>

                                        <td class="label"><span>Quantity</span></td>

                                        <td class="value">

                                            <div class="product-quantity">

                                                <span class="qty-btn minus"><i class="ti-minus"></i></span>

                                                <input type="text" class="input-qty product_qty" value="1">

                                                <span class="qty-btn plus"><i class="ti-plus"></i></span>

                                            </div>

                                        </td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                        <div class="product-buttons">



                                <a href="javascript:void(0)" data-productid="<?php echo $product[0]['prd_id'];?>" data-productname="<?php echo $product[0]['p_title'];?>" data-productprice="<?php echo $product[0]['p_sell_price'];?>" class="btn btn-icon btn-outline-body btn-hover-dark hintT-top <?php if($this->session->userdata('customer')){ ?>  add_wishlist <?php } else { ?> loginfirst <?php } ?> " data-hint="Add to wishlist"><i class="fal fa-heart"></i></a>

                            <a href="javascript:void(0)" class="btn btn-dark btn-outline-hover-dark <?php if($total_quantity >0) { ?> add_cart <?php } ?>" data-productid="<?php echo $product[0]['prd_id'];?>" data-productname="<?php echo $product[0]['p_title'];?>" data-productprice="<?php echo $product[0]['p_sell_price'];?>" <?php if($total_quantity <1) { ?> onclick="OutOfStock()"  style="opacity: 0.3" disabled <?php } ?>><i class="fal fa-shopping-cart"></i> Add to Cart</a>

                                <?php 

                                if($this->session->userdata('customer')){

                                 ?>

                            <a href="javascript:void(0)" class="btn btn-outline-dark <?php if($total_quantity >0) { ?> buynow_order <?php } ?>"  data-productid="<?php echo $product[0]['prd_id'];?>" data-productname="<?php echo $product[0]['p_title'];?>" data-productprice="<?php echo $product[0]['p_sell_price'];?>" <?php if($total_quantity <1) { ?> style="opacity: 0.3" title="Currently unavailable" <?php } ?>>Buy Now</a>

                            <?php } else { ?>

                                <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal" id="moD1" class="btn btn-outline-dark">Login </a>

                            <?php } ?>

                        </div>

                        <div class="product-meta">

                            <table>

                                <tbody>

                                    <tr>

                                        <td class="label"><span>Product Code</span></td>

                                        <td class="value"><?php echo $product[0]['p_code']; ?></td>

                                    </tr>

                                    <tr>

                                        <td class="label"><span>HSN Code</span></td>

                                        <td class="value"><?php echo $product[0]['hsn_code']; ?></td>

                                    </tr>

                                    <tr>

                                        <td class="label"><span>Brand</span></td>

                                        <td class="value">

                                            <ul class="product-category">

                                                <li><a href="#">Name</a></li>

                                            </ul>

                                        </td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

                <!-- Product Summery End -->
          
              
           
                



            </div>

        </div>



    </div>

    <!-- Single Products Section End -->

   


    <!-- Single Products Infomation Section Start -->

    <div class="section section-padding border-bottom">

        <div class="container">



            <ul class="nav product-info-tab-list">

                <li><a class="active" data-bs-toggle="tab" href="#tab-description">Description</a></li>

                <li><a data-bs-toggle="tab" href="#tab-additional_information">Additional information</a></li>

                <li><a data-bs-toggle="tab" href="#tab-reviews">Reviews (<?php echo $num_review; ?>)</a></li>

            </ul>

            <div class="tab-content product-infor-tab-content">

                <div class="tab-pane fade show active" id="tab-description">

                    <div class="row">

                        <div class="col-lg-10 col-12 mx-auto">

                            <p><?php echo $product[0]['p_description']; ?></p>
                            <p><span>*</span>The actual color of the product may slightly vary due to photographic lighting sources or your device.</p>

                        </div>

                    </div>

                </div>

                <div class="tab-pane fade" id="tab-additional_information">

                    <div class="row">

                        <div class="col-lg-8 col-md-10 col-12 mx-auto">

                            <div class="table-responsive">

                                <table class="table table-bordered">

                                    <tbody>

                                        <tr>

                                            <td>Size</td>

                                            <td><?php echo $product[0]['product_size']; ?></td>

                                        </tr>

                                        <tr>

                                            <td>Color</td>

                                            <td><?php echo $product[0]['product_colour']; ?></td>

                                        </tr>

                                    </tbody>

                                </table>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="tab-pane fade" id="tab-reviews">

                    <div class="product-review-wrapper">

                        <span class="title"><?php echo $num_review; ?> reviews for <?php echo $product[0]['p_title'];?></span>

                        <ul class="product-review-list">

                            <?php foreach ($review_data as $key => $reviews) {
                                $rat=$reviews['rating']*20;
                             ?>

                            <li>

                                <div class="product-review">

                                    <div class="content">

                                        <div class="ratings">

                                            <span class="star-rating">

                                                <span class="rating-active" style="width: <?php echo $rat;?>%;">ratings</span>

                                            </span>

                                        </div>

                                        <div class="meta">
                                            <?php if($reviews['name']==''){ ?>
                                            <h5 class="title"><?php echo $reviews['r_name']; ?></h5>
                                            <?php } else{ ?>
                                            <h5 class="title"><?php echo $reviews['name']; ?></h5>
                                            <?php } ?>
                                            <span class="date"><?php echo date("F d,Y", strtotime($reviews['date']));  ?></span>

                                        </div>

                                        <p><?php echo $reviews['review']; ?></p>

                                    </div>

                                </div>

                            </li>

                        <?php } ?>

                           

                        </ul>

                        <span class="title">Add a review</span>

                        <div class="review-form">

                            <p class="note">Your email address will not be published. Required fields are marked *</p>

                            <div class="alert alert-success SuccMsg" style="display: none;">

                              <strong>Thank you for your review!</strong>

                            </div>

                            <div class="alert alert-danger WorningMsg" style="display: none;">

                              <strong>Please Buy this product First!</strong>

                            </div>

                            <form  method="post" id="product_rating_form">

                                <div class="row learts-mb-n30">

                                    <!--<div class="col-md-6 col-12 learts-mb-30"><input type="text" placeholder="Name *"></div>

                                    <div class="col-md-6 col-12 learts-mb-30"><input type="email" placeholder="Email *"></div>

                                     <div class="col-12 learts-mb-10">

                                        <div class="form-rating">

                                            <span class="title">Your rating</span>

                                            <span class="rating"><span class="star"></span></span>

                                        </div>

                                    </div> -->

                                    <div class="col-12 learts-mb-10">

                                  <div class="rating">

                                    <label>

                                      <input type="radio" name="rating" value="1" />

                                      <span class="icon">★</span>

                                    </label>

                                    <label>

                                      <input type="radio" name="rating" value="2" />

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                    </label>

                                    <label>

                                      <input type="radio" name="rating" value="3" />

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>   

                                    </label>

                                    <label>

                                      <input type="radio" name="rating" value="4" />

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                    </label>

                                    <label>

                                      <input type="radio" name="rating" checked value="5" />

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                      <span class="icon">★</span>

                                    </label>

                                  </div>

                                </div> 

                                    <div class="col-12 learts-mb-30"><textarea name="p_review" placeholder="Your Review *" required></textarea></div>

                                    <input type="hidden" name="product_id" value="<?php echo $product[0]['prd_id'];?>">

                                    <?php 

                                        if($this->session->userdata('customer')){

                                         ?>

                                    <div class="col-12 text-center learts-mb-30"><button type="submit" name="submit" class="btn btn-dark btn-outline-hover-dark">Submit</button></div>

                                    <?php } else { ?>

                                        <div class="col-12 text-center learts-mb-30">

                                        <a href="javascript:void(0)" data-toggle="modal" id="moD2" data-target="#myModal" class="btn btn-dark btn-outline-hover-dark">Login </a>

                                    </div>

                                    <?php } ?>



                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>



        </div>

    </div>

    <!-- Single Products Infomation Section End -->

    <script type="text/javascript">

    $(document).ready(function(){

        $('.buynow_order').click(function(){

            var product_id    = $(this).data("productid");

            var product_name  = $(this).data("productname");

            var product_price = $(this).data("productprice");

            var colour = $('input[name="colour"]:checked').val();

            var size = $('input[name="size"]:checked').val();

             var quantity       = $('.product_qty').val();

            // var order_date       = $('#order_date').val();

            //alert(time_slot);

            $.ajax({

                url : "<?php echo site_url('product/buy_now');?>",

                method : "POST",

                data : {product_id: product_id, product_name: product_name, colour: colour, size: size, product_price: product_price, quantity: quantity},

                success: function(data){

                    window.location.href="<?php echo site_url('order/buy_now_checkout/');?>";

                    

                }

            });

        });

    });

</script>



 

<script>

    // just for the demos, avoids form submit

    jQuery.validator.setDefaults({

    success: "valid"

    });

    $( "#product_rating_form" ).validate({

    rules: {

    p_review: {

    required: true

    }

    }

    });

    </script>

    <script type="text/javascript">

    $(document).ready(function(e){

    $("#product_rating_form").on('submit', function(e){

    e.preventDefault();

    var formStatus = $('#product_rating_form').validate().form();

    if(true == formStatus){

    $.ajax({

    type: 'POST',

    url: "<?php echo site_url('Product/rate_save');?>",

    data: new FormData(this),

    contentType: false,

    cache: false,

    processData:false,

    beforeSend: function(){

    $('.btn-solid').attr("disabled","disabled");

    $('#product_rating_form').css("opacity",".5");

    },

    success: function(msg){

    if(msg=='success'){

    $(".SuccMsg").show();

    $('.SuccMsg').delay(2000).hide(200);

    $('#product_rating_form').css("opacity","");

    $(".btn-solid").removeAttr("disabled");

    setInterval(function(){

    location.reload();

    }, 2000);

    }

    else{

    $(".WorningMsg").show();

    $('.WorningMsg').delay(5000).hide(500);

    $('#product_rating_form').css("opacity","");

    $(".btn-solid").removeAttr("disabled");

    }

    }

    });

    }

    });

    });

</script> 

<style type="text/css">



[data-star] {

  text-align:left;

  font-style:normal;

  display:inline-block;

  position: relative;

  unicode-bidi: bidi-override;

}

[data-star]::before { 

  display:block;

  content: '★★★★★';

  color: #eee;

}

[data-star]::after {

  white-space:nowrap;

  position:absolute;

  top:0;

  left:0;

  content: '★★★★★';

  width: 0;

  color: #ff8c00;

  overflow:hidden;

  height:100%;

}



[data-star^="0.1"]::after,[data-star^=".1"]::after{width:2%}

[data-star^="0.2"]::after,[data-star^=".2"]::after{width:4%}

[data-star^="0.3"]::after,[data-star^=".3"]::after{width:6%}

[data-star^="0.4"]::after,[data-star^=".4"]::after{width:8%}

[data-star^="0.5"]::after,[data-star^=".5"]::after{width:10%}

[data-star^="0.6"]::after,[data-star^=".6"]::after{width:12%}

[data-star^="0.7"]::after,[data-star^=".7"]::after{width:14%}

[data-star^="0.8"]::after,[data-star^=".8"]::after{width:16%}

[data-star^="0.9"]::after,[data-star^=".9"]::after{width:18%}

[data-star^="1"]::after{width:20%}

[data-star^="1.1"]::after{width:22%}

[data-star^="1.2"]::after{width:24%}

[data-star^="1.3"]::after{width:26%}

[data-star^="1.4"]::after{width:28%}

[data-star^="1.5"]::after{width:30%}

[data-star^="1.6"]::after{width:32%}

[data-star^="1.7"]::after{width:34%}

[data-star^="1.8"]::after{width:36%}

[data-star^="1.9"]::after{width:38%}

[data-star^="2"]::after{width:40%}

[data-star^="2.1"]::after{width:42%}

[data-star^="2.2"]::after{width:44%}

[data-star^="2.3"]::after{width:46%}

[data-star^="2.4"]::after{width:48%}

[data-star^="2.5"]::after{width:50%}

[data-star^="2.6"]::after{width:52%}

[data-star^="2.7"]::after{width:54%}

[data-star^="2.8"]::after{width:56%}

[data-star^="2.9"]::after{width:58%}

[data-star^="3"]::after{width:60%}

[data-star^="3.1"]::after{width:62%}

[data-star^="3.2"]::after{width:64%}

[data-star^="3.3"]::after{width:66%}

[data-star^="3.4"]::after{width:68%}

[data-star^="3.5"]::after{width:70%}

[data-star^="3.6"]::after{width:72%}

[data-star^="3.7"]::after{width:74%}

[data-star^="3.8"]::after{width:76%}

[data-star^="3.9"]::after{width:78%}

[data-star^="4"]::after{width:80%}

[data-star^="4.1"]::after{width:82%}

[data-star^="4.2"]::after{width:84%}

[data-star^="4.3"]::after{width:86%}

[data-star^="4.4"]::after{width:88%}

[data-star^="4.5"]::after{width:90%}

[data-star^="4.6"]::after{width:92%}

[data-star^="4.7"]::after{width:94%}

[data-star^="4.8"]::after{width:96%}

[data-star^="4.9"]::after{width:98%}

[data-star^="5"]::after{width:100%}

</style>