@using DayPilot.Web.Mvc;

@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/datepicker-pl.js")" type="text/javascript"></script>

@section scripts
{
    <script src="@Url.Content("~/Scripts/bootbox.min.js")" type="text/javascript"></script>

}
<style>
    #toolbar {
        margin-bottom: 10px;
    }

        #toolbar a {
            display: inline-block;
            height: 25px;
            text-decoration: none;
            padding: 5px;
            color: #666;
            border: 1px solid #aaa;
            background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e2e2e2));
            background: -webkit-linear-gradient(top, #fafafa 0%, #e2e2e2);
            background: -moz-linear-gradient(top, #fafafa 0%, #e2e2e2);
            background: -ms-linear-gradient(top, #fafafa 0%, #e2e2e2);
            background: -o-linear-gradient(top, #fafafa 0%, #e2e2e2);
            background: linear-gradient(top, #fafafa 0%, #e2e2e2);
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#fafafa", endColorStr="#e2e2e2");
        }

        #narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}
</style>
<p></p>


<div id="tabs" style="clear:both">

    <div style="float:left; width:17%" id="nav">
        @Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
       {
           ShowMonths = 1,
           CellWidth = 28,
           TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
           TimeRangeSelectedJavaScript = "DateChangeOnNavigator()"
       })
    </div>

    <div id="toolbar" style="margin-left:230px">
        <a href="#" onclick="showhide('weekly', 'daily')" id="toolbar_day">Dni</a>
        <a href="#" onclick="showhide('daily', 'weekly')" id="toolbar_week">Tygodnie</a>
    </div>

    <div id="daily" style="float:left; width:44%; margin-left:20px; display:block">
        @Html.DayPilotCalendar("dp_day", new DayPilotCalendarConfig
       {
           BackendUrl = Url.Action("EvActive", "Calendar"),
           ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Day,
           //TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
           //TimeRangeSelectedJavaScript = "create(start, end)",
           ColumnMarginRight = 100,
           TimeFormat = DayPilot.Web.Mvc.Enums.TimeFormat.Clock24Hours,
           CellDuration = 15,
           TimeHeaderCellDuration = 60,
           HourWidth = 60,
       })
    </div>

    <div id="weekly" style="float:left; width:44%; margin-left:20px; display:none">
        @Html.DayPilotCalendar("dp_week", new DayPilotCalendarConfig
       {
           BackendUrl = Url.Action("EvActive", "Calendar"),
           ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
           //TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.JavaScript,
           //TimeRangeSelectedJavaScript = "create(start, end)",
           ColumnMarginRight = 20,
           TimeFormat = DayPilot.Web.Mvc.Enums.TimeFormat.Clock24Hours,
           CellDuration = 15,
           TimeHeaderCellDuration = 60,
           HourWidth = 60,
       })
    </div>

        <div class="form-horizontal" style="float:right">
            <div class="form-group">
                @Html.Label("Data", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <input class="form-control" id="Data" type="date" onchange="DateChangedOnTextBox()"/>
                </div>
                @Html.Label("Czas", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <input class="form-control" id="Czas" type="time" />
                </div>
            </div>

            <div class="form-group">
                @Html.Label("Ilość osób", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <input class="form-control" id="Osoby" type="number" min="1" value="1"/>
                </div>
            </div>

            <div class="form-group">
                @Html.Label("Czasu startu", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <select class="form-control" id="selectingHour" onchange="czasStartu()">
                        <option value="0">Nie ma znaczenia</option>
                        <option value="1">Nie wcześniej niż</option>
                        <option value="2">Nie później niż</option>
                    </select>
                </div>
                <div class="col-md-10">
                    <input class="form-control" id="CzasStartu" type="time" style="visibility:hidden"/>
                </div>
            </div>

            <div class="col-md-offset-2 col-md-10" style="margin-left:90px">
                <button type="button" id="check" class="btn btn-default">Zasugeruj godzinę</button>
            </div>
        </div>
    <input class="form-control" id="Date1" onclick="DateChangeOnNavigator()"/>

</div>


<script type="text/javascript">
    function create(start, end)
    {
        var m = new DayPilot.Modal();
        m.closed = function ()
        {
            if (this.result == "OK")
            {
                dp_day.commandCallBack('refresh');
                dp_week.commandCallBack('refresh');
            }
            dp_day.clearSelection();
            dp_week.clearSelection();
        };
        m.showUrl('@Url.Action("Create", "Event")?start=' + start + '&end=' + end);
    }
</script>

<script type="text/javascript">
  var switcher = new DayPilot.Switcher();

  switcher.addView(dp_day);
  switcher.addView(dp_week);

  switcher.addButton("toolbar_day", dp_day);
  switcher.addButton("toolbar_week", dp_week);

  switcher.addNavigator(nv);

  switcher.show(dp_day);
</script>

<script type="text/javascript">
 function showhide(id1, id2) {
     var e = document.getElementById(id1);
     var f = document.getElementById(id2);
     e.style.display = 'none';
     f.style.display = 'block';
 }
</script>

<script type="text/javascript">
    function czasStartu()
    {
        var Czas = document.getElementById("CzasStartu");
        if(document.getElementById("selectingHour").value == 0)
        {
            Czas.style.visibility = "hidden";
        }
        else
        {
            Czas.style.visibility = "visible";
        }
    }
</script>

<script type="text/javascript">
    function DateChangeOnNavigator()
    {
        var data = document.getElementById("Data");
        data.value = nv.selectionStart.toString("yyyy-MM-dd");
    }
</script>

<script type="text/javascript">
    function DateChangedOnTextBox()
    {
        var data = document.getElementById("Data");
        nv.select(data.value);
    }
</script>

<script type="text/javascript">
    $('#check').click(function () {
        var m = new DayPilot.Modal();
        m.showUrl('@Url.Action("CalendarCheck", "Event")?Osoby=' + document.getElementById("Osoby").value + '&Data=' + document.getElementById("Data").value + '&Czas=' + document.getElementById("Czas").value + '&Wybor=' + document.getElementById("selectingHour").value);
    });
</script>