<?php
//echo '<pre>';print_r($vehicleTypeArray);die();
?>
<section class="content">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabbable">
                <div class="tab-content no-border padding-24">
                    <div class="tab-pane fade in active" id="faq-tab-1">
                        <div class="space-8"></div>
                        <div class="panel-group accordion-style1 accordion-style2" id="faq-list-1">
                            <div class="panel panel-default">
                                <div class="panel-headingnew">Transport Availability</div>
                                <div class="left_panel col-sm-12 padding_margin0 pull-left bg-white" id="add_detail">


                                    <div class="tab-content tab_editprofile col-sm-12 padding-left0 marginbott10px margintop10px">
                                        <div id="home" class="tab-pane fade in tab_editprofile tab_editprofile1 active">
                                            <div class="panel panel-default">

                                                <div id="faq-1-3" class="panel-collapse collapse in" aria-expanded="false">


                                                    <div class="box margin-top15px">
                                                        <div class="col-sm-12 no-padding">
                                                            <div class="col-sm-3">
                                                                <div class="row-fluid">
    <select class="selectpicker form-control select-transport-vehicle" data-show-subtext="true" data-live-search="true">
        <option data-subtext="" selected>Select Vehicle Type</option>
        <?php if(!empty($vehicleTypeArray)){ ?>
        <?php foreach($vehicleTypeArray as $vehicleType){ ?>
        <option value="<?php echo $vehicleType['id'];?>"><?php echo $vehicleType['vehicle_type_name'].' ('.$vehicleType['count'].')';?></option>
        <?php } ?>
        <option value="All">All</option>    
        <?php  } ?>
    </select>

                                                                </div>
                                                            </div>
                                                            <div class="col-sm-3">
                                                                <div class="row-fluid">
                                <select class="form-control select-vehicle-name">
                                    <option value="">Select Vehicle</option>
                                </select>

                                                                </div>
                                                            </div>
                                                            <div class="col-sm-3"><h4>Transport Inventory</h4></div>
                                                            <div class="col-sm-2 pull-right"><input type="date" class="form-control " style="line-height:20px;"></div>
                                                        </div>

                                                        <div class="col-sm-12 no-padding margin-top10px margin-bttom10px">
                                                            <div class="col-sm-2"><a href="#" class="btn btn-default"><i class="fa fa-backward"></i> 14 days</a></div>

                    <div class="col-sm-8" align="center"> 
                        <a class="btn btn-success"><i class="fa fa-check"></i> Available</a>
                        <a class="btn btn-warning"><i class="fa fa-check"></i> Booked</a>
                        <a class="btn btn-danger"><i class="fa fa-check"></i> Un-Available</a>
                        <a class="btn btn-info"><i class="fa fa-check"></i> Calender</a>
                    </div>

                                                            <div class="col-sm-2 pull-right" align="right"> <a href="#" class="btn btn-default">14 days <i class="fa fa-forward"></i></a></div>
                                                        </div>
                                                        <div class="col-sm-12 no-padding margin-top10px margin-bttom15px display-block ">
                                                            <div class="response"></div>
                                                            <div id='calendar'></div>
                                                        </div>
                                                        <!-- /.box-header -->
                                                        <div class="box-body table-responsive">
                                                          <table class="table table-bordered table-striped">

                                                                <tbody>



                                                                   
                                                                    
                                                                    <?php if(!empty($vehicleTypeArray)){ ?>
                                                                     <tr>

                                                                        <td width="10%" align="center">Vehicle Type</td>
                                                                        <td align="center">	07<br> 
                                                                            Dec <br>Fri</td>
                                                                        <td align="center"> 08<br> 
                                                                            Dec<br> Sat </td>
                                                                        <td align="center">09<br> 
                                                                            Dec <br>Sun</td>
                                                                        <td align="center">10<br> 
                                                                            Dec<br> Mon</td>
                                                                        <td align="center">11 <br>
                                                                            Dec <br>Tue </td>
                                                                        <td align="center">12<br> 
                                                                            Dec <br>Wed</td>
                                                                        <td align="center">13<br> 
                                                                            Dec<br> Thu</td>
                                                                        <td align="center">14<br> 
                                                                            Dec <br>Fri</td>
                                                                        <td align="center">15 <br>
                                                                            Dec<br> Sat </td>
                                                                        <td align="center">16 <br>
                                                                            Dec<br> Sun</td>
                                                                        <td align="center">17 <br>
                                                                            Dec <br>Mon</td>
                                                                        <td align="center">18<br> 
                                                                            Dec <br>Tue</td>

                                                                        <td align="center">19 <br>
                                                                            Dec<br> Wed</td>

                                                                        <td align="center">20<br> 
                                                                            Dec<br> Thu</td>

                                                                        <td align="center">21<br> 
                                                                            Dec<br> Fri</td>

                                                                    </tr>
                                                                     <?php foreach($vehicleTypeArray as $vehicleType){ ?>
                                                                     <tr>
                                                                        <td rowspan="3"><label data="28" rel="" class="clickme open  text-green pointer booking_id"><?php echo $vehicleType['vehicle_type_name']; ?></label></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                        <td align="center"><a  class="btn btn-success border-rounded"> <i class="fa fa-check"></i> 2</a></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                        <td align="center"><a  class="btn btn-warning border-rounded"> <i class="fa fa-check"></i> 1</a></td>
                                                                    </tr>
                                                                    <tr>

                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>
                                                                        <td align="center"><a  class="btn btn-danger border-rounded"> <i class="fa fa-check"></i> 0</a></td>                  
                                                                    </tr>
                                                                    <?php 
                                                                        }
                                                                    }else{
                                                                        
                                                                    }
                                                                   ?>
                                                                    
                                                                   
                                                              

                                                                </tbody>

                                                            </table>
                                                        </div>
                                                        <!-- /.box-body -->
                                                    </div>

                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <!-- /.widget-box -->
                </div>
                <!-- /.col -->
                </section>
                <?php echo $this->inlineScript()->prependFile('https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', $type = 'text/javascript') ?>
                <script>

                    $(document).ready(function () {
                        //alert(1);
                        var date = new Date();
                        var d = date.getDate();
                        var m = date.getMonth();
                        var y = date.getFullYear();
                        /*  className colors
                         
                         className: default(transparent), important(red), chill(pink), success(green), info(blue)
                         
                         */
                        /* initialize the external events
                         -----------------------------------------------------------------*/
                        $('#external-events div.external-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
                            });

                        });


                        /* initialize the calendar
                         -----------------------------------------------------------------*/

                        var calendar = $('#calendar').fullCalendar({
                            header: {
                                left: 'title',
                                center: 'agendaDay,agendaWeek,month',
                                right: 'prev,next today'
                            },

                            firstDay: 1, //  1(Monday) this can be changed to 0(Sunday) for the USA system
                            selectable: true,
                            defaultView: 'month',
                            displayEventTime: true,
                            //axisFormat: 'h:mm',
                            columnFormat: {
                                month: 'ddd', // Mon
                                week: 'ddd d', // Mon 7
                                day: 'dddd M/d', // Monday 9/7
                                agendaDay: 'dddd d'
                            },
                            titleFormat: {
                                month: 'MMMM yyyy', // September 2009
                                week: "MMMM yyyy", // September 2009
                                day: 'MMMM yyyy'                  // Tuesday, Sep 8, 2009
                            },

                            allDaySlot: true,
                            selectHelper: true,
                            select: function (start, end, allDay) {
                                var title = prompt('Event Detail:');
                                if (title) {
                                    //var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                                    //var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                                    //var start = moment(start).format();
                                    //var end = moment(end).format();
                                    //var allDay = false;
                                    //alert(start);
                                    //endtime = moment(end).format('h:mm');
                                    //starttime = moment(start).format('dddd, MMMM Do YYYY, h:mm');
                                    //var mywhen = starttime + ' - ' + endtime;
                                    var dateTime = new Date();
                                    dateTime = moment(dateTime).format("YYYY-MM-DD HH:mm:ss");
                                    start = moment(start).format("YYYY-MM-DD HH:mm:ss");
                                    end = moment(end).format("YYYY-MM-DD HH:mm:ss");
                                    //$('#createEventModal #startTime').val(start);
                                    //$('#createEventModal #endTime').val(end);
                                    //$('#createEventModal #when').text(mywhen);
                                    //$('#createEventModal').modal('toggle');

                                    $.ajax({
                                        url: "/inventory-management/add-transport-events",
                                        data: 'title=' + title + '&start=' + start + '&end=' + end,
                                        type: "POST",
                                        success: function (response) {
                                            if (parseInt(response.status) > 0) {
                                                displayMessage("Added Successfully");
                                                $('#calendar').fullCalendar('refetchEvents');
                                            }
                                        }
                                    });
                                }
                                calendar.fullCalendar('unselect');
                            },
                            editable: true,
                            eventDrop: function (event) {
                                //var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                                //var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                                var dateTime = new Date();
                                dateTime = moment(dateTime).format("YYYY-MM-DD HH:mm:ss");
                                //var start = moment(start).format("YYYY-MM-DD HH:mm:ss");
                                //var end = moment(end).format("YYYY-MM-DD HH:mm:ss");
                                var start = moment(event.start).format("YYYY-MM-DD HH:mm:ss");
                                var end = moment(event.end).format("YYYY-MM-DD HH:mm:ss");
                                $.ajax({
                                    url: "/inventory-management/update-transport-events",
                                    data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                                    type: "POST",
                                    success: function (response) {
                                        if (parseInt(response.status) > 0) {
                                            displayMessage("Updated Successfully");
                                            $('#calendar').fullCalendar('refetchEvents');
                                        }
                                    }
                                });
                            },
                            eventResize: function (event) {
                                //var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                                //var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                                var dateTime = new Date();
                                dateTime = moment(dateTime).format("YYYY-MM-DD HH:mm:ss");
                                //var start = moment(start).format("YYYY-MM-DD HH:mm:ss");
                                //var end = moment(end).format("YYYY-MM-DD HH:mm:ss");
                                var start = moment(event.start).format("YYYY-MM-DD HH:mm:ss");
                                var end = moment(event.end).format("YYYY-MM-DD HH:mm:ss");
                                $.ajax({
                                    url: "/inventory-management/update-transport-events",
                                    data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                                    type: "POST",
                                    success: function (response) {
                                        if (parseInt(response.status) > 0) {
                                            displayMessage("Updated Successfully");
                                            $('#calendar').fullCalendar('refetchEvents');
                                        }
                                    }
                                });
                            },
                            /*select: function (start, end, allDay) {
                             var title = prompt('Event Title:');
                             if (title) {
                             calendar.fullCalendar('renderEvent',
                             {
                             title: title,
                             start: start,
                             end: end,
                             allDay: allDay
                             },
                             true // make the event "stick"
                             );
                             }
                             calendar.fullCalendar('unselect');
                             },*/
                            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;

                                // 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();
                                }

                            },

                            /*events: [
                             {
                             title: 'BKG00232',
                             start: new Date(y, m, 1)
                             },
                             {
                             id: 999,
                             title: 'BKG00234',
                             start: new Date(y, m, 3, 16, 35),
                             allDay: false,
                             className: 'info'
                             },
                             {
                             id: 999,
                             title: 'BKG00235',
                             start: new Date(y, m, 12, 18, 20),
                             allDay: false,
                             className: 'info'
                             },
                             {
                             title: 'BKG00236',
                             start: new Date(y, m, d, 10, 30),
                             allDay: false,
                             className: 'important'
                             },
                             {
                             title: 'BKG00237',
                             start: new Date(y, m, d, 12, 0),
                             end: new Date(y, m, d, 14, 0),
                             allDay: false,
                             className: 'important'
                             },
                             {
                             title: 'BKG00234',
                             start: new Date(y, m, d + 1, 19, 0),
                             end: new Date(y, m, d + 1, 22, 30),
                             allDay: false,
                             },
                             {
                             title: 'Click for Google',
                             start: new Date(y, m, 28),
                             end: new Date(y, m, 29),
                             url: 'http://google.com/',
                             className: 'success'
                             }
                             ],*/

                            events: "/inventory-management/get-transport-events",
                            eventRender: function (event, element, view) {
                                if (event.allDay === 'true') {
                                    event.allDay = true;
                                } else {
                                    event.allDay = false;
                                }
                            },

                            eventClick: function (event) {
                                var confimit = confirm("Do you really want to change Status?");
                                if (confimit) {
                                    $.ajax({
                                        type: "POST",
                                        url: "/inventory-management/delete-transport-events",
                                        data: "&id=" + event.id + '&vendor_status=' + event.vendor_status,
                                        success: function (response) {
                                            if (parseInt(response.status) > 0) {
                                                displayMessage("Status Updated Successfully");
                                                $('#calendar').fullCalendar('refetchEvents');
                                            }
                                        }
                                    });
                                }
                            }

                        });



                    });
                    function displayMessage(message) {
                        $(".response").html("<div align='center' style='padding:20px;font-size:18px;color:#3539EA' class='success'>" + message + "</div>");
                        setInterval(function () {
                            $(".success").fadeOut();
                        }, 2000);
                    }
                </script>
