<cfif not parameterexists(embedme)>
<cfinclude template="header.cfm">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

	 <cfif (session.member eq 'Alan Henry'
or session.member eq 'Rob')>
	     <Cfparam name="url.master" default="on">
	 </cfif>



<div id="content">
  <div id="content-header">
   <h2>&nbsp;&nbsp;Ads Calendar<br>


	&nbsp;&nbsp; <a href="adslist.cfm"><button type="submit"  class="btn btn-outline-secondary"> <i class="ti-grid"></i> Back to IOs</button></a>   


  <!-- Example single danger button -->
                                                    <div class="btn-group">
                                                      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <cfif parameterexists(url.typer)><cfoutput>#typer#</cfoutput><cfelse>    Filter</cfif>
                                                      </button>
                                                      <div class="dropdown-menu">

<cfquery name="Getyper" datasource="cityguide">
        select distinct typer from adopstrackingcampaign
        where typer <> '' 
        order by typer
    </cfquery>
    <cfoutput query="getyper">
        						<a class="dropdown-item" href="/adslist-calendar.cfm?typer=#typer#">#typer#</a>

                                                       </cfoutput> 	
                                                     						<a class="dropdown-item" href="/adslist-calendar.cfm?needmats">Materials Pending</a>
         
                                                      </div>
                                                    </div>

    </h2></a>
  </div>

	    <link href="/theme/assets/plugins/calendar/dist/fullcalendar.css" rel="stylesheet" />


  <style>

    #calendar {
      max-width: 100%;
      margin: 40px auto;
    }.fc-day-grid-event > .fc-content {
    white-space: normal;
}

  </style>

 


  <div id='calendar'></div>
  
      <script src="/theme/assets/plugins/calendar/jquery-ui.min.js"></script>
    <script src="/theme/assets/plugins/moment/moment.js"></script>
    <script src='/theme/assets/plugins/calendar/dist/fullcalendar.min.js'></script>

<script type="text/javascript">
	
!function($) {
    "use strict";

    var CalendarApp = function() {
        this.$body = $("body")
        this.$calendar = $('#calendar'),
        this.$event = ('#calendar-events div.calendar-events'),
        this.$categoryForm = $('#add-new-event form'),
        this.$extEvents = $('#calendar-events'),
        this.$modal = $('#my-event'),
        this.$saveCategoryBtn = $('.save-category'),
        this.$calendarObj = null
    };


    /* on drop */
    CalendarApp.prototype.onDrop = function (eventObj, date) { 
        var $this = this;
            // retrieve the dropped element's stored Event Object
            var originalEventObject = eventObj.data('eventObject');
            var $categoryClass = eventObj.attr('data-class');
            // 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;
            if ($categoryClass)
                copiedEventObject['className'] = [$categoryClass];
            // render the event on the calendar
            $this.$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
                eventObj.remove();
            }
    },
    /* on click on event */
    CalendarApp.prototype.onEventClick =  function (calEvent, jsEvent, view) {
        var $this = this;
            var form = $("<form></form>");
            form.append("<label>Change event name</label>");
            form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>");
            $this.$modal.modal({
                backdrop: 'static'
            });
            $this.$modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function () {
                $this.$calendarObj.fullCalendar('removeEvents', function (ev) {
                    return (ev._id == calEvent._id);
                });
                $this.$modal.modal('hide');
            });
            $this.$modal.find('form').on('submit', function () {
                calEvent.title = form.find("input[type=text]").val();
                $this.$calendarObj.fullCalendar('updateEvent', calEvent);
                $this.$modal.modal('hide');
                return false;
            });
    },
    /* on select */
    CalendarApp.prototype.onSelect = function (start, end, allDay) {
        var $this = this;
            $this.$modal.modal({
                backdrop: 'static'
            });
            var form = $("<form></form>");
            form.append("<div class='row'></div>");
            form.find(".row")
                .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
                .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
                .find("select[name='category']")
                .append("<option value='bg-danger'>Danger</option>")
                .append("<option value='bg-success'>Success</option>")
                .append("<option value='bg-purple'>Purple</option>")
                .append("<option value='bg-primary'>Primary</option>")
                .append("<option value='bg-pink'>Pink</option>")
                .append("<option value='bg-info'>Info</option>")
                .append("<option value='bg-warning'>Warning</option></div></div>");
            $this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
                form.submit();
            });
            $this.$modal.find('form').on('submit', function () {
                var title = form.find("input[name='title']").val();
                var beginning = form.find("input[name='beginning']").val();
                var ending = form.find("input[name='ending']").val();
                var categoryClass = form.find("select[name='category'] option:checked").val();
                if (title !== null && title.length != 0) {
                    $this.$calendarObj.fullCalendar('renderEvent', {
                        title: title,
                        start:start,
                        end: end,
                        allDay: false,
                        className: categoryClass
                    }, true);  
                    $this.$modal.modal('hide');
                }
                else{
                    alert('You have to give a title to your event');
                }
                return false;
                
            });
            $this.$calendarObj.fullCalendar('unselect');
    },
    CalendarApp.prototype.enableDrag = function() {
        //init events
        $(this.$event).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: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
        });
    }
    /* Initializing */
    CalendarApp.prototype.init = function() {
      //  this.enableDrag();
        /*  Initialize the calendar  */
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var form = '';
        var today = new Date($.now());

 var defaultEvents =  [
       
       <cfquery name="getdel" datasource="cityguide">
       select typer,segmentname,adopstrackingcampaign.startdate,clientname,adopstrackingcampaign.clientid,quantity,iostatus from adopstrackingcampaign inner join adopstrackingclient on adopstrackingcampaign.clientid = adopstrackingclient.id
       where typer <> ''
       <cfif parameterexists(url.needmats)>
       and laststatus <> 'Done'
       </cfif>
       <Cfif parameterexists(url.typer)>
       and typer = '#url.typer#'
       </cfif>
        </cfquery>
              <cfoutput query="getdel">{
          title: "<Cfif #iostatus# eq 2>UNSIGNED!</cfif><Cfif #iostatus# eq 1>UNPAID!</cfif> #ucase(typer)#: #clientname# - #rereplacenocase(segmentname,'"','','all')# <Cfif #quantity# is not 0>#numberformat(quantity)#</cfif>",
          url: "https://admin.nymetroparents.com/adslist.cfm?editclient=#clientid#",
<Cfif #typer# eq 'eblast'>
color: '##b20223',
</cfif>
<Cfif #iostatus# eq '2'>
color: 'green',
</cfif>
<Cfif #iostatus# eq '1'>
color: '##pink',
</cfif>
          start: '#dateformat(startdate,'yyyy-mm-dd')#'
        }<Cfif #currentrow# is not getdel.recordcount>,</cfif>
       
       </cfoutput>

       
      ];

             var $this = this;
        $this.$calendarObj = $this.$calendar.fullCalendar({
            slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
            minTime: '08:00:00',
            maxTime: '19:00:00',  
            defaultView: 'month',  
            handleWindowResize: true,   
             
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            events: defaultEvents,
            editable: false,
            droppable: false, // this allows things to be dropped onto the calendar !!!
            eventLimit: false, // allow "more" link when too many events
            selectable: true,
            drop: function(date) { $this.onDrop($(this), date); },
            select: function (start, end, allDay) { $this.onSelect(start, end, allDay); },
            eventClick: function(calEvent, jsEvent, view) { $this.onEventClick(calEvent, jsEvent, view); }

        });

        //on new event
        this.$saveCategoryBtn.on('click', function(){
            var categoryName = $this.$categoryForm.find("input[name='category-name']").val();
            var categoryColor = $this.$categoryForm.find("select[name='category-color']").val();
            if (categoryName !== null && categoryName.length != 0) {
                $this.$extEvents.append('<div class="calendar-events" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="fa fa-circle text-' + categoryColor + '"></i>' + categoryName + '</div>')
                $this.enableDrag();
            }

        });
    },

   //init CalendarApp
    $.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
    
}(window.jQuery),

//initializing CalendarApp
function($) {
    "use strict";
    $.CalendarApp.init()
}(window.jQuery);</script>


   </div>
<!--Footer-part-->
<br><br><br><br>


<Script type="text/javascript">
	$(document).ready(function() {
    $('.js-example-basic-single').select2();
});</script>


    <script src="/theme/assets/plugins/datatables/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
    <!-- end - This is for export functionality only -->
    <script>
$(document).ready(function() {
    $('#example').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

    $('#example23').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
             ,   "paging":   false,

    });
    </script>


<cfinclude template="footer.cfm">
</cfif>