@extends('layouts.main', ['title' => 'LOGISTICS | Driver\'s Losses'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li class="active">Driver's Loss</li>
    </ul>
@stop
@section('title')
    Driver's Loss
@endsection
@section('msghead_menu')
    <li class="right btn-group">

        <button class="btn" onclick="openAdvancedSearch('route_truck_allocation')">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
    </li>
@endsection
@section('contentinner')
    <style>
        tr:hover, tr.selected {
            background-color: #eeeeee;
            font-weight: 600;
        }

        td.details-control {
            background: url('{{ URL::asset('img/details_open.png') }}') no-repeat center center;
            cursor: pointer;
        }

        tr.details td.details-control {
            background: url('{{ URL::asset('img/details_close.png') }}') no-repeat center center;
        }

        .form-filter {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            color: #0e4722;
            font-weight: normal;
            text-align: center;
            padding-bottom: 4px;
        }

        /*.dataTables_length {*/
        /*height: 10px;*/
        /*}*/

    </style>
    <div id="route_truck_allocation" class="sidenav">
        <a href="javascript:void(0)" class="closebtn"
           onclick="closeAdvancedSearch('route_truck_allocation')">&times;</a>

        <div style="margin-bottom: 8px">
            <form target="_blank" class="form-inline form-filter" method="get"
                  action="{{route('route_assignments.reports.loss.print')}}">

                <label class="control-label" for="Category">Truck</label>
                <select name="truck_id" width="100%" id="truck_id" class="searchable_select" multiple>
                    <option value="">ALL</option>
                    @foreach($trucks as $truck)
                        <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                    @endforeach
                </select>
                <label class="control-label" for="Category">Cargo Type</label>
                <select name="cargo_types[]" width="100%" id="cargo_types" class="searchable_select" multiple>
                    <option value="">ALL</option>
                    <option value="TANK">TANKERS</option>
                    <option value="LOOSE_CARGO">LOOSE CARGO</option>
                </select>
                <label class="control-label" for="Category">Client</label>
                <select name="select" width="100%" id="client_id" class="searchable_select">
                    <option value="">ALL</option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
                <label class="control-label" for="Category">Date From</label>
                <input type="text" name="date_from" id="starting_date" class="input-large trankers_loss_date_pickers"
                       value="">
                <label class="control-label" for="Category">Date to</label>
                <input type="text" name="date_to" id="end_date" class="input-large trankers_loss_date_pickers">
                <button class="btn" style="" id="filter_tranker_loss">FILTER</button>
                <input class="btn" id="print_permits" type="submit" value="PRINT">
            </form>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered logistics_table" id="offloading_details_lists">
                <thead>
                <tr>
                    <th width='5px'><input type="checkbox" class="checkall"/></th>
                    <th>D.O.N</th>
                    <th>Loading Date</th>
                    <th>Offloading Date</th>
                    <th>Truck</th>
                    <th>Driver</th>
                    <th>Commodity</th>
                    {{--<th>Loading</th>--}}
                    <th>Destination</th>
                    <th>Loaded QTY</th>
                    <th>Received QTY</th>
                    <th>Difference</th>
                    <th>Allowable</th>
                    <th>Excess/Loss</th>
                    <th>Deduction</th>
                    <th>Bonus</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script>
        jQuery('.trankers_loss_date_pickers').datepicker();
        var mainDataTable = jQuery('#offloading_details_lists').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 Orders available.",
                        "sInfoEmpty": "No entries to display."
                    },
                    "initComplete": function (settings, json) {
                        stopSpinner();
                    },
                    ajax: {
                        url: "{{ route('drivers_management..loss.indexDatas') }}",
                        data: function (d) {
                            d.search_field = $('input[name=search_field]').val();
                            d.truck_id = $('#truck_id').val();
                            d.client_id = $('#client_id').val();
                            d.starting_date = $('#starting_date').val();
                            d.end_date = $('#end_date').val();
                            d.cargo_types = $('#cargo_types').val();
                        }
                    },
                    scrollCollapse: true,
                    "sPaginationType": "full_numbers",
                    processing: true,
                    serverSide: true,
                    "aoColumnDefs": [{
                        "aTargets": [8],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if ((sData == 0.00)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    }, {
                        "aTargets": [9],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if ((sData == 0.00)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    }, {
                        "aTargets": [10],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if ((sData == 0.00)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    }, {
                        "aTargets": [11],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if ((sData == 0.00)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    }, {
                        "aTargets": [12],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if ((sData == 0.00)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    }, {
                        "aTargets": [13],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if ((sData == 0.00)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    }],
                    "columns": [
                        {
                            data: 'checkbox',
                            "class": "dt_checkbox",
                            "orderable": false
                        },
                        {"class": "link", data: 'route_assignment_number'},
                        {"class": "link", data: 'loading_date'},
                        {"class": "link", data: 'offloading_date'},
                        {"class": "link", data: 'truck'},
                        {"class": "link", data: 'driver'},
                        {"class": "link", data: 'commodity'},
//                        {"class": "link", data: 'loading_city'},
                        {"class": "link", data: 'destination'},
                        {"class": "link", data: 'loading_quantity'},
                        {"class": "link", data: 'offloading_quantity'},
                        {"class": "link", data: 'different_quantity'},
                        {"class": "link", data: 'allowable_loss'},
                        {"class": "link", data: 'excess_or_loss'},
                        {"class": "link", data: 'driver_deduction'},
                        {"class": "link", data: 'driver_bonus'},
                    ],
                    "bStateSave": true
                });

        $('#filter_tranker_loss').on('click', function (e) {
            e.preventDefault();
            mainDataTable.draw();
        });

        function format(d) {
            return d.loading_order_more_details;
        }

    </script>
@endsection