@extends('layouts.main_without_top_button', ['title' => 'LOGISTICS | Loading Orders'])
@section('title')
    Routes
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Routes</li>
    </ul>
@stop
@section('contentinner')
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <style>
        #right-panel {
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #right-panel select, #right-panel input {
            font-size: 15px;
        }

        #right-panel select {
            width: 100%;
        }

        #right-panel i {
            font-size: 12px;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            float: left;
            width: 70%;
            height: 100%;
        }

        #right-panel {
            margin: 20px;
            border-width: 2px;
            width: 20%;
            height: 400px;
            float: left;
            text-align: left;
            padding-top: 0;
        }

        #directions-panel {
            margin-top: 10px;
            background-color: #FFEE77;
            padding: 10px;
            overflow: scroll;
            height: 174px;
        }

        #map_canvas {
            z-index: 99999;
        }
    </style>
    
    <div class="tabbable" onload="loadScript()">
        @include('operations.settings.routes.includes.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="row-fluid" style="margin-bottom: 8px;">
                    <div class="span12  profile-left">
                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <a class="btn" href="{{route('routes.create')}}">CREATE NEW</a>
                                </li>
                                <li class="right btn-group">
                                    <a class="btn" onclick="create('{{route('routes.create')}}')">CREATE NEW</a>
                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->

                        <table class="table table-striped table-bordered table-condensed" id="route_index_datatable">
                            <thead>
                            <tr>
                                <th colspan="2" style="text-align: center">From</th>
                                <th colspan="2" style="text-align: center">To</th>
                                <th colspan="2" style="text-align: center">Distance</th>
                            </tr>
                            <tr>
                                <th>City</th>
                                <th>Country</th>
                                <th>City</th>
                                <th>Country</th>
                                <th>GO Km</th>
                                <th>Return Km</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                        </table>

                    </div><!--span6-->
                </div><!--row-fluid-->
            </div><!--tab-pane-->
        </div>
    </div>
    <script>

        var oTable = jQuery('#route_index_datatable').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No Route records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('routes.data-table.index')}}',
                    data: function (d) {
                        d.client_id = jQuery('#name').val();
                    }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "columns": [
                    {"class": "link", data: 'city_from'},
                    {"class": "link", data: 'country_from'},
                    {"class": "link", data: 'city_to'},
                    {"class": "link", data: 'country_to'},
                    {"class": "link", data: 'go_km'},
                    {"class": "link", data: 'return_km'},
//                {"class": "link", data: 'usd_expenses'},
//                {"class": "link", data: 'tsh_expenses'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

        var mainDataTable = oTable;
        
        $('#create_route_form').on('submit', function (e) {
            e.preventDefault();
            var loading_order_form_id = jQuery(this);
            var formAction = loading_order_form_id.attr('action');
            var formData = loading_order_form_id.serialize();

            jQuery.ajax({
                url: formAction,
                type: 'POST',
                data: formData,
                success: function (data) {
                    console.log(data);

                    if (data.state === 'Done') {
                        resetFormAndClose(loading_order_form_id);
                        jQuery.jGrowl(data.msg);
                        $('#route_index_datatable').dataTable().fnFilter(this.value);
                    } else if (data.state === 'Fail') {
                        jQuery.jGrowl(data.msg);
                    }
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                }
            });
        });


        function loadRouteForApproval(url) {
            jQuery.ajax({
                url: url,
                type: "get",
                beforeSend: function () { startSpinner(); },
                success: function (data) {
                    jQuery('#logistics_modal').empty().append(data);
                    modelShow('logistics_modal');
                    onModalShown();
                },
                complete: function () { stopSpinner() },
                error: function (xhr, textStatus, error) { onAjaxError(xhr, textStatus, error); }
            });
        }


        function editRecordByURL(url) {
            jQuery.ajax({
                url: url,
                type: "GET",
                dataType: "html",
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    jQuery('#edit_form').empty().append(data);
                    jQuery('#edit_model').appendTo("body").modal('toggle');
                },
                complete: function () {
                    stopSpinner()
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                }
            });
        }


        jQuery('.number').keyup(function (event) {
            // skip for arrow keys
            if (event.which >= 37 && event.which <= 40) return;
            // format number
            jQuery(this).val(function (index, value) {
                return value
                    .replace(/\D/g, "")
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            });
        });


        function removeCostRow() {
            jQuery('.removeCostRow').on('click', function () {
                jQuery(this).parent().parent().remove();
                var sum = 0;
                jQuery('.onRoute_amount').each(function () {
                    if (this.value != '') {
                        sum += parseFloat(this.value.replace(',', '').replace(',', '').replace(',', '').replace(',', ''));
                    }
                });
            });
        }
    </script>
    {{--<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyB79NNEPOp-SUuaqOMW7EtIxtss_5MbdnI&callback=initMap"></script>--}}
@stop