<style>
.rihgt-box {
    border: 1px solid #ccc;
}.margin5 {
    margin: 5px 0;
    padding-bottom: 10px;
}.incluson-icon {
    float: left;
    padding: 0 10px;
    border: 1px solid #333;
    border-radius: 30px;
    margin: 2px 1px;
}.contact-iccons {
    font-size: 25px;
    color: #333;
    text-align: center;
    padding: 0 6px;
}.font-size10px {
    font-size: 10px;
}.lablecalsiconfont {
    /*background: #333;*/
    border-radius: 5px;
    padding: 5px 5px;
    font-size: 25px;
    color:#000;
}.lablecalsicon{
    background: none;
}
.padding-L15px-R15px {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
#map {
        height: 200px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
       .checked {
  color: orange;
}

</style>   
<!--/#feature-->
    <section id="feature" style="margin-top:10px;" >
        <div class="container">
           <div class="left wow fadeInDown pull-left">
                <h2><?php echo $sightData['sightseeing_name']; ?><br>
           <span style="font-size:13px;"><?php echo $sightData['city_name']; ?> | <?php echo $sightData['opening_time']; ?></span>
                </h2>                
            </div>

            <div class="row">
                <div class="features col-sm-12">
                    <div class="col-md-9 col-sm-11 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                    <?php echo $this->partial('sight-seeing/index/sightseeing'); ?>
                    </div>
                    
                     <div id="payment-detail-data">
<?php echo $this->partial('sight-seeing/index/sightseeing-detail-traveller');  ?>
                        </div>
                    
                </div><!--/.services-->
            </div><!--/.row-->    
        </div><!--/.container--><br>


    </section>
 
    <!--/#feature-->
<script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var center = {lat: <?php echo $data['city_latitude']; ?>, lng: <?php echo $data['city_longitude']; ?>};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: center});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: center, map: map});
}
    </script>
    

<script src="<?php echo $google_map_url; ?>?key=<?php echo $google_map_key; ?>&callback=initMap" async defer></script>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
   
    $(document).ready(function () {
         jssor_1_slider_init();
        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'
            },
            editable: true,
            firstDay: 1, //  1(Monday) this can be changed to 0(Sunday) for the USA system
            selectable: true,
            defaultView: 'month',

            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: false,
            selectHelper: true,
            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: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d - 3, 16, 0),
                    allDay: false,
                    className: 'info'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d + 4, 16, 0),
                    allDay: false,
                    className: 'info'
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false,
                    className: 'important'
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false,
                    className: 'important'
                },
                {
                    title: 'Birthday Party',
                    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'
                }
            ],
        });
    });
</script>