@extends($theme.'.layouts.admin')
@section('content')

<div class="breadcrumbs_area bg-list">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                        <h3>All Products</h3>
                        <ul>
                            <li><a href="{{url('home3') }}">home</a></li>
                            <li>/</li>
                            <li>All Products</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if(!isset($main_category_name) && !isset($sub_category_name))
    <nav class="breadcrumb-bar" aria-label="breadcrumb" style="display:none;">
        <ol class="container breadcrumb text-center text-lg-left">
            <li class="breadcrumb-item"><a href="{{ URL::to('home3') }}">Home</a></li>
            <!-- <li class="breadcrumb-item"><a href="#">categories</a></li> -->
        </ol>
    </nav>
    @else
    <nav class="breadcrumb-bar" aria-label="breadcrumb">
        <ol class="container breadcrumb text-center text-lg-left">
            <li class="breadcrumb-item"><a href="{{ URL::to('home3') }}">Home</a></li>
            <!-- <li class="breadcrumb-item"><a href="#">categories</a></li> -->
            @if(isset($main_category_name))
                <li class="breadcrumb-item current-page" aria-current="page"><a href="{{ route('sub_categories.list', ['id' => $main_category_id]) }}">{{ $main_category_name }}</a></li>
            @endif
            @if(isset($sub_category_name))
                <li class="breadcrumb-item current-page" aria-current="page"><a href="#">{{ $sub_category_name }}</a></li>
            @endif
        </ol>
    </nav>
@endif

<section>
    <div class="welcome_lukani_store">
        <div class="container">
            <div class="welcome_lukani_container products-block mt-23">
                <div class="shop_area shop_reverse">
                    <div class="container">
                        <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <!--shop wrapper start-->
                            <!--shop toolbar start-->
                            <div class="shop_toolbar_wrapper">
                                <div class="shop_toolbar_btn">
                                    <button data-role="grid_3" type="button" class="active btn-grid-3" data-toggle="tooltip" title="3"></button>
                                    <button data-role="grid_list" type="button" class="btn-list" data-toggle="tooltip" title="List"></button>
                                </div>

                               <!--  <div class="toolbar-sorter sorter">
                                    <label class="sorter-label" for="sorter">Sort By</label>
                                    <select id="sorter" data-role="sorter" data-category-id="" data-level="all" name="sorter" class="sorter-options mb-0">
                                        <option value="">Featured </option>
                                        <option value="priceLowest">Price: Low to High </option>
                                        <option value="priceHighest">Price: High to Low</option>
                                        <option value="latest">New Arrivals</option>
                                    </select>
                                </div> -->

                            </div>

                            <input type="hidden" data-url="{{ url()->current() }}" id="current_page_url">
                            <div class="loader triangle" style="display: none">
                                    <svg viewBox="0 0 86 80">
                                        <polygon points="43 8 79 72 7 72"></polygon>
                                    </svg>
                            </div>
                            <div class="product-content">
                                @include($theme.'.admin.inner_products')
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

    </div>
</div>

<script>
    function filter_products(page=1){
        $('.loader').show();
        var token = $('meta[name="csrf-token"]').attr('content');
        var url =  "{{ url('/product-list/products/all') }}";
        var brand = get_list_filter_value("brand_filter");
        var price = $(".price_filter:checked").val();
        var category = get_list_filter_value("category_filter");
        var sub_category = get_list_filter_value("sub_category_filter");
        var color = get_list_filter_value("color_filter");
        var size = get_list_filter_value("size_filter");
        var sorter = $('#sorter').val();

        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': token
            },
            type: 'get',
            data: {
                brand: brand,
                page:page,
                price: price,
                category: category,
                sub_category: sub_category,
                color : color,
                size : size,
                sorter: sorter
            },
            datatype: 'JSON',
            success: function(resp) {
                $('.loader').hide();
                if (resp.http_code == 400) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 200) {
                    if (!resp.data) {
                        $(".product-content").html(
                            "<p>Filtered data not available!</p>"
                        );
                    } else {
                        $(".product-content").html(resp.data);
                    }
                } else if (resp.http_code == 500) {
                    toastr.success(resp.message);
                }
            },
            error: function(err) {
                $('.loader').hide();
            }
        });
    }

    // $(document).on('click', '.page-link', function(e) {
    //     var page = $(this).attr("data-url");
    //     var current_pagee_url = $('#current_page_url').attr('data-url');
    //     var url = current_page_url+'?page='+page;
    // });

    $(document).on('click', '.brand_filter', function(e) {
        filter_products();
    });

    $(document).on('click', '.size_filter', function(e) {
        filter_products();
    });

    $(document).on('click', '.color_filter', function(e) {
        filter_products();
    });

    $(document).on('click', '.price_filter', function(e) {
        filter_products();
    });

    $(document).on('click', '.category_filter', function(e) {
        filter_products();
    });

    $(document).on('click', '.sub_category_filter', function(e) {
        filter_products();
    });

    $('#sorter').on('change',function(){
        filter_products();
    });
    function get_list_filter_value(filter_class) {
        var filter_data = [];

        $("." + filter_class + ":checked").each(function() {
            filter_data.push($(this).val());
        });

        return filter_data;
    }
    $(document).on('click', '.favProducts', function (e) {
    e.preventDefault();
    var customer_id = $('#customer_id').val();
    if (customer_id <= 0) {
        if (confirm('Please Login to continue further')) {
            window.location.replace("{{url('/')}}");
            return false;
        }
    } else {
        var token = $('meta[name="csrf-token"]').attr('content');
        var status = $(this).attr("data-status");
        var product_id = $(this).attr('data-product');
        var warehouse_product_id = $(this).attr('data-warehouse-product');
        var vendor_id = $(this).attr('data-vendor');
        //var vendor_id = '1';
        var data = {
            'product_id': product_id,
            'status': status,
            'warehouse_product_id': warehouse_product_id,
            'vendor_id': vendor_id
        };
        var url = '{{url('update-fav')}}';
        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: data,
            type: 'POST',
            datatype: 'JSON',
            success: function (resp) {
                if (resp.http_code == 400) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 200) {
                    toastr.success(resp.message);
                    window.location.reload();
                } else if (resp.http_code == 500) {
                    toastr.success(resp.message);
                }
            }
        });
    }
});

$(document).on('click', '.page-link', function(e) {
    $('.loader').show();
    var token = $('meta[name="csrf-token"]').attr('content');
    var page = $(this).attr("data-url");
    var url = $('#current_page_url').attr('data-url');
    var school_id = $('#current_page_url').attr('data-school-id');
    var level = $('#current_page_url').attr('data-level');
    var sorter = $('#sorter').val();

    $.ajax({
        url: url,
        headers: {
            'X-CSRF-TOKEN': token
        },
        type: 'get',
        data: {
            page: page,
            school_id: school_id,
        },
        datatype: 'JSON',
        success: function(resp) {
            $('.loader').hide();
            if (resp.http_code == 400) {
                toastr.warning(resp.message);
            } else if (resp.http_code == 200) {
                $('.product-content').html(resp.data);
            } else if (resp.http_code == 500) {
                toastr.success(resp.message);
            }
        },
        error: function(err) {
            $('.loader').hide();
        }
    });
});
$(document).ready(function() {
    // Toggle between grid and list views when buttons are clicked
    $('.shop_toolbar_btn button').click(function() {
        // Remove 'active' class from all buttons
        $('.shop_toolbar_btn button').removeClass('active');
        // Add 'active' class to the clicked button
        $(this).addClass('active');
        
        // Check which button was clicked
        var role = $(this).data('role');
        
        // Toggle grid and list views based on the button clicked
        if (role === 'grid_3') {
            // Show grid view with 3 items per row
            // Code to switch to grid view with 3 items per row
        } else if (role === 'grid_list') {
            // Show list view
            // Code to switch to list view
        }
        
        // Prevent default action of the button (e.g., form submission)
        return false;
    });
});
</script>
<style>
    .breadcrumb{
    background-color:#d8ebff !important;
}
    @media only screen and (max-width:768px){
    .single_responsive
    {
        margin: 15px 30px !important;
    }
    .breadcrumbs_area
    {
        padding: 30px;
        top: 45px;
    }
}
</style>
@endsection