@page
@using Props.Services.Content
@model SearchModel
@inject IContentManager<SearchModel> ContentManager

@{
    ViewData["Title"] = "Search";
    ViewData["Specific"] = "Search";
}

<div class="mt-4 mb-3">
    <div class="less-concise mx-auto">
        <div class="input-group">
            <input type="text" class="form-control border-primary" placeholder="What are you looking for?"
                aria-label="Search" aria-describedby="search-btn" id="search-bar" value="@Model.SearchQuery">
            <button class="btn btn-outline-secondary" type="button" id="configuration-toggle" data-bs-toggle="collapse"
                data-bs-target="#configuration"><i class="bi bi-sliders"></i></button>
            <button class="btn btn-primary" type="button" id="search-btn">Search</button>
        </div>
    </div>
</div>

<div class="collapse tear" id="configuration" x-data="configuration">
    <div class="p-3">
        <div class="container">
            <div class="d-flex">
                <h1 class="my-2 display-2 me-auto">Configuration</h1>
                <button class="btn align-self-start" type="button" id="configuration-close" data-bs-toggle="collapse"
                    data-bs-target="#configuration"><i class="bi bi-x-lg"></i></button>
            </div>
            <div class="row justify-content-md-center">
                <section class="col-lg px-4">
                    <h3>Price</h3>
                    <div class="mb-3">
                        <label for="max-price" class="form-label">Maximum Price</label>
                        <div class="input-group">
                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="checkbox" id="max-price-enabled"
                                    x-model="maxPriceEnabled">
                            </div>
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control" min="0" id="max-price" x-model="maxPrice">
                            <span class="input-group-text">.00</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="min-price" class="form-label">Minimum Price</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control" min="0" id="min-price" x-model="minPrice">
                            <span class="input-group-text">.00</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="max-shipping" class="form-label">Maximum Shipping Fee</label>
                        <div class="input-group">
                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="checkbox" id="max-shipping-enabled">
                            </div>
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control" min="0" id="max-shipping" x-model="maxShipping">
                            <span class="input-group-text">.00</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="keep-unknown-shipping"
                                x-model="keepUnknownShipping">
                            <label class="form-check-label" for="keep-unknown-shipping">Keep Unknown Shipping</label>
                        </div>
                    </div>
                </section>
                <section class="col-lg px-4">
                    <h3>Metrics</h3>
                    <div class="mb-3">
                        <label for="min-purchases" class="form-label">Minimum Purchases</label>
                        <div class="input-group">
                            <input type="number" class="form-control" min="0" id="min-purchases" x-model="minPurchases">
                            <span class="input-group-text">Purchases</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="keep-unknown-purchases"
                                x-model="keepUnknownPurchases">
                            <label class="form-check-label" for="keep-unknown-purchases">Keep Unknown Purchases</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="min-reviews" class="form-label">Minimum Reviews</label>
                        <div class="input-group">
                            <input type="number" class="form-control" min="0" id="min-reviews" x-model="minReviews">
                            <span class="input-group-text">Reviews</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="keep-unknown-reviews"
                                x-model="keepUnknownReviews">
                            <label class="form-check-label" for="keep-unknown-reviews">Keep Unknown Number of
                                Reviews</label>
                        </div>
                    </div>
                    <div class="mb-1">
                        <label for="min-rating" class="form-label">Minimum Rating</label>
                        <input type="range" class="form-range" id="min-rating" min="0" max="100" step="1"
                            x-model="minRating">
                        <div id="min-rating-display" class="form-text">Minimum rating: <b x-text="minRating"></b>%</div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="keep-unrated" x-model="keepUnrated">
                            <label class="form-check-label" for="keep-unrated">Keep Unrated Items</label>
                        </div>
                    </div>
                </section>
                <section class="col-lg px-4">
                    <h3>Shops Enabled</h3>
                    <div class="mb-3 px-3" id="shop-checkboxes">
                        <template x-for="shop in Object.keys(shops)">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" :id="`${shop}-enabled`"
                                    x-model="shops[shop]">
                                <label class="form-check-label" :for="`${shop}-enabled`"><span
                                        x-text="shop"></span></label>
                            </div>
                        </template>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

<div id="content-pages" class="multipage mt-3 invisible">
    <ul class="nav nav-pills selectors">
        <li class="nav-item" role="presentation">
            <button type="button" data-bs-toggle="pill" data-bs-target="#quick-picks-slide"><i
                    class="bi bi-stopwatch"></i></button>
        </li>
        <li class="nav-item" role="presentation">
            <button type="button" data-bs-toggle="pill" data-bs-target="#results-slide"><i
                    class="bi bi-view-list"></i></button>
        </li>
        <li class="nav-item" role="presentation">
            <button type="button" data-bs-toggle="pill" data-bs-target="#info-slide"><i
                    class="bi bi-info-lg"></i></button>
        </li>
    </ul>
    <div class="multipage-slides tab-content">
        <div class="multipage-slide tab-pane fade" id="quick-picks-slide">
            <div class="multipage-title">
                <h1 class="display-2"><i class="bi bi-stopwatch"></i> Quick Picks</h1>
                @if (Model.SearchResults != null)
                {
                    <p>@ContentManager.Json.quickPicks.searched</p>
                }
                else
                {
                    <p>@ContentManager.Json.quickPicks.prompt</p>
                }
                <hr class="less-concise">
            </div>
            <div class="multipage-content">
                @if (Model.SearchResults != null)
                {
                    @if (Model.BestRatingPriceRatio != null)
                    {
                        <p>We found this product to have the best rating to price ratio.</p>
                    }

                    @if (Model.TopRated != null)
                    {
                        <p>This listing was the one that had the highest rating.</p>
                    }

                    @if (Model.MostPurchases != null)
                    {
                        <p>This listing has the most purchases.</p>
                    }

                    @if (Model.MostReviews != null)
                    {
                        <p>This listing had the most reviews.</p>
                    }

                    @if (Model.BestPrice != null)
                    {
                        <p>Looking for the lowest price? Well here it is.</p>
                    }

                    @* TODO: Add display for top results. *@
                }
                else
                {
                    <div class="text-center less-concise text-muted flex-grow-1 justify-content-center d-flex flex-column">
                        <h2>@ContentManager.Json.notSearched</h2>
                    </div>
                }
            </div>
        </div>
        <div class="multipage-slide tab-pane fade" id="results-slide" x-data>
            <div class="multipage-title">
                <h2><i class="bi bi-view-list"></i> Results</h2>
                @if (Model.SearchResults != null)
                {
                    <p>@ContentManager.Json.results.searched</p>
                }
                else
                {
                    <p>@ContentManager.Json.results.prompt</p>
                }
                <hr class="less-concise">
            </div>
            <div class="multipage-content">
                @if (Model.SearchResults != null)
                {
                    @* TODO: Display results with UI for sorting and changing views. *@
                }
                else
                {
                    <div class="text-center less-concise text-muted flex-grow-1 justify-content-center d-flex flex-column">
                        <h2>@ContentManager.Json.notSearched</h2>
                    </div>
                }
            </div>
        </div>
        <div class="multipage-slide tab-pane fade" id="info-slide">
            <div class="multipage-content">
                <div class="less-concise text-muted flex-grow-1 justify-content-center d-flex flex-column">
                    <h1 class="display-3"><i class="bi bi-info-circle"></i> Get Started!</h1>
                    <ol>
                        @foreach (string instruction in ContentManager.Json.instructions)
                        {
                            <li>@instruction</li>
                        }
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>