@extends('layouts.main_without_top_button')
@section('title', 'Route Profile:Locations')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('route-assignments.index')}}">Route Logs</a> <span class="divider">/</span></li>
        <li>Route Number {{$route_assignment->id}}<span class="divider">/</span></li>
        <li class="active">Locations</li>
    </ul>
@stop
@section('contentinner')
    <div class="tabbable">
        @include('operations.route_assignments.includes.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active" style="min-height: 450px">
                <div class="maincontent">
                    <div class="msghead" style="margin-bottom: 10px">
                        <ul class="msghead_menu">
                            <li class="right">
                                <a onclick="create('{{route('route_assignments.locations.create',['route_assignment_id'=>$route_assignment->id])}}')" class="btn">
                                    <span class="iconsweets-alert2"></span> New Location
                                </a>
                                <button class="btn msgtrash"><span class="iconsweets-printer"></span></button>
                            </li>
                        </ul>
                        <span class="clearall"></span>
                    </div><!--msghead-->

                    <table class="table table-bordered" id="truck_movements_lists">
                        <thead>
                        <tr>
                            <th style="width: 20px">More</th>
                            <th class="head0">RouteNO</th>
                            <th class="head1">Departure</th>
                            <th class="head0">Route</th>
                            <th class="head1">Truck</th>
                            <th class="head1">Trailer</th>
                            <th class="head1">Location</th>
                            <th class="head1">TRA</th>
                            <th class="head1">Remarks</th>
                            <th class="head1">Tracking Time</th>
                        </tr>
                        </thead>
                    </table>
                </div><!--maincontent-->
            </div><!--tab-pane-->
        </div>
    </div>

    {{--@include('routes.includes.locationModal')--}}

    <script>
        jQuery('#truck_movement_date_1,#truck_movement_date_2').datetimepicker();
        jQuery('#client_id').select2();

        var oTable = jQuery('#truck_movements_lists').DataTable({
            lengthMenu: [
                [10, 25, 50, 100, 200],
                ['10 Locations', '25 Locations', '50 Locations', '100 Locations', '100 Locations']
            ],
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading records...",
                "sZeroRecords": "No records to display.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: '{{route('data-table.truck-movements.index')}}',
                data: function (d) {
                    d.client_id = jQuery('#client_id').val();
                    d.start_date = jQuery('#start_date').val();
                    d.end_date = jQuery('#end_date').val();
                }
            },
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                {"class": "link", data: 'route_id'},
                {"class": "link", data: 'departure_date'},
                {"class": "link", data: 'route_name'},
                {"class": "link", data: 'truck'},
                {"class": "link", data: 'trailer'},
                // {"class": "link", data: 'driver_name'},
                {"class": "link", data: 'location'},
                {"class": "link", data: 'tra_fine'},
                {"class": "link", data: 'remarks'},
                {"class": "link", data: 'date'}
            ],
            "bStateSave": true
        });

        jQuery('#search-form').on('click', function (e) {
            e.preventDefault();
            searchTable(e);
        });
        function searchTable(e) {
            oTable.draw();
        }

        // Array to track the ids of the details displayed rows
        var truck_movement_details = [];

        jQuery('#truck_movements_lists tbody').on('click', 'tr td.details-control', function () {

            var tr = jQuery(this).closest('tr');
            var row = oTable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), truck_movement_details);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                truck_movement_details.splice(idx, 1);
            }
            else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    truck_movement_details.push(tr.attr('id'));
                }
            }
        });
        function format(d) {
            return d.more_movement_details;
        }

        jQuery('.delete_location').on('click', function () {
            var location_id = jQuery(this).parent().find('.location_id').val();
            var location_type = jQuery(this).parent().find('.location_type').val();

            jQuery.ajax({
                url: '{{route('route-assignments.locations.destroy')}}',
                type: 'post',
                data: {
                    location_id: location_id,
                    location_type: location_type
                },
                success: function (html) {
                    location.reload();
                }
            });
        });

        jQuery('.location_preview').on('click', function () {
            var location_id = jQuery(this).parent().find('.location_id').val();
            var location_type = jQuery(this).parent().find('.location_type').val();

            jQuery.ajax({
                url: '{{route('route-assignments.locations.destroy')}}',
                type: 'post',
                data: {
                    location_id: location_id,
                    location_type: location_type
                },
                success: function (html) {
                    location.reload();
                }
            });
        });
    </script>
@stop