@extends('layouts.app')
@section('content')
<!-- START SECTION BREADCRUMB -->
<div class="breadcrumb_section bg_gray page-title-mini">
    <div class="container"><!-- STRART CONTAINER -->
        <div class="row align-items-center">
        	<div class="col-md-6">
                <div class="page-title">
            		<h1>Welcome {{ showUsername() }}</h1>
                </div>
            </div>
            <div class="col-md-6">
                <ol class="breadcrumb justify-content-md-end">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">My Wishlist</li>
                </ol>
            </div>
        </div>
    </div><!-- END CONTAINER-->
</div>
<!-- END SECTION BREADCRUMB -->

<!-- START MAIN CONTENT -->
<div class="main_content">

<!-- START SECTION SHOP -->
<div class="section">
	<div class="container">
    	<div class="row">
            <div class="col-lg-9">
                <div class="row align-items-center mb-4 pb-1">
                    <div class="col-12">
                        <div class="row top_product_filter_div">
                            <div class="col-md-4 mt-2">
                                <div class="custom_select">
                                    <select name="product_filter" class="form-control" id="product_sorting" data-live-search="true" data-actions-box="true">
                                        <option value="order">Default sorting</option>                                        
                                        <option value="date">Sort by newness</option>
                                        <option value="price">Sort by price: low to high</option>
                                        <option value="price-desc">Sort by price: high to low</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 mt-2">
                                <input type="text" class="form-control" placeholder="Search By Name" id="name_filter" value="{{ (isset($name) && $name != '') ? $name : '' }}">
                            </div>
                            <div class="col-md-4 mt-2 text-right">
                                <div class="products_view">
                                    <a href="javascript:Void(0);" class="shorting_icon grid active"><i class="ti-view-grid"></i></a>
                                    <a href="javascript:Void(0);" class="shorting_icon list"><i class="ti-layout-list-thumb"></i></a>
                                    <a href="javascript:Void(0);" class="refresh"><i class="fas fa-redo"></i></a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div> 

                <div class="product_ajax_data p-3">
                    @include('user.wishlist.wishlist_pagination_data')
                </div>
                <input type="hidden" name="hidden_search" id="hidden_search" value="1" />
                <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
                <input type="hidden" name="hidden_column_name" id="hidden_column_name" value="id" />
                <input type="hidden" name="hidden_sort_type" id="hidden_sort_type" value="desc" />                                
            </div>
            <div class="col-lg-3 order-lg-first mt-4 pt-2 mt-lg-0 pt-lg-0">
            	<div class="sidebar">                	                                      
                    <div class="widget">
                        @include('layouts.user_menu')
                    </div>                     
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END SECTION SHOP -->
</div>
@endsection

@push('js')
<script type="text/javascript">
    $(function(){
        $('.my_wishlist').addClass('active');
    });

    //name fiilter
    $(document).on('keyup', '#name_filter', function(e){
        e.preventDefault();
        var query = '';
        var sort_by = $('#hidden_column_name').val();
        var sort_type = $('#hidden_sort_type').val();
        $('#hidden_page').val(1);
        var page = $('#hidden_page').val();
        var name = $(this).val();         
        var sorting_type = $('#product_sorting option:selected').val();   
                
        fetch_data(page, sort_type, sort_by, query, sorting_type, name);
    });
    
    //product sorting
    $(document.body).on('change', '#product_sorting', function (e) {
        e.preventDefault();
        var query = '';
        var sort_by = $('#hidden_column_name').val();
        var sort_type = $('#hidden_sort_type').val();
        $('#hidden_page').val(1);
        var page = $('#hidden_page').val();
        var name = $('#name_filter').val();         
        var sorting_type = $('#product_sorting option:selected').val();                       
        
        fetch_data(page, sort_type, sort_by, query, sorting_type, name);
    });

    //pagination
    $(document).on('click', '.pagination a', function(event){
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        $('#hidden_page').val(page);
        var sort_by = $('#hidden_column_name').val();
        var sort_type = $('#hidden_sort_type').val();        
        var query = '';        
        var name = $('#name_filter').val();
        var sorting_type = $('#product_sorting option:selected').val();        
        $('.pagination li').removeClass('active');
        $(this).parent().addClass('active');

        fetch_data(page, sort_type, sort_by, query, sorting_type, name);
    });

    $('.refresh').on('click',function() {
        event.preventDefault();
        $("#product_sorting option:eq(0)").prop('selected', true);
        $("#name_filter").val('');        
        var page = 0;
        $('#hidden_page').val(page);
        var sort_by = $('#hidden_column_name').val();
        var sort_type = $('#hidden_sort_type').val();
        var query = '';        
        var sorting_type = 'order';
        fetch_data(page, sort_type, sort_by, query, sorting_type, name);
        
    });

    function fetch_data(page, sort_type, sort_by, query, sorting_type, name)
    {
        showLoader();
        $.ajax({
            url : '{{route("ajax.pagination.wishlist_product_list")}}',
            data: {
                'page': page,
                'sortby': sort_by,
                'sorttype': sort_type,
                'query': query,      
                'name': name,    
                'sorting_type': sorting_type,                       
            },
            success:function(data)
            {
                $(".product_ajax_data").html(data);
                hideLoader();
            }
        })
    }
</script>
@endpush