@extends('store.template2.partials.layout')

@section('title', 'Inicio')

@push('css')
    <style>
        .bullet-img {
            height: 320px;
            object-fit: cover;
        }
    </style>
@endpush

@section('content')
    <div class="row m-0" id="home-app">
        <div class="col-lg-12 p-0 m-0">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 pl-0 pr-0">
                        <section class="enterprising-slider slider row"></section>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 mb-5 mt-5 wow animate__animated animate__fadeInUp">
            <h3 class="heading-overlaying">Productos que te recomendamos</h3>
        </div>

        <div class="col-lg-12 mb-4 wow animate__animated animate__fadeInUp">
            <div class="row pl-5 pr-5">
                <div v-if="loadingRecommended" class="col-lg-12">
                    <p class="text-center">
                        <i class="fas fa-spinner icon-template"></i> Cargando...
                    </p>
                </div>
                <div class="col-lg-12" v-if="!loadingRecommended && recommended.length == 0">
                    <p class="text-center">Sin información para mostrar</p>
                </div>
                <div v-for="(item, recommendedIndex) in recommended" v-if="recommendedIndex < 4" class="col-lg-3 col-sm-12 mt-xs-4">
                    <div class="product-wrapper-home text-center">
                        <span v-if="item.oferta == 1 && item.tipo_descuento == 'M'" class="offer-button" v-text="'-' + item.Cantidad_descuento"></span>
                        <span v-if="item.oferta == 1 && item.tipo_descuento == 'P'" class="offer-button" v-text="'-' + Math.trunc(item.Cantidad_descuento) + '%'"></span>
                        <div v-if="item.has_promotion" style="text-align: center; padding-right: 75px"><span class="product-promotion">Promoción especial</span></div>
                        <div class="product-img">
                            <div class="card">
                                <div class="card-body" style="height: 280px;">
                                    <div class="row">
                                        <div class="col-12">
                                            <a :href="getUrl('/product/' + item.CLAVE_UNIFICADA)">
                                                <img :src="getProductImage(item.imagen)" class="img-fluid img-product" alt="Cover">
                                            </a>
                                            <input :id="item.CLAVE_UNIFICADA" :name="item.CLAVE_UNIFICADA" type="hidden" :value="item.PrePublico">
                                            <input :id="item.CLAVE_UNIFICADA + '-disc'" v-if="item.oferta == 1" :name="item.CLAVE_UNIFICADA + '-disc'" type="hidden" :value="item.PreSinpromocion">
                                        </div>
                                        <div class="col-12 mt-2 mb-n3">
                                            <p v-text="item.DESCRIPCIÓN_CORTA" class="black-color"></p>
                                            <p class="bolder mt-n3 product-price-color" v-text="formatMoney(item.PrePublico)"></p>
                                            <p class="discount-price mt-n3" v-if="item.oferta == 1" v-text="formatMoney(item.PreSinpromocion)"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-action">
                                <div class="product-action-style">
                                    <a href="#!" v-on:click="window.addToCart(item.CLAVE_UNIFICADA)" class="btn color-white icon-template btn-product-action">
                                        <i :id="'loader-' + item.CLAVE_UNIFICADA" class="fa fa-shopping-cart lol"></i>
                                    </a>
                                    <a :href="getUrl('/product/' + item.CLAVE_UNIFICADA)" class="btn color-white icon-template btn-product-action">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                    <a href="#!" v-on:click="window.addFavorite(item.Id_Prod1, item.CLAVE_UNIFICADA)" class="btn color-white icon-template btn-product-action">
                                        <i class="far fa-heart" :data-favorite="item.CLAVE_UNIFICADA"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 mt-5 wow animate__animated animate__fadeInUp">
            <div class="row">
                <div v-if="loadingBullets" class="col-lg-12">
                    <p class="text-center">
                        <i class="fas fa-spinner icon-template"></i> Cargando...
                    </p>
                </div>
                <div class="col-lg-12" v-if="!loadingBullets && bullets.length == 0">
                    <p class="text-center">Sin información para mostrar</p>
                </div>
                <div v-for="(bullet, bulletIndex) in bullets" v-if="bulletIndex < 2" class="col-lg-6 col-sm-12 p-0 m-0 mt-xs-4">
                    <div class="mb-2">
                        <a :href="bullet.url">
                            <img class="card-img-top bullet-img"
                            :src="bullet.image_path"
                            :alt="bullet.name">
                            <div class="bullet-text-img"><h2 class="bolder" v-text="bullet.name"></h2></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 justify-content-center text-center p-4 brand-bar-template wow animate__animated animate__fadeInUp">
            <h3 class="color-white bolder mb-0">Marcas que puedes encontrar</h3>
        </div>

        <div class="col-12 p-4 wow animate__animated animate__fadeInUp">
            <section class="brands-logos slider"></section>
        </div>

        <div class="newsletter-home col-12 justify-content-center text-center p-4 wow animate__animated animate__fadeInUp">
            <h3 class="heading-overlaying">Suscríbete a nuestro newsletter</h3>
            <p>Recibe todas nuestras novedades y promociones</p>
            <form v-on:submit="subscribeNewsLetters($event)">
                <div class="form-row mb-2 mt-4 justify-content-center">
                    <div class="col-md-7 mb-3 col-12">
                        <div class="d-flex justify-content-center flex-column flex-md-row">
                            <input type="text" id="name-subscribe" class="form-control newsletter-email text-center" style="margin-right: 5px" placeholder="Ingresa tu nombre" required>
                            <input type="email" id="email-subscribe" class="form-control newsletter-email text-center" :class="isMobile ? 'mt-3' : 'mt-0'" style="margin-right: 5px" placeholder="Ingresa tu email" required>
                            <button type="submit" class="btn pl-5 pr-5 pt-3 pb-3 btn-template mt-3 mt-md-0" style="position: unset;">Suscribirme</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-lg-12 mb-5 mt-5">
            <h3 class="heading-overlaying">Compra por categoría</h3>
        </div>

        <div class="col-lg-12 mb-2 wow animate__animated animate__fadeInUp">
            <nav class="mb-2">
                <ul class="nav nav-pills justify-content-center">
                    <li class="nav-item ml-4 mr-4 mb-2">
                        <a class="nav-link active pl-4 pr-4 pt-3 pb-3" id="prod-seller-tab" data-toggle="tab" href="#prod-seller" role="tab"
                            aria-controls="prod-seller" aria-selected="true">Más vendidos</a>
                    </li>
                    <li class="nav-item ml-4 mr-4 mb-2">
                        <a class="nav-link pl-4 pr-4 pt-3 pb-3" id="prod-offer-tab" data-toggle="tab" href="#prod-offer" role="tab"
                            aria-controls="prod-offer" aria-selected="false">Descuentos</a>
                    </li>
                    <li class="nav-item ml-4 mr-4 mb-2">
                        <a class="nav-link pl-4 pr-4 pt-3 pb-3" id="prod-newer-tab" data-toggle="tab" href="#prod-newer" role="tab"
                            aria-controls="prod-newer" aria-selected="false">Nuevos productos</a>
                    </li>
                </ul>
            </nav>
            <div class="tab-content mt-4 mb-4" id="nav-tabContent">
                <div class="tab-pane fade show active" id="prod-seller" role="tabpanel" aria-labelledby="prod-seller-tab">
                    <div class="row pl-5 pr-5" id="prod-seller-container" style="justify-content: space-evenly;">
                        <div v-if="loadingBestSeller" class="col-lg-12">
                            <p class="text-center">
                                <i class="fas fa-spinner icon-template"></i> Cargando...
                            </p>
                        </div>
                        <div class="col-lg-12" v-if="!loadingBestSeller && bestseller.length == 0">
                            <p class="text-center">Sin información para mostrar</p>
                        </div>
                        <div class="col-12 p-4 wow animate__animated animate__fadeInUp" v-if="!loadingBestSeller">
                            <section class="best-seller-carousel slider" style="height: 300px">
                                <div v-for="(item, bestSellerIndex) in bestseller" class="slide">
                                    <div class="product-wrapper-home text-center">
                                        <span v-if="item.oferta == 1 && item.tipo_descuento == 'M'" class="offer-button" v-text="'-' + item.Cantidad_descuento"></span>
                                        <span v-if="item.oferta == 1 && item.tipo_descuento == 'P'" class="offer-button" v-text="'-' + Math.trunc(item.Cantidad_descuento) + '%'"></span>
                                        <div v-if="item.has_promotion" style="text-align: center; padding-right: 75px"><span class="product-promotion">Promoción especial</span></div>
                                        <div class="product-img">
                                            <div class="card">
                                                <div class="card-body" style="height: 280px;">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <a :href="getUrl('/product/' + item.CLAVE_UNIFICADA)">
                                                                <img :src="getProductImage(item.imagen)" class="img-fluid" alt="Cover">
                                                            </a>
                                                            <input :id="item.CLAVE_UNIFICADA" :name="item.CLAVE_UNIFICADA" type="hidden" :value="item.PrePublico">
                                                            <input :id="item.CLAVE_UNIFICADA + '-disc'" v-if="item.oferta == 1" :name="item.CLAVE_UNIFICADA + '-disc'" type="hidden" :value="item.PreSinpromocion">
                                                        </div>
                                                        <div class="col-12 mt-2 mb-n3">
                                                            <p v-text="item.DESCRIPCIÓN_CORTA" class="black-color"></p>
                                                            <p class="bolder mt-n3 product-price-color" v-text="formatMoney(item.PrePublico)"></p>
                                                            <p class="discount-price mt-n3" v-if="item.oferta == 1" v-text="formatMoney(item.PreSinpromocion)"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-action">
                                                <div class="product-action-style">
                                                    <a href="#!" v-on:click="addToCart(item.CLAVE_UNIFICADA)" class="btn color-white icon-template btn-product-action">
                                                        <i :id="'loader-' + item.CLAVE_UNIFICADA" class="fa fa-shopping-cart"></i>
                                                    </a>
                                                    <a :href="getUrl('/product/' + item.CLAVE_UNIFICADA)" class="btn color-white icon-template btn-product-action">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                    <a href="#!" v-on:click="window.addFavorite(item.Id_Prod1, item.CLAVE_UNIFICADA)" class="btn color-white icon-template btn-product-action">
                                                        <i class="far fa-heart" :data-favorite="item.CLAVE_UNIFICADA"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="prod-offer" role="tabpanel" aria-labelledby="prod-offer-tab">
                    <div class="row" id="prod-offer-container" style="justify-content: space-evenly;">
                        <div v-if="loadingOffers" class="col-lg-12">
                            <p class="text-center">
                                <i class="fas fa-spinner icon-template"></i> Cargando...
                            </p>
                        </div>
                        <div class="col-lg-12" v-if="!loadingOffers && offers.length == 0">
                            <p class="text-center">Sin información para mostrar</p>
                        </div>
                        <div class="col-12 p-4 wow animate__animated animate__fadeInUp" v-if="!loadingOffers && offers.length > 0">
                            <div class="offers-carousel slider" style="height: 300px">
                                <div v-for="(item, orfferIndex) in offers" class="slide col">
                                    <div class="product-wrapper-home text-center">
                                        <span v-if="item.oferta == 1 && item.tipo_descuento == 'M'" class="offer-button" v-text="'-' + item.Cantidad_descuento"></span>
                                        <span v-if="item.oferta == 1 && item.tipo_descuento == 'P'" class="offer-button" v-text="'-' + Math.trunc(item.Cantidad_descuento) + '%'"></span>
                                        <div v-if="item.has_promotion" style="text-align: center; padding-right: 75px"><span class="product-promotion">Promoción especial</span></div>
                                        <div class="product-img">
                                            <div class="card">
                                                <div class="card-body" style="height: 280px;">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <a :href="getUrl('/product/' + item.CLAVE_UNIFICADA)">
                                                                <img :src="getProductImage(item.imagen)" class="img-fluid img-product" alt="Cover">
                                                            </a>
                                                            <input :id="item.CLAVE_UNIFICADA" :name="item.CLAVE_UNIFICADA" type="hidden" :value="item.PrePublico">
                                                            <input :id="item.CLAVE_UNIFICADA + '-disc'" v-if="item.oferta == 1" :name="item.CLAVE_UNIFICADA + '-disc'" type="hidden" :value="item.PreSinpromocion">
                                                        </div>
                                                        <div class="col-12 mt-2 mb-n3">
                                                            <p v-text="item.DESCRIPCIÓN_CORTA" class="product-desc"></p>
                                                            <p class="bolder bluesky-color mt-n3" v-text="formatMoney(item.PrePublico)"></p>
                                                            <p class="discount-price mt-n3" v-if="item.oferta == 1" v-text="formatMoney(item.PreSinpromocion)"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-action">
                                                <div class="product-action-style">
                                                    <a href="#!" v-on:click="addToCart(item.CLAVE_UNIFICADA)" class="btn btn-color color-white btn-product-action">
                                                        <i :id="'loader-' + item.CLAVE_UNIFICADA" class="fa fa-shopping-cart"></i>
                                                    </a>
                                                    <a :href="getUrl('/product/' + item.CLAVE_UNIFICADA)" class="btn btn-color color-white btn-product-action">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                    <a href="#!" v-on:click="window.addFavorite(item.Id_Prod1, item.CLAVE_UNIFICADA)" class="btn btn-color color-white btn-product-action">
                                                        <i class="far fa-heart" :data-favorite="item.CLAVE_UNIFICADA"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="prod-newer" role="tabpanel" aria-labelledby="prod-newer-tab">
                    <div class="row" id="prod-newer-container" style="justify-content: space-evenly;">
                        <div v-if="loadingNewer" class="col-lg-12">
                            <p class="text-center">
                                <i class="fas fa-spinner icon-template"></i> Cargando...
                            </p>
                        </div>
                        <div class="col-lg-12" v-if="!loadingNewer && newer.length == 0">
                            <p class="text-center">Sin información para mostrar</p>
                        </div>
                        <div class="col-12 p-4 wow animate__animated animate__fadeInUp" v-if="!loadingNewer && newer.length > 0">
                            <div class="newer-carousel slider" style="height: 300px">
                                <div v-for="(item, newerIndex) in newer" class="slide col">
                                    <div class="product-wrapper-home text-center">
                                        <span v-if="item.oferta == 1 && item.tipo_descuento == 'M'" class="offer-button" v-text="'-' + item.Cantidad_descuento"></span>
                                        <span v-if="item.oferta == 1 && item.tipo_descuento == 'P'" class="offer-button" v-text="'-' + Math.trunc(item.Cantidad_descuento) + '%'"></span>
                                        <div v-if="item.has_promotion" style="text-align: center; padding-right: 75px"><span class="product-promotion">Promoción especial</span></div>
                                        <div class="product-img">
                                            <div class="card">
                                                <div class="card-body" style="height: 280px;">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <a :href="getUrl('/product/' + item.CLAVE_UNIFICADA)">
                                                                <img :src="getProductImage(item.imagen)" class="img-fluid img-product" alt="Cover">
                                                            </a>
                                                            <input :id="item.CLAVE_UNIFICADA" :name="item.CLAVE_UNIFICADA" type="hidden" :value="item.PrePublico">
                                                            <input :id="item.CLAVE_UNIFICADA + '-disc'" v-if="item.oferta == 1" :name="item.CLAVE_UNIFICADA + '-disc'" type="hidden" :value="item.PreSinpromocion">
                                                        </div>
                                                        <div class="col-12 mt-2 mb-n3">
                                                            <p v-text="item.DESCRIPCIÓN_CORTA" class="product-desc"></p>
                                                            <p class="bolder bluesky-color mt-n3" v-text="formatMoney(item.PrePublico)"></p>
                                                            <p class="discount-price mt-n3" v-if="item.oferta == 1" v-text="formatMoney(item.PreSinpromocion)"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-action">
                                                <div class="product-action-style">
                                                    <a href="#!" v-on:click="addToCart(item.CLAVE_UNIFICADA)" class="btn btn-color color-white btn-product-action">
                                                        <i :id="'loader-' + item.CLAVE_UNIFICADA" class="fa fa-shopping-cart"></i>
                                                    </a>
                                                    <a :href="getUrl('/product/' + item.CLAVE_UNIFICADA)" class="btn btn-color color-white btn-product-action">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                    <a href="#!" v-on:click="window.addFavorite(item.Id_Prod1, item.CLAVE_UNIFICADA)" class="btn btn-color color-white btn-product-action">
                                                        <i class="far fa-heart" :data-favorite="item.CLAVE_UNIFICADA"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 mt-5 wow animate__animated animate__fadeInUp">
            <div class="row">
                <div v-if="loadingBullets" class="col-lg-12">
                    <p class="text-center">
                        <i class="fas fa-spinner icon-template"></i> Cargando...
                    </p>
                </div>
                <div class="col-lg-12" v-if="!loadingBullets && bullets.length == 0">
                    <p class="text-center">Sin información para mostrar</p>
                </div>
                <div v-for="(bullet, bulletIndex) in bullets" v-if="bulletIndex > 1 && bulletIndex < 4" class="col-lg-6 col-sm-12 p-0 m-0 mt-xs-4">
                    <div class="">
                        <a :href="bullet.url">
                            <img class="card-img-top bullet-img"
                            :src="bullet.image_path"
                            :alt="bullet.name">
                            <div class="bullet-text-img"><h2 class="bolder" v-text="bullet.name"></h2></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 mb-5 mt-5 wow animate__animated animate__fadeInUp wow animate__animated animate__fadeInUp">
            <h3 class="heading-overlaying">Conoce nuestro blog</h3>
        </div>

        <div class="col-lg-12 mb-4 wow animate__animated animate__fadeInUp">
            <div class="row justify-content-center pl-5 pr-5">
                <div v-if="loadingBlogs" class="col-lg-12">
                    <p class="text-center">
                        <i class="fas fa-spinner icon-template"></i> Cargando...
                    </p>
                </div>
                <div class="col-lg-12" v-if="blogs.length == 0">
                    <p class="text-center">Sin información para mostrar</p>
                </div>
                <div v-for="(blog, blogIndex) in blogs" v-if="blogIndex < 3" class="col-lg-4 col-sm-12 mt-xs-4">
                    <div class="card card-blog">
                        <a :href="getUrl('/blogs/' + blog.id)">
                            <img class="card-img-top"
                                :src="blog.images[0].url"
                                :alt="blog.title">
                        </a>
                        <div class="card-body">
                            <h5 class="text-center bolder" v-text="blog.title"></h5>
                            <p class="card-text text-justify" v-text="cutString(blog.content, 200)"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>

        let HomeVueApp = new Vue({
            el: '#home-app',
            name: 'HomeApp',
            data() {
                return {
                    loadingNewer: false,
                    loadingBlogs: false,
                    loadingSlides: false,
                    loadingBrands: false,
                    loadingOffers: false,
                    loadingReviews: false,
                    loadingBullets: false,
                    loadingBestSeller: false,
                    loadingRecommended: false,

                    newer: [],
                    blogs: [],
                    brands: [],
                    offers: [],
                    slides: [],
                    reviews: [],
                    bullets: [],
                    bestseller: [],
                    recommended: [],

                    product: {},
                    loadingAddCart: false,
                    quantity: 1,
                    variationSelected: null,
                    productCarouselConfig: {
                        slidesToShow: 5,
                        slidesToScroll: 1,
                        autoplay: false,
                        arrows: true,
                        dots: false,
                        infinite: false,
                        pauseOnHover: false,
                        mobileFirst:true,
                        responsive: [
                            {
                                breakpoint: 2000,
                                settings: {
                                    slidesToShow: 5
                                }
                            },
                            {
                                breakpoint: 1200,
                                settings: {
                                    slidesToShow: 4
                                }
                            },
                            {
                                breakpoint: 992,
                                settings: {
                                    slidesToShow: 3
                                }
                            },
                            {
                                breakpoint: 768,
                                settings: {
                                    slidesToShow: 2
                                }
                            },
                            {
                                breakpoint: 576,
                                settings: {
                                    slidesToShow: 1
                                }
                            },
                            {
                                breakpoint: 320,
                                settings: {
                                    slidesToShow: 1
                                }
                            }
                        ]
                    }
                }
            },
            mounted: function() {
                this.getResources();
            },
            methods: {
                /**
                 * Get home resources
                 *
                 * @author Benito Huerta <benito.huerta@nuvem.mx>
                 * @created 28/10/201
                 * @updated 03/10/2022 Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
                 * @updated 10/10/2022 Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
                 * @updated 20/10/2022 José Vega <jose.vega@nuvem.mx>
                 * @updated 21/10/2022 Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
                 * @updated 24/10/2022 Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
                 * @updated 01/11/2022 Emmanuel Bautista <emmanuel.bautista@nuvem.mx>
                 * @return void
                 */
                getResources: function() {

                    //--- Start Slides ---//
                    this.loadingSlides = true;

                    axios.get(`${apiBaseUrl}get-slides-images?enterprising_id=${enterprisingId}`)
                    .then(response => {
                        this.slides = response.data.data;
                        const sliderPlayTime = response.data.slider_play_time;

                        this.slides.forEach(slide => {
                            if(isMobile){
                                $('.enterprising-slider').append(`
                                    <a  href='${slide.url}' class="slide" style="height: 200px">
                                        <div class="swiper-container">
                                            <img src="${slide.image_path}" class="swiper-slide-img">
                                        </div>
                                    </a>
                                `);
                            } else {
                                $('.enterprising-slider').append(`
                                    <a href='${slide.url}' class="slide swiper-container" style="width: 100%">
                                        <div class="mb-0 swiper-container">
                                            <img src="${slide.image_path}" class="swiper-slide-img">
                                        </div>
                                    </a>
                                `);
                            }
                        });

                        $('.enterprising-slider').slick({
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            autoplay: true,
                            autoplaySpeed: sliderPlayTime ? sliderPlayTime : 4000,
                            arrows: true,
                            dots: true,
                            pauseOnHover: false,
                            responsive: [{
                                breakpoint: 768,
                                settings: {
                                    slidesToShow: 1
                                }
                            }, {
                                breakpoint: 520,
                                settings: {
                                    slidesToShow: 1
                                }
                            }]
                        });

                    }).catch( error => {
                        this.loadingSlides = false;
                        console.error(error);
                    });
                    //--- End Slides ---//

                    //--- Start Offers ---//
                    this.loadingOffers = true;

                    axios.get(`${apiBaseUrl}products/globals?oferta=1&client_id=${clientId}&enterprising_id=${enterprisingId}`)
                    .then(response => {
                        this.offers = response.data.data;
                        this.loadingOffers = false;


                    }).catch( error => {
                        this.loadingOffers = false;
                        console.error(error);
                    }).finally(() => {
                        $('.offers-carousel').slick(this.productCarouselConfig);
                        $('#prod-offer-tab').on('show.bs.tab', function () {
                            setTimeout(() => {
                                $('.offers-carousel').slick('refresh');
                            }, 500);
                        });
                        $('#prod-offer-tab').on('show.bs.tab', function () {
                            setTimeout(() => {
                                $('.offers-carousel').slick('refresh');
                            }, 500);
                        });
                    });
                    //--- End Offers ---//

                    //--- Start Best Seller ---//
                    this.loadingBestSeller = true;

                    axios.get(`${apiBaseUrl}products/globals?best_seller=true&client_id=${clientId}&enterprising_id=${enterprisingId}`)
                    .then(response => {
                        this.bestseller = response.data.data;
                        this.loadingBestSeller = false;
                    }).catch( error => {
                        this.loadingBestSeller = false;
                        console.error(error);
                    }).finally(() => {
                            $('.best-seller-carousel').slick(this.productCarouselConfig);
                            $('#prod-seller-tab').on('show.bs.tab', function () {
                                setTimeout(() => {
                                    $('.best-seller-carousel').slick('refresh');
                                }, 500);
                            });
                    });
                    //--- End Best Seller ---//

                    //--- Start Nwwer ---//
                    this.loadingNewer = true;

                    axios.get(`${apiBaseUrl}products/globals?newer=true&client_id=${clientId}&enterprising_id=${enterprisingId}`)
                    .then(response => {
                        this.newer = response.data.data;
                        this.loadingNewer = false;
                    }).catch( error => {
                        this.loadingNewer = false;
                        console.error(error);
                    }).finally(() => {
                            $('.newer-carousel').slick(this.productCarouselConfig);
                            $('#prod-newer-tab').on('show.bs.tab', function () {
                                setTimeout(() => {
                                    $('.newer-carousel').slick('refresh');
                                }, 500);
                            });
                    });
                    //--- End Newr ---//

                    //--- Start Recommended ---//
                    this.loadingRecommended = true;

                    axios.get(`${apiBaseUrl}products/globals?destacado=1&client_id=${clientId}&enterprising_id=${enterprisingId}`)
                    .then(response => {
                        this.recommended = response.data.data;
                        this.loadingRecommended = false;
                    }).catch( error => {
                        this.loadingRecommended = false;
                        console.error(error);
                    });

                    //--- End Recommended ---//

                    //--- Start Brands ---//
                    this.loadingBrands = true;

                    axios.get(`${apiBaseUrl}v1/branches-info?enterprising_id=${enterprisingId}&client_id=${clientId}`)
                    .then(response => {
                        this.brands = response.data.data;
                        this.loadingBrands = false;

                        this.brands.forEach(brand => {
                            $('.brands-logos').append(`
                                <div class="slide d-flex justify-content-center">
                                    <img src="${brand.Imagen}">
                                </div>
                            `);
                        });

                        $('.brands-logos').slick({
                            slidesToShow: 6,
                            slidesToScroll: 1,
                            autoplay: false,
                            autoplaySpeed: 1500,
                            arrows: false,
                            dots: true,
                            pauseOnHover: false,
                            responsive: [{
                                breakpoint: 768,
                                settings: {
                                    slidesToShow: 1
                                }
                            }, {
                                breakpoint: 520,
                                settings: {
                                    slidesToShow: 1
                                }
                            }]
                        });

                    }).catch( error => {
                        this.loadingBrands = false;
                        console.error(error);
                    });

                    //--- End Brands ---//

                    //--- Start Reviews ---//
                    this.loadingReviews = true;

                    axios.get(`${apiBaseUrl}customers/comments/1?enterprising_id=${enterprisingId}`)
                    .then(response => {
                        this.reviews = response.data.data;
                        this.loadingReviews = false;

                        this.reviews.forEach(review => {

                            let stars = `
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                                <i class="far fa-star"></i>
                            `;

                            switch (review.rating) {
                                case 1:
                                    stars = `
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                    `;
                                    break;

                                case 2:
                                    stars = `
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                    `;
                                    break;

                                case 3:
                                    stars = `
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                    `;
                                    break;

                                case 4:
                                    stars = `
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    `;
                                    break;

                                case 5:
                                    stars = `
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    `;
                                    break;

                                default:
                                    break;
                            }

                            $('.reviews-slider').append(`
                                <div class="slide">
                                    <h5>${review.name} - ${stars}</h5>
                                    <p>${review.comment}</p>
                                </div>
                            `);

                        });

                        $('.reviews-slider').slick({
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            autoplay: false,
                            autoplaySpeed: 1500,
                            arrows: false,
                            dots: true,
                            pauseOnHover: false,
                            responsive: [{
                                breakpoint: 768,
                                settings: {
                                    slidesToShow: 1
                                }
                            }, {
                                breakpoint: 520,
                                settings: {
                                    slidesToShow: 1
                                }
                            }]
                        });

                    }).catch( error => {
                        this.loadingReviews = false;
                        console.error(error);
                    });

                    //--- End Reviews ---//

                    //--- Start Bullets ---//
                    this.loadingBullets = true;

                    axios.get(`${apiBaseUrl}bullets?enterprising_id=${enterprisingId}`)
                    .then(response => {
                        this.bullets = response.data.bullets;
                        this.loadingBullets = false;
                    }).catch( error => {
                        this.loadingBullets = false;
                        console.error(error);
                    });
                    //--- End Bullets ---//

                    //--- Start Blogs ---//
                    this.loadingBlogs = true;

                    axios.get(`${apiBaseUrl}get-blogs?enterprising_id=${enterprisingId}`)
                    .then(response => {
                        this.blogs = response.data.data;
                        this.loadingBlogs = false;
                    }).catch( error => {
                        this.loadingBlogs = false;
                        console.error(error);
                    });
                    //--- End Blogs ---//

                },
                /**
                 * Get the product image
                 *
                 * @author Benito Huerta <benito.huerta@nuvem.mx>
                 * @created 28/10/201
                 * @param {string} image
                 * @return void
                 */
                getProductImage: function(image) {

                    var fields = image.split(':');

                    if (fields[0] == "https") {
                        return image;
                    }

                    return defaultProductImage;
                },
                /**
                 * Create a new url
                 *
                 * @author Benito Huerta <benito.huerta@nuvem.mx>
                 * @created 28/10/201
                 * @param {string} route
                 * @return void
                 */
                getUrl: function(route) {
                    return baseUrl + route;
                },
                /**
                 * Cut a string
                 *
                 * @author Benito Huerta <benito.huerta@nuvem.mx>
                 * @created 28/10/201
                 * @param {string} string
                 * @param {int} length
                 * @return void
                 */
                cutString: function(string, length) {
                    return string.substring(0, length);
                },
                /**
                 * Get slide style
                 *
                 * @author Benito Huerta <benito.huerta@nuvem.mx>
                 * @created 29/10/201
                 * @updated 18/10/2022 José Vega <jose.vega@nuvem.mx>
                 * @param {string} url
                 * @return string
                 */
                getSlideBgImage: function(url) {
                    return `background: url('${url}') no-repeat center center;
                            -webkit-background-size: cover;
                            -moz-background-size: cover;
                            -o-background-size: cover;
                            background-size: 100% 100vh;
                            height: 100vh;`;
                },
                /**
                 * Make a request to subscribe to newsletter
                 *
                 * @author Benito Huerta <benito.huerta@nuvem.mx>
                 * @created 29/10/201
                 * @updated 21/10/2022 José Vega <jose.vega@nuvem.mx>
                 * @param {event} e
                 * @return void
                 */
                subscribeNewsLetters: function(e) {

                    e.preventDefault();

                    let data = {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        email: $('#email-subscribe').val(),
                        name: $('#name-subscribe').val()
                    }

                    axios.post(`${apiBaseUrl}store-newsletter-email?enterprising_id=${enterprisingId}`, data)
                    .then(response => {

                        $('#email-subscribe').val('');
                        $('#email-subscribe').trigger('change');
                        $('#name-subscribe').val('');
                        $('#name-subscribe').trigger('change');

                        alertify.success('Ahora recibirás nuestras actualizaciones en tu bandeja de entrada');

                    })
                    .catch( error => {

                        let message = '¡Oops! Algo salió mal. Inténtalo nuevamente.';

                        if (error.response) {
                            if(error.response.status == 422) {
                                message = 'Este correo es inválido o ya está registrado en el newsletter.'
                            }
                        }

                        alertify.success(message);

                    });

                },
                /**
                 * Format an amount to money
                 *
                 * @author Benito Huerta <benito.huerta@nuvem.mx>
                 * @param {float|double} amount
                 * @return string
                 */
                formatMoney: function(amount) {

                    let amountFormatted = numeral(amount).format('0,0.00');

                    return `$ ${amountFormatted} mxn`;
                },
                /**
                 * Add a product to cart
                 *
                 * @author Benito Huerta <benito.huerta@nuvem.mx>
                 * @created 03/11/2021
                 * @updated 18/05/2023 José Vega <jose.vega@nuvem.mx> 
                 * @return void
                 */
                addToCart: function(productId) {
                    this.loadingAddCart = true;

                    if(this.quantity <= 0)
                        this.quantity = 1;

                    $.ajax({
                        type: 'POST',
                        url: "{{ route('store.shopping-cart.add-product') }}",
                        data: {
                            id_prod1: productId,
                            quantity: this.quantity,
                            enterprisingId: enterprisingId,
                            clientId: clientId
                        },
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        success: (data) => {

                            let quantity = data.quantity;

                            let idProd = data.product.id;
                            let idForPrice = data.product.id;
                            let pricePro = $('[id="'+ idForPrice + '"]').val();

                            var sendData = [];
                            var customerId = null;

                            @if (auth()->user())
                                customerId = "{{ auth()->user()->id }}",
                            @endif

                            var valDiscount = 0;

                            if (typeof $('[id="'+ idForPrice + '-disc"]').val() == 'undefined') {
                                valDiscount = 0;
                            } else {
                                valDiscount = ($('[id="'+ idForPrice + '-disc"]').val() - pricePro);
                            }

                            var finalTotal = (parseFloat(pricePro) + parseFloat(valDiscount));

                            var sendData = {
                                "customer_id": customerId,
                                "Id_Prod1": idProd,
                                "quantity": quantity,
                                "unit_price": finalTotal,
                                "discount": valDiscount,
                                "cookie": uniqueId,
                                "Id_CostoEnvio": "33"
                            }

                            if (this.variationSelected && this.variationSelected.Id_Atributo1) {
                                sendData['size_id'] = this.variationSelected.Id_Atributo1;
                                sendData['color_id'] = this.variationSelected.Id_Atributo2;
                            }

                            $.ajax({
                                type: "POST",
                                url: apiBaseUrl + "shopping-cart-products" + "?enterprising="+$('meta[name=enterprising-id]').attr('content'),
                                data: sendData,
                                success: (response) => {

                                    if (response.newProductAdded != null) {
                                        this.loadingAddCart = false;
                                        navVueApp.loadCart(true);
                                    } else {
                                        this.loadingAddCart = false;
                                        alertify.success("Algo salio mal");
                                    }
                                },
                                error: (jqXHR, exception) => {

                                    this.loadingAddCart = false;

                                    swalType = "error";
                                    swalMsg = jqXHR.statusText;
                                    swalTitle = "Error";

                                    if (jqXHR.status == 500) {

                                        swalType = "warning";
                                        swalTitle = "Advertencia";

                                        switch (jqXHR.responseJSON.error) {
                                            case 'The product has already been added, try another or the cookie already exists':
                                                swalMsg =
                                                    "El producto ya ha sido agregado, pruebe con otro o la cookie ya existe.";
                                                break;
                                            case 'There is no stock of the selected product':
                                                swalMsg = "No hay stock del producto seleccionado.";
                                                break;
                                            case 'The product does not exist':
                                                swalMsg = "El producto no existe.";
                                                break;
                                            case 'The customer given does not exist':
                                                swalMsg = "El cliente dado no existe.";
                                                break;
                                        }

                                    }

                                    alertify.success(swalMsg);

                                }
                            });
                        },
                        error: (err) => {

                            this.loadingAddCart = false;

                            if (err.status == 422) {
                                alertify.success("Ocurrió un error, intenta de nuevo");
                            } else {
                                alertify.success("Ocurrió un error, intenta de nuevo");
                            }
                        }
                    });
                },
            }
        });
    </script>
