@extends('layouts.main', ['title' => 'Demurrages Reports'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li class="active">Demurrages Reports</li>
    </ul>
@stop
@section('title')
    Demurrages Reports
@endsection
@section('msghead_menu')
    <li class="right btn-group">
        <button class="btn" onclick="openAdvancedSearch('demurrage_report_filter_options')">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
    </li>
@endsection
@section('contentinner')
    <style>


        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="demurrage_report_filter_options" class="sidenav">
        <a href="javascript:void(0)" class="closebtn"
           onclick="closeAdvancedSearch('demurrage_report_filter_options')">&times;</a>

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

                <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">Client</label>
                <select name="client_id" 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">Shipping Line</label>
                <select name="shipping_line_id" width="100%" id="shipping_line_id" class="searchable_select">
                    <option value="">ALL</option>
                    @foreach($shipping_lines as $shipping_line)
                        <option value="{{$shipping_line->id}}">{{$shipping_line->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 date_pickers" autocomplete="off">
                <label class="control-label" for="Category">Date to</label>
                <input type="text" name="date_to" id="end_date" class="input-large date_pickers" autocomplete="off">
                {{--<label class="control-label" for="Category">Status</label>--}}
                {{--<select name="select" width="100%" id="status" class="searchable_select">--}}
                {{--<option value="">ALL</option>--}}
                {{--<option value="1">LOCATED</option>--}}
                {{--<option value="0">UNALLOCATED</option>--}}
                {{--</select>--}}
                {{--<label class="control-label" for="Category">Vehicle Type</label>--}}
                {{--<select name="select" width="100%" id="vehicle_type" class="searchable_select">--}}
                {{--<option value="">ALL</option>--}}
                {{--<option value="DRY CARGO">DRY CARGO</option>--}}
                {{--<option value="TANKERS">TANKERS</option>--}}
                {{--</select>--}}
                <button class="btn" style="" id="filter_demurrage_report">FILTER</button>
                <input class="btn" id="print_permits" type="submit" value="PRINT">
            </form>
        </div>
    </div>

    <!-- Main Table -->
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered" id="loadingOrdersTable" style="font-size: 10px">
                <thead>
                <tr>
                    <th style="width: 55px">Truck</th>
                    <th style="width: 55px">Trailer</th>
                    <th style="width: 160px">Driver</th>
                    <th style="width: 70px">Container</th>
                    <th style="width: 30px">Size</th>
                    <th style="width: 30px">Type</th>
                    <th style="width: 80px">Destination</th>
                    <th style="width: 80px">Client</th>
                    <th style="width: 150px">Shipping Line</th>
                    <th style="width: 60px">Loading Date</th>
                    <th style="width: 60px">Start Date</th>
                    <th style="width: 50px">Allowable Days</th>
                    <th style="width: 70px">Charges/Day</th>
                    <th style="width: 60px">Due Date</th>
                    <th style="width: 80px">EID</th>
                    {{--<th style="width: 80px">ECD</th>--}}
                    <th style="width: 50px">Detention Days</th>
                    <th style="width: 50px">Detention Days(Customer)</th>
                    <th style="width: 50px">Net Detention Day(s)</th>
                    <th style="width: 100px">Demurrage Charges</th>
                    <th style="width: 100px">&nbsp;</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script type="text/javascript" src="{{asset('js/logistics/route-assignments.js')}}"></script>
    <script>
        jQuery('.date_pickers').datepicker({ dateFormat: 'dd-mm-yy' }).val();
        jQuery('#truck_id').select2();
        jQuery('#client_id').select2();
        jQuery('#shipping_line_id').select2();

        var mainDataTable = jQuery('#loadingOrdersTable').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({
                "ordering": false,
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No Orders available.",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: "{{ route('operations.demurrages.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.shipping_line_id = $('#shipping_line_id').val();
                        d.starting_date = $('#starting_date').val();
                        d.end_date = $('#end_date').val();
                        // d.vehicle_type = $('#vehicle_type').val();
                        // d.status = $('#status').val();
                    }
                },
                "scrollX": true,
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                // "order": [[10, "desc"]],
                "columns": [
                    {data: 'truck'},
                    {data: 'trailer'},
                    {data: 'driver'},
                    {data: 'container'},
                    {data: 'container_size'},
                    {data: 'container_type'},
                    {data: 'destination'},
                    {data: 'client_code'},
                    {data: 'shipping_line'},
                    {data: 'loading_date'},
                    {data: 'start_date'},
                    {data: 'allowable_days'},
                    {data: 'detention_rate'},
                    {data: 'container_due_date'},
                    {data: 'offloading_date'},
                    // {data: 'interchange_date'},
                    {data: 'exceed_time'},
                    {data: 'detention_days'},
                    {data: 'demurrage_days'},
                    {data: 'demurrage_charges'},
                    {data: 'action'}
                ],
                "bStateSave": true
            });

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

        //   Array to track the ids of the details displayed rows
        var lo_vehicle_details = [];
        jQuery('#loadingOrdersTable tbody').on('click', 'tr td.details-control', function () {
            var tr = jQuery(this).closest('tr');
            var row = mainDataTable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), lo_vehicle_details);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                lo_vehicle_details.splice(idx, 1);
            } else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    lo_vehicle_details.push(tr.attr('id'));
                }
            }
        });

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


    </script>

@endsection