@extends('layouts.store.master')
@section('meta_tags')
<meta id="product_json" content="{{ json_encode($product) }}">
<style>
.testarre {
    width: 350px;
    height: 400px;
}

@media only screen and (max-width: 600px) {
    .testarre {
        width: 125px;
        height: 125px;
    }

    #btn-add-pro {
        margin-left: 55px;
    }
}

.cart-view-product-image {
    max-width: 100px;
}

#added_product_modal_footer {
    margin: 0 auto;
    line-height: 15px;
}

#white_button {
    color: #0077c8;
    border: 1px solid #0077c8;
}

.ratingBar {
    margin-top: 20px;
    height: 8px;
    border-radius: 8px;

}

#ratingBar1 {
    background-color: #0077c8;
}

#ratingBar2 {
    background-color: #0077c8;
}

#ratingBar3 {
    background-color: #0077c8;
}

#ratingBar4 {
    background-color: #0077c8;
}

#ratingBar5 {
    background-color: #0077c8;
}

.gallery {
    width: 507px;
    margin: 0 auto;
    position: relative;
}

.pics {
    width: 542px;
    margin-top: 70px;
    padding: 10px;
    background: white;
    border-radius: 2px;
    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.05);
}

.thumbs {
    float: left;
    width: 122px;
    padding-right: 10px;
}

.preview {
    width: 112px;
    height: 112px;
    overflow: hidden;
    margin-bottom: 10px;
}

.preview:last-child {
    margin-bottom: 0;
}

.full {
    width: 400px;
    font-size: 12px;
    float: left;
}

.full,
.full img {
    height: 600px;
}

.previews a:hover,
.previews a.selected {}

.full img:hover {
    cursor: pointer;
}

.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

#img-back2 {
    display: block;
    height: 800px;
    width: 800px;
}

