<?xml version="1.0" encoding="UTF-8"?>
<!--
 * Name     :   Raj Janorkar
 * Date     :   28 Dec 15
 * Desc     :   This is Calendar Internal Gadget
-->
<Module>
    <ModulePrefs title="Calendar" title_url="https://igoogleportal.com"
                 description="With this online calendar, it's easy to keep track of life's important events all in one place."
                 author="iGoogle Portal"
                 author_email="raj.janorkar+gadget@gmail.com"
                 screenshot="https://igtab.com/gadgets/calendar/image.png"
                 thumbnail="https://igtab.com/gadgets/calendar/image.png"
                 category="tools" height="120">
        <Require feature="dynamic-height"/>
        <Require feature="views"/>
    </ModulePrefs>
    <!-- Font color's -->
    <UserPref name="ftcolor" display_name="Events font Color" datatype="enum" default_value="#333333">
        <EnumValue value="#333333" display_value="Black"/>
        <EnumValue value="#FFFF00" display_value="Yellow"/>
        <EnumValue value="#0000FF" display_value="Blue"/>
        <EnumValue value="#FF0000" display_value="Red"/>
        <EnumValue value="#00FF00" display_value="Green"/>
        <EnumValue value="#FFA500" display_value="Orange"/>
        <EnumValue value="#A52A2A" display_value="Brown"/>
        <EnumValue value="#800080" display_value="Purple"/>
    </UserPref>
    <!-- Font size -->
    <UserPref name="ftsize" display_name="Events font Size" datatype="enum" default_value="15px">
        <EnumValue value="13px" display_value="13px"/>
        <EnumValue value="15px" display_value="15px"/>
        <EnumValue value="17px" display_value="17px"/>
        <EnumValue value="19px" display_value="19px"/>
        <EnumValue value="21px" display_value="21px"/>
    </UserPref>
    <Content type="html" view="default, home, profile, canvas">
    <![CDATA[
    <head>
        <link rel="stylesheet" type="text/css" href="https://igtab.com/gadgets/css/common.css" />
        <link rel="stylesheet" type="text/css" href="https://igtab.com/gadgets/libs/font-awesome-4.7.0/css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" href="https://igtab.com/gadgets/libs/air-datepicker-2.2.3/css/datepicker.min.css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://igtab.com/gadgets/libs/air-datepicker-2.2.3/js/datepicker.min.js"></script>
        <script src="https://igtab.com/gadgets/libs/air-datepicker-2.2.3/js/datepicker.en.js"></script>
        <script src="https://igtab.com/gadgets/js/common.js"></script>

        <style type="text/css">
            body, div, p, td, select, input {
                font-family: 'Avenir', Helvetica, Arial, sans-serif;
                font-size: 16px;
                color: #444444;
            }

            .event_list {
                margin-top: 15px;
                border-bottom: 1px solid #ebebeb;
            }

            .event-display:hover {
                color: #5cb85c;
            }

            .event-delete:hover {
                color: #ca3523;
            }

            .title_link {
                text-decoration: none;
                color: #333333;
            }

            #ev_list_module, #addb_module {
                margin-left: 5px;
                margin-top: 15px;
            }

            #error_msg {
                font-size: 14px;
                color: #A8A8A8;
                padding-left: 2px;
                margin-top: 10px;
            }

            input[type="text"] {
                display: block;
                margin: 0;
                width: 100%;
                font-size: 16px;
                appearance: none;
                box-shadow: none;
                border-radius: 0;
            }

            input[type="text"]:focus {
                outline: none;
            }

            .style-1 input[type="text"] {
                padding: 5px;
                border: solid 1px #dcdcdc;
                transition: box-shadow 0.3s, border 0.3s;
                margin-bottom: 10px;
            }

            .style-1 input[type="text"]:focus,
            .style-1 input[type="text"].focus {
                border: solid 1px #707070;
                box-shadow: 0 0 5px 1px #969696;
            }

            #custom-cells .datepicker {
                width: 100%
            }

            .list-unstyled {
                padding: 0;
                margin: 0;
                list-style: none;
            }
        </style>

        <script type="text/javascript">
            var prefs = new gadgets.Prefs();
            var ftcolor = prefs.getString("ftcolor");
            var ftsize = prefs.getString("ftsize");

            var _currentDate = new Date();
            var _events = [];

            // Get calendar events from DataBase for Month
            getCurrentMonthEvents = function () {
                var month = _currentDate.getMonth() + 1;
                var year = _currentDate.getFullYear();

                // Get the logged in user calendar events
                $.ajax({
                    url: __APP_API_URL + 'calendars',
                    data: {month: month, year: year},
                    type: "GET",
                    dataType: 'json',
                    cache: false,
                    async: true
                })
                    .done(function (response) {
                        _events = response;

                        // Display calendar
                        displayCalendar();
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        // something went wrong may be user not logged in
                        commonFailResponseMessage(jqXHR, '#error_msg');
                        // Display calendar
                        displayCalendar();
                    });
            }

            // Display month calendar
            displayCalendar = function () {
                var l_s = '<h4 id="custom-cells"></h4><div id="custom-cells-events"></div>';

                $("#ev_module").empty().append(l_s);
                $("#ev_list_module").empty();
                displayAddEventButton();

                var $picker = $('#custom-cells');
                var $content = $('#custom-cells-events');
                $picker.datepicker({
                    language: 'en',
                    dateFormat: 'M d, yyyy',
                    onRenderCell: function (date, cellType) {
                        var currentDay = date.getDate();
                        var currentMonth = date.getMonth() + 1;
                        var currentYear = date.getFullYear();

                        if (cellType == 'day') {
                            var dateExist = false;
                            $.each(_events, function (i, event) {
                                var start_date = new Date(event.start_time);
                                var day = start_date.getDate();
                                var month = start_date.getMonth() + 1;
                                var year = start_date.getFullYear();

                                if (day == currentDay && month == currentMonth && year == currentYear) {
                                    dateExist = true;
                                    return false;
                                }
                            });

                            if (dateExist) {
                                return {
                                    html: '<span style="border: 1px solid #FF9A19; border-radius:50%; padding:5px;"> ' + currentDay + '</span>'
                                }
                            }
                        }
                    },
                    onSelect: function onSelect(fd, date) {
                        var l_s = '';
                        if (date) {
                            _currentDate = date;
                            var currentDay = date.getDate();
                            var currentMonth = date.getMonth() + 1;
                            var currentYear = date.getFullYear();

                            $.each(_events, function (i, event) {
                                if (event.start_time) {
                                    var start_date = new Date(event.start_time);
                                    var day = start_date.getDate();
                                    var month = start_date.getMonth() + 1;
                                    var year = start_date.getFullYear();

                                    if (day == currentDay && month == currentMonth && year == currentYear) {
                                        l_s += '<div class="event_list" style="color:' + ftcolor + '; font-size:' + ftsize + ';">'
                                            + '<i class="fa fa-clock-o" aria-hidden="true"></i> ' + event.start_time_display
                                            + '<p>'
                                            + '<div style="float: right">'
                                            + '<a href="#" title="Event Details" onclick="displayDetailedEvent(' + i + ');return false;">'
                                            + '<i class="fa fa-eye color-gray event-display" aria-hidden="true"></i>'
                                            + '</a>&nbsp;&nbsp;&nbsp;'
                                            + '<a href="#" title="Update Event" onclick="displayUpdateEventForm(' + i + ');return false;">'
                                            + '<i class="fa fa-pencil color-gray event-display" aria-hidden="true"></i>'
                                            + '</a>&nbsp;&nbsp;&nbsp;'
                                            + '<a href="#" title="Delete Event" onclick="deleteEvent(' + i + ');return false;">'
                                            + '<i class="fa fa-trash-o color-gray event-delete" aria-hidden="true"></i>'
                                            + '</a>'
                                            + '</div>'
                                            + event.title
                                            + '</p>'
                                            + '</div>';
                                    }
                                }
                            });
                        }

                        $content.empty().append(l_s);

                        // Adjust height of the gadget
                        _IG_AdjustIFrameHeight();
                    },

                    onChangeMonth: function (month, year) {
                        _currentDate.setMonth(month);
                        _currentDate.setFullYear(year);
                        // if month changed Get the logged in user calendar events
                        getCurrentMonthEvents();
                    }

                })


                $picker.data('datepicker').selectDate(_currentDate)

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();
            }

            // Add event button
            displayAddEventButton = function () {
                var l_s = '<a href="#" class="button default" onclick="displayAddEventForm();return false;"><i class="fa fa-calendar-plus-o color-green" aria-hidden="true"></i>&nbsp;&nbsp;Add an Event</a>';
                $("#addb_module").empty().append(l_s);

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();
            }

            // display add event form
            displayAddEventForm = function (obj) {
                var l_s = "<h4> Add an Event </h4>"
                    + "<form name='f_module' action='' onsubmit='addEvent(this);return false;'>"
                    + "<table cellpadding='1' cellspacing='0'>"
                    + "<tr><td>Title</td><td class='style-1'><input type='text' name='title' size='35'/></td></tr>"
                    + "<tr><td>Description</td><td class='style-1'><input type='text' name='description' size='35'/></td></tr>"
                    + "<tr><td>Location</td><td class='style-1'><input type='text' name='location' size='35'/></td></tr>"

                    + "<tr><td>Start Time</td><td class='style-1'><input id='start_time' name='start_time' type='text' data-language='en'/></td></tr>"
                    + "<tr><td>End Time</td><td class='style-1'><input id='end_time' name='end_time' type='text' data-language='en' /></td></tr>"

                    + "<tr><td style='padding-top:15px;' colspan='2'></td></tr>"
                    + "<tr><td></td><td class='pull-right'>"
                    + "<input class='button default' type='button' onclick='displayCalendar();return false;' value='Cancel' />"
                    + " <input class='button green' type='submit' value='Add event' />"
                    + "</td></tr></table></form>";

                $("#ev_module").empty();
                $("#ev_list_module").empty();
                $("#addb_module").empty().append(l_s);

                $("#start_time, #end_time").datepicker({
                    timepicker: true,
                    startDate: _currentDate,
                    dateFormat: 'M d, yyyy',
                    timeFormat: 'hh:ii aa',
                    todayButton: new Date(),
                    position: "right left",
                    offset: 5
                });

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();
            }

            // display update event form
            displayUpdateEventForm = function (i) {
                _currentDate = new Date(_events[i].start_time);
                var l_s = "<h4> Update an Event </h4>"
                    + "<form name='f_module' action='' onsubmit='updateEvent(this);return false;'>"
                    + "<table cellpadding='1' cellspacing='0'>"
                    + "<tr><td>Title</td><td class='style-1'><input type='text' name='title' size='35' value='" + (_events[i].title ? _events[i].title : '') + "'/></td></tr>"
                    + "<tr><td>Description</td><td class='style-1'><input type='text' name='description' size='35' value='" + (_events[i].description ? _events[i].description : '') + "'/></td></tr>"
                    + "<tr><td>Location</td><td class='style-1'><input type='text' name='location' size='35' value='" + (_events[i].location ? _events[i].location : '') + "' /></td></tr>"

                    + "<tr><td>Start Time</td><td class='style-1'><input id='start_time' name='start_time' type='text' data-language='en' value='" + (_events[i].start_time_display ? _events[i].start_time_display : '') + "'/></td></tr>"
                    + "<tr><td>End Time</td><td class='style-1'><input id='end_time' name='end_time' type='text' data-language='en' value='" + (_events[i].end_time_display ? _events[i].end_time_display : '') + "'/></td></tr>"

                    + "<tr><td style='padding-top:15px;' colspan='2'></td></tr>"
                    + "<tr><td></td><td class='pull-right'>"
                    + "<input name='id' type='hidden' value='" + _events[i].id + "' />"
                    + "<input name='arrIndex' type='hidden' value='" + i + "' />"
                    + "<input class='button default' type='button' onclick='displayCalendar();return false;' value='Cancel' />"
                    + " <input class='button green' type='submit' value='Save' />"
                    + "</td></tr></table></form>";

                $("#ev_module").empty();
                $("#ev_list_module").empty();
                $("#addb_module").empty().append(l_s);

                $("#start_time, #end_time").datepicker({
                    timepicker: true,
                    startDate: _currentDate,
                    dateFormat: 'M d, yyyy',
                    timeFormat: 'hh:ii aa',
                    todayButton: new Date(),
                    position: "right left",
                    offset: 5
                });

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();
            }

            // Display event details
            function displayDetailedEvent(i) {
                _currentDate = new Date(_events[i].start_time);
                var l_s = "<p style='color:" + ftcolor + "; font-size:" + ftsize + ";'><b>" + _events[i].title + "</b></p>";
                l_s += "<p style='color:" + ftcolor + "; font-size:" + ftsize + ";'>" + (_events[i].description ? _events[i].description : '') + "</p>";
                l_s += "<p style='color:" + ftcolor + "; font-size:" + ftsize + ";'><b>" + (_events[i].location ? _events[i].location : '') + "</b></p>";
                l_s += "<p style='color:" + ftcolor + "; font-size:" + ftsize + ";'> <b>From </b>" + _events[i].start_time_display + " <b>to</b> " + _events[i].end_time_display + "</p>";
                l_s += "<center style='padding-top: 10px;'>";
                l_s += "<a type='button' onclick='displayCalendar();return false;' class='button default'><i class='fa fa-arrow-left' aria-hidden='true'></i>&nbsp;&nbsp;Go back</a>";
                l_s += "<a href='#' class='button blue' type='button' onclick='displayUpdateEventForm(" + i + ");return false;'> <i class='fa fa-pencil' aria-hidden='true'></i>&nbsp;&nbsp;Update</a>";
                l_s += "<a href='#' class='button red' type='button' onclick='deleteEvent(" + i + ");return false;'> <i class='fa fa-trash-o' aria-hidden='true'></i>&nbsp;&nbsp;Delete</a>";
                l_s += "</center>";

                // Display Details

                $("#ev_list_module").empty().append(l_s);
                $("#ev_module, #addb_module, #error_msg").empty();

                // Adjust height of the gadget
                _IG_AdjustIFrameHeight();
            }

            // store event in database
            function addEvent(v_form) {
                var title = v_form.title.value;
                var description = v_form.description.value;
                var location = v_form.location.value;
                var start_time = v_form.start_time.value;
                var end_time = v_form.end_time.value;

                $.ajax({
                    url: __APP_API_URL + 'calendars',
                    data: {
                        title: title, description: description, location: location, start_time: start_time, end_time: end_time
                    },
                    type: "POST",
                    dataType: 'json',
                    cache: false,
                    async: true
                })
                    .done(function (response) {
                        var id = response.hasOwnProperty('id') ? parseInt(response.id) : null;
                        _events.push(response);
                        _currentDate = new Date(response.start_time);

                        displayCalendar();

                        var statusMessage = 'Calendar event successfully added.';
                        $("#error_msg").empty().append(statusMessage);
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        // something went wrong may be user not logged in
                        commonFailResponseMessage(jqXHR, '#error_msg');
                    });
            }

            function updateEvent(v_form) {
                var title = v_form.title.value;
                var description = v_form.description.value;
                var location = v_form.location.value;
                var start_time = v_form.start_time.value;
                var end_time = v_form.end_time.value;

                var id = v_form.id.value;
                var arrIndex = v_form.arrIndex.value;

                $.ajax({
                    url: __APP_API_URL + 'calendars' + '/' + id,
                    data: {
                        calendar_id: id, title: title, description: description, location: location, start_time: start_time, end_time: end_time
                    },
                    type: "PATCH",
                    dataType: 'json',
                    cache: false,
                    async: true
                })
                    .done(function (response) {
                        var id = response.hasOwnProperty('id') ? parseInt(response.id) : null;
                        _events[arrIndex] = response
                        _currentDate = new Date(response.start_time);

                        displayCalendar();

                        var statusMessage = 'Calendar event successfully updated.';
                        $("#error_msg").empty().append(statusMessage);
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        // something went wrong may be user not logged in
                        commonFailResponseMessage(jqXHR, '#error_msg');
                    });
            }

            // Delete event from database
            function deleteEvent(i) {
                var id = _events[i].id;
                _currentDate = new Date(_events[i].start_time);

                // Get the logged in user notes
                $.ajax({
                    url: __APP_API_URL + 'calendars' + '/' + id,
                    data: {calendar_id: id},
                    type: "DELETE",
                    dataType: 'json',
                    cache: false,
                    async: true
                })
                    .done(function (response) {
                        var statusMessage = response.hasOwnProperty('message') ? response.message : null;
                        $("#error_msg").empty().append(statusMessage);
                        _events.splice(i, 1);

                        displayCalendar();
                    })
                    .fail(function (jqXHR, textStatus, errorThrown) {
                        // something went wrong may be user not logged in
                        commonFailResponseMessage(jqXHR, '#error_msg');
                    });
            }

            // Start execution here
            gadgets.util.registerOnLoadHandler(getCurrentMonthEvents);

        </script>
        </head>
        <body>
            <div id="ev_module" style="padding: 0px 5px 0px 5px;"></div>
            <div id="ev_list_module"></div>
            <div id="addb_module"></div>
            <div id="error_msg" class="error_msg" align="center"></div>
        </body>

    ]]>
    </Content>
</Module>
