@extends('layouts.main', ['title' => 'LOGISTICS | Trip Offloads'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li class="active">Trip Offloads</li>
    </ul>
@stop
@section('title')
    Trip Offloads
@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>
        {{--@if(Auth::user()->can('DELETE VEHICLE'))--}}
        {{--<button class="btn msgtrash btn-danger" style="margin-right: 4px" id="delete_offloading_details"><span--}}
        {{--class="iconsweets-trashcan"></span>--}}
        {{--</button>--}}
        {{--@endif--}}
    </li>
@endsection
@section('contentinner')
    <style>
        .highlight-red {
            color: red;
        }
        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;
        }
    </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="select" 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">Destination</label>
                <select name="select" width="100%" id="destination_id" class="searchable_select" multiple="multiple">
                    <option value="">ALL</option>
                    @foreach($destinations as $destination)
                        <option value="{{$destination->id}}">{{$destination->name}}</option>
                    @endforeach
                </select>
                <label class="control-label" for="Category">Cargo Type</label>
                <select name="select" width="100%" id="cargo_type" class="searchable_select">
                    <option value="ALL">ALL</option>
                    <option value="CONTAINERS">CONTAINERS</option>
                    <option value="TANKERS">TANKERS</option>
                    <option value="LOOSE_CARGO">LOOSE_CARGO</option>
                </select>
                <label class="control-label" for="Category">Direction</label>
                <select name="select" width="100%" id="direction" class="searchable_select">
                    <option value="ALL">ALL</option>
                    <option value="GO">FORWARD CARGO</option>
                    <option value="RETURN">RETURN CARGO</option>
                </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="destination_offloads">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 table-condensed logistics_table" id="offloading_details_lists">
                <thead>
                <tr>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                    <th colspan="2" style="text-align: center">Date</th>
                    <th colspan="5" style="text-align: center">Descriptions</th>
                    <th colspan="3" style="text-align: center">Quantity</th>
                    <th colspan="3" style="text-align: center">Tonnage</th>
                </tr>
                <tr>
                    <th width='5px'><input type="checkbox" class="checkall"/></th>
                    <th style="width: 5%">D.O.N</th>
                    <th style="width: 6%">Loading</th>
                    <th style="width: 6%">Offloading</th>
                    <th style="width: 6%">Truck</th>
                    <th>Driver</th>
                    <th>Client</th>
                    <th>Commodity</th>
                    <th>Destination</th>
                    <th style="width: 5%">Loaded</th>
                    <th style="width: 5%">Received</th>
                    <th style="width: 5%">Difference</th>
                    <th style="width: 5%">Loaded</th>
                    <th style="width: 5%">Received</th>
                    <th style="width: 5%">Difference</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script>
        jQuery('.searchable_select').select2();
        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('route_assignments.offloads.data_table.index') }}",
                    data: function (d) {
                        d.search_field = $('input[name=search_field]').val();
                        d.truck_id = $('#truck_id').val();
                        d.client_id = $('#client_id').val();
                        d.destination_id = $('#destination_id').val();
                        d.starting_date = $('#starting_date').val();
                        d.end_date = $('#end_date').val();
                        d.cargo_type = $('#cargo_type').val();
                        d.direction = $('#direction').val();
                    }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order": [[3, "desc"]],
                "aoColumnDefs": [{
                    "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)) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    }],
                "columns": [
                    {
                        data: 'checkbox',
                        "class": "dt_checkbox",
                        "orderable": false
                    },
                    {"class": "link", data: 'd_o_number'},
                    {"class": "link", data: 'loading_date'},
                    {"class": "link", data: 'offload_date'},
                    {"class": "link", data: 'truck'},
                    {"class": "link", data: 'driver'},
                    {"class": "link", data: 'client_code'},
                    {"class": "link", data: 'product'},
                    {"class": "link", data: 'destination'},
                    {"class": "link", data: 'loading_quantity'},
                    {"class": "link", data: 'offloading_quantity'},
                    {"class": "link", data: 'different_quantity'},
                    {"class": "link", data: 'loading_tonnage'},
                    {"class": "link", data: 'offloading_tonnage'},
                    {"class": "link", data: 'different_tonnage'}
                ],
                "bStateSave": true
            });

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

        $('#offloading_details_lists tbody').on('dblclick', 'tr td.link', function () {
            var tr = $(this).closest('tr');
            var destination_order_offload_id = tr.find('.loading_order_destination_id').val();

            var url = "{{route('route_assignments.offloads.edit',[':id'])}}";
            url = url.replace(":id", destination_order_offload_id);

            jQuery.ajax({
                url: url,
                type: 'GET',
                beforeSend: function () {
                    startSpinner();
                },
                complete: function () {
                    stopSpinner();
                },
                success: function (data) {
                    onAjaxSuccessOld(data, 'PUT');
                    stopSpinner();
                }, error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                }
            });
        });


        $('#delete_offloading_details').on('click', function () {
            var tr = $(this).closest('tr');
            var destination_order_offload_id = tr.find('.destination_order_offload_id').val();

            var destination_order_offload_id = checkRows('destination_order_offload_id');
            if (destination_order_offload_id.length < 1) {
                jAlert("PLEASE CHECK AT LEAST ONE OFFLOAD", 'SELECTION DIALOG');
                return false;
            } else if (destination_order_offload_id.length == 1) {
                var url = "{{route('route_assignments.offloads.destroy',[':id'])}}";
                url = url.replace(":id", destination_order_offload_id)
                destroy(url);
                return false;
            }

//            jQuery.ajax({
//                url: url,
//                type: 'GET',
//                beforeSend: function () {
//                    startSpinner();
//                },
//                complete: function () {
//                    stopSpinner();
////                    $('#create_trip').attr("disabled", false);
//                },
//                success: function (data) {
//                    onAjaxSuccess(data, 'PUT');
//                }
//            });
        });

        function format(d) {
            return d.loading_order_more_details;
        }
    </script>
@endsection