@page
@using Northwind.Web.Pages
@using Packt.Shared
@model FunctionsModel
@{
    string title = "Functions";
    ViewData["Title"] = $"Northwind B2B - {title}";

    string collapsedTimesTable = Model.TimesTableNumberInput.HasValue ? string.Empty : "collapse";
    string collapsedCalculateTax = Model.Amount.HasValue ? string.Empty : "collapse";
    string collapsedFactorial = Model.FactorialNumber.HasValue ? string.Empty : "collapse";
    string collapsedFibonacci = Model.FibonacciNumber.HasValue ? string.Empty : "collapse";
}
<div class="row">
    <h1 class="display-2">@title</h1>
    <div>
        <h2>Exercise 14.3 – Practice building web pages for console apps</h2>
        <div>Provide a web user interface to output times tables, calculate tax, and generate factorials and the Fibonacci sequence.</div>
    </div>
    <div class="accordion" id="accordionFunctions">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headerTimesTable">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTimesTable" aria-expanded="true" aria-controls="collapseTimesTable">
                    Times Table
                </button>
            </h2>
            <div id="collapseTimesTable" class="accordion-collapse @collapsedTimesTable" aria-labelledby="headingTimesTable" data-bs-parent="#accordionTimesTable">
                <div class="accordion-body">
                    <form>
                        <div class="mb-3">
                            <label for="timesTableNumberInput" class="form-label">Number</label>
                            <input type="number" class="form-control" id="timesTableNumberInput" name="timesTableNumberInput" aria-describedby="timesTableNumberHelp">
                            <div id="timesTableNumberHelp" class="form-text">Enter an integer between 1 and 100.</div>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    @if (Model.TimesTableNumberInput.HasValue)
                    {
                        <div class="card" style="width: 18rem;">
                            <div class="card-body">
                                <h5 class="card-title">@Model.TimesTableNumberInput times table</h5>
                                @for (int i = 1; i <= 12; i++)
                                {
                                    <div>
                                        @i x @Model.TimesTableNumberInput = @(i * Model.TimesTableNumberInput)
                                    </div>
                                }
                            </div>

                        </div>
                    }
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <h2 class="accordion-header" id="headerCalculateTax">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCalculateTax" aria-expanded="true" aria-controls="collapseCalculateTax">
                    Calculate Tax
                </button>
            </h2>
            <div id="collapseCalculateTax" class="accordion-collapse @collapsedCalculateTax" aria-labelledby="headingCalculateTax" data-bs-parent="#accordionCalculateTax">
                <div class="accordion-body">
                    <form>
                        <div class="mb-3">
                            <label for="calculateTaxAmountInput" class="form-label">Amount</label>
                            <input type="number" class="form-control" id="calculateTaxAmountInput" name="calculateTaxAmountInput" aria-describedby="calculateTaxAmountInputHelp">
                            <div id="calculateTaxAmountInputHelp" class="form-text">Enter a monetary value.</div>
                        </div>
                        <div class="mb-3">
                            <label for="calculateTaxRegionCodeInput" class="form-label">Region</label>
                            <select class="form-control" id="calculateTaxRegionCodeInput" name="calculateTaxRegionCodeInput" aria-describedby="calculateTaxRegionCodeInputHelp">
                                <optgroup label="Europe">
                                    <option value="DK">Denmark</option>
                                    <option value="FR">France</option>
                                    <option value="HU">Hungary</option>
                                    <option value="NO">Norway</option>
                                    <option value="CH">Switzerland</option>
                                    <option value="GB">United Kingdom</option>
                                </optgroup>
                                <optgroup label="United States">
                                    <option value="AK">Alaska</option>
                                    <option value="OR">Oregon</option>
                                    <option value="MT">Montana</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="ME">Maine</option>
                                    <option value="VA">Virginia</option>
                                    <option value="CA">California</option>
                                    <option value="OT">Other</option>
                                </optgroup>
                            </select>
                            <div id="calculateTaxRegionCodeInputHelp" class="form-text">Select a European or US state.</div>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    @if (Model.Amount.HasValue)
                    {
                        <div class="card" style="width: 18rem;">
                            <div class="card-body">
                                <h5 class="card-title">You must pay @Model.TaxToPay in tax.</h5>
                            </div>

                        </div>
                    }
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <h2 class="accordion-header" id="headerFactorials">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFactorials" aria-expanded="true" aria-controls="collapseFactorials">
                    Factorials
                </button>
            </h2>
            <div id="collapseFactorials" class="accordion-collapse @collapsedFactorial" aria-labelledby="headingFactorials" data-bs-parent="#accordionFactorials">
                <div class="accordion-body">
                    <div>
                        <form>
                            <div class="mb-3">
                                <label for="factorialNumberInput" class="form-label">Number</label>
                                <input type="number" class="form-control" id="factorialNumberInput" name="factorialNumberInput" aria-describedby="factorialNumberHelp">
                                <div id="factorialNumberHelp" class="form-text">Enter an integer between 1 and 12.</div>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                        @if (Model.FactorialNumber.HasValue)
                        {
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                    <h5 class="card-title">@(Model.FactorialNumber)!</h5>
                                    <div>
                                        @(Model.FactorialNumber)! = @(Model.FactorialResult is null ? "null" : Model.FactorialResult.Value.ToString("N0"))
                                    </div>
                                </div>

                            </div>
                        }
                        @if (Model.FactorialException is not null)
                        {
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                    <h5 class="card-title">Exception</h5>
                                    <div>
                                        @Model.FactorialException.Message
                                    </div>
                                </div>

                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <h2 class="accordion-header" id="headerFibonacciSequence">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFibonacciSequence" aria-expanded="true" aria-controls="collapseFibonacciSequence">
                    Fibonacci sequence
                </button>
            </h2>
            <div id="collapseFibonacciSequence" class="accordion-collapse @collapsedFibonacci" aria-labelledby="headingFibonacciSequence" data-bs-parent="#accordionCustomers">
                <div class="accordion-body">
                    <div>
                        <form>
                            <div class="mb-3">
                                <label for="fibonacciNumberInput" class="form-label">Term</label>
                                <input type="number" class="form-control" id="fibonacciNumberInput" name="fibonacciNumberInput" aria-describedby="fibonacciNumberHelp">
                                <div id="fibonacciNumberHelp" class="form-text">Enter an integer between 1 and 40.</div>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                        @if (Model.FibonacciNumber.HasValue)
                        {
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                    <h5 class="card-title">Fibonacci term @Model.FibonacciNumber</h5>
                                    <div>
                                        Term @Model.FibonacciNumber of the fibonacci sequence = @(Model.FibonacciResult is null ? "null" : Model.FibonacciResult.Value.ToString("N0"))
                                    </div>
                                </div>

                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>