@extends('layouts.store.master')
@section('page','Blog')
@section('classes_body','no-mg no-pd')
@section('body')
<section id="blogs-section">
    <div class="breadcrums wow animate__animated animate__fadeInUp">
        Inicio / Blog
    </div>
    <div class="wow animate__animated animate__fadeInUp" style="width: 100%; overflow: hidden; background-image: url('images/blog/cover.png'); background-position: center; background-size: cover; height: 208px;">
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-5 col-sm-12 col-xs-12">
                <div class="entry wow animate__animated animate__fadeInUp">
                    <div id="blog-image-1" class="entry-img">

                    </div>
                    <div id="blog-content-1" class="entry-text">

                    </div>
                </div>
            </div>
            <div class="col-md-7 col-sm-12 col-xs-12">
                <div class="entry-horizontal wow animate__animated animate__fadeInUp">
                    <div id="blog-image-2" class="entry-horizontal-img">

                    </div>
                    <div id="blog-content-2" class="entry-horizontal-text">

                    </div>
                </div>
                <div class="entry-horizontal wow animate__animated animate__fadeInUp" style="display: flex;
    justify-content: space-between;">
                    <div id="blog-content-3" class="entry-horizontal-text">

                    </div>
                    <div id="blog-image-3" class="entry-horizontal-img">

                    </div>
                </div>
            </div>
         </div>
         <div class="row">
                <div id="list" class="col-12 px-0 mt-5 mb-2 wow animate__animated animate__fadeInUp">
                    <p class="bold animate__animated animate__fadeInUp">Todas las publicaciones</p>
                </div>
                <div id="blogs-list">

                </div>
         </div>
        <div>
            <div class="row wow animate__animated animate__fadeInUp">
                <div id="pagination" class="pagination">
                    <div id="f-t">

                    </div>
                    <div id="prev">

                    </div>
                    <div id="pages">

                    </div>
                    <div id="next">

                    </div>
                </div>
            </div>
        </div>
    </div>
     <h5 class="section-title wow animate__animated animate__fadeInUp">Conoce nuestras marcas</h5>
    @include('layouts.store.brand_carousel')
    </section>
    @push('scripts')
        <!-- Se cambia versión slim a min de jQuery ya que causa error con las peticiones ajax y el preload no desaparece -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            integrity="sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>
        <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
        <link rel="stylesheet"
                href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.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>
        @include('layouts.store.scripts.menu-footer');
        <script type="text/javascript" src="{{asset('/js/slick.min.js')}}"></script>
        <script src="https://wowjs.uk/dist/wow.min.js"></script>
        <script>
            $(window).on('resize', function() {
                let carboHeight = $("#carbo").height();
                $("#bg_carbo").css("height", carboHeight / 2 + 30);
            })
            $(document).ready(function () {
                $(window).resize();
            });

        </script>
        <script>
         new WOW().init();

         /**
             * Get blogs registers
             *
             * @author Diego Velez <diego.velez@nuvem.mx>
             * @created 2021-06-10
             * @updated 29/07/2021 Benito Huerta <benito.huerta@nuvem.mx>
             * @param integer
             * @return void
             */

         $(document).ready(function(){

                axios.get('{{config('store.api_medshipper_url')."get-blogs?enterprising_id=". env('ENTERPRISING_ID',false)}}').then(function (response) {
                    $.each(response.data.data,function(indice,row){
                        if (indice==0) {
                            $('#blog-image-1').append(`<img class="image-showcase" src="`+row.images[0].url+`" alt="Imagen">`);
                            $('#blog-content-1').append(`<p class="blog-title">`+row.title+`</p><p style="min-height:130px; overflow: hidden;">` + window.cutString(row.content, 150) + ` ...</p><button onclick="location.href='{{url('/blogs')}}/`+row.id+`'" style="font-size: 12px; color: white;" type="submit" class="btn red px-5 py-2">Leer más</button>`);
                            $('#blogs-list').append(`<div class="d-block d-md-flex p-0 pb-5 mb-5 wow animate__animated animate__fadeInUp" style="border-bottom: 1px solid #c3c3c3;""> <div class="col-12 col-md-3 col-lg-2" style="padding-left: 0;"> <img style="width: 100%;" src="`+row.images[0].url+`"/></div><div class="col-12 col-md-6 col-lg-8 p-0 pt-3 px-md-3 pt-md-0"><p class="bold">${row.title}</p><p style="max-height: 50px;overflow: hidden;">${window.cutString(row.content, 200)} ...</p></div><div class="col-12 col-md-3 col-lg-2 d-flex justify-content-end align-items-end" style="padding-right: 0;"><button onclick="location.href='{{url('/blogs')}}/`+row.id+`'" style="font-size: 12px; color: white;" type="submit" class="btn red px-5 py-2">Leer más</button></div></div>`);
                        }else if(indice==1){
                            $('#blog-image-2').append(`<img src="`+row.images[0].url+`" alt="blog-img">`);
                            $('#blog-content-2').append(`<p class="blog-title">`+row.title+`</p><p style="overflow: hidden; min-height: 160px;">` + window.cutString(row.content, 150) + ` ...</p><button onclick="location.href='{{url('/blogs')}}/`+row.id+`'" style="font-size: 12px; color: white;" type="submit" class="btn red px-5 py-2">Leer más</button>`);
                            $('#blogs-list').append(`<div class="d-block d-md-flex p-0 pb-5 mb-5 wow animate__animated animate__fadeInUp" style="border-bottom: 1px solid #c3c3c3;""> <div class="col-12 col-md-3 col-lg-2" style="padding-left: 0;"> <img style="width: 100%;" src="`+row.images[0].url+`"/></div><div class="col-12 col-md-6 col-lg-8 p-0 pt-3 px-md-3 pt-md-0"><p class="bold">${row.title}</p><p style="max-height: 50px;overflow: hidden;">${window.cutString(row.content, 200)} ...</p></div><div class="col-12 col-md-3 col-lg-2 d-flex justify-content-end align-items-end" style="padding-right: 0;"><button onclick="location.href='{{url('/blogs')}}/`+row.id+`'" style="font-size: 12px; color: white;" type="submit" class="btn red px-5 py-2">Leer más</button></div></div>`);
                        }else if(indice==2){
                            $('#blog-content-3').append(`<p class="blog-title">`+row.title+`</p><p style="overflow: hidden; min-height: 160px;">` + window.cutString(row.content, 150) + ` ...</p><button onclick="location.href='{{url('/blogs')}}/`+row.id+`'" style="font-size: 12px; color: white;" type="submit" class="btn red px-5 py-2">Leer más</button>`);
                            $('#blog-image-3').append(`<img src="`+row.images[0].url+`" alt="blog-img">`);
                            $('#blogs-list').append(`<div class="d-block d-md-flex p-0 pb-5 mb-5 wow animate__animated animate__fadeInUp" style="border-bottom: 1px solid #c3c3c3;""> <div class="col-12 col-md-3 col-lg-2" style="padding-left: 0;"> <img style="width: 100%;" src="`+row.images[0].url+`"/></div><div class="col-12 col-md-6 col-lg-8 p-0 pt-3 px-md-3 pt-md-0"><p class="bold">${row.title}</p><p style="min-height: 50px;overflow: hidden;">${window.cutString(row.content, 200)} ...</p></div><div class="col-12 col-md-3 col-lg-2 d-flex justify-content-end align-items-end" style="padding-right: 0;"><button onclick="location.href='{{url('/blogs')}}/`+row.id+`'" style="font-size: 12px; color: white;" type="submit" class="btn red px-5 py-2">Leer más</button></div></div>`);
                        }else{
                            $('#blogs-list').append(`<div class="d-block d-md-flex p-0 pb-5 mb-5 wow animate__animated animate__fadeInUp" style="border-bottom: 1px solid #c3c3c3;""> <div class="col-12 col-md-3 col-lg-2" style="padding-left: 0;"> <img style="width: 100%;" src="`+row.images[0].url+`"/></div><div class="col-12 col-md-6 col-lg-8 p-0 pt-3 px-md-3 pt-md-0"><p class="bold">${row.title}</p><p style="min-height: 50px;overflow: hidden;">${window.cutString(row.content, 200)} ...</p></div><div class="col-12 col-md-3 col-lg-2 d-flex justify-content-end align-items-end" style="padding-right: 0;"><button onclick="location.href='{{url('/blogs')}}/`+row.id+`'" style="font-size: 12px; color: white;" type="submit" class="btn red px-5 py-2">Leer más</button></div></div>`);
                        }
                    });
                    $('#f-t').append(`<div id="f-t" class="mr-3">${response.data.from}- ${response.data.to} de ${response.data.total}</div>`);
                    if (response.data.prev_page_url!=null) {
                        $('#prev').append(`<a class="chevron" style="padding: 0; margin-right: 15px;" href="#blog-content-3" onclick="changePage(${response.data.current_page-1})"><i style="color: #0077c8;" class="fa fa-chevron-left"></i></a>`);
                    }else{
                        $('#prev').append(`<a class="chevron" style="padding: 0; margin-right: 15px;" href="#blog-content-3"><i style="color: #0077c8;" class="fa fa-chevron-left"></i></a>`);
                    }
                    for (var i = 1; i <= response.data.last_page; i++) {
                        if (response.data.current_page==i) {
                           $('#pages').append(`<a href="#blog-content-3" onclick="changePage(${i})" class="active">${i}</a>`);
                        }
                        else{
                            $('#pages').append(`<a href="#blog-content-3" onclick="changePage(${i})">${i}</a>`);
                        }
                    }

                    if (response.data.next_page_url!=null) {
                        $('#next').append(`<a class="chevron" style="padding: 0; margin-left: 15px;" href="#blog-content-3" onclick="changePage(${response.data.current_page+1})"><i style="color: #0077c8;" class="fa fa-chevron-right"></i></a>`);
                    }else{
                       $('#next').append(`<a class="chevron" style="padding: 0; margin-left: 15px;" href="#blog-content-3"><i style="color: #0077c8;" class="fa fa-chevron-right"></i></a>`);
                    }


                }).catch(function (error) {
                    console.error(error);
                    let message = error;
                });

            /**
             * Cut the blog content to a specified length 
             *
             * @param string string
             * @param int length
             * @return string
             */
            window.cutString = function(string, length) {
                return string.substring(0, length);
            }
         });

        /**
             * Get blogs registers of other page
             *
             * @author Diego Velez <diego.velez@nuvem.mx>
             * @created 2021-06-10
             * @param integer $id
             * @return void
             */

        function changePage(id){
          $("#blogs-list").empty();
          $("#f-t").empty();
          $("#prev").empty();
          $("#pages").empty();
          $("#next").empty();

          axios.get('{{config('store.api_medshipper_url')."get-blogs?enterprising_id=". env('ENTERPRISING_ID',false)}}&page='+id).then(function (response) {
                   $.each(response.data.data,function(indice,row){
                        $('#blogs-list').append(`<div class="d-block d-md-flex p-0 pb-5 mb-5 wow animate__animated animate__fadeInUp" style="border-bottom: 1px solid #c3c3c3;""> <div class="col-12 col-md-3 col-lg-2" style="padding-left: 0;"> <img style="width: 100%;" src="`+row.images[0].url+`"/></div><div class="col-12 col-md-6 col-lg-8 p-0 pt-3 px-md-3 pt-md-0"><p class="bold">${row.title}</p><p style="max-height: 50px;overflow: hidden;">${row.content}</p></div><div class="col-12 col-md-3 col-lg-2 d-flex justify-content-end align-items-end" style="padding-right: 0;"><button onclick="location.href='{{url('/blogs')}}/`+row.id+`'" style="font-size: 12px; color: white;" type="submit" class="btn red px-5 py-2">Leer más</button></div></div>`);
                   });
                    $('#f-t').append(`<div id="f-t" class="mr-3">${response.data.from}- ${response.data.to} de ${response.data.total}</div>`);
                    if (response.data.prev_page_url!=null) {
                        $('#prev').append(`<a class="chevron" style="padding: 0; margin-right: 15px;" href="#blog-content-3" onclick="changePage(${response.data.current_page-1})"><i style="color: #0077c8;" class="fa fa-chevron-left"></i></a>`);
                    }else{
                        $('#prev').append(`<a class="chevron" style="padding: 0; margin-right: 15px;" href="#blog-content-3"><i style="color: #0077c8;" class="fa fa-chevron-left"></i></a>`);
                    }
                    for (var i = 1; i <= response.data.last_page; i++) {
                        if (response.data.current_page==i) {
                           $('#pages').append(`<a href="#blog-content-3"  onclick="changePage(${i})" class="active">${i}</a>`);
                        }
                        else{
                            $('#pages').append(`<a href="#blog-content-3" onclick="changePage(${i})">${i}</a>`);
                        }
                    }

                    if (response.data.next_page_url!=null) {
                        $('#next').append(`<a class="chevron" style="padding: 0; margin-left: 15px;" href="#blog-content-3" onclick="changePage(${response.data.current_page+1})"><i style="color: #0077c8;" class="fa fa-chevron-right"></i></a>`);
                    }else{
                       $('#next').append(`<a class="chevron" style="padding: 0; margin-left: 15px;" href="#blog-content-3"><i style="color: #0077c8;" class="fa fa-chevron-right"></i></a>`);
                    }
                }).catch(function (error) {
                    console.error(error);
                    let message = error;
                });

        }
        </script>
    @endpush
@endsection