
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router";
let CartCompare = computed(() => store.state.compare)
let setting = computed(() => store.state.settings)
const store = useStore();
const route = useRouter();
import 'swiper/css/autoplay';
import 'swiper/css';
import { Swiper, SwiperSlide  } from 'swiper/vue'
import { Autoplay} from 'swiper/modules';
const props = defineProps({
  product: Object,
})
let form = reactive({
    'currentRating':'',
    'product_id':'',
    'title':'',
    'content':'',
    'display_name':'',
    'email':'',
})
let CalculateStar = ref(0)
let OneStar = ref(0)
let TwoStar = ref(0)
let ThreeStar = ref(0)
let FourStar = ref(0)
let FiveStar = ref(0)

let CalculateStart1Yellow = ref(0)
let CalculateStart1White = ref(0)
let CalculateStart2Yellow = ref(0)
let CalculateStart2White = ref(0)
let CalculateStart3Yellow = ref(0)
let CalculateStart3White = ref(0)
let CalculateStart4Yellow = ref(0)
let CalculateStart4White = ref(0)
let CalculateStart5Yellow = ref(0)
let CalculateStart5White = ref(0)
let TotalReview = ref(0)
onMounted(async () => {
    DynamicReview()
})
let totalStar = ref([])
let totalImages = ref([])
let TotalRatingStar = ref(0)
const DynamicReview = async()=>{
    await axios.post(setting.value.frontend_img_url+'/api/product-review-get/'+props.product.id).then(response =>{
        totalStar.value = response.data.totalStar
        totalImages.value = response.data.totalImages
        response.data.totalStar.map((p)=>{
            TotalReview.value++
            if(p.currentRating == 1){
                OneStar.value ++
            }
            if(p.currentRating == 2){
                TwoStar.value ++
            }
            if(p.currentRating == 3){
                ThreeStar.value ++
            }
            if(p.currentRating == 4){
                FourStar.value ++
            }
            if(p.currentRating == 5){
                FiveStar.value ++
            }
        })
        TotalRatingStar.value = (parseInt(OneStar.value)*1)+(parseInt(TwoStar.value)*2)
        +(parseInt(ThreeStar.value)*3)+(parseInt(FourStar.value)*4)+(parseInt(FiveStar.value)*5);
        CalculateStar.value = parseFloat(parseInt(TotalRatingStar.value)/parseInt(TotalReview.value)).toFixed(2);
        console.log(CalculateStar.value)
        FinalCalculate()
    })
}
const FinalCalculate = async()=>{
    if(parseInt(CalculateStar.value) == 0){
        if(parseInt((parseFloat(CalculateStar.value))*100) > 0){
            CalculateStart1Yellow.value = parseInt((parseFloat(CalculateStar.value))*100)
            CalculateStart1White.value = 100 - parseInt((parseFloat(CalculateStar.value))*100)
        }
    }
    if(parseInt(CalculateStar.value) == 1){
        CalculateStart1Yellow.value = 100
        CalculateStart1White.value = 0
        if(parseInt((parseFloat(CalculateStar.value)%1)*100) > 0){
            CalculateStart2Yellow.value = parseInt((parseFloat(CalculateStar.value)%1)*100)
            CalculateStart2White.value = 100 - parseInt((parseFloat(CalculateStar.value)%1)*100)
        }
    }
    if(parseInt(CalculateStar.value) == 2){
        CalculateStart1Yellow.value = 100
        CalculateStart1White.value = 0
        CalculateStart2Yellow.value = 100
        CalculateStart2White.value = 0
        if(parseInt((parseFloat(CalculateStar.value)%2)*100) > 0){
            CalculateStart3Yellow.value = parseInt((parseFloat(CalculateStar.value)%2)*100)
            CalculateStart3White.value = 100 - parseInt((parseFloat(CalculateStar.value)%2)*100)
        }
    }
    if(parseInt(CalculateStar.value) == 3){
        CalculateStart1Yellow.value = 100
        CalculateStart1White.value = 0
        CalculateStart2Yellow.value = 100
        CalculateStart2White.value = 0
        CalculateStart3Yellow.value = 100
        CalculateStart3White.value = 0
        if(parseInt((parseFloat(CalculateStar.value)%3)*100) > 0){
            CalculateStart4Yellow.value = parseInt((parseFloat(CalculateStar.value)%3)*100)
            CalculateStart4White.value = 100 - parseInt((parseFloat(CalculateStar.value)%3)*100)
        }
    }
    if(parseInt(CalculateStar.value) == 4){
        CalculateStart1Yellow.value = 100
        CalculateStart1White.value = 0
        CalculateStart2Yellow.value = 100
        CalculateStart2White.value = 0
        CalculateStart3Yellow.value = 100
        CalculateStart3White.value = 0
        CalculateStart4Yellow.value = 100
        CalculateStart4White.value = 0
        if(parseInt((parseFloat(CalculateStar.value)%4)*100) > 0){
            CalculateStart5Yellow.value = parseInt((parseFloat(CalculateStar.value)%4)*100)
            CalculateStart5White.value = 100 - parseInt((parseFloat(CalculateStar.value)%4)*100)
        }
    }
    if(parseInt(CalculateStar.value) == 5){
        CalculateStart1Yellow.value = 100
        CalculateStart1White.value = 0
        CalculateStart2Yellow.value = 100
        CalculateStart2White.value = 0
        CalculateStart3Yellow.value = 100
        CalculateStart3White.value = 0
        CalculateStart4Yellow.value = 100
        CalculateStart4White.value = 0
        CalculateStart5Yellow.value = 100
        CalculateStart5White.value = 0
    }
}
let StartActiveone = ref(false)
let StartActivetwo = ref(false)
let StartActivethree = ref(false)
let StartActivefour = ref(false)
let StartActivefive = ref(false)
const CountActiveStar = async(text)=>{
    StartActiveone.value = false
    StartActivetwo.value = false
    StartActivethree.value = false
    StartActivefour.value = false
    StartActivefive.value = false
    if(text == 'one'){
        StartActiveone.value = true
        form.currentRating = 1
    }
    if(text == 'two'){
        StartActiveone.value = true
        StartActivetwo.value = true
        form.currentRating = 2
    }
    if(text == 'three'){
        StartActiveone.value = true
        StartActivetwo.value = true
        StartActivethree.value = true
        form.currentRating = 3
    }
    if(text == 'four'){
        StartActiveone.value = true
        StartActivetwo.value = true
        StartActivethree.value = true
        StartActivefour.value = true
        form.currentRating = 4
    }
    if(text == 'five'){
        StartActiveone.value = true
        StartActivetwo.value = true
        StartActivethree.value = true
        StartActivefour.value = true
        StartActivefive.value = true
        form.currentRating = 5
    }
}
let selectedFiles = ref(null)
let SelectedImages = ref([])
const onFileChange = async(event)=>{
    selectedFiles.value = event.target.files;
      for (let i = 0; i < selectedFiles.value.length; i++) {
        let file = event.target.files[i];
        let reader = new FileReader();
        let image = ref()
        reader.onload = (e)=>{
            let NewUpdate = {
                'image':e.target.result,
            }
            axios.post(setting.value.frontend_img_url+'/api/upload-review-all-images',NewUpdate).then(response =>{
                let updateImage = {
                    'image':response.data.data.name,
                    'id':response.data.data.id,
                }
                SelectedImages.value.push(updateImage)
                if(selectedFiles.value.length == i+1){
                    // loader.value = false
                }
            })
        }
        reader.readAsDataURL(file);
      }
      
}
const DeleteMedia = async(id)=>{
    if (confirm('Are you sure?')) {
        // loader.value = true
        await axios.post(setting.value.frontend_img_url+'/api/delete-review-media-image/'+id).then(response =>{            
            // loader.value = false
            SelectedImages.value.map((category, index,  farr)=>{
                if(category.id == id){
                    farr.splice(index, 1)
                }
            })
        })
    }
}
let ReviewOnOff = ref(false)

const myReviewDiv = ref()
const WriteAreview = async()=>{
    if(ReviewOnOff.value == true){
        ReviewOnOff.value = false
        return
    }
    ReviewOnOff.value = true
    ReviewSuccess.value = false
}
let RatingError = ref(false)
const SubmitReviewData = async()=>{
    form.product_id = props.product.id
    RatingError.value = false
    if(!form.currentRating){
        RatingError.value = true
        return
    }
    await axios.post(setting.value.frontend_img_url+'/api/add-product-review',form).then(response =>{            
        ReviewSuccess.value = true
        ReviewOnOff.value = false
    })
}
let ReviewSuccess = ref(false)
let CurrentImageUrlIndex = ref()
let currentImageUrl = ref('')
let CurrentImageIndex = ref([])
const CurrentImageUrlGet = async(imageName, index, imageIndex)=>{
    CurrentImageUrlIndex.value = index
    currentImageUrl.value = setting.value.frontend_img_url+'/storage/image/review/'+imageName
    CurrentImageIndex.value = imageIndex
}
const breakpoints = {
  0: {
    slidesPerView: 3,
  },
  500: {
    slidesPerView: 6,
  },
  768: {
    slidesPerView: 8,
  },
  1024: {
    slidesPerView: 10,
  }
}
</script>
<template>
    <div class="review-calculate-section">
        <div class="row">
                <div class="col-md-4">
                    <div class="review-count">
                        <div class="review-calculation">
                            <div class="star-line">
                                <span :style="{'background':'linear-gradient(90deg, #F89404 '+CalculateStart1Yellow+'%, #d1d5db '+CalculateStart1White+'%)','-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent'}">★</span>
                                <span :style="{'background':'linear-gradient(90deg, #F89404 '+CalculateStart2Yellow+'%, #d1d5db '+CalculateStart2White+'%)','-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent'}">★</span>
                                <span :style="{'background':'linear-gradient(90deg, #F89404 '+CalculateStart3Yellow+'%, #d1d5db '+CalculateStart3White+'%)','-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent'}">★</span>
                                <span :style="{'background':'linear-gradient(90deg, #F89404 '+CalculateStart4Yellow+'%, #d1d5db '+CalculateStart4White+'%)','-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent'}">★</span>
                                <span :style="{'background':'linear-gradient(90deg, #F89404 '+CalculateStart5Yellow+'%, #d1d5db '+CalculateStart5White+'%)','-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent'}">★</span>
                                <div class="text">{{CalculateStar}} out of 5</div>
                            </div>
                            <div class="count-of-reviews text-center">Based on {{ TotalReview }} Reviews</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <h5 class="text-center" style="color:#b0b0b0;font-weight:400;font-size:25px">Customer Reviews</h5>
                    <div class="customer-review">
                        <ul>
                            <li>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <div class="bar" :style="{ '--star-width': ((FiveStar / TotalReview) * 100).toFixed(2) + '%' }"></div> <div class="star-count">{{parseInt(FiveStar)}}</div>
                            </li>
                            <li>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="no-star">★</span>
                                <div class="bar" :style="{ '--star-width': ((FourStar / TotalReview) * 100).toFixed(2) + '%' }"></div> <div class="star-count">{{parseInt(FourStar)}}</div>
                            </li>
                            <li>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="no-star">★</span>
                                <span class="no-star">★</span>
                                <div class="bar" :style="{ '--star-width': ((ThreeStar / TotalReview) * 100).toFixed(2) + '%' }"></div> <div class="star-count">{{parseInt(ThreeStar)}}</div>
                            </li>
                            <li>
                                <span class="full-star">★</span>
                                <span class="full-star">★</span>
                                <span class="no-star">★</span>
                                <span class="no-star">★</span>
                                <span class="no-star">★</span>
                                <div class="bar" :style="{ '--star-width': ((TwoStar / TotalReview) * 100).toFixed(2) + '%' }"></div> <div class="star-count">{{parseInt(TwoStar)}}</div>
                            </li>
                            <li>
                                <span class="full-star">★</span>
                                <span class="no-star">★</span>
                                <span class="no-star">★</span>
                                <span class="no-star">★</span>
                                <span class="no-star">★</span>
                                <div class="bar" :style="{ '--star-width': ((OneStar / TotalReview) * 100).toFixed(2) + '%' }"></div> <div class="star-count">{{parseInt(OneStar)}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="write-review">
                        <div class="write" @click="WriteAreview">Write a review</div>
                    </div>
                </div>
            </div>
    </div>
    <div class="add-review text-center" style="border-top:1px solid rgb(209, 209, 209);padding-top:20px;" v-if="ReviewOnOff == true  && ReviewSuccess == false">
        <form  @submit.prevent="SubmitReviewData" style="width:50%;">
            <h4 style="color:#677279">Write a review</h4>
            <h6 style="color:#677279;margin-bottom:0">Rating</h6>
            <div class="star">
                <span class="full-star" @mouseover="CountActiveStar('one')" :class="{active:StartActiveone== true}">★</span>
                <span class="full-star" @mouseover="CountActiveStar('two')" :class="{active:StartActivetwo== true}">★</span>
                <span class="full-star" @mouseover="CountActiveStar('three')" :class="{active:StartActivethree== true}">★</span>
                <span class="full-star" @mouseover="CountActiveStar('four')" :class="{active:StartActivefour== true}">★</span>
                <span class="full-star" @mouseover="CountActiveStar('five')" :class="{active:StartActivefive== true}">★</span>
            </div>
            <div class="rating-error" v-if="RatingError" style="margin-top:-10px;border:1px solid #ed2024;margin-bottom:10px;"><span style="padding:2px 5px;font-size:12px;border-radius:50%;background:#F89404;color:#fff">!</span> This field is required</div>
            <div class="add-review-input">
                <div class="form-group">
                    <label for="review-title">Review Title</label>
                    <input required id="review-title" v-model="form.title" type="text" class="form-control" placeholder="Give your review a title">
                </div>
                <div class="form-group">
                    <label for="review-content">Review Content</label>
                    <textarea required id="review-content" v-model="form.content" placeholder="Start writing here..." class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-3" v-for="(image, index) in SelectedImages">
                            <div class="form-group product-image-var">
                                <div class="product-image-delete cursor-pointer" style="position:absolute;right:15px;top:5px;padding:2px;border-radius:50%;width:20px;height:20px;display:flex;justify-content: center;align-items: center;color:#677279;background:#fff;" @click="DeleteMedia(image.id)"><svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="17"
                                    height="17"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="black"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    >
                                    <!-- Trash Lid -->
                                    <polyline points="3 6 5 6 21 6" />
                                    
                                    <!-- Trash Body -->
                                    <path d="M19 6l-1 14H6L5 6" />
                                    
                                    <!-- Trash Handle -->
                                    <path d="M10 11v6M14 11v6" />
                                    
                                    <!-- Top Handle -->
                                    <path d="M9 6V4h6v2" />
                                    </svg>
                                    </div>
                                <img id="image2" v-lazy="setting.frontend_img_url+'/storage/image/review/'+image.image" style="width: 150px;height:150px;">
                            </div>
                        </div>
                        <div class="col-md-12 mt-1">
                            <div class="form-group add-media-sec">
                                <label for="addMediaIcon">
                                    <h6 style="color:#677279">Picture (Optional)</h6>
                                    <span style="border:1px solid rgb(209, 209, 209);padding:30px;border-radius:6px;cursor:pointer">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="64"
                                            height="64"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="black"
                                            stroke-width="2.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            >
                                            <!-- Thick Upload Arrow -->
                                            <path d="M12 17V4" />
                                            <polyline points="6 10 12 4 18 10" />

                                            <!-- Rounded Tray (Bottom Only) -->
                                            <path d="M3 17v3a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-3" />
                                            </svg>
                                    </span>
                                </label>
                                <input class="d-none" @change="onFileChange" id="addMediaIcon" accept=".jpg,.jpeg,.png" type="file" multiple>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="display-name">Display Name</label>
                    <input required id="display-name" v-model="form.display_name" type="text" class="form-control" placeholder="Display Name">
                </div>
                <div class="form-group">
                    <label for="email">Email(Optional)</label>
                    <input id="email" v-model="form.email" type="email" class="form-control" placeholder="Your Email Address">
                </div>
            </div>
            <div class="btn" @click="WriteAreview" style="padding:8px 20px; border-radius:5px;border:2px solid #26a9E0;color:#000;margin-right:5px;cursor:pointer;">Cancel Review</div>
            <input type="submit" value="Submit Review">
        </form>
    </div>
    <div v-if="ReviewSuccess == true && ReviewOnOff == false" class="success-review text-center" style="border-top:1px solid rgb(209, 209, 209);padding-top:20px;" >
        <div class="success-message">
            <div class="icon"><svg width="120" height="100" viewBox="0 0 188 116" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="97" cy="54" r="54" fill="#F89404"/>
                <circle cx="97" cy="54" r="43" fill="#F89404"/>
                <path d="M90.7362 71.0989L75 55.3627L78.934 51.4287L90.7362 63.2308L116.066 37.9011L120 41.8351L90.7362 71.0989Z" fill="white"/>
                <circle cx="156" cy="108" r="5.1" stroke="#F89404" stroke-width="1.8"/>
                <circle cx="56" cy="112" r="4" fill="#F89404"/>
                <circle cx="71" cy="7" r="6.25" stroke="#F89404" stroke-width="1.5"/>
                <path d="M182.286 37.7143H178.714C178.512 37.7143 178.342 37.6457 178.206 37.5086C178.069 37.3714 178 37.2019 178 37C178 36.7981 178.068 36.6286 178.206 36.4914C178.343 36.3543 178.513 36.2857 178.714 36.2857H182.286V32.7143C182.286 32.5119 182.354 32.3424 182.491 32.2057C182.629 32.0691 182.798 32.0005 183 32C183.202 31.9995 183.372 32.0681 183.509 32.2057C183.647 32.3433 183.715 32.5129 183.714 32.7143V36.2857H187.286C187.488 36.2857 187.658 36.3543 187.795 36.4914C187.932 36.6286 188 36.7981 188 37C188 37.2019 187.931 37.3717 187.794 37.5093C187.658 37.6469 187.488 37.7152 187.286 37.7143H183.714V41.2857C183.714 41.4881 183.646 41.6579 183.509 41.795C183.371 41.9321 183.202 42.0005 183 42C182.798 41.9995 182.629 41.931 182.491 41.7943C182.354 41.6576 182.286 41.4881 182.286 41.2857V37.7143Z" fill="#F89404"/>
                <path d="M9.74973 70.0778L3.92953 71.8062C3.59971 71.9042 3.29026 71.8745 3.00117 71.7171C2.71208 71.5598 2.51829 71.3167 2.4198 70.9879C2.32131 70.6591 2.35102 70.3496 2.50892 70.0595C2.66682 69.7694 2.9099 69.5756 3.23816 69.4782L9.05836 67.7497L7.32993 61.9295C7.23199 61.5997 7.26169 61.2903 7.41905 61.0012C7.5764 60.7121 7.81948 60.5183 8.14829 60.4198C8.47709 60.3213 8.78693 60.3509 9.07781 60.5086C9.36868 60.6662 9.56208 60.9094 9.65801 61.2382L11.3864 67.0584L17.2066 65.3299C17.5365 65.232 17.8463 65.2616 18.1362 65.4187C18.426 65.5758 18.6194 65.819 18.7164 66.1483C18.8133 66.4776 18.7837 66.7874 18.6276 67.0778C18.4715 67.3682 18.2283 67.5616 17.898 67.658L12.0778 69.3864L13.8062 75.2066C13.9042 75.5365 13.8746 75.8463 13.7175 76.1362C13.5603 76.426 13.3171 76.6194 12.9879 76.7164C12.6586 76.8133 12.3492 76.7836 12.0595 76.6273C11.7699 76.4709 11.5761 76.2278 11.4782 75.898L9.74973 70.0778Z" fill="#F89404"/>
                </svg>
            </div>
            <div class="review-submit" style="color:#F89404;font-size:25px;font-weight:500">Review Submitted!</div>
            <div class="thank-you-messag" style="color:#F89404;font-size:14px;font-weight:400">Thank you! Please refresh the page in a few moments to see your review.<br> You can remove or edit your review by logging into Judge.me</div>
        </div>
    </div>
    <div class="all-review-get" style="border-top:1px solid rgb(209, 209, 209);padding-top:20px;">
        <ul>
            <li v-for="(k, index) in totalStar" style="border-bottom:1px solid #ccc;position:relative;">
                <div class="review-date" style="position:absolute;right:0;color:#677279">{{k.created_at}}</div>
                <div class="star-rating">
                    <span class="full-star" v-for="(kl, index) in parseInt(k.currentRating)">★</span>
                    <span class="no-star" v-for="(kl, index) in parseInt(5 - k.currentRating)">★</span>
                </div>
                <div class="name-profile d-flex" style="align-items: center;">
                    <div class="profile-icon">
                        <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="30"
                        height="30"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#F89404"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        >
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                        <circle cx="12" cy="7" r="4" />
                        </svg>
                    </div>
                    <div class="name ml-2" style="font-size:16px;color:#F89404;font-weight:500">{{k.display_name}}</div>
                </div>
                <div class="review-title" style="color:#677279; font-size:16px;font-weight:500">{{k.title}}</div>
                <div class="review-title" style="color:#677279; font-size:15px;font-weight:300">{{k.content}}</div>
                <div class="review-image mb-1" :class="{active:CurrentImageUrlIndex == index}">
                    <Swiper class="mt-1" :slides-per-view="10" :breakpoints="breakpoints" :loop="true" :autoplay='{
                        "delay": 3000,
                        "disableOnInteraction": false,
                        "pauseOnMouseEnter": true,
                        }'>
                        <SwiperSlide :class="{active:CurrentImageIndex == imageIndex && CurrentImageUrlIndex == index}" v-for="(img, imageIndex) in totalImages[index]">
                            <img  @click="CurrentImageUrlGet(img.name, index,imageIndex)"  style="height:100px;cursor:pointer" :src="setting.frontend_img_url+'/storage/image/review/'+img.name">
                        </SwiperSlide>
                    </Swiper>
                    <img style="width:50%; margin-top:5px;" :src="currentImageUrl" class="currentImage" :class="{active:CurrentImageUrlIndex == index}">
                </div>
            </li>
        </ul>
    </div>
</template>

<style scoped>
.swiper-slide{
    padding:5px!important
}
.review-image.active .swiper-slide.active{
    position:relative;
    /* width:500px!important; */
    border:2px solid v-bind(setting.color);
}
.review-all-image{
    position:relative;
}
.swiper-slide.active:before{
    content: '';
    position: absolute;
    bottom: -12px;
    left: calc(50% - 5px);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid v-bind(setting.color);
}
.currentImage{
    display: none;
    transition: 0.4s;
}
.currentImage.active{
    display:block;
    transition: 0.4s;
}
.btn:hover{
    background-color:#F1F9FE!important;
}
.product-image-delete:hover{
    background:#F89404!important;
}
input:focus, textarea:focus{
    border:1px solid #F89404!important;
}
.add-review{
    display:flex;
    justify-content: center;
}
.add-review .full-star{
    text-align:center;
    cursor:pointer;
    font-size:35px!important;
color: white;
  text-shadow: 
    0 0 0 #F89404, 
    1px 1px 0 #F89404,
    -1px -1px 0 #F89404,
    1px -1px 0 #F89404,
    -1px 1px 0 #F89404;
}
.add-review .full-star.active{
    color:#F89404;
    text-shadow:none
}
.write-review{
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
    height:100%;
}
.write-review .write{
    padding: 5px 40px;
    background:#F89404;
    color:#fff;
    font-weight:400;
    font-size:15px;
    cursor:pointer;
}
.star-count{
    font-weight:500;
    width:20px;
}
.count-of-reviews{
    font-weight:400;
    font-size:14px;
}
.star-line{
    display:flex; justify-content: center;
    align-items: center;
}
.star-line span{
    font-size:24px;
}
.star-line .text{
    margin-left:10px;
    font-size:14px;
    font-weight:500
}
.customer-review{
    display: flex;
    justify-content: center;
    align-items: center;
}
.full-star{
    font-size: 24px;
    color: #F89404;
}
.no-star{
   font-size: 24px;
  color: white;
  text-shadow: 
    0 0 0 #F89404, 
    1px 1px 0 #F89404,
    -1px -1px 0 #F89404,
    1px -1px 0 #F89404,
    -1px 1px 0 #F89404;
}
.customer-review .bar{
    width:100px;
    background:#d1d5db;
    height:20px;
    margin-right:20px;
    margin-left:20px;
    position:relative;
}
.customer-review .bar:before{
    content:'';
    position:absolute;
    height:100%;
    left:0;
    top:0;
    width:var(--star-width);;
    background:#F89404;
}
.customer-review ul li{
    display:flex;
    justify-content: center;
    align-items: center;
}
.review-count{
    display:flex;
    justify-content: center;
    align-items: center;
    height:100%
}
.review-all-image{
    width:10%;
    padding-right:5px;
    padding-top:5px;
}

@media screen and (max-width: 992px) {
    form{
        width:100%!important
    }
    .review-all-image{
        width:16.67%!important;
    }
}
@media screen and (max-width: 576px) {
    form{
        width:100%!important
    }
    .review-all-image{
        width:25%!important;
    }
    .currentImage{
        width:100%!important
    }
}
</style>