@using SitefinityWebApp.Mvc.ViewModels;
@using Newtonsoft.Json;

<script>
    /** Setup endpoint and phones list for ajax request **/
    const FilterSettings = {
        Endpoint: '@Url.Action("Filter","PhonesController")'
    }
    let type = "phones";
    let allProducts = @Html.Raw(JsonConvert.SerializeObject(Model))
</script>

@model List<PhonesVM>
@{
    var phoneCount = Model.Count();
}

<div class="tms-products__wrapper">
    <div class="tms-products-page tms-container">
        <div class="tms-filters filter-collapsible" id="filter-collapsible">
            <div class="tms-filters__heading-wrapper">
                <button class="tms-filters__filter-btn" id="inner-filter-btn">Filters</button>
                <button class="tms-filters__clear-btn" id="clearAll">Clear All</button>
            </div>
            <div class="tms-filters__container">

                @* Provider Filters *@
                <div class="tms-filter">
                    <div class="tms-filter__heading">
                        <label id="provider-filters_label">Providers</label>
                        <button class="dropdown-btn" aria-controls="provider-filters_collapsible" aria-expanded="true" aria-labelledby="provider-filters_label"><i class="fa fa-angle-down"></i></button>
                    </div>
                    <div class="tms-filter-wrapper collapsible" id="provider-filters_collapsible">
                        @foreach (var provider in ViewBag.Providers)
                        {
                            <div class="tms-filter__option">
                                <input type="checkbox" value="@provider.Name" name="Provider" id="@provider.Name" />
                                <label for="@provider.Name">@provider.Name</label>
                            </div>
                        }
                    </div>
                </div>

                @* Brand Filters *@
                <div class="tms-filter">
                    <div class="tms-filter__heading">
                        <label id="brand-filters__label">Brands</label>
                        <button class="dropdown-btn" aria-controls="brand-filters_collapsible" aria-expanded="true" aria-labelledby="brand-filters__label"><i class="fa fa-angle-down"></i></button>
                    </div>
                    <div class="tms-filter-wrapper collapsible" id="brand-filters_collapsible">
                        @foreach (var brand in ViewBag.Brands)
                        {
                            <div class="tms-filter__option">
                                <input type="checkbox" value="@brand.Name" name="Brand" id="@brand.Name" />
                                <label for="@brand.Name">@brand.Name </label>
                            </div>
                        }
                    </div>
                </div>

                @* Operating System Filters *@
                <div class="tms-filter">
                    <div class="tms-filter__heading">
                        <label id="os-filters_label">Operating System</label>
                        <button class="dropdown-btn" aria-controls="os-filters_collapsible" aria-expanded="true" aria-labelledby="os-filters_label"><i class="fa fa-angle-down"></i></button>
                    </div>
                    <div class="tms-filter-wrapper collapsible" id="os-filters_collapsible">
                        @foreach (var os in ViewBag.OSList)
                        {
                            <div class="tms-filter__option">
                                <input type="checkbox" value="@os" name="OS" id="@os" />
                                <label for="@os">@os </label>
                            </div>
                        }
                    </div>
                </div>

                @* Special Offer Filters *@
                <div class="tms-filter">
                    <div class="tms-filter__heading">
                        <label id="special-offers-filters_label">Special Offers</label>
                        <button class="dropdown-btn" aria-controls="special-offers-collapsible" aria-expanded="true" aria-labelledby="special-offers-filters_label"><i class="fa fa-angle-down"></i></button>
                    </div>
                    <div class="tms-filter-wrapper collapsible" id="special-offers-collapsible">
                        @foreach (var specialOffer in ViewBag.SpecialOffers)
                        {
                            <div class="tms-filter__option">
                                <input type="checkbox" value="@specialOffer.Heading" name="SpecialOffer" id="@specialOffer.Heading" />
                                <label for="@specialOffer.Heading">@specialOffer.Heading </label>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div class="tms-fade-horizontal"></div>
            <div class="tms-filters__apply-filters-wrapper" id="applyFilters">
                <button class="tms-filters__apply-filters-btn" id="applyFiltersBtn">Close</button>
            </div>

        </div>

        <div class="tms-products ">
            <div class="tms-products__heading-wrapper">
                <div class="tms-products__title-wrapper">
                    <div class="tms-products__title">
                        <h1>Phones</h1>
                        <p id="productCount">(@phoneCount)</p>
                    </div>
                    <button class="tms-filters__filter-btn" id="outer-filter-btn" aria-label="Expand Filters Section" aria-expanded="false" aria-controls="filter-collapsible"> Filters</button>
                </div>
            </div>
            <div class="tms-products__container" id="productsContainer">
                @foreach (var product in Model)
                {
                    var mainImg = product.Images.First();
                    var hasPoints = product.MostPoints > 0;
                    var hasSpecialOffer = product.SpecialOffers.Any();
                    var hasOffer = product.Offers.Any();

                    <a class="tms-product" href="@Url.Action("Index", new { product.UrlName })">
                        <div class="tms-product__image-wrapper">
                            <img alt="@mainImg.Alt" src="@mainImg.Src" class="tms-product__image">
                        </div>
                        <div class="tms-product__content-wrapper">
                            <div class="details">
                                <h2 class="tms-product__name">@product.SRTitle</h2>
                                @if (hasOffer)
                                {
                                    <p class="tms-product__price">$ @Html.Raw(product.BestOffer.Price)</p>
                                    <p class="tms-product__term">on a plan with a @product.BestOffer.Term-year agreement</p>
                                    <div class="tms-product__compare-option">
                                        <input type="checkbox" value="@product.Model" name="ProductCompare" id="@product.Model" />
                                        <label for="@product.Model">Select to Compare </label>
                                    </div>
                                }
                                else
                                {
                                    <p>No Offer Available</p>
                                }
                            </div>
                            <div class="tms-product__banner-wrapper">
                                @if (hasSpecialOffer)
                                {
                                    <p class="tms-product__has-offer">Special Offer</p>
                                }
                                @if (hasPoints)
                                {
                                    <p class="tms-product__points"><span>up to</span> @product.MostPoints.ToString("N0") PTS</p>
                                }
                            </div>
                        </div>
                    </a>
                }
            </div>
        </div>
    </div>
</div>