@extends(config('app.layout').'.layouts.web')

@section('title','Favoritos')

@section('content')
       
    <main id="MainContent" class="content-for-layout">
        <div class="favorite-page mt-48" id="favoritePageApp">            
            <div class="container">
                <h3>Mis Productos Favoritos</h3>
                <hr>
                <div class="favorite-page-wrapper mt-4">
                    <div class="row" id="conteprod" >
                        
                    </div>
                </div>
                <template v-if="loading == true">
                    <div v-html="loading_html"></div>
                </template>
                <template v-if="products.length === 0 && loading == false">
                    @include_layout('favorite._empty')
                </template>
            </div>
        </div>
    </main>
    
@endsection

@section('css')
    <style>
        
    </style>
@endsection

@section('js')    
    <script>        
        
        const favoritePageApp = createApp({
            delimiters: ['${', '}'],
            extends: favoriteBase,     
            data() {
                return {         
                    products:[],           
                    loading:true,
                    products_html:'',                    
                    loading_html: '',
                    page:'favorite'
                }
            },  
            mounted(){                
                this.show();
                this.loading_html = sw_loading;                                
            },      
            methods: {
                show(){                    
                    this.load_data();                    
                    let $this = this;
                    $this.loading = true;
                    $('#conteprod').html(''); 
                    axios.post("{{ url('favoritos/list') }}", {
                        products: this.products
                    }).then(response => {                    
                        $('#conteprod').html(response.data);                    
                        $this.loading = false;                    
                        $this.products.forEach(function(item) {                            
                            $this.item_check(item.product_id);                
                        });
                    }).catch(error =>{        
                        $this.loading = false;                       
                        console.log(error);                        
                    });                     
                },

            }
        }).mount('#favoritePageApp');
    </script>
@endsection