<?php $__env->startSection('title'); ?> <?php echo e(Config::get('map.title')); ?> <?php $__env->stopSection(); ?>
<?php $__env->startSection('body'); ?>

    <style type="text/css">
        *[draggable=true] {
            -moz-user-select: none;
            -khtml-user-drag: element;
            -webkit-user-drag: element;
            -khtml-user-select: none;
            -webkit-user-select: none;
            cursor: move;
        }

        .min-width-1000 {
            min-width: 1000px;
        }

        .order .heading, .vehicle .heading {
            border-bottom: 1px solid #666666 !important;
            padding: 5px 0px 5px 0px;
            margin-bottom: 10px;
        }

        .order .summary {
            position: relative;
            padding-left: 60px;
            padding-top: 0px;
            margin-bottom: 8px;
        }

        .order .summary .expander {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            width: 20 xp;
        }

        .order .summary .editOrder {
            position: absolute;
            left: 20px;
            top: 0px;
            bottom: 0px;
            width: 40px;
        }

        .order .summary table th {
            border: none;
            padding: 2px;
        }

        .tab-content .tab-pane {
            padding-top: 10px;
        }
    </style>

    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab">Load
                Vehicles</a></li>
        <li role="presentation"><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab">Create Route</a>
        </li>
        <li role="presentation"><a href="#step3" aria-controls="step3" role="tab" data-toggle="tab">Summary</a></li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="step1">
            <div class="row">
                <div class="col-xs-12 notification">

                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 action" style="padding-top: 10px;">
                    <div class="createTripWrapper" style="display: none;">
                        <button class="btn btn-primary createTrip">Create a New Trip</button>
                    </div>
                    <div class="cancelTripWrapper" style="display: none;">
                        <button class="btn btn-danger cancelTrip">Delete this trip and Create New</button>
                    </div>
                    <div class="updateTripWrapper" style="display: none;">
                        <button class="btn btn-warning updateTrip">Finish editing this trip</button>
                    </div>
                </div>
            </div>

            <div class="editor" style="display: none;">

                <div class="row">
                    <div class="min-width-1000" style="padding-top: 10px;">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label">Orders List</label>
                                <div class="input-group">
								<span class="input-group-addon" style="padding: 0px 2px 0px 1px;">
									<button class="btn btn-primary btn-sm newOrder"><i
                                                class="fa fa-edit fa-lg"></i></button>
								</span>
                                    <select class="form-control ordersList"></select>
                                    <span class="input-group-addon btn btn-primary saveOrder">
									<i class="fa fa-level-down"></i>
								</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label">Vehicles List</label>
                                <div class="input-group">
                                    <select class="form-control vehiclesList"></select>
                                    <span class="input-group-addon btn btn-primary saveVehicle">
									<i class="fa fa-level-down"></i>
								</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="min-width-1000 section1">

                        <div class="col-xs-6 orders"></div>

                        <div class="col-xs-6 vehicles"></div>

                    </div>
                </div>

            </div>
        </div>
        <!-- end of step 1 -->

        <div role="tabpanel" class="tab-pane fade" id="step2">

            <div class="row">
                <div class="col-xs-12 notification">

                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="form-group" style="margin-top: 20px;">
                        <label class="control-label">Select a Vehicle</label>
                        <select class="form-control tripVehiclesList">
                            <option value="">Select a vehicle</option>
                        </select>
                    </div>
                </div>
            </div>


            <style type="text/css">
                .route {
                    padding-top: 20px;
                    min-height: 200px;
                }

                .route .input-group {
                    width: 100%;
                }

                .route .col-xs-3 {
                    padding-right: 0px !important;
                    padding-left: 0px !important;
                }

                .route .direction {
                    background-color: inherit;
                    border: none;
                }

                .route .addPointWrapper {
                    background-color: inherit;
                    border: none;
                    padding: 0px 0px 0px 5px !important;
                }

                .route .input-group {
                    position: relative;
                }

                .route .input-group .removePoint {
                    position: absolute !important;
                    display: none;
                    border: 1px solid;
                    left: 45px;
                    top: 2px;
                    z-index: 100;
                }

                .route .input-group:hover .removePoint {
                    display: block;
                }
            </style>
            <div class="row">
                <div class="col-md-12">
                    <div class="img-thumbnail form-group route" style="width: 100%;">
                        -- drop points not loaded --
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Select a starting Location</label>
                        <select class="form-control startingLocationsList">
                            <option value="">Select a starting location</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <button class="btn btn-primary save">Save</button>
                        <button class="btn btn-success complete">Mark as complete</button>
                    </div>
                </div>
            </div>

        </div>
        <!-- end of step 2 -->

        <style>
            .trip {
                width: 100%;
            }

            .trip .title {
                padding-top: 5px;
                padding-bottom: 5px;
                margin-bottom: 10px;
            }

            .trip .tv_drop_points {
                margin-top: 40px;
            }

            .trip_summary .title {
                background-color: #1abc9c;
            }
        </style>
        <div role="tabpanel" class="tab-pane fade" id="step3">
            <div class="row">
                <div class="col-xs-12 trip_summary">


                </div>
            </div>
        </div>
        <!-- end of step 3 -->
    </div>
    <!-- end of tab content -->

    <?php echo $__env->make('map::layouts.editOrder', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    <?php echo $__env->make('map::layouts.newOrder', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>

    <script type="text/javascript">
        $(function () {
            var _token = $('meta[name="_token"]').attr('content');

            $(document).ajaxStart(function () {
                $('button, .btn').data('loading-text', '...');
                $('button, .btn').button('loading');
            }).ajaxStop(function () {
                $('button, .btn').button('reset');
            });

            $(document).on('click', '.orders .orderItem', function () {
                $(this).select();
            });

            preload_incompleteTrip();
            load_ordersList();
            load_vehiclesList();
            loadSummary();


            $.dragdrop({
                section: '.section1',
                ondrop: function ($from, $to) {
                    dropItem($from, $to);
                }
            });

            $.dragdrop({
                section: '.section1',
                drag: '.summary table',
                ondrop: function ($from, $to) {
                    dropSummary($from, $to);
                }
            });

            $('.createTrip').click(function () {
                createTrip();
            });

            $('.cancelTrip').click(function () {
                var id = $(this).val();
                bootbox.confirm("Are you sure you want to delete this trip and create a new trip?", function (r) {
                    if (r) {
                        cancelTrip(id);
                    }
                });
            });

            $('.updateTrip').click(function () {
                $('.notification').html('');
                resetActions('save');
            });

            $('.saveOrder').click(function () {
                saveOrder($('.ordersList').val());
            });

            $('.saveVehicle').click(function () {
                saveVehicle($('.vehiclesList').val());
            });

            $('.complete').click(function () {
                var data = {
                    trip_id: $('.cancelTrip').val()
                };
                completeTrip(data);
            });

            $('.save').click(function () {
                var size = $('.route .point').length;

                var data = {
                    trip_id: $('.cancelTrip').val(),
                    vehicle_id: $('.tripVehiclesList').val(),
                    starting_location: $('.startingLocationsList').val(),
                    points: []
                };

                if ($('.route .point').length > 0) {
                    $($('.route .point')).each(function (i) {
                        if ($('option:selected', $(this)).data('location_id') == undefined) {
                            $.notify.error('<b>Some drop points are empty</b>');
                            return false;
                        } else {
                            data.points.push({
                                id: $('option:selected', $(this)).data('id'),
                                location_id: $('option:selected', $(this)).data('location_id')
                            });
                            if ((++i) == size) {
                                save(data);
                            }
                        }
                    });
                } else {
                    save(data);
                }
            });

            $('.tripVehiclesList').change(function () {
                preload_trip($('.cancelTrip').val(), $(this).val());
            });

            $(document).on('click', '.deleteItem', function () {
                var id = $(this).val();
                if (id != undefined && id != null && id != '') {
                    bootbox.confirm('Are you sure you want to delete this record?', function (r) {
                        if (r) {
                            deleteItem(id);
                        }
                    });
                } else {
                    $.notify.error("<b>Invalid record selected.</b>");
                }
            });

            $(document).on('click', '.deleteOrder', function () {
                var id = $(this).data('trip_order_id');
                bootbox.confirm('Are you sure you want to remove this order?', function (r) {
                    if (r) {
                        deleteOrder(id);
                    }
                });
            });

            $(document).on('click', '.deleteVehicle', function () {
                var id = $(this).data('trip_vehicle_id');
                bootbox.confirm('Are you sure you want to remove this vehicle?', function (r) {
                    if (r) {
                        deleteVehicle(id);
                    }
                });
            });

            $(document).on('click', '.addPoint', function () {
                var data = {
                    trip_id: $('.cancelTrip').val(),
                    vehicle_id: $('.tripVehiclesList').val()
                };
                addPoint(data);
            });

            $(document).on('click', '.removePoint', function () {
                var id = $(this).data('id');
                bootbox.confirm('Are you sure you want to delete this location?', function (r) {
                    if (r) {
                        removePoint(id);
                    }
                });
            });

            $(document).on('click', '.editTrip', function () {
                var trip_id = $(this).data('trip_id');
                var msg = 'You are currently editing trip <strong>#' + trip_id + '</strong>.';
                setNotification(msg);
                resetActions('update', trip_id);
                $('a[href="#step1"]').trigger('click');
            });

            $(document).on('click', '.deleteTrip', function () {
                var id = $(this).data('trip_id');
                bootbox.confirm("Are you sure you want to delete this trip?", function (r) {
                    if (r) {
                        cancelTrip(id);
                    }
                });
            });

            $(document).on('click', '.expander', function () {
                var target_oid = $(this).closest('.order').data('order_id');
                $('.orders .order').each(function () {
                    var oid = $(this).data('order_id');
                    if (oid != target_oid) {
                        if ($(this).find('.results').is(':visible')) {
                            $(this).find('.results').slideToggle();
                        }
                    }
                });
                $('.results', $(this).closest('.body')).slideToggle();
            });

            $(document).on('click', '.editOrder', function () {
                var data = {
                    trip_id: $(this).data('trip_id'),
                    order_id: $(this).data('order_id')
                };
                editOrder_loadOrder(data);
            });

            $(document).on('click', '.eo_editItem', function () {
                editOrder_environment('update');

                $('.eo_code').prop('disabled', true);
                $('.eo_name').prop('disabled', true);
                $('.eo_volume').prop('disabled', true);
                $('.eo_weight').prop('disabled', true);

                $('.eo_update').data('item_id', $(this).data('item_id'));
                $('.eo_code').val($(this).data('item_code'));
                $('.eo_name').val($(this).data('item_name'));
                $('.eo_volume').val($(this).data('item_volume'));
                $('.eo_weight').val($(this).data('item_weight'));
                $('.eo_qty').val($(this).data('item_qty'));
            });

            $(document).on('click', '.eo_deleteItem', function () {
                var data = {
                    trip_id: $(this).data('trip_id'),
                    order_id: $(this).data('order_id'),
                    item_id: $(this).data('item_id')
                };
                bootbox.confirm('Are you sure you want to delete this item?', function (r) {
                    if (r) {
                        editOrder_deleteItem(data);
                    }
                });
            });

            $(document).on('click', '.bulkDropDelete', function () {
                var id = $(this).data('id');
                bootbox.confirm('Are you sure you want to delete record?', function (r) {
                    if (r) {
                        bulkDropDelete(id);
                    }
                });
            });

            //Rooshan
            $(document).on('click', '.gatePass', function (e) {
                e.stopPropagation();
                var trip_id = $(this).data('trip_id');
                var params = {
                    orders: $(this).data('orders'),
                    trip_id: $(this).data('trip_id'),
                    vehicle: $(this).data('vehicle')
                }

                window.location = "<?php echo e(url('/map/pdf?')); ?>" + $.param(params);
            });

            $(document).on('click', '.endTrip', function (e){
               e.stopPropagation();
               var that = $(this);
               var trip_id = $(this).data('trip_id');

                $.post("<?php echo e(url('/map/endTrip')); ?>", {_token: _token, trip_id: $(this).data('trip_id'), vehicle: $(this).data('vehicle')}, function (e) {
                    console.log(e);
                    if(e.status == true){
                        that.removeClass('btn-warning').addClass('btn-success')
                        setTimeout(function (){
                            $(".endedTrip").attr('disabled', true);
                            that.html('Ended Trip <span class="fa fa-car"></span>').attr('disabled', true);
                        }, 1000);
                    }
                }, 'json');
            });

            function bulkDropDelete(id) {
                if (id != undefined && id != '' && $.isInt(id)) {
                    $.post("<?php echo e(url('/map/bulkDropDelete')); ?>", {_token: _token, id: id}, function (e) {
                        if (e != undefined && e != null && e != '') {
                            preload_trip(e);
                        }
                    }, 'json');
                }
            }

            $('.newOrder').click(function () {
                newOrder_loadOrder();
            });

            $('#modal_editOrder').on('show.bs.modal', function (e) {
                editOrder_environment('save');
            });

            $('#modal_editOrder').on('hidden.bs.modal', function (e) {
                preload_trip($('.cancelTrip').val());
            });

            $('#modal_newOrder').on('show.bs.modal', function (e) {
                newOrder_environment('save');
            });

            $('#modal_newOrder').on('hidden.bs.modal', function (e) {
                preload_trip($('.cancelTrip').val());
                load_ordersList();
            });

            $('#modal_editOrder .eo_cancel').click(function () {
                $('.eo_code').prop('disabled', false);
                $('.eo_name').prop('disabled', false);
                $('.eo_volume').prop('disabled', false);
                $('.eo_weight').prop('disabled', false);
                editOrder_environment('save');
            });

            $('#modal_editOrder .eo_save').click(function () {
                var data = {
                    trip_id: $(this).data('trip_id'),
                    order_id: $(this).data('order_id'),
                    item_id: $(this).data('item_id'),
                    eo_code: $('.eo_code').val(),
                    eo_name: $('.eo_name').val(),
                    eo_volume: $('.eo_volume').val(),
                    eo_weight: $('.eo_weight').val(),
                    eo_qty: $('.eo_qty').val()
                };
                editOrder_saveItem(data);
            });

            $('#modal_editOrder .eo_update').click(function () {
                var data = {
                    trip_id: $(this).data('trip_id'),
                    order_id: $(this).data('order_id'),
                    item_id: $(this).data('item_id'),
                    eo_code: $('.eo_code').val(),
                    eo_name: $('.eo_name').val(),
                    eo_volume: $('.eo_volume').val(),
                    eo_weight: $('.eo_weight').val(),
                    eo_qty: $('.eo_qty').val()
                };
                editOrder_updateItem(data);
            });

            $('.eo_itemsList').change(function () {
                if ($(this).val() != '') {
                    editOrder_environment('clear');

                    $('.eo_code').prop('disabled', true);
                    $('.eo_name').prop('disabled', true);
                    $('.eo_volume').prop('disabled', true);
                    $('.eo_weight').prop('disabled', true);

                    var item_id = $('option:selected', $(this)).val();
                    var code = $('option:selected', $(this)).data('item_code');
                    var name = $('option:selected', $(this)).data('item_name');
                    var volume = $('option:selected', $(this)).data('item_volume');
                    var weight = $('option:selected', $(this)).data('item_weight');

                    $('.eo_save').data('item_id', item_id);
                    $('.eo_code').val(code);
                    $('.eo_name').val(name);
                    $('.eo_volume').val(volume);
                    $('.eo_weight').val(weight);

                } else {
                    editOrder_environment('clear');

                    $('.eo_code').prop('disabled', false);
                    $('.eo_name').prop('disabled', false);
                    $('.eo_volume').prop('disabled', false);
                    $('.eo_weight').prop('disabled', false);
                }
            });

            $('.no_cancel').click(function () {
                newOrder_environment('save');
            });

            $('.no_update').click(function () {
                var data = {
                    trip_id: $('.cancelTrip').val(),
                    id: $(this).data('order_id'),
                    no_locationsList: $('.no_locationsList').val(),
                    no_weight: $('.no_weight').val(),
                    no_volume: $('.no_volume').val()
                };
                newOrder_updateOrder(data);
            });

            $('.no_save').click(function () {
                var data = {
                    'no_locationsList': $('.no_locationsList').val(),
                    'no_volume': $('.no_volume').val(),
                    'no_weight': $('.no_weight').val()
                };
                newOrder_saveOrder(data);
            });

            $(document).on('click', '.no_edit', function () {
                newOrder_environment('update');
                $('.no_location_name').html($(this).data('location_name'));
                $('.no_update').data('order_id', $(this).data('id'));
                $('.no_locationsList').val($(this).data('location_id'));
                $('.no_weight').val($(this).data('order_weight'));
                $('.no_volume').val($(this).data('order_volume'));
            });

            $(document).on('click', '.no_delete', function () {
                var id = $(this).data('id');
                bootbox.confirm('Are you sure you want to delete this order?', function (r) {
                    if (r) {
                        newOrder_deleteOrder(id);
                    }
                });
            });

            function newOrder_deleteOrder(id) {
                $.post("<?php echo e(url('/map/newOrder_deleteOrder')); ?>", {_token: _token, id: id}, function (e) {
                    $.highlightOrThrow(e, function () {
                        newOrder_environment('save');
                        newOrder_loadOrder();
                    });
                }, 'json');
            }

            function newOrder_saveOrder(data) {
                $.post("<?php echo e(url('/map/newOrder_saveOrder')); ?>", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        newOrder_environment('save');
                        newOrder_loadOrder();
                    });
                }, 'json');
            }

            function newOrder_updateOrder(data) {
                $.post("<?php echo e(url('/map/newOrder_updateOrder')); ?>", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        newOrder_environment('save');
                        newOrder_loadOrder();
                    });
                }, 'json');
            }

            function newOrder_environment(method) {
                $.clearHighlights();
                $('.no_update').data('order_id', '');
                $('.no_location_name').html('');
                $('.no_locationsList').val('');
                $('.no_weight').val('');
                $('.no_volume').val('');
                if (typeof(method) == 'string') {
                    if (method == 'save') {
                        $('.no_updateWrapper').hide();
                        $('.no_saveWrapper').show();
                    } else if (method == 'update') {
                        $('.no_saveWrapper').hide();
                        $('.no_updateWrapper').show();
                    }
                }
            }

            function newOrder_loadOrder() {
                newOrder_environment('save');
                $.post("<?php echo e(url('/map/newOrder_loadOrder')); ?>", {_token: _token}, function (e) {

                    if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('locations') && e.hasOwnProperty('orders')) {

                        var orders = e.orders;
                        var locations = e.locations;


                        var sdom = '<option value="">Select a location</option>';
                        if (Object.keys(locations).length > 0) {
                            $.each(locations, function (i, location) {
                                sdom += '<option value="' + location.id + '">' + location.name + '</option>';
                            });
                        } else {
                            sdom = '<option value="">No locations found</option>';
                        }
                        $('.no_locationsList').html(sdom);


                        var tdom = '';
                        if (Object.keys(orders).length > 0) {
                            $.each(orders, function (i, order) {
                                tdom += '<tr>';
                                tdom += '<td>' + order.id + '</td>';
                                tdom += '<td>' + order.name + '</td>';
                                tdom += '<td>' + order.orderWeight + '</td>';
                                tdom += '<td>' + order.orderVolume + '</td>';
                                tdom += '<td>';
                                tdom += '<div class="btn-group">';
                                tdom += '	<button class="btn btn-warning btn-xs no_edit" data-id="' + order.id + '" data-location_id="' + order.location_id + '" data-location_name="' + order.name + '" data-order_weight="' + order.orderWeight + '" data-order_volume="' + order.orderVolume + '"><i class="fa fa-pencil"></i></button>';
                                tdom += '	<button class="btn btn-danger btn-xs no_delete" data-id="' + order.id + '"><i class="fa fa-close"></i></button>';
                                tdom += '<div>';
                                tdom += '</td>';
                                tdom += '</tr>';
                            });
                        } else {
                            tdom += '<tr><th class="text-center" colspan="5">Sorry, No orders added.</th></tr>';
                        }
                        $('.no_orders tbody').html(tdom);
                    }


                    $('#modal_newOrder').modal('show');
                }, 'json');
            }

            function editOrder_deleteItem(data) {
                $.post("<?php echo e(url('/map/editOrder_deleteItem')); ?>", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        editOrder_environment('save');
                        editOrder_loadOrder(data);
                    });
                }, 'json');
            }

            function editOrder_updateItem(data) {
                $.post("<?php echo e(url('/map/editOrder_updateItem')); ?>", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        editOrder_environment('save');
                        editOrder_loadOrder(data);
                    });
                }, 'json');
            }

            function editOrder_saveItem(data) {
                $.post("<?php echo e(url('/map/editOrder_saveItem')); ?>", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        editOrder_environment('save');
                        editOrder_loadOrder(data);
                    });
                }, 'json');
            }

            function editOrder_environment(method) {
                $.clearHighlights();
                $('.eo_code').val('');
                $('.eo_name').val('');
                $('.eo_volume').val('');
                $('.eo_weight').val('');
                $('.eo_qty').val('');
                if (typeof(method) == 'string') {
                    if (method == 'save') {
                        $('.eo_updateWrapper').hide();
                        $('.eo_saveWrapper').show();
                        $('.eo_newItemWrapper').show();
                        $('.eo_save').data('item_id', "");
                    } else if (method == 'update') {
                        $('.eo_saveWrapper').hide();
                        $('.eo_updateWrapper').show();
                        $('.eo_newItemWrapper').hide();
                    } else if (method == 'clear') {
                        $('.eo_save').data('item_id', "");
                    }
                }
            }

            function editOrder_loadOrder(data) {
                var $modal = $('#modal_editOrder');
                editOrder_environment('save');
                if (data.order_id != undefined && data.order_id != '') {

                    $('.eo_save, .eo_update').data('trip_id', data.trip_id);
                    $('.eo_save, .eo_update').data('order_id', data.order_id);

                    $('.eo_code').prop('disabled', false);
                    $('.eo_name').prop('disabled', false);
                    $('.eo_volume').prop('disabled', false);
                    $('.eo_weight').prop('disabled', false);

                    $.post("<?php echo e(url('/map/editOrder_loadOrder')); ?>", {_token: _token, data: data}, function (e) {
                        if (e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0 && e.hasOwnProperty('order') && e.hasOwnProperty('items') && e.hasOwnProperty('count') && e.hasOwnProperty('itemsList') && typeof(e.items) == 'object' && typeof(e.itemsList) == 'object') {

                            var order = e.order;
                            var items = e.items;
                            var count = e.count;
                            var itemsList = e.itemsList;

                            var sdom = '<option value="">Create new item</option>';
                            $.each(itemsList, function (i, item) {
                                sdom += '<option value="' + item.id + '" data-item_code="' + item.code + '" data-item_name="' + item.name + '" data-item_volume="' + item.volume + '" data-item_weight="' + item.weight + '">' + item.name + '</option>';
                            });
                            $('.eo_itemsList').html(sdom);


                            $('.eo_title', $modal).html('Edit Order #' + order.id + '<small class="pull-right">' + order.name + '</small>');

                            var tdom = '<tr>';
                            tdom += '<th colspan="2">Available items : ' + count + '</th>';
                            tdom += '</tr>';
                            tdom += '<tr>';
                            tdom += '<th>Original Volume : ' + order.orderVolume.toFixed(3) + ' CBM</th>';
                            tdom += '<th>Original Weight : ' + order.orderWeight.toFixed(3) + ' Kg</th>';
                            tdom += '</tr>';
                            tdom += '<tr>';
                            tdom += '<th>Remaining Volume : ' + order.remainingVolume.toFixed(3) + ' CBM</th>';
                            tdom += '<th>Remaining Weight : ' + order.remainingWeight.toFixed(3) + ' Kg</th>';
                            tdom += '</tr>';
                            $('.eo_summary thead', $modal).html(tdom);


                            var tdom = '';
                            if (Object.keys(items).length > 0) {
                                $.each(items, function (i, item) {
                                    tdom += '<tr>';
                                    tdom += '<td>' + item.code + '</td>';
                                    tdom += '<td>' + item.name + '</td>';
                                    tdom += '<td>' + item.qty + '</td>';
                                    tdom += '<td>' + item.remainingQty + '</td>';
                                    tdom += '<td>' + item.remainingVolume + '</td>';
                                    tdom += '<td>' + item.remainingWeight + '</td>';
                                    tdom += '<td>';
                                    tdom += '<div class="btn-group">';
                                    tdom += '<button class="btn btn-warning btn-xs eo_editItem" data-item_id="' + item.id + '" data-item_code="' + item.code + '" data-item_name="' + item.name + '" data-item_volume="' + item.itemVolume + '" data-item_weight="' + item.itemWeight + '" data-item_qty="' + item.qty + '"><i class="fa fa-pencil"></i></button>';
                                    tdom += '<button class="btn btn-danger btn-xs eo_deleteItem" data-trip_id="' + data.trip_id + '" data-order_id="' + data.order_id + '" data-item_id="' + item.id + '"><i class="fa fa-close"></i></button>';
                                    tdom += '</div>';
                                    tdom += '</td>';
                                    tdom += '</tr>';
                                });
                            } else {
                                tdom = '<tr><th class="text-center" colspan="7">Sorry, No results found.</th></tr>';
                            }
                            $('.eo_items tbody', $modal).html(tdom);


                        } else {
                            $('.title', $modal).html('Sorry trip data not found.');
                            $('.modal-body', $modal).html('');
                        }
                    }, 'json');

                    $('#modal_editOrder').modal('show');

                } else {
                    $.notify.error('<b>Invalid order selected</b>');
                }
            }

            function deleteOrder(trip_order_id) {
                $.post("<?php echo e(url('/map/deleteOrder')); ?>", {_token: _token, trip_order_id: trip_order_id}, function (e) {
                    if (e != undefined && e != null && e != '') {
                        preload_trip(e);
                    }
                }, 'json');
            }

            function deleteVehicle(trip_vehicle_id) {
                $.post("<?php echo e(url('/map/deleteVehicle')); ?>", {
                    _token: _token,
                    trip_vehicle_id: trip_vehicle_id
                }, function (e) {
                    if (e != undefined && e != null && e != '') {
                        preload_trip(e);
                    }
                }, 'json');
            }

            function loadSummary() {
                var $target = $('.trip_summary');

                var arrow = '<div class="arrow" style="display: inline-block; margin-top: 10px; padding: 0px 10px 0px 10px;">';
                arrow += '<i class="fa fa-long-arrow-right"></i>';
                arrow += '</div>';

                $.post("<?php echo e(url('/map/loadSummary')); ?>", {_token: _token}, function (e) {
                    var dom = '';

                    if (typeof(e) == 'object' && Object.keys(e).length > 0) {

                        $.each(e, function (i, trip) {

                            dom += '<div class="img-thumbnail form-group trip">';
                            dom += '	<div class="alert title">';
                            dom += '		<span><b>Trip #' + trip.id + '</b></span>';
                            dom += '		<div class="btn-wrapper pull-right">';
                            dom += '			<button class="btn btn-xs btn-warning editTrip" data-trip_id="' + trip.id + '"><i class="fa fa-pencil"></i></button>';
                            dom += '			<button class="btn btn-xs btn-danger deleteTrip" data-trip_id="' + trip.id + '"><i class="fa fa-close"></i></button>';
                            dom += '		</div>';
                            dom += '	</div>';


                            var vehicles = trip.vehicles;

                            if (typeof(vehicles) == 'object' && Object.keys(vehicles).length > 0) {
                                $.each(vehicles, function (i, vehicle) {

                                    var items = vehicle.items;
                                    var points = vehicle.points;
                                    dom += '<div class="row"><div class="col-md-12">';
                                    dom += '	<div class="col-xs-6" style="padding-left: 0px;">';
                                    dom += '		<div class="table-responsive">';
                                    if (typeof(items) == 'object' && Object.keys(items).length > 0) {

                                        dom += '			<table class="table table-bordered table-condensed" style="border:none;">';
                                        dom += '				<thead>';
                                        dom += '					<tr>';
                                        dom += '						<th colspan="3" style="border: none;">' + vehicle.number + ' Items Loaded</th>';
                                        dom += '					</tr>';
                                        dom += '					<tr>';
                                        dom += '						<th width="60px;" style="padding-left: 30px; border:none;">#</th>';
                                        dom += '						<th style="padding-left: 30px; border:none;">Name</th>';
                                        dom += '						<th width="100px;" style="padding-left: 30px; border:none;">Qty</th>';
                                        dom += '					</tr>';
                                        dom += '				</thead>';
                                        dom += '				<tbody>';

                                        var invoice_nums = [];

                                        $.each(items, function (j, item) {
                                            invoice_nums.push(item.num);

                                            dom += '					<tr>';
                                            dom += '						<td style="padding-left: 30px; border: none;">' + (++i) + '</td>';
                                            dom += '						<td style="padding-left: 30px; border: none;">Order #' + item.num + ' - ' + item.name + '</td>';
                                            dom += '						<td style="padding-left: 30px; border: none;">' + item.qty + '</td>';
                                            dom += '					</tr>';

                                        });

                                        ;

                                        dom += '				</tbody>';
                                        dom += '			</table>';
                                        dom += '			<button data-trip_id="' + trip.id + '" data-vehicle="' + vehicle.transporter_vehicle_id + '" data-orders="' + invoice_nums.join(",") + '" class="btn btn-info gatePass">Gate Pass <span class="fa fa-print"></span></button>';
                                        if(vehicle.complete == 0)
                                            dom += '            <button data-trip_id="' + trip.id + '" data-vehicle="' + vehicle.transporter_vehicle_id + '" class="btn btn-danger endTrip">End Trip <span class="fa fa-car"></span></button> ';
                                        else
                                            dom += '            <button disabled="true" class="btn btn-success endedTrip">Ended Trip <span class="fa fa-car"></span></button> ';
                                        dom += '<hr>';

                                    } else {
                                        dom += '			<table class="table table-bordered table-condensed">';
                                        dom += '				<thead>';
                                        dom += '					<tr>';
                                        dom += '						<td style="border: none;">-- no items added for <b>' + vehicle.number + '</b> --</td>';
                                        dom += '					</tr>';
                                        dom += '				</thead>';
                                        dom += '			</table>';


                                    }
                                    dom += '		</div>';
                                    dom += '	</div>';

                                    if (typeof(points) == 'object' && Object.keys(points).length > 0) {

                                        if (Object.keys(items).length > 0) {
                                            dom += '	<div class="img-thumbnail tv_drop_points col-xs-6">';
                                        } else {
                                            dom += '	<div class="img-thumbnail tv_drop_points col-xs-6" style="margin-top: 0px;">';
                                        }

                                        $.each(points, function (p, point) {

                                            if (p == 0) {
                                                dom += point.name;
                                            } else {
                                                dom += arrow + point.name;
                                            }

                                        });

                                        dom += '	</div>';

                                    } else {
                                        if (Object.keys(items).length > 0) {
                                            dom += '	<div class="img-thumbnail tv_drop_points col-xs-6">';
                                        } else {
                                            dom += '	<div class="img-thumbnail tv_drop_points col-xs-6" style="margin-top: 0px;">';
                                        }
                                        dom += '		-- no drop points added --';
                                        dom += '	</div>';
                                    }

                                    dom += '</div></div>';
                                });
                            } else {
                                dom += '<div class="row"><div class="col-md-12">';
                                dom += '	<div class="col-xs-6" style="padding-left: 0px;">';
                                dom += '		<div class="table-responsive">';

                                dom += '			<table class="table table-bordered table-condensed">';
                                dom += '				<thead>';
                                dom += '					<tr>';
                                dom += '						<td style="border: none;">-- no vehicles added --</td>';
                                dom += '					</tr>';
                                dom += '				</thead>';
                                dom += '				<tbody></tbody>';
                                dom += '			</table>';

                                dom += '		</div>';
                                dom += '	</div>';

                                dom += '	<div class="img-thumbnail tv_drop_points col-xs-6" style="margin-top: 0px;">';
                                dom += '		-- no drop points added --';
                                dom += '	</div>';
                                dom += '</div>';
                            }

                            dom += '</div></div>';

                        });

                    } else {

                        dom += '-- no trips added --';

                    }


                    $target.html(dom);
                }, 'json');
            }

            function temp() {
                var $tbody = $('.tripSummary tbody');

                var arrow = '<div class="arrow" style="display: inline-block; margin-top: 10px; padding: 0px 10px 0px 10px;">';
                arrow += '<i class="fa fa-long-arrow-right"></i>';
                arrow += '</div>';

                $.post("<?php echo e(url('/map/loadSummary')); ?>", {_token: _token}, function (e) {

                    var dom = '';

                    if (e != undefined && typeof(e) == 'object' && Object.keys(e).length > 0) {
                        $.each(e, function (i, k) {

                            dom += '<tr>';

                            dom += '<td rowspan="' + k.rowspan + '">' + i + '</td>';

                            if (k.set != undefined) {
                                $.each(k.set, function (l, m) {

                                    if (l == 0) {

                                        dom += '<td rowspan="' + m.rowspan + '">' + m.vehicle.number + '</td>';

                                        var points = '';
                                        $.each(m.points, function (p, q) {
                                            if (p == 0) {
                                                points += q.name;
                                            } else {
                                                points += arrow + q.name;
                                            }
                                        });

                                        if (Object.keys(m.items).length > 0) {
                                            $.each(m.items, function (n, o) {

                                                if (n == 0) {
                                                    dom += '<td>Order ' + o.order_id + ' - ' + o.name + '</td>';
                                                    dom += '<td>' + o.qty + '</td>';
                                                    dom += '<td rowspan="' + m.rowspan + '">' + points + '</td>';

                                                    dom += '<td rowspan="' + k.rowspan + '">';
                                                    dom += '<div class="btn-group">';
                                                    dom += '<button class="btn btn-sm btn-warning editTrip" data-trip_id="' + i + '"><i class="fa fa-pencil"></i></button>';
                                                    dom += '<button class="btn btn-sm btn-danger deleteTrip" data-trip_id="' + i + '"><i class="fa fa-close"></i></button>';
                                                    dom += '</div>';
                                                    dom += '</td>';

                                                    dom += '</tr>';
                                                } else {
                                                    dom += '<tr>';
                                                    dom += '<td>Order ' + o.order_id + ' - ' + o.name + '</td>';
                                                    dom += '<td>' + o.qty + '</td>';
                                                    dom += '</tr>';
                                                }
                                            });
                                        } else {
                                            dom += '<td colspan="2"></td>';
                                            dom += '<td></td>';
                                            dom += '<td>';
                                            dom += '<div class="btn-group">';
                                            dom += '<button class="btn btn-sm btn-warning editTrip" data-trip_id="' + i + '"><i class="fa fa-pencil"></i></button>';
                                            dom += '<button class="btn btn-sm btn-danger deleteTrip" data-trip_id="' + i + '"><i class="fa fa-close"></i></button>';
                                            dom += '</div>';
                                            dom += '</td>';
                                        }


                                    } else {

                                        dom += '<tr>';
                                        dom += '<td rowspan="' + m.rowspan + '">' + m.vehicle.number + '</td>';

                                        var points = '';
                                        $.each(m.points, function (p, q) {
                                            if (p == 0) {
                                                points += q.name;
                                            } else {
                                                points += arrow + q.name;
                                            }
                                        });
                                        if (Object.keys(m.items).length > 0) {
                                            $.each(m.items, function (n, o) {

                                                if (n == 0) {
                                                    dom += '<td>Order ' + o.order_id + ' - ' + o.name + '</td>';
                                                    dom += '<td>' + o.qty + '</td>';
                                                    dom += '<td rowspan="' + m.rowspan + '">' + points + '</td>';
                                                    dom += '</tr>';
                                                } else {
                                                    dom += '<tr>';
                                                    dom += '<td>Order ' + o.order_id + ' - ' + o.name + '</td>';
                                                    dom += '<td>' + o.qty + '</td>';
                                                    dom += '</tr>';
                                                }

                                            });
                                        } else {
                                            dom += '<td colspan="2"></td> <td></td>';
                                        }
                                    }
                                });
                            } else {
                                dom += '<td colspan="4"></td>';
                                dom += '<td>';
                                dom += '<div class="btn-group">';
                                dom += '<button class="btn btn-sm btn-warning editTrip" data-trip_id="' + i + '"><i class="fa fa-pencil"></i></button>';
                                dom += '<button class="btn btn-sm btn-danger deleteTrip" data-trip_id="' + i + '"><i class="fa fa-close"></i></button>';
                                dom += '</div>';
                                dom += '</td>';
                            }

                        });
                    } else {
                        dom = '<tr><th class="text-center" colspan="5">Sorry, No results found.</th></tr>';
                    }

                    $tbody.html(dom);
                }, 'json');
            }

            function completeTrip(data) {
                $.post("<?php echo e(url('/map/completeTrip')); ?>", {_token: _token, data: data}, function (e) {
                    if (e != undefined && e != '') {
                        var msg = 'You are currently editing trip <strong>#' + e + '</strong>';
                        setNotification(msg);
                        resetActions('update', e);
                        $.notify.success('<b>Successfully marked as complete.</b>');
                    }
                }, 'json');
            }

            function save(data) {
                $.post("<?php echo e(url('/map/saveRoute')); ?>", {_token: _token, data: data}, function (e) {
                    throwError(e, function () {
                        if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('trip_id') && e.hasOwnProperty('vehicle_id') && e.trip_id != undefined && e.vehicle_id != undefined) {
                            preload_trip(e.trip_id, e.vehicle_id);
                            $.notify.success('<b>Successfully saved.</b>');
                        }
                    });
                }, 'json');
            }

            function removePoint(id) {
                var data = {
                    id: id,
                    trip_id: $('.cancelTrip').val(),
                    vehicle_id: $('.tripVehiclesList').val()
                };

                if (data.id != undefined && data.id != null && data.id != '') {
                    $.post("<?php echo e(url('/map/removePoint')); ?>", {_token: _token, data: data}, function (e) {
                        if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('trip_id') && e.hasOwnProperty('vehicle_id') && e.trip_id != undefined && e.vehicle_id != undefined) {
                            preload_trip(e.trip_id, e.vehicle_id);
                        }
                    }, 'json');
                } else {
                    $.notify.error('<b>Invalid record selected.</b>');
                }
            }

            function addPoint(data) {
                if (data.trip_id != undefined && data.trip_id != null && data.trip_id != '') {
                    if (data.vehicle_id != undefined && data.vehicle_id != null && data.vehicle_id != '') {
                        $.post("<?php echo e(url('/map/addPoint')); ?>", {_token: _token, data: data}, function (e) {
                            if (e != undefined && typeof(e) == 'object' && e.hasOwnProperty('trip_id') && e.hasOwnProperty('vehicle_id') && e.trip_id != undefined && e.vehicle_id != undefined) {
                                preload_trip(e.trip_id, e.vehicle_id);
                            }
                        }, 'json');
                    } else {
                        $.notify.error('<b>Select a vehicle.</b>');
                    }
                } else {
                    $.notify.error('<b>Invalid record selected.</b>');
                }
            }

            function preload_incompleteTrip() {
                $.post("<?php echo e(url('/map/preload_incompleteTrip')); ?>", {_token: _token}, function (trip_id) {
                    if (trip_id != undefined && trip_id != null && trip_id != '') {
                        var msg = 'Trip <strong>#' + trip_id + '</strong> is not fully completed. You can continue editing it.';
                        setNotification(msg);
                        resetActions('inprogress', trip_id);
                    } else {
                        resetActions('save');
                    }
                }, 'json');
            }

            function cancelTrip(id) {
                $.post("<?php echo e(url('/map/cancelTrip')); ?>", {_token: _token, id: id}, function (e) {
                    if (e != undefined && e != null && e != '') {
                        resetActions('save');
                        var msg = 'Trip <strong>#' + e + '</strong> has been deleted.';
                        setNotification(msg, 'danger');
                        $.notify.success('<b>Trip #' + e + ' has been deleted</b>');
                        loadSummary();
                    }
                }, 'json');
            }

            function resetActions(type, id) {
                $('.cancelTrip').val("");
                $('.finishTrip').val("");
                if (id != undefined && id != '') {
                    $('.cancelTrip').val(id);
                    $('.updateTrip').val(id);
                    preload_trip(id);
                }
                if (type == 'save') {
                    $('.cancelTripWrapper').hide();
                    $('.updateTripWrapper').hide();
                    $('.createTripWrapper').show();
                    $('.editor').hide();
                    preload_trip();
                } else if (type == 'inprogress') {
                    $('.createTripWrapper').hide();
                    $('.updateTripWrapper').hide();
                    $('.cancelTripWrapper').show();
                    $('.editor').show();
                } else if (type == 'update') {
                    $('.createTripWrapper').hide();
                    $('.cancelTripWrapper').hide();
                    $('.updateTripWrapper').show();
                    $('.editor').show();
                }
            }

            function setNotification(msg, type) {
                type = type || 'info';
                msg = msg || '';

                var dom = '<div class="alert alert-' + type + ' alert-dismissable fade in" style="margin-bottom: 0px;">';
                dom += '	<i class="close" data-dismiss="alert" aria-label="close">&times;</i>';
                dom += msg;
                dom != '</div>';
                $('.notification').html(dom);
            }

            function createTrip() {
                $.post("<?php echo e(url('/map/createTrip')); ?>", {_token: _token}, function (e) {
                    if (e != null && typeof(e) == 'object' && e.hasOwnProperty('msg') && e.hasOwnProperty('trip_id') && e.hasOwnProperty('method')) {
                        setNotification(e.msg);
                        resetActions('update', e.trip_id);
                    }
                }, 'json');
            }

            function saveVehicle(vehicle_id) {
                var data = {
                    trip_id: $('.cancelTrip').val(),
                    vehicle_id: vehicle_id
                };

                if (data.trip_id != undefined && data.trip_id != null && data.trip_id != '') {
                    if (data.vehicle_id != undefined && data.vehicle_id != '') {
                        $.post("<?php echo e(url('/map/saveVehicle')); ?>", {_token: _token, data: data}, function (e) {
                            throwError(e, function () {
                                preload_trip(e);
                            });
                        }, 'json');
                    } else {
                        $.notify.error("<b>Invalid vehicle selected.</b>");
                    }
                } else {
                    $.notify.error("<b>Invalid trip.</b>");
                }
            }

            var oldHeight = 0;

            function setFixedHeight() {
                var currentHeight = $('.editor').height();

                if (currentHeight > oldHeight) {
                    oldHeight = currentHeight;
                    $('.editor').height(currentHeight);
                }
            }

            function saveOrder(order_id) {
                var data = {
                    trip_id: $('.cancelTrip').val(),
                    order_id: order_id
                };

                if (data.trip_id != undefined && data.trip_id != null && data.trip_id != '') {
                    if (data.order_id != undefined && data.order_id != '') {

                        $.post("<?php echo e(url('/map/saveOrder')); ?>", {_token: _token, data: data}, function (e) {
                            throwError(e, function () {
                                preload_trip(e);
                            });
                        }, 'json');
                    } else {
                        $.notify.error("<b>Invalid order selected.</b>");
                    }
                } else {
                    $.notify.error("<b>Invalid trip.</b>");
                }
            }

            function preload_trip(trip_id, selected_vehicle_id) {

                selected_vehicle_id = selected_vehicle_id || '';
                // var selected_vehicle_id = $('.tripVehiclesList').val() || '';

                var $vehicles = $('.vehicles');
                var $orders = $('.orders');
                var $tripVehicles = $('.tripVehiclesList');
                var $route = $('.route');
                var $startingLocations = $('.startingLocationsList');

                $vehicles.html('');
                $orders.html('');
                $tripVehicles.html('<option>Select a vehicle</option>');
                $route.html('-- drop points not loaded --');
                $startingLocations.html('<option>Select a starting location</option>');


                $.post("<?php echo e(url('/map/preload_trip')); ?>", {
                    _token: _token,
                    trip_id: trip_id,
                    selected_vehicle_id: selected_vehicle_id
                }, function (e) {
                    var dom = '';
                    var vehicles = e.vehicles;
                    var orders = e.orders;

                    $.each(orders, function (i, k) {
                        if (typeof(k) == 'object' && k.hasOwnProperty('order') && k.hasOwnProperty('items') && k.hasOwnProperty('total')) {
                            var order = k.order;
                            var total = k.total;
                            var items = k.items;

                            dom += '<div class="img-thumbnail form-group col-xs-12 order" data-trip_id="' + order.trip_id + '" data-trip_order_id="' + order.id + '"  data-order_id="' + order.order_id + '">';
                            dom += '	<div class="heading">';
                            dom += '		' + order.location + ' <span class="pull-right">Order ' + order.num + ' <i class="btn btn-xs deleteOrder text-danger fa fa-close" data-trip_order_id="' + order.id + '"></i></span>';
                            dom += '	</div>';
                            dom += '	<div class="body">';
                            dom += '		<div class="form-group summary">';
                            dom += '			<button class="btn btn-primary btn-xs expander">';
                            dom += '				<i aria-hidden="true" class="fa fa-arrows-v fa-lg"></i>';
                            dom += '			</button>';
                            dom += '			<table class="table table-bordered table-condensed" draggable="true" style="margin-bottom: 0px;">';
                            dom += '				<thead>';
                            dom += '					<tr>';
                            dom += '						<th colspan="2" width="50%">Available Items : ' + total.count + '</th>';
                            dom += '						<th colspan="2" width="50%"><label class="btn btn-warning btn-xs"><input type="checkbox" class="pickFullOrder" /> Pick Full Order</label></th>';
                            dom += '					</tr>';

                            dom += '					<tr>';
                            dom += '						<th colspan="2" width="50%">Original Volume : ' + order.orderVolume.toFixed(3) + '</th>';
                            dom += '						<th colspan="2" width="50%">Original Weight : ' + order.orderWeight.toFixed(3) + '</th>';
                            dom += '					</tr>';

                            dom += '					<tr>';
                            dom += '						<th colspan="2" width="50%">Remaining Volume : ' + order.remainingVolume.toFixed(3) + '</th>';
                            dom += '						<th colspan="2" width="50%">Remaining Weight : ' + order.remainingWeight.toFixed(3) + '</th>';
                            dom += '					</tr>';

                            dom += '				</thead>';
                            dom += '			</table>';
                            dom += '			<button class="btn btn-success btn-xs editOrder" data-order_id="' + order.order_id + '" data-trip_id="' + trip_id + '">';
                            dom += '				<i aria-hidden="true" class="fa fa-pencil fa-lg"></i>';
                            dom += '			</button>';
                            dom += '		</div>';
                            dom += '		<div class="form-group results" style="display: none;">';
                            dom += '			<table class="table table-bordered table-condensed items" style="margin-bottom: 0px;">';
                            dom += '				<thead>';
                            dom += '					<tr>';
                            dom += '						<td>Item</td>';
                            dom += '						<td width="80px">Tot. Vol</td>';
                            dom += '						<td width="80px">Qty</td>';
                            dom += '						<td class="text-center" width="120px"></td>';
                            dom += '					</tr>';
                            dom += '				</thead>';
                            dom += '				<tbody>';

                            if (typeof(k.items) == 'object' && Object.keys(k.items).length > 0) {
                                $.each(k.items, function (i, item) {

                                    dom += '			<tr>';
                                    dom += '				<td>' + item.item + '</td>';
                                    dom += '				<td>' + item.volume.toFixed(3) + '</td>';
                                    dom += '				<td>' + item.qty + '</td>';
                                    dom += '				<td>';
                                    dom += '					<div class="input-group drag" draggable="true" data-trip_order_id="' + order.id + '" data-trip_id="' + order.trip_id + '" data-item_id="' + item.id + '" data-order_id="' + order.order_id + '">';
                                    dom += '						<input class="form-control orderItem" data-item_id="' + item.id + '" type="text" value="' + item.qty + '"> <span class="input-group-addon"><i class="fa fa-arrows-alt"></i></span>';
                                    dom += '					</div>';
                                    dom += '				</td>';
                                    dom += '			</tr>';
                                });
                            }

                            dom += '				</tbody>';
                            dom += '			</table>';
                            dom += '		</div>';
                            dom += '	</div>';
                            dom += '</div>';
                        }
                    });
                    $orders.html(dom);


                    dom = '';
                    $.each(vehicles, function (i, k) {
                        if (typeof(k) === 'object' && k.hasOwnProperty('vehicle') && k.hasOwnProperty('items') && k.hasOwnProperty('points')) {

                            var vehicle = k.vehicle;
                            var items = k.items;
                            var points = k.points;

                            dom += '<div class="img-thumbnail form-group col-xs-12 drop vehicle" data-trip_vehicle_id="' + vehicle.id + '">';
                            dom += '	<div class="heading">';
                            dom += '		' + vehicle.number + '<span class="pull-right">' + vehicle.transporter + ' <i class="btn btn-xs deleteVehicle text-danger fa fa-close" data-trip_vehicle_id="' + vehicle.id + '"></i></span>';
                            dom += '	</div>';
                            dom += '	<div class="body">';
                            dom += '		<div class="form-group" style="margin-bottom: 8px;">';
                            dom += '			<table class="table table-bordered table-condensed items" style="margin-bottom: 0px;">';
                            dom += '				<thead>';
                            dom += '					<td>Order #</td>';
                            dom += '					<td>Product</td>';
                            dom += '					<td>Volume</td>';
                            dom += '					<td>Qty</td>';
                            dom += '					<td class="text-center" width="40px"><i class="fa fa-gear"></i></td>';
                            dom += '				</thead>';
                            dom += '				<tbody>';

                            if (typeof(k.items) == 'object' && Object.keys(k.items).length > 0) {
                                $.each(k.items, function (i, item) {

                                    dom += '			<tr>';
                                    dom += '				<td>' + item.num + '</td>';
                                    dom += '				<td>' + item.itemName + '</td>';
                                    dom += '				<td>' + item.volume.toFixed(3) + '</td>';
                                    dom += '				<td>' + item.qty + '</td>';
                                    dom += '				<td class="text-center">';
                                    dom += '					<button class="btn btn-danger btn-xs deleteItem" value="' + item.id + '"><i class="fa fa-trash fa-lg"></i></button>';
                                    dom += '				</td>';
                                    dom += '			</tr>';

                                });
                            } else {
                                dom += '<tr><td colspan="5" class="text-center">-- no items added --</td></tr>';
                            }

                            dom += '				</tbody>';
                            dom += '			</table>';
                            dom += '		</div>';

                            if (typeof(vehicle.bulkDrops) == 'object' && Object.keys(vehicle.bulkDrops).length > 0) {


                                dom += '		<div class="form-group">';
                                dom += '			<table class="table table-bordered table-condensed summary">';
                                dom += '				<thead>';
                                dom += '					<th>Bulk Drops</th>';
                                dom += '					<th>Volume</th>';
                                dom += '					<th>Weight</th>';
                                dom += '					<th class="text-center" width="40px"><i class="fa fa-gear"></i></th>';
                                dom += '				</thead>';
                                dom += '				<tbody>';

                                $.each(vehicle.bulkDrops, function (i, bulkDrop) {
                                    dom += '<tr class="bg-success">';
                                    dom += '<td>Order #' + bulkDrop.num + '</td>';
                                    dom += '<td>' + bulkDrop.bulk_volume.toFixed(3) + '</td>';
                                    dom += '<td>' + bulkDrop.bulk_weight.toFixed(3) + '</td>';
                                    dom += '<td><button class="btn btn-xs btn-danger bulkDropDelete" data-id="' + bulkDrop.id + '"><i class="fa fa-trash fa-lg"></i></button></td>';
                                    dom += '</tr>';
                                });


                                dom += '				</tbody>';
                                dom += '			</table>';
                                dom += '		</div>';

                            }


                            dom += '		<div class="form-group">';
                            dom += '			<div class="img-thumbnail" style="width: 100%;">';
                            dom += '				Drop Points';
                            dom += '				<hr style="margin-top: 3px; margin-bottom: 10px;" />';
                            dom += '				<div class="dropPoints">';


                            if (typeof(points) == 'object' && Object.keys(points).length > 0) {
                                var length = Object.keys(points).length;
                                var c = 0;
                                $.each(points, function (i, point) {
                                    if ((++c) < length) {
                                        dom += point + ', ';
                                    } else {
                                        dom += point;
                                    }
                                    c++;
                                });
                            } else {
                                dom += '-- no drop points added --';
                            }

                            dom += '				</div>';
                            dom += '			</div>';
                            dom += '		</div>';
                            dom += '		<div class="form-group" style="margin-bottom: 0px;">';
                            dom += '			<label class="control-label">Loaded Weight : ' + vehicle.loadedWeight.toFixed(3) + ' kg</label>';
                            dom += '		</div>';
                            dom += '		<div class="form-group" style="margin-bottom: 0px;">';
                            dom += '			<div class="progress" style="margin-bottom: 0px;">';
                            if (vehicle.volumeExeeded != 1) {
                                dom += '			<div class="progress-bar progress-bar-success" role="progressbar" style="width: ' + vehicle.volumePercentage + '%">';
                                dom += '				<div class="text-danger" style="font-weight:bold;">';
                                dom += '					<span>Vehicle&nbsp;volume&nbsp;</span><span class="capacity">' + vehicle.loadedVolume.toFixed(3) + '</span>/<span class="volume">' + vehicle.volume + '</span>';
                                dom += '				</div>';
                                dom += '			</div>';

                            } else {
                                dom += '			<div class="progress-bar progress-bar-danger" role="progressbar" style="width: 100%">';
                                dom += '				<div class="text-default" style="font-weight:bold;">';
                                dom += '					<span>Vehicle&nbsp;volume&nbsp;</span><span class="capacity">' + vehicle.loadedVolume + '</span>/<span class="volume">' + vehicle.volume + '</span>';
                                dom += '				</div>';
                                dom += '			</div>';

                            }

                            dom += '			</div>';
                            dom += '		</div>';
                            dom += ' 	</div>';
                            dom += '</div>';
                        }
                    });
                    $vehicles.html(dom);


                    if (e.tripVehicles != undefined && typeof(e.tripVehicles) == 'object' && Object.keys(e.tripVehicles).length > 0) {
                        var dom = '<option value="">Select a vehicle</option>';
                        $.each(e.tripVehicles, function (i, k) {
                            if (k.selected == 1) {
                                dom += '<option value="' + k.id + '" selected>' + k.transporter + ' - ' + k.number + '</option>';
                            } else {
                                dom += '<option value="' + k.id + '">' + k.transporter + ' - ' + k.number + '</option>';
                            }
                        });
                        $tripVehicles.html(dom);
                    }


                    if (e.startingLocations != undefined && typeof(e.startingLocations) == 'object' && Object.keys(e.startingLocations).length > 0) {
                        var dom = '<option value="">Select a starting location</option>';
                        $.each(e.startingLocations, function (i, k) {
                            if (k.selected == 1) {
                                dom += '<option value="' + k.id + '" selected>' + k.name + '</option>';
                            } else {
                                dom += '<option value="' + k.id + '">' + k.name + '</option>';
                            }
                        });
                        $startingLocations.html(dom);
                    }

                    if (e.routeLocationsResult != undefined && e.routeLocationsResult != null && typeof(e.routeLocationsResult) == 'object') {
                        var dom = '';
                        if (Object.keys(e.routeLocationsResult).length > 0) {
                            var routeLocationsCount = Object.keys(e.routeLocationsResult).length;

                            $.each(e.routeLocationsResult, function (i, k) {

                                var data = k.data;
                                var locations = k.locations;

                                dom += '<div class="col-xs-3">';
                                dom += '	<div class="form-group">';
                                dom += '		<div class="input-group">';
                                dom += '			<button class="btn btn-danger btn-sm removePoint" data-id="' + data.id + '"><i class="fa fa-close"></i></button>';
                                if (i > 0) {
                                    dom += '			<span class="input-group-addon direction"><i class="fa fa-long-arrow-right fa-lg"></i></span>';
                                }
                                dom += '			<select class="form-control point">';
                                dom += '				<option value="">Select a drop point</option>';
                                $.each(locations, function (l, m) {
                                    if (m.selected == 1) {
                                        dom += '		<option value="' + m.location_id + '" data-id="' + data.id + '" data-trip_id="' + data.trip_id + '" data-vehicle_id="' + data.transporter_vehicle_id + '" data-location_id="' + m.location_id + '" selected>' + m.name + '</option>';
                                    } else {
                                        dom += '		<option value="' + m.location_id + '" data-id="' + data.id + '" data-trip_id="' + data.trip_id + '" data-vehicle_id="' + data.transporter_vehicle_id + '" data-location_id="' + m.location_id + '">' + m.name + '</option>';
                                    }
                                });
                                dom += '			</select>';
                                if ((++i) == routeLocationsCount) {
                                    dom += '			<span class="input-group-addon addPointWrapper">';
                                    dom += '				<button class="btn btn-primary btn-sm addPoint"><i class="fa fa-plus"></i></button>';
                                    dom += '			</span>';
                                }
                                dom += '		</div>';
                                dom += '	</div>';
                                dom += '</div>';

                            });
                        } else {
                            dom = '<button class="btn btn-primary btn-sm addPoint"><i class="fa fa-plus"></i></button>';
                        }
                        $route.html(dom);
                    } else {
                        $route.html('-- drop points not loaded --');
                    }
                    loadSummary();
                    setFixedHeight();
                }, 'json');
            }


            function load_ordersList() {
                $.post("<?php echo e(url('/map/load_ordersList')); ?>", {_token: _token}, function (e) {
                    var dom = '';
                    if (typeof(e) == 'object' && Object.keys(e).length > 0) {
                        $.each(e, function (i, k) {
                            dom += '<option value="' + k.id + '">Order ' + k.num + '</option>';
                        });
                    } else {
                        dom = '<option>No Orders added.</option>';
                    }
                    $('.ordersList').html(dom);
                }, 'json');
            }

            function load_vehiclesList() {
                $.post("<?php echo e(url('/map/load_vehiclesList')); ?>", {_token: _token}, function (e) {
                    var dom = '';
                    if (typeof(e) == 'object' && Object.keys(e).length > 0) {
                        $.each(e, function (i, k) {
                            dom += '<option value="' + k.id + '">' + k.transporter + ' - ' + k.number + '</option>';
                        });
                    } else {
                        dom = '<option>No Vehicles added.</option>';
                    }
                    $('.vehiclesList').html(dom);
                }, 'json');
            }

            function dropItem($from, $to) {
                var data = {
                    trip_id: $from.data('trip_id'),
                    trip_order_id: $from.data('trip_order_id'),
                    trip_vehicle_id: $to.data('trip_vehicle_id'),
                    item_id: $from.data('item_id'),
                    qty: +$from.find('input:text').val()
                };
                $.post("<?php echo e(url('/map/dropItem')); ?>", {_token: _token, data: data}, function (e) {
                    throwError(e, function (trip_id) {
                        preload_trip(trip_id);
                    });
                }, 'json');
            }

            function throwError(e, callback) {
                if (e != undefined && e != null && e != '') {
                    if (e.hasOwnProperty('errors')) {
                        $.each(e.errors, function (k, msg) {
                            $.notify.error('<b>' + msg + '</b>');
                            return false;
                        });
                    } else {
                        if (e.hasOwnProperty('ok') && e.hasOwnProperty('msg') && e.ok == 0) {
                            $.notify.error('<b>' + e.msg + '</b>');
                        } else {
                            callback(e);
                        }
                    }
                }
            }


            function deleteItem(id) {
                if (id != undefined && id != null && id != '') {
                    $.post("<?php echo e(url('/map/deleteItem')); ?>", {_token: _token, id: id}, function (e) {
                        if (e != undefined && e != null && e != '') {
                            preload_trip(e);
                        }
                    }, 'json');
                } else {
                    $.notify.error("<b>Invalid record selected.</b>");
                }
            }

            function dropSummary($from, $to) {
                var $order = $from.closest('.order');
                var $orderItems = $('.orderItem', $from.closest('.order'));
                var pickFullOrder = $('.pickFullOrder', $from).is(':checked');

                var data = {
                    trip_vehicle_id: $to.data('trip_vehicle_id'),
                    trip_id: $order.data('trip_id'),
                    trip_order_id: $order.data('trip_order_id'),
                    order_id: $order.data('order_id'),
                    pick_full_order: pickFullOrder,
                    items: []
                };
                $orderItems.each(function () {
                    var item = {
                        qty: $(this).val(),
                        item_id: $(this).data('item_id')
                    };
                    data.items.push(item);
                });

                $.post("<?php echo e(url('/map/bulkDrop')); ?>", {_token: _token, data: data}, function (e) {
                    throwError(e, function () {
                        preload_trip(e);
                    });
                }, 'json');
            }


        });
    </script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>