@endpush

@push('css')
    <style>
        .slick-slide {
            margin: 0px 20px;
        }

        .slick-slide img {
            width: 50%;
        }

        .slick-slider {
            position: relative;
            display: block;
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            -khtml-user-select: none;
            -ms-touch-action: pan-y;
            touch-action: pan-y;
            -webkit-tap-highlight-color: transparent;
        }

        .slick-list {
            height: 100%;
            position: relative;
            display: block;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .slick-list:focus {
            outline: none;
        }

        .slick-list.dragging {
            cursor: pointer;
            cursor: hand;
        }

        .slick-slider .slick-track,
        .slick-slider .slick-list {
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .slick-track {
            position: relative;
            top: 0;
            left: 0;
            display: block;
        }

        .slick-track:before,
        .slick-track:after {
            display: table;
            content: '';
        }

        .slick-track:after {
            clear: both;
        }

        .slick-loading .slick-track {
            visibility: hidden;
        }

        .slick-slide {
            display: none;
            float: left;
            height: 100%;
            min-height: 1px;
        }

        [dir='rtl'] .slick-slide {
            float: right;
        }

        .slick-slide img {
            display: inline;
        }

        .slick-slide.slick-loading img {
            display: none;
        }

        .slick-slide.dragging img {
            pointer-events: none;
        }

        .slick-initialized .slick-slide {
            display: block;
        }

        .slick-loading .slick-slide {
            visibility: hidden;
        }

        .slick-vertical .slick-slide {
            display: block;
            height: auto;
            border: 1px solid transparent;
        }

        .slick-arrow.slick-hidden {
            display: none;
        }

        .slick-dots {
            position: static !important;
            margin-top: 1em;
        }

        .slick-dots li {
            margin: 0 0.25rem;
        }

        .slick-dots li button {
            display: block;
            width: 1rem;
            height: 1rem;
            padding: 0;
            border: none;
            border-radius: 100%;
            background-color: #eeeeee69;
            text-indent: -9999px;
        }

        .slick-dots li.slick-active button {
            background-color: #93C7EB;
        }

        .slick-dotted.slick-slider {
            margin-bottom: 0px !important;
        }

        .slick-prev {
            z-index: 1;
        }

    </style>
@endpush