.slick-slide {
    margin: 0 5px;
}
.slick-list {
    margin: 0 -5px;
}
</style>
<link rel="stylesheet" href="{{asset('/css/store/add_cart_product_modal.css')}}">
@endsection
@section('page','Inicio')
@section('classes_body','no-mg no-pd')
@section('body')
    @include('layouts.store.product')
    <h5 class=" wow section-title animate__animated animate__fadeInUp">También te podría interesar</h5>
    @include('layouts.store.related_products_one')
    @include('layouts.store.newsletter')
    <h5 class="wow section-title animate__animated animate__fadeInUp">Conoce nuestras marcas</h5>
    @include('layouts.store.brand_carousel')
    @include('layouts.store.modal-product-shop')
{{--     <div id="cart_product_added_modal" class="modal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="modal-title blue-text">Producto añadido correctamente a tu carrito</p>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="product_added_modal_content" class="row mt-3 mx-auto">
                        <div class="col-md-2 col-sm-12">
                            <img id="product_added_modal_content_image" src="{{asset('images/product/product-default.png')}}" alt="Imagen" class="cart-view-product-image">
                        </div>
                        <div class="col-md-5 col-sm-12">
                            <h6 id="product_added_modal_content_name" class="h7"></h6>
                            <div style="font-size: 0.8em">
                                Cant: <span id="product_added_modal_content_quantity"></span>
                                <p id="product_added_modal_content_unit_price" class="h7 blue-text"></p>
                            </div>
                        </div>
                        <div class="col-md-5 col-sm-12">
                            <div style="font-size: 0.8em">
                                <div class="blue-text pb-3">
                                    Hay <span id="product_added_modal_cart_quantities" class="blue-text"></span> productos en su carrito
                                </div>
                                <div class="blue-text pb-3">Total de tu carrito:
                                    <span id="product_added_modal_cart_total" class="blue-text"></span>
                                </div>
                            </div>
                            <a href="{{ route('store') }}" class="btn btn-sm btn-primary btn-white w-100 d-block my-2" style="background:#0077C8">Seguir comprando</a>
                            <a href="{{ route('store.checkout.information') }}" id="white_button" class="btn btn-sm btn-white w-100 d-block">Ir al carrito</a>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-danger text-white py-1" style="border-radius: 0 0 9px 9px">
                    <p id="added_product_modal_footer">Te hace falta $500.00 mxn para tener envío gratis</p>
                </div>
            </div>
        </div>
    </div> --}}
    <div id="modal-rated" class="modal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="background: white;border: white;">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modal-a">
                    <div id="product_added_modal_content" class="row mt-3 mx-auto">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6 col-xs-12">
                                    <div style="font-family: Helvetica-Nueue-Bold;">
                                        <strong>Opiniones sobre el producto</strong>
                                    </div>
                                    <div style="font-family: Helvetica-Nueue-Bold; margin-top: 45px;">
                                        <label id="rating"></label>
                                    </div>
                                    <div class="star-meter color-blue" style="margin-top: 15px;" id="star-details">
                                    </div>
                                    <div style="margin-top: 15px;margin-bottom:35px">
                                        <label id="lb-num-op"></label>
                                    </div>
                                    <div class="row" >
                                        <div class="col-md-3" style="font-size: 12px; margin-top: 15px; ">
                                            5 Estrellas
                                        </div>
                                        <div style="width: 70%">
                                            <div id="ratingBar5" class="ratingBar" style="margin-left: 15px; width: 0%; background-color: white;"></div>
                                        </div>
                                    </div>
                                    <div class="row" >
                                        <div class="col-md-3" style="font-size: 12px; margin-top: 15px;">
                                            4 Estrellas
                                        </div>
                                        <div style="width: 70%">
                                            <div id="ratingBar4" class="ratingBar" style="margin-left: 15px; width: 0%; background-color: white;"></div>
                                        </div>
                                    </div>
                                    <div class="row" >
                                        <div class="col-md-3" style="font-size: 12px; margin-top: 15px;">
                                            3 Estrellas
                                        </div>
                                        <div style="width: 70%">
                                            <div id="ratingBar3" class="ratingBar" style="margin-left: 15px; width: 0%; background-color: white;"></div>
                                        </div>
                                    </div>

                                    <div class="row" >
                                        <div class="col-md-3" style="font-size: 12px; ;margin-top: 15px;">
                                            2 Estrellas
                                        </div>
                                        <div style="width: 70%">
                                            <div id="ratingBar2" class="ratingBar" style="margin-left: 15px; width: 0%; background-color: white;"></div>
                                        </div>
                                    </div>
                                    <div class="row" >
                                        <div class="col-md-3" style="font-size: 12px; ;margin-top: 15px;">
                                            1 Estrellas
                                        </div>
                                        <div style="width: 70%">
                                            <div id="ratingBar1" class="ratingBar" style="margin-left: 15px; width: 0%; background-color: white;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <div class="row" style="margin-top:25px">
                                        <div class="col-md-6 col-xs-12">
                                            Ordenar por:
                                        </div>
                                        <div class="col-md-6 col-xs-12">
                                            <select class="form-select" aria-label="Default select example" id="sort-rating" onchange="sortRating()">
                                                <option selected value="recent">Más reciente</option>
                                                <option value="old">Más antiguo</option>
                                                <option value="higher">Puntuación alta</option>
                                                <option value="lower">Puntuación baja</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div style="background:#0077C8;height: 3px;margin-top: 15px;margin-bottom: 15px;">
                                    </div>
                                    <div style="overflow-y: scroll;height: 500px;" id="div-review">

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

            </div>
        </div>
    </div>
    @push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous"></script>
        <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="{{ asset('js/store/product.js') }}"></script>
        @include('store.medicadepot.scripts.cartjs')
        <link href="https://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/anythingzoomer.css') }}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="{{ asset('js/jquery.anythingzoomer.js') }}"></script>
        @include('layouts.store.scripts.menu-footer');
        <script type="text/javascript" src="{{asset('/js/slick.min.js')}}"></script>
        <script src="{{ asset('assets/template1/jquery-zoom/jquery.zoom.min.js') }}"></script>
        <script>
    	$(function() {

            let productId = '{{ $product->Id_Prod1 }}';
            let decodeProductId = productId.replace('&amp;', '&');
            //decodeProductId = encodeURIComponent(decodeProductId);

    		$(".zoom").anythingZoomer(
                {
                  // content areas
                  smallArea   : 'small',    // class of small content area; the element with this class name must be inside of the wrapper
                  largeArea   : 'large',    // class of large content area; this class must exist inside of the wrapper. When the clone option is true, it will add this automatically
                  clone       : false,      // Make a clone of the small content area, use css to modify the style

                  // appearance
                  overlay     : false,      // set to true to apply overlay class "az-overlay"; false to not apply it
                  speed       : 100,        // fade animation speed (in milliseconds)
                  edge        : 30,         // How far outside the wrapped edges the mouse can go; previously called "expansionSize"
                  offsetX     : 5,          // adjust the horizontal position of the large content inside the zoom window as desired
                  offsetY     : 0,          // adjust the vertical position of the large content inside the zoom window as desired

                  // functionality
                  switchEvent : 'dblclick', // event that allows toggling between small and large elements - default is double click

                  // edit mode
                  edit        : false,      // add x,y coordinates into zoom window to make it easier to find coordinates

                  // callbacks
                  initialzied : function(event, zoomer){}, // AnythingZoomer done initializing
                  zoom        : function(event, zoomer){}, // zoom window visible
                  unzoom      : function(event, zoomer){}  // zoom window hidden

                }
            );

    	});

        $('#img-zoom').zoom();

        /**
         * show modal
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 17/05/2022
         */
        function clickStars(){
            $('#modal-rated').modal('show');
        }
        var ratings = [1, 1, 1, 1, 1 , 0.8, 0.8, 0.8,0.8, 0.6, 0.6, 0.6, 0.4];

        /**
         * initialzied
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 17/05/2022
         * @updeted luis Peña <luis.pena@nuvemtecnologia.mx> 28/07/2021
         */
        $(document).ready(function() {
            initializeStatistics();
            loadStar();
        });


        /**
         * sed ratings
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 17/05/2022
         */
        function initializeStatistics() {
            var ratingBarsLength = $(".ratingBar").length;

            var ratingBars = {};

            for (var i = 1; i <= ratingBarsLength; i++) {
              ratingBars[i] = [];
            }

            setRatingBars(ratingBars, ratingBarsLength);
        }

        /**
         * split ratings
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 17/05/2022
         * @param integer ratingBars
         * @param integer ratingBarsCount
         */
        function splitRatings(ratingBars, ratingBarsCount) {
            ratings.forEach(function(rating) {
                var containerIndex = Math.round(ratingBarsCount * rating);
                ratingBars[containerIndex].push(rating);
            });
        }

        /**
         * set ratings
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 17/05/2021
         * @updeted luis Peña <luis.pena@nuvemtecnologia.mx> 28/07/2021
         * @updated 2021-09-27 Noe Reyes <noe.reyes@nuvem.mx>
         * @param integer ratingBars
         * @param integer ratingBarsCount
         */
        function setRatingBars(ratingBars, ratingBarsCount) {
            $.ajax({
                type: "GET",
                headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                url: '{{ config('store.api_medshipper_url') . "products-one-rating/" }}' + decodeProductId,
                data: {
                    filter: null
                },
                success: function (res) {
                    var totalLength = 0;
                    res.reviews.forEach((item, i) => {
                        totalLength += item.num_of_times;
                    });
                    res.reviews.forEach((item, i) => {
                        var currentBar = $("#ratingBar" + item.rating);
                        var barWidth = (item.num_of_times / totalLength) * 100;
                        currentBar.css("width",barWidth + "%");
                        currentBar.css("background-color", "#0077c8");
                    });

                }
            });

        }

        /**
         * change img
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 20/05/2021
         * @updated 11/10/2022 Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
         * @param string imgString
         */
        function changeIMG(imgString){

            var img1 = document.getElementById("img-back1");
            var img2 = document.getElementById("img-back2");
            img1.src = imgString;
            // img2.src = imgString;
            $('#img-zoom').zoom({ url: imgString });
        }


        /**
         * review
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 17/05/2022
         * @param integer selectStar
         */
        function selectStar(fullStar, idDiv){
            var maxStar = 5;
            var countStar = 0;
            for (var i = 1; i <=  parseInt(fullStar); i++) {
                countStar ++;
                $("#"+idDiv).append(`<i class="fas fa-star" style="margin-right: 5px; color: #0077c8;" ></i>`);
            }

            if (countStar < maxStar) {
                for (var i = countStar; i < maxStar; i++) {
                    countStar ++;
                    $("#"+idDiv).append(` <i class="far fa-star" style="margin-right: 5px; color: #0077c8;" ></i>`);
                }
            }



        }

        /**
         * load star
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 28/07/2021
         * @edited luis Peña <luis.pena@nuvem.mx> 02/08/2021
         * @updated 2021-09-27 Noe Reyes <noe.reyes@nuvem.mx>
         * @updated 28/03/2022 Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
         * @param string input
         */
        function loadStar(input){
            $.ajax({
                type: "GET",
                headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                url: '{{ config('store.api_medshipper_url') . "products-rating/" }}' + decodeProductId,
                data: {
                    filter: null
                },
                success: function (res) {
                    var maxStar = 5;
                    var countStar = 0;
                    if (res.average !=null) {
                        var average = res.average.toString();
                        var splitNumber = average.split(".");
                        for (var i = 1; i <=  parseInt(splitNumber[0]); i++) {
                            countStar ++;
                            $("#star-review").append(`<i class="fas fa-star" style="margin-right: 5px;" ></i>`);
                            $("#star-details").append(`<i class="fas fa-star" style="margin-right: 5px;" ></i>`);
                        }
                        if (parseInt(splitNumber[1]) > 0) {
                            countStar ++;
                            $("#star-review").append(` <i class="fas fa-star-half-alt" style="margin-right: 5px;" ></i>`);
                            $("#star-details").append(` <i class="fas fa-star-half-alt" style="margin-right: 5px;" ></i>`);
                        }
                        if (countStar < maxStar) {
                            for (var i = countStar; i < maxStar; i++) {
                                countStar ++;
                                $("#star-review").append(` <i class="far fa-star" style="margin-right: 5px;" ></i>`);
                                $("#star-details").append(` <i class="far fa-star" style="margin-right: 5px;" ></i>`);
                            }
                        }
                        $("#rating").html( res.average);
                        $("#rating").html(res.average);
                        $("#lb-num-op").html('Promedio entre '+ res.reviews.length+' opiniones');

                        for (var i = 0; i <  res.reviews.length; i++) {
                            let idDivStar = 'card-view' + i;
                            var averagePersonal = res.reviews[i].rating;
                            $("#div-review").append(`
                                <div class="" id="card-view">
                                    <div id="${idDivStar}">
                                    </div>
                                    <div>
                                        <p>
                                            ${res.reviews[i].comment}
                                        </p>

                                    </div>
                                </div>`
                            );
                            selectStar(averagePersonal,idDivStar);
                        }
                    }else {
                        for (var i = countStar; i < maxStar; i++) {
                            $("#star-review").append(` <i class="far fa-star" style="margin-right: 5px;" ></i>`);
                            $("#star-details").append(` <i class="far fa-star" style="margin-right: 5px;" ></i>`);
                        }
                    }
                }
            });
        }

        /**
         * Sort rating
         * @author luis Peña <luis.pena@nuvemtecnologia.mx> 28/07/2021
         * @updated 2021-09-27 Noe Reyes <noe.reyes@nuvem.mx>
         * @updated 28/03/2022 Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
         * @param void
         */
        function sortRating(){
            var sort = $('#sort-rating').val();
            $.ajax({
                type: "GET",
                headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                url: '{{ config('store.api_medshipper_url') . "products-rating/" }}' + decodeProductId,
                data: {
                    filter: sort
                },
                success: function (res) {
                    var maxStar = 5;
                    var countStar = 0;
                    if (res.average !=null) {
                        $("#div-review").empty();
                        for (var i = 0; i <  res.reviews.length; i++) {
                            let idDivStar = 'card-view' + i;
                            var averagePersonal = res.reviews[i].rating;
                            $("#div-review").append(`
                                <div class="" id="card-view">
                                    <div id="${idDivStar}">
                                    </div>
                                    <div>
                                        <p>
                                            ${res.reviews[i].comment}
                                        </p>

                                    </div>
                                </div>`
                            );
                            selectStar(averagePersonal,idDivStar);
                        }
                    }
                }
            });
        }

        /**
         * It have to use jQuery to remove some classes and add some extra to make it responsive
         *
         * @author Benito Huerta <benito.huerta@nuvem.mx>
         * @return void
         */
        function setStyles() {

            $(function() {
                    let staticNavHeight = $('.static-menu ').height();
                    $('#breadcrum_styled').css({"margin-top": staticNavHeight - 15});
                    $('#product-details').css({"padding": "0"});
                });

            setInterval(function () {
                $('#div-img > div').map(function() {
                    if($(this).attr('class') == 'col-12 p-4') {
                        $(this).attr('class', 'col-4 p-4');
                    }
                });
            }, 50);

        }

        /**
         * It have to use jQuery to remove some classes and add some extra to make it responsive
         *
         * @author Benito Huerta <benito.huerta@nuvem.mx>
         * @return void
         */
        function unsetStyles() {
            $(function() {
                $('#product-details').css({"padding": "0rem 4rem 2rem"});
            });
        }
    	</script>
        @include('store.medicadepot.scripts.productsjs')
    @endpush
    @include('store.medicadepot.scripts.productjs');
@endsection