@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')
    <div class="row-fluid">
        <div class="span12">
            <div style="margin-bottom: 8px">
                <form target="_blank" class="form-inline form-filter" method="get" action="{{ route('loading_order_item_diversions.indexData') }}" id="my_form">
                    <table class="table">
                        <tr>
                            <td style="width:30%">
                                <select name="client_id" style="width:100%" id="client_id">
                                    <option value="">Clients</option>
                                    @foreach($clients as $client)
                                        <option value="{{$client->id}}">{{ $client->name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td style="width:30%">
                                <select name="city_id" style="width:100%" id="city_id">
                                    <option value="">Destination</option>
                                    @foreach($cities as $city)
                                        <option value="{{ $city->id }}">{{ $city->name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td style="width:30%">
                                <select name="vendor_id" style="width:100%" id="vendor_id">
                                    <option value="">Vendors</option>
                                    @foreach($vendors as $vendor)
                                        <option value="{{$vendor->id}}">{{ $vendor->name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td style="width:10%"><input class="btn" id="divert_destination" type="submit" value="DIVERT"></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="clearfix"></div>
            <table class="table table-bordered logistics_table" id="my_table">
                <thead>
                    <tr>
                        <th></th>
                        <th>Loading Date</th>
                        <th>Departure Date</th>
                        <th>Truck</th>
                        <th>Driver</th>
                        <th>Client</th>
                        <th>Cargo Type</th>
                        <th>Location</th>
                        <th>Destination</th>
                    </tr>
                </thead>
                <tbody><tr><td colspan="9">Select client...</td></tr></tbody>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    
    <script>
        jQuery('select').select2();
        loadOnRoadTruck();
        jQuery('select[name="city_id"]').change(function() { loadOnRoadTruck(); });
        jQuery('select[name="client_id"]').change(function() { loadOnRoadTruck(); });
        function loadOnRoadTruck()
        {
            // if(!)
            setTimeout(function() {
                jQuery.ajax({
                    url: '{{ route("loading_order_item_diversions.indexData") }}',
                    type: 'GET',
                    data: jQuery('#my_form').serialize(),
                    beforeSend: function () { startSpinner(); },
                    success: function (data) { jQuery('#my_table tbody').html(data); },
                    error: function (xhr, textStatus, error) { onAjaxError(xhr, textStatus, error); },
                    complete: function () { stopSpinner(); }
                });
            }, 50);
        }
        
        jQuery('#divert_destination').click(function(e) {
            e.preventDefault();
            var rows = checkRows('loading_order_items');
            if(rows.length == 0) logistics_alert('Please select at least one record for diversion');
            else create('{{ route("loading_order_item_diversions.create") }}', rows);
        });
    </script>
@stop