using Microsoft.AspNetCore.Mvc;

namespace MvcExplorer.Controllers
{
    public partial class CalendarController : Controller
    {
        public ActionResult Ranges()
        {
            ViewBag.DemoSettings = true;
            return View();
        }
    }
}

@{
    var today = DateTime.Now.Date;
    var minDate = new DateTime(today.Year, 1, 1);
    var maxDate = new DateTime(today.Year, 12, 31);
}


<div>
    <c1-calendar id="DemoControl" value="@today" min="@minDate" max="@maxDate" width="300px" range-end="@today" selection-mode="Range"
                 range-end-changed="onClientRangeEndChanged" range-changed="onClientRangeChanged">
    </c1-calendar>
</div>
<p>
    @Html.Raw(CalendarRes.Ranges_RangeEnd): <b><span id="rangeEnd"></span></b>
    <br />
    @Html.Raw(CalendarRes.Ranges_CurrentSelection) <b><span id="dateRange"></span></b>
</p>

@section Settings{
    <div style="padding: 4px 8px">

        <span style="display:inline-block; width: 100px">@Html.Raw(CalendarRes.Ranges_RangeMin)</></span>

        <c1-input-number width="150" min="0" max="10" step="1" value="0" format="n0" value-changed="rangeMinChanged">
        </c1-input-number>

    </div>
    <div style="padding: 4px 8px">

        <span style="display:inline-block; width: 100px">@Html.Raw(CalendarRes.Ranges_RangeMax)</></span>

        <c1-input-number width="150" min="0" max="10" step="1" value="0" format="n0" value-changed="rangeMaxChanged">
        </c1-input-number>

    </div>

}

@section Scripts{
    <script>
        document.readyState === 'complete' ? onLoaded() : window.onload = onLoaded;

        function showRangeEnd(calendar) {
            let rangEndSpan = document.querySelector('#rangeEnd');
            rangEndSpan.textContent = wijmo.format('{rangeEnd:d}', calendar);
        }

        function showRange(calendar) {
            let dateRangeSpan = document.querySelector('#dateRange');
            dateRangeSpan.textContent = wijmo.format('from {value:d} to {rangeEnd:d}', calendar);
        }

        function onLoaded() {
            let calendar = wijmo.Control.getControl('#DemoControl');

            showRangeEnd(calendar);

            if (calendar.rangeEnd) {
                showRange(calendar);
            }
        }

        function onClientRangeEndChanged(sender, e) {
            showRangeEnd(sender);
        }

        function onClientRangeChanged(sender, e) {
            showRange(sender);
        }

        function rangeMinChanged(sender, args) {

            var calenderControl = wijmo.Control.getControl('#DemoControl');
            if (calenderControl != null) {
                calenderControl.rangeMin = sender.value;
                calenderControl.invalidate();
            }
        }

        function rangeMaxChanged(sender, args) {

            var calenderControl = wijmo.Control.getControl('#DemoControl');
            if (calenderControl != null) {
                calenderControl.rangeMax = sender.value;
                calenderControl.invalidate();
            }
        }
    </script>
}

@section Description{
    <p>@Html.Raw(CalendarRes.Ranges_Description)</p>
    <p>@Html.Raw(CalendarRes.Ranges_Description1)</p>
    <p>@Html.Raw(CalendarRes.Ranges_Description2)</p>

}