@model Portal.Models.PlanTreningowy

@{
    ViewBag.Title = "CreateDetails";
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}


<input type="hidden" value='@ViewContext.RouteData.Values["id"]' id="routeDataId" />
<input type="hidden" value='@Html.DisplayFor(modelItem => modelItem.nazwa)' id="nazwaPlanu" />
<div class="col-md-12">
    <h2>Ustal swój plan treningowy</h2>
    <div class="box box-primary">
        <div class="box-header with-border">
            <!-- THE CALENDAR -->
            <div id="calendar"></div>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Nowe ćwiczenie</h4>
                        </div>
                            <div class="modal-body">

                                <input type="hidden" class="form-control" id="eventId">
                                <dl class="dl-horizontal">

                                    <dt><label for="newEventTitle">Nazwa</label></dt>
                                    <dd><input type="text" class="form-control" id="newEventTitle"></dd>
                                    <dt><label>Kolejność</label></dt>
                                    <dd><p id="newEventStart"></p></dd>
                                    <dt><label for="newEventStart">Dodaj maszynę</label></dt>
                                    <dd>
                                        @Html.DropDownList("idMaszyna", null, string.Empty, htmlAttributes: new { @class = "form-control", @id = "selectList1" })
                                     
                                    </dd>

                                </dl>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
                                <button type="button" class="btn btn-danger" id="deleteEventInModal">Usuń</button>
                                <button type="button" class="btn btn-primary" id="saveEventInModal">Zapisz</button>
                                <button type="button" class="btn btn-primary" id="addNewEventInModal">Dodaj</button>
                            </div>
                      
                    </div>
                </div>
            </div>
        </div><!-- /.box-body -->
    </div><!-- /. box -->
</div><!-- /.col -->
<!-- jQuery 2.1.4 -->
<script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>


<!-- Page specific script -->
<!-- Page specific script -->
<!-- Page specific script -->
<script>
    $(function () {

        /* initialize the external events
         -----------------------------------------------------------------*/
        function ini_events(ele) {
            ele.each(function () {

                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                var eventObject = {
                    title: $.trim($(this).text()) // use the element's text as the event title
                };

                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject);

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 1070,
                    revert: true, // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                });

            });
        }
        ini_events($('#external-events div.external-event'));

        /* initialize the calendar
         -----------------------------------------------------------------*/
        //Date for the calendar events (dummy data)
        var date = new Date();
        var d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();
        var event_date;
        var idpw = [];
        $('#calendar').fullCalendar({
            lang: 'pl',
            defaultView: 'agendaWeek',
            slotDuration: '01:00:00',
            allDaySlot: false,
            defaultTimedEventDuration: '01:00:00',
            height: 245,
            minTime: '01:00:00',
            maxTime: '11:00:00',
            header: false,
            columnFormat: 'dddd',
            timeFormat: 'h',
            //Random default events
            events: function (start, end, timezone, callback) {

                var dataRow = {
                    'idPlan': $("#routeDataId").val()
                }
                $.ajax({
                    type: 'POST',
                    url: "/Calendar2/CalendarData",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(dataRow),
                    success: function (doc) {
                        debugger;
                        callback(doc);
                    }

               //     processData: false,
                 //   async: false
                });
            },
            dayClick: function (date, jsEvent, view) {
                $("#newEventTitle").val('');
              

                $('#saveEventInModal').hide();
                $('#deleteEventInModal').hide();
                $('#addNewEventInModal').show();


                $('#myModal').modal('show');
                $("#newEventStart").text(date.format("HH"));

                $("#addNewEventInModal").click(function () {
                    if ($("#newEventStart").text() == date.format("HH")) {
                        var event = new Object();
                        event.title = $("#newEventTitle").val();
                        event.start = date.format("YYYY-MM-DD HH:mm:ss");
                        event.backgroundColor = "#00a65a"; //Success (green)
                        event.borderColor = "#00a65a"; //Success (green)
                        event.durationEditable = false;
                        //if($("#selectList2").is)
                        $('#calendar').fullCalendar('renderEvent', event, true);
                        $('#myModal').modal('hide');
                        DodajCwiczenie(event.title, $("#selectList1").val(), $("#routeDataId").val(), event.start);
                    }

                });

                $("#deleteEventInModal").click(function () {
                    $('#calendar').fullCalendar('removeEvents', $("#eventId").val());
                    //alert("Usunieto " + $("#eventId").val() + " ");
                    debugger;
                    DeleteEvent($("#eventId").val());
                    $('#myModal').modal('hide');
                    }
                );

                $("#saveEventInModal").click(function () {
                    var array = $('#calendar').fullCalendar('clientEvents', $("#eventId").val());
                    var event = array[0];
                    event.title = $("#newEventTitle").val();
                    event.start = event_date;
                    AktualizujCwiczenie(event.title, $("#selectList1").val(), event.id)
                    $('#calendar').fullCalendar('updateEvent', event);
                    $('#myModal').modal('hide');
                });

            },


            eventClick: function (event, element) {
                $("#newEventTitle").val(event.title);
                $("#myModalLabel").text('Edytuj');

                event_date = event.start;
                $('#addNewEventInModal').hide();
                $('#saveEventInModal').show();
                $('#deleteEventInModal').show();

                $("#newEventTitle").val(event.title);
                $("#newEventStart").text(moment(event.start._d).utc().format("HH:mm:ss"));
                $("#eventId").val(event._id);

                $('#myModal').modal('show');
            },


            editable: true,
            eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
               // alert(event.id);
                var dataRow = {
                    'id': event.id,
                    'startDate': event.start
                }
                $.ajax({
                    type: 'POST',
                    url: "/Calendar2/Edit",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(dataRow)
                });

            },
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function (date, allDay) { // this function is called when something is dropped

                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');

                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);

                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                copiedEventObject.backgroundColor = $(this).css("background-color");
                copiedEventObject.borderColor = $(this).css("border-color");

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }


            }
        });
        function refresh() {
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('refetchEvents');
        }


        function DeleteEvent(EventID) {
            var dataRow = {
                'id': EventID,
            }
            debugger
            $.ajax({
                type: 'POST',
                url: "/Calendar2/Delete",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(dataRow)
            });
        }

        function DodajCwiczenie(EventName, Maszyna, PlanTreningowy, EventStart) {
            var dataRow = {
                'Nazwa': EventName,
                'idMaszyny': Maszyna
            }
            debugger
            $.ajax({
                type: 'POST',
                url: "/Calendar2/CreateCwiczenie",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(dataRow),
                success: function (response) {
                    if (response != null && response.success) {   
                        DodajCwiczenieDoPlanuTreningowego(response.cwiczenieId, PlanTreningowy, EventStart);
                        refresh();
                    } else {
                        alert(response.success);
                    }
                },
                error: function (response) {
                    alert("error!");
                }
            });
        }

        function AktualizujCwiczenie(EventName, Maszyna, Cwiczenie) {
            var dataRow = {
                'Nazwa': EventName,
                'idMaszyny': Maszyna,
                'idCwiczenie': Cwiczenie,
                'id': id
            }
            debugger;
            $.ajax({
                type: 'POST',
                url: "/Calendar2/AktualizujCwiczenie",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(dataRow)
            });
        }

        function DodajCwiczenieDoPlanuTreningowego(cwiczenieId, PlanTreningowy, EventStart) {
            var dataRow = {
                'idCwicz': cwiczenieId,
                'idPlan': PlanTreningowy,
                'startDate' : EventStart
            }
            $.ajax({
                type: 'POST',
                url: "/Calendar2/DodajCwiczenieDoPlanuTreningowego",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(dataRow)
            });
        }

        /* ADDING EVENTS */
        var currColor = "#3c8dbc"; //Red by default
        //Color chooser button
        var colorChooser = $("#color-chooser-btn");
        $("#color-chooser > li > a").click(function (e) {
            e.preventDefault();
            //Save color
            currColor = $(this).css("color");
            //Add color effect to button
            $('#add-new-event').css({ "background-color": currColor, "border-color": currColor });
        });
        $("#add-new-event").click(function (e) {
            e.preventDefault();
            //Get value and make sure it is not null
            var val = $("#new-event").val();
            if (val.length == 0) {
                return;
            }

            //Create events
            var event = $("<div />");
            event.css({ "background-color": currColor, "border-color": currColor, "color": "#fff" }).addClass("external-event");
            event.html(val);
            $('#external-events').prepend(event);

            //Add draggable funtionality
            ini_events(event);

            //Remove event from text input
            $("#new-event").val("");
        });
    });</script>