@page "/SdvShop/Shop"

<ShopBanner CategoryName="@this.categoryName"></ShopBanner>

<section class="cat_product_area section_gap">
    <div class="container">
        <div class="row flex-row-reverse">
            <div class="col-lg-9">
                <div class="product_top_bar">
                    <div class="left_dorp">
                        <select class="sorting" @bind="this.sorting">
                            <option value="Newest">Newest</option>
                            <option value="Oldest">Oldest</option>
                            <option value="N_ASC">Name (Ascending)</option>
                            <option value="N_DESC">Name (Descending)</option>
                            <option value="P_ASC">Price (Ascending)</option>
                            <option value="P_DESC">Price (Descending)</option>
                        </select>
                        <select class="show" @bind="this.productsForShowing">
                            <option value="6">Show 6</option>
                            <option value="9">Show 9</option>
                            <option value="12">Show 12</option>
                            <option value="15">Show 15</option>
                            <option value="30">Show 30</option>
                            <option value="33">Show 33</option>
                        </select>
                    </div>
                </div>

                <AllProducts Id="@this.categoryId"
                             Title="@this.categoryName"
                             Sorting="@this.sorting"
                             ProductsForShowing="@this.productsForShowing">
                </AllProducts>
            </div>

            <div class="col-lg-3">
                <div class="left_sidebar_area">
                    <aside class="left_widgets p_filter_widgets">
                        <div class="l_w_title">
                            <h3>Browse Categories</h3>
                        </div>
                        <div class="widgets_inner">
                            <ul class="list">
                                @foreach (var category in categories)
                                {
                                    <li class="active">
                                        <a @onclick="@(() => this.SelectCategory(category.Id, category.Title))">@category.Title</a>
                                    </li>
                                }
                            </ul>
                        </div>
                    </aside>

                    <aside class="left_widgets p_filter_widgets">
                        <div class="l_w_title">
                            <h3>Price Filter</h3>
                        </div>
                        <div class="widgets_inner">
                            <div class="range_item">
                                <div id="slider-range"></div>
                                <div class="">
                                    <label for="amount">Price : </label>
                                    <input type="text" id="amount" readonly />
                                </div>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</section>

@code{
    private List<ProductCategoryViewModel> categories;
    private string categoryId = null;
    private string categoryName = "All";
    private string sorting = null;
    private int productsForShowing = 6;

    private void SelectCategory(string id, string name)
    {
        this.categoryId = id;
        this.categoryName = name;
    }

    protected override Task OnInitializedAsync()
    {
        categories = this.CategoryService.ExtractAllCategories();
        return base.OnInitializedAsync();
    }
}