using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcExplorer.Controllers
{
    public partial class InputDateController : Controller
    {
        public ActionResult Ranges()
        {
            return View();
        }
    }
}

@{
    var today = DateTime.Now.Date;
    var rangeEnd = DateTime.Now.Date.AddDays(3);
}

@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(inputDate) {
            var result = document.getElementById('result');
            range = (inputDate.rangeEnd - inputDate.value) / (1000 * 3600 * 24) + 1;
            result.innerHTML = range;
        }

        function onLoaded() {
            let inputDate = wijmo.Control.getControl('#idcInputDate');

            showRangeEnd(inputDate);

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

        function rangeMinChanged(sender, args) {
            var inputDate = wijmo.Control.getControl('#idcInputDate');
            inputDate.rangeMin = sender.value;
        }

        function rangeMaxChanged(sender, args) {
            var inputDate = wijmo.Control.getControl('#idcInputDate');
            inputDate.rangeMax = sender.value;
        }

        var rangeEndChanged = function (sender, args) {
            showRangeEnd(sender);
        }

        var rangeChanged = function (sender, args) {
            showRange(sender);
        }
    </script>
}

<b style="margin: 10px 5px 10px 0;">RangeEnd: <span id="rangeEnd"></span></b>
<br />
<b style="margin: 10px 5px 10px 0;">@Html.Raw(Resources.InputDate.Range_Text2) <span id="result"></span></b>

<div style="margin-top:5px;">
    @(Html.C1().InputDate().Id("idcInputDate")
        .SelectionMode(DateSelectionMode.Range)
        .Value(today)
        .RangeEnd(today.AddDays(5))
        .OnClientRangeEndChanged("rangeEndChanged")
        .OnClientRangeChanged("rangeChanged")
    )
</div>

<br />

<label style="font-weight:normal;">@Html.Raw(Resources.InputDate.Range_Text0)</label>
@(Html.C1().InputNumber().Min(0).Step(1).Value(0).Format("n0").OnClientValueChanged("rangeMinChanged"))

<label style="font-weight: normal;margin-top: 1em;">@Html.Raw(Resources.InputDate.Range_Text1)</label>
@(Html.C1().InputNumber().Min(0).Step(1).Value(0).Format("n0").OnClientValueChanged("rangeMaxChanged"))

<hr />

@section Description{
    <div>@Html.Raw(Resources.InputDate.Range_Text3)</div>
    <ul>
        <li>@Html.Raw(Resources.InputDate.Range_Text4)</li>
        <li>@Html.Raw(Resources.InputDate.Range_Text5)</li>
        <li>@Html.Raw(Resources.InputDate.Range_Text6)</li>
    </ul>
}