@extends('layouts.main_without_top_button', ['title'=> config('app.name') . ' - TRUCK MOVEMENT'])
@section('title', 'Truck Movements')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Trucks Movements</li>
    </ul>
@stop
@section('contentinner')
    <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
        <ul class="msghead_menu">
            <li class="right btn-group">
                {{--<div class="btn-group">--}}
                {{--<button class="btn dropdown-toggle" data-toggle="dropdown" id="truck_allocation_create">--}}
                {{--&nbsp; CREATE ALLOCATE--}}
                {{--</button>--}}
                {{--</div><!--btn-group-->--}}
                <div class="btn-group">
                </div><!--btn-group-->
            </li>
        </ul>
        <span class="clearall"></span>
    </div><!--msghead-->
    <div class="row-fluid span12" style="text-align: center;margin-bottom: 2%;margin-top: 2%;">
        <form method="post" action="{!! route('operations.import_trucks_for_location_update') !!}" enctype="multipart/form-data">
            <input type="file" name="import_file" class="">
            <button type="submit" class="btn btn-xs btn-primary"><i class="icon icon-upload"></i> Import Locations File</button>
            
            <a style="float: right; margin-right: 5%;" class="btn" href="{!! route('operations.export_trucks_for_location_update') !!}" target="_blank">
                <i class="icon icon-download"></i>
                Download Locations Sheet
            </a>
        </form>

    </div>
    <style>
        .form-filter {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            color: #0e4722;
            font-weight: normal;
            text-align: center;
            padding-bottom: 4px;
        }
    </style>
    <div class="row-fluid">
        <div class="span12">
            <div style="margin-bottom: 8px">
                <form target="_blank" class="form-inline form-filter" method="get" action="{{route('permits.print')}}">
                    <table class="table">
                        <!--<tr>-->
                        <!--    <td><label class="control-label" for="Category">Borders</label></td>-->
                        <!--    <td><label class="control-label" for="Category">Clients</label></td>-->
                        <!--    <td><label class="control-label" for="Category">Date From</label></td>-->
                        <!--    <td><label class="control-label" for="Category">Date To</label></td>-->
                        <!--    <td><label class="control-label" for="Category"></label></td>-->
                        <!--</tr>-->
                        <tr>
                            <td>
                                <input type="text" id="location" name="location" class="span12" autocomplete="off">
                                {{--<select name="border_id" width="200px" id="border_id">--}}
                                    {{--<option value="all_borders">Borders</option>--}}
                                    {{--@foreach($borders as $border)--}}
                                        {{--<option value="{{$border->id}}">{{$border->name}}</option>--}}
                                    {{--@endforeach--}}
                                {{--</select>--}}
                            </td>
                            <td>
                                <select name="select" width="200px" id="client_id">
                                    <option value="all_clients">Clients</option>
                                    @foreach($clients as $client)
                                        <option value="{{$client->id}}">{{$client->name}}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <span class="input-append truck_movement_date" id="truck_movement_date_1">
                                    <input type="text" name="date_from" id="starting_date"
                                           class="form-control span10  starting_date" data-format="dd-MM-yyyy hh:mm:ss"
                                           autocomplete="off">
                                    <span class="add-on" style="height: 14px">
                                        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                                </span>
                            </td>
                            <td>
                               <span class="input-append truck_movement_date" id="truck_movement_date_2">
                                   <input type="text" name="date_to" id="end_date" class="form-control span10 expire_date"
                                          data-format="dd-MM-yyyy hh:mm:ss" autocomplete="off">
                                    <span class="add-on" style="height: 14px">
                                        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                               </span>
                            </td>
                            <td>
                                <!--<button class="btn" style="" id="search-form">FILTER</button>-->
                                <input class="btn" id="print_truck_movements" type="submit" value="PRINT">
                            </td>
                        </tr>
                    </table>
                    
                </form>
            </div>
            <div class="clearfix"></div>
            <table class="table table-bordered logistics_table" id="truck_movements_lists">
                <thead>
                <tr>
                    <th></th>
                    <th>Loading Date</th>
                    <th>Truck</th>
                    <th>Driver</th>
                    <!--<th>Product</th>-->
                    <th>Client</th>
                    <th>Cargo Type</th>
                    <th>Location</th>
                    <th>Destination</th>
                    <th>Trip Days</th>
                </tr>
                </thead>
            </table>

        </div><!--span12-->
    </div><!--row-fluid-->

    <script>
        jQuery('#truck_movement_date_1,#truck_movement_date_2').datetimepicker();
        jQuery('select').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": "link", data: 'checkbox'},
                {"class": "link", data: 'loading_date'},
                {"class": "link", data: 'truck'},
                {"class": "link", data: 'driver'},
                // {"class": "link", data: 'product'},
                {"class": "link", data: 'client'},
                {"class": "link", data: 'cargo_type'},
                {"class": "link", data: 'location'},
                {"class": "link", data: 'destination'},
                {"class": "link", data: 'time_elapsed'}
            ],
            "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('#print_truck_movements').on('click', function (e) {
            e.preventDefault();
            var url = '{{route('truck-movements.print',[
             'client_id'=>'__id__',
                'location'=>'__bid__',
                'starting_date'=>'_starting_date_',
                'end_date'=>'_end_date_'
            ])}}';
            
            var mapObj = {
                __id__: jQuery('#client_id').val(),
                __bid__: jQuery('#location').val(),
                _starting_date_: jQuery('#starting_date').val(),
                _end_date_: jQuery('#end_date').val()
            };
            
            window.open(url.replace(/__id__|__bid__|_starting_date_|_end_date_/gi, function (matched) {
                return mapObj[matched];
            }), '_blank');
        })
    </script>
@stop