@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><a >Operations</a> <span class="divider">/</span></li>
        <li><a href="{{route('operations.reports.reports')}}">Report Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Client Tracking Report</li>
    </ul>
@stop
@section('contentinner')

    <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('truck_movements.clients.tracking_report') }}" id="tracking_report_form">
                    <table class="table">
                        <tr>
                            <td>
                                <select name="client_id" style="width:50%" id="client_id" required>
                                    <option value="">Clients</option>
                                    @foreach($clients as $client)
                                        <option value="{{$client->id}}">{{ $client->name }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" name="loading_order_destination_id">
                            </td>
                            <td><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_table">
                <thead>
                    <tr>
                        <th>Hide</th>
                        <th>Loading Date</th>
                        <th>Truck</th>
                        <th>Driver</th>
                        <th>Client</th>
                        <th>Cargo Type</th>
                        <th>Location</th>
                        <th>Destination</th>
                        <th>Trip Days</th>
                    </tr>
                </thead>
                <tbody><tr><td colspan="9">Select client...</td></tr></tbody>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    
    <script>
        jQuery('select').select2();
        loadTrackingReport();
        jQuery('select[name="client_id"]').change(function() { loadTrackingReport(); });
        function loadTrackingReport()
        {
            setTimeout(function() {
                jQuery.ajax({
                    url: '{{ route("truck_movements.load_tracking_report") }}',
                    type: 'GET',
                    data: jQuery('#tracking_report_form').serialize(),
                    beforeSend: function () { startSpinner(); },
                    success: function (data) {
                        jQuery('#truck_movements_table tbody').html(data);
                    },
                    error: function (xhr, textStatus, error) { onAjaxError(xhr, textStatus, error); },
                    complete: function () { stopSpinner(); }
                });
            }, 50);
        }
        
        jQuery('#print_truck_movements').click(function(e) {
            e.preventDefault();
            var rows = checkRows('loading_order_destination_id');
            jQuery('input[name="loading_order_destination_id"]').val(rows);
            setTimeout(function() {
                jQuery('#tracking_report_form').submit();
            }, 50);
        });
    </script>
@stop