<?php //\Zend\Debug\Debug::dump($data); ?>
<section id="main_form" class="padding12top"><!-- /.one way car listing start -->
    <div class="banner-bottom pcenter" >
        <!-- container -->
        <div class="container ">
            <?php echo $this->partial('outstation/index/round-trip-modify'); ?>
            <div class="banner-bottom-grids">

                <div class="row">

                    <div class="col-md-3  banner-bottom-grid widthpercent20 pull-left">

                        <!-- one-way-filters-by-left.phtml file will include here -->
                        <?php //echo $this->partial('outstation/index/vehicle-filter'); ?>

                    </div>

                    <div class="col-sm-6 banner-bottom-grid widthpercent60 padding_margin0">
                        <div class="col-md-41 banner-bottom-grid">
                            <div class="destinations" id="dragdiv">
                                <ul id="allItems" runat="server">
                                    <li class="button margin-bot5px" id="node1"><a href="#"><h3><img src="/images/sideseeing.png"> Add-on Sightseeing</h3></a>
                                    <?php echo $this->partial('outstation/index/sightseeing-addon'); ?>
                                    </li>

                                    <!--<li class="button margin-bot5px" id="node2"><a href="#"><h3><img src="/images/driver_icon.png"> Addon Driver</h3></a>
                                    <?php echo $this->partial('outstation/index/driver-addon'); ?>
                                    </li>

                                    <li class="button margin-bot5px" id="node3"><a href="#"><h3><img src="/images/guide_icon.png"> Addon Guide</h3></a>
                                    <?php echo $this->partial('outstation/index/guide-addon'); ?>
                                    </li>

                                    <li class="button margin-bot5px" id="node4"><a href="#"><h3><img src="/images/activity-icon.png"> Addon Activity</h3></a>
                                    <?php echo $this->partial('outstation/index/activity-addon'); ?>
                                    <li>-->
                                </ul>
                                <a name="trip"></a>
                            </div>

                            <!--Customise div-->
                            <!--<div class="choose" id="costomise_div" style="display:none;">
                                <div class="choose-info left widthpercent100">
                                    <label class="left"><h4><a href="#costomise_div" id="show_trip" class="show_trip">Trip Details</a></h4></label>
                                    <label class="right"><h4><a href="#costomise_div" class="show_customise" id="show_customise">Customise Trip</a></h4></label>

                                </div>


                                <div class="destinations-grid-info tours left">
                                    <h5><span class="pull-left">Day 1, Delhi - Agra, Karolbag, 6 AM</span><span class="pull-right"><a id="close" class="close">X</a></span></h5>
                                    <div class="td-grids">
                                        <div class="mapcantiner_inner1 no-padding">

                                            <div id="boxes-example">
                                                <div class="box customise-style" draggable="true">
                                                    <img src="/images/arow1.png"  class="costomise-arow">
                                                    06:00 AM Start from Delhi, 11:00 AM Arrive in Agra, visit Taj Mahal

                                                    <img src="/images/tajmahal.jpg" class="costomise-image">


                                                </div>
                                                <div class="box customise-style" draggable="true">
                                                    <img src="/images/arow1.png"  class="costomise-arow">
                                                    01:00 PM Lunch (Optional/Own Cost), Visit Agra Fort
                                                    <img src="/images/tajmahal.jpg" class="costomise-image">


                                                </div>
                                                <div class="box customise-style" draggable="true">
                                                    <img src="/images/arow1.png" class="costomise-arow">
                                                    06:00 PM Depart for Hotel or Agra -Jaipur 4:20 Hr

                                                    <img src="/images/tajmahal.jpg" class="costomise-image">
                                                </div>

                                                <div class="pull-left col-sm-12">
                                                    <ul class="sightinc1">

                                                    </ul>

                                                </div>

                                                <div class="pull-left col-sm-12">
                                                    <ul class="sightinch">

                                                    </ul>

                                                </div>


                                                <div style="" class="box customise-but" draggable="true">
                                                    <span id="modify_vehicle">Modify Vehicle </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="modify_driver">Modify Driver </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="modify_guide">Modify Guide </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="add_sightseeings">Add Sightseeings </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="modify_hotel">Modify Hotel </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="modify_activity">Add Activity </span>
                                                </div>

                                            </div>


                                            <script>
                                                (function () {
                                                    var id_ = 'boxes-example';
                                                    var boxes_ = document.querySelectorAll('#' + id_ + ' .box');
                                                    var dragSrcEl_ = null;

                                                    this.handleDragStart = function (e) {
                                                        e.dataTransfer.effectAllowed = 'move';
                                                        e.dataTransfer.setData('text/html', this.innerHTML);

                                                        dragSrcEl_ = this;

                                                        this.style.opacity = '0.5';

                                                        // this/e.target is the source node.
                                                        this.addClassName('moving');
                                                    };

                                                    this.handleDragOver = function (e) {
                                                        if (e.preventDefault) {
                                                            e.preventDefault(); // Allows us to drop.
                                                        }

                                                        e.dataTransfer.dropEffect = 'move';

                                                        return false;
                                                    };

                                                    this.handleDragEnter = function (e) {
                                                        this.addClassName('over');
                                                    };

                                                    this.handleDragLeave = function (e) {
                                                        // this/e.target is previous target element.

                                                        this.removeClassName('over');
                                                    };

                                                    this.handleDrop = function (e) {
                                                        // this/e.target is current target element.

                                                        if (e.stopPropagation) {
                                                            e.stopPropagation(); // stops the browser from redirecting.
                                                        }

                                                        // Don't do anything if we're dropping on the same box we're dragging.
                                                        if (dragSrcEl_ != this) {
                                                            dragSrcEl_.innerHTML = this.innerHTML;
                                                            this.innerHTML = e.dataTransfer.getData('text/html');
                                                        }

                                                        return false;
                                                    };

                                                    this.handleDragEnd = function (e) {
                                                        // this/e.target is the source node.
                                                        this.style.opacity = '1';

                                                        [].forEach.call(boxes_, function (box) {
                                                            box.removeClassName('over');
                                                            box.removeClassName('moving');
                                                        });
                                                    };

                                                    [].forEach.call(boxes_, function (box) {
                                                        box.setAttribute('draggable', 'true');  // Enable boxes to be draggable.
                                                        box.addEventListener('dragstart', this.handleDragStart, false);
                                                        box.addEventListener('dragenter', this.handleDragEnter, false);
                                                        box.addEventListener('dragover', this.handleDragOver, false);
                                                        box.addEventListener('dragleave', this.handleDragLeave, false);
                                                        box.addEventListener('drop', this.handleDrop, false);
                                                        box.addEventListener('dragend', this.handleDragEnd, false);
                                                    });
                                                })();
                                            </script>

                                        </div>

                                        <div class="clearfix"> </div>

                                    </div>
                                </div>


                                <div class="destinations-grid-info tours left">
                                    <h5>Day 2, Jaipur</h5>
                                    <div class="td-grids">
                                        <div class="mapcantiner_inner1 no-padding">


                                            <div id="boxes-example1">
                                                <div class="box customise-style" draggable="true">
                                                    <img src="/images/arow1.png"  class="costomise-arow">
                                                    06:00 AM Start from Delhi, 11:00 AM Arrive in Agra, visit Taj Mahal

                                                    <img src="/images/tajmahal.jpg" class="costomise-image">


                                                </div>
                                                <div class="box customise-style" draggable="true">
                                                    <img src="/images/arow1.png"  class="costomise-arow">
                                                    01:00 PM Lunch (Optional/Own Cost), Visit Agra Fort
                                                    <img src="/images/tajmahal.jpg" class="costomise-image">


                                                </div>
                                                <div class="box customise-style" draggable="true">
                                                    <img src="/images/arow1.png" class="costomise-arow">
                                                    06:00 PM Depart for Hotel or Agra -Jaipur 4:20 Hr

                                                    <img src="/images/tajmahal.jpg" class="costomise-image">
                                                </div>

                                                <div class="pull-left col-sm-12">
                                                    <ul class="sightinc1">

                                                    </ul>

                                                </div>

                                                <div class="pull-left col-sm-12">
                                                    <ul class="sightinch">

                                                    </ul>

                                                </div>


                                                <div style="" class="box customise-but" draggable="true">
                                                    <span id="modify_vehicle">Modify Vehicle </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="modify_driver">Modify Driver </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="modify_guide">Modify Guide </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="add_sightseeings">Add Sightseeings </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="modify_hotel">Modify Hotel </span>
                                                </div>

                                                <div class="box customise-but" draggable="true">
                                                    <span id="modify_activity">Add Activity </span>
                                                </div>

                                            </div>




                                            <script>
                                                (function () {
                                                    var id_ = 'boxes-example1';
                                                    var boxes_ = document.querySelectorAll('#' + id_ + ' .box');
                                                    var dragSrcEl_ = null;

                                                    this.handleDragStart = function (e) {
                                                        e.dataTransfer.effectAllowed = 'move';
                                                        e.dataTransfer.setData('text/html', this.innerHTML);

                                                        dragSrcEl_ = this;

                                                        this.style.opacity = '0.5';

                                                        // this/e.target is the source node.
                                                        this.addClassName('moving');
                                                    };

                                                    this.handleDragOver = function (e) {
                                                        if (e.preventDefault) {
                                                            e.preventDefault(); // Allows us to drop.
                                                        }

                                                        e.dataTransfer.dropEffect = 'move';

                                                        return false;
                                                    };

                                                    this.handleDragEnter = function (e) {
                                                        this.addClassName('over');
                                                    };

                                                    this.handleDragLeave = function (e) {
                                                        // this/e.target is previous target element.

                                                        this.removeClassName('over');
                                                    };

                                                    this.handleDrop = function (e) {
                                                        // this/e.target is current target element.

                                                        if (e.stopPropagation) {
                                                            e.stopPropagation(); // stops the browser from redirecting.
                                                        }

                                                        // Don't do anything if we're dropping on the same box we're dragging.
                                                        if (dragSrcEl_ != this) {
                                                            dragSrcEl_.innerHTML = this.innerHTML;
                                                            this.innerHTML = e.dataTransfer.getData('text/html');
                                                        }

                                                        return false;
                                                    };

                                                    this.handleDragEnd = function (e) {
                                                        // this/e.target is the source node.
                                                        this.style.opacity = '1';

                                                        [].forEach.call(boxes_, function (box) {
                                                            box.removeClassName('over');
                                                            box.removeClassName('moving');
                                                        });
                                                    };

                                                    [].forEach.call(boxes_, function (box) {
                                                        box.setAttribute('draggable', 'true');  // Enable boxes to be draggable.
                                                        box.addEventListener('dragstart', this.handleDragStart, false);
                                                        box.addEventListener('dragenter', this.handleDragEnter, false);
                                                        box.addEventListener('dragover', this.handleDragOver, false);
                                                        box.addEventListener('dragleave', this.handleDragLeave, false);
                                                        box.addEventListener('drop', this.handleDrop, false);
                                                        box.addEventListener('dragend', this.handleDragEnd, false);
                                                    });
                                                })();
                                            </script>

                                        </div>

                                        <div class="clearfix"> </div>

                                    </div>

                                    <span>Note<span class="red_text">*</span>:</span> &nbsp;You Can Customize Your Trip by Tracking one Sightseeings to Another
                                </div>
                            </div>-->

                            <!--Customise div-->


                        </div>
                        <!--<div class="clearfix"> </div>

                        <div id="accordion" class="panel-group">

                            <div id="trip_details" class="disable_none pull-left marginbot20">

                                <div class="col-sm-12">
                                    <h2 class="pull-left widthpercent40" ><a href="#costomise_div" id="show_trip" class="show_trip">Trip Details</a></h2>
                                    <h2 class="pull-left widthpercent40" align="right"><a href="#costomise_div" id="show_customise" class="show_customise">Customise Trip</a></h2>

                                </div>


                                <div class="destinations pull-left">

                                    <ul>
                                        <li class="button button-close" style="">Day 1<span class="pull-right"><a id="close" class="close font-size18">X</a></span><li>

                                            <div class="destinations-grid-info-outstatin">
                                                <div class="destinations-hotel">06:00 AM     Start from Delhi</div>
                                                <div class="destinations-hotel">11:00 AM Arrive in Agra, visit Taj Mahal</div>
                                                <div class="destinations-hotel">01:00 PM Lunch</div>
                                                <div class="destinations-hotel">03:00 PM     Visit Agra Fort</div>
                                                <div class="destinations-hotel">06:00 PM     Depart for Jaipur</div>
                                                <div class="destinations-hotel">11:00 PM     Arrive in Jaipur &amp; Check into hotel</div>
                                                <div class="clearfix"> </div>
                                            </div>

                                        </li>
                                        </li>
                                        <li class="button button-close">Day 2<li >


                                            <div class="destinations-grid-info-outstatin">
                                                <div class="destinations-hotel">06:00 AM     Start from Delhi</div>
                                                <div class="destinations-hotel">11:00 AM Arrive in Agra, visit Taj Mahal</div>
                                                <div class="destinations-hotel">01:00 PM Lunch</div>
                                                <div class="destinations-hotel">03:00 PM     Visit Agra Fort</div>
                                                <div class="destinations-hotel">06:00 PM     Depart for Jaipur</div>
                                                <div class="destinations-hotel">11:00 PM     Arrive in Jaipur &amp; Check into hotel</div>
                                                <div class="clearfix"> </div>
                                            </div>

                                        </li>
                                        </li>
                                        <li class="button button-close">Day 3<li>


                                            <div class="destinations-grid-info-outstatin">
                                                <div class="destinations-hotel">06:00 AM     Start from Delhi</div>
                                                <div class="destinations-hotel">11:00 AM Arrive in Agra, visit Taj Mahal</div>
                                                <div class="destinations-hotel">01:00 PM Lunch</div>
                                                <div class="destinations-hotel">03:00 PM     Visit Agra Fort</div>
                                                <div class="destinations-hotel">06:00 PM     Depart for Jaipur</div>
                                                <div class="destinations-hotel">11:00 PM     Arrive in Jaipur &amp; Check into hotel</div>


                                                <div class="clearfix"> </div>
                                            </div>

                                        </li>
                                        </li>


                                    </ul>


                                </div>

                            </div>

                        </div>

                        <div class="clearfix"> </div>-->


                    </div>
                    <!-- one-way-payment-right.phtml file will include here -->
                    <div class="col-md-3 banner-bottom-grid widthpercent20 pull-right">
                        <div class="top-destinations-grids margin0">
                            <?php echo $this->partial('outstation/index/round-trip-payment-addon-detail'); ?>
                        </div>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
    </div>

</section><!-- /.one way car listing end -->
<script src="<?php echo $google_map_url; ?>?key=<?php echo $google_map_key; ?>&libraries=places" async defer></script>
