@extends('layouts.main_without_top_button')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('clients.index')}}">Clients</a> <span class="divider">/</span></li>
        <li class="active">Trips Demurrages</li>
    </ul>
@stop
@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 class="tabbable">
        @include('clients.profile.includes.tabs')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                    <ul class="msghead_menu">
                        <li class="right btn-group">
                            {{--<button class="btn" onclick="openAdvancedSearch()" style="margin-right: 2px">--}}
                                {{--<span class="icon-search"></span> &nbsp; FILTER--}}
                            {{--</button>--}}


                            <a class="btn" id="create_credit_note">Create Credit Note</a>

                            {{--<a class="btn" id="profroma_client_invoicing">GENERATE PROFORMA INVOICE</a>--}}
                        </li>
                    </ul>
                    <span class="clearall"></span>
                </div><!--msghead-->

                <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">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>

                            <button class="btn" style="" id="filter_demurrage_report">FILTER</button>
                            <input class="btn" id="print_permits" type="submit" value="PRINT">
                        </form>
                    </div>
                </div>

                <table class="table table-bordered" id="loadingOrdersTable" style="font-size: 10px">
                    <thead>
                    <tr>
                        <th style="width: 10px">&nbsp;</th>
                        <th style="width: 60px">Loading Date</th>
                        <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: 150px">Shipping Line</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">ID</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: 50px">Charges</th>
                        <th style="width: 50px">&nbsp;</th>
                    </tr>
                    </thead>
                </table>

            </div><!--tab-pane-->
        </div>
    </div>

    <script type="text/javascript" src="{{asset('js/logistics/route-assignments.js')}}"></script>
    <script>
        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({
                "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}}';
                        d.shipping_line_id = $('#shipping_line_id').val();
                    }
                },
                "scrollX": true,
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order": [[ 1, "desc" ]],
                "columns": [
                    {data: 'checkbox'},
                    {data: 'loading_date'},
                    {data: 'truck'},
                    // {data: 'trailer'},
                    // {data: 'driver'},
                    {data: 'container'},
                    {data: 'container_size'},
                    // {data: 'container_type'},
                    {data: 'destination'},
                    {data: 'shipping_line'},
                    {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();
        });

        //

        jQuery('#create_credit_note').on('click', function () {
            var checked = jQuery('.loading_order_item_id:checked').length > 0;
            if ((!checked) || (checked > 1)) {
                var sound = document.getElementById("audio");
                sound.play();
                jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} Please check at least one route to continue with invoice process ', {
                    theme: 'contrastBorder',
                    sticky: true
                });
                return false;
            }
            var loading_order_item_id = [];
            jQuery('.loading_order_item_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    loading_order_item_id.push(jQuery(this).val());
                }
            });
            jQuery.ajax({
                url: "{{route('clients.demurrages.create',['clients'=>$client->id])}}",
                type: 'GET',
                data: {
                    loading_order_item_id: loading_order_item_id,
                    client_id: '{{$client->id}}'
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    stopSpinner();
                    var modal = jQuery('#logistics_modal');
                    modal.empty().append(data);
                    modelShow('logistics_modal');
                    onModalShown();

                    var form = modal.find('form');
                    form.on('submit', function (e) {
                        e.preventDefault();
                        jQuery.ajax({
                            url: form.attr('action'),
                            type: 'POST',
                            data: form.serialize(),
                            beforeSend: function () {
                                startSpinner();
                                disableSubmitBtn();
                            },
                            success: function (data) {
                                modalHide('logistics_modal');
                                jQuery.jGrowl('INVOICE GENERATED, CLICK HERE TO PRINT INVOICE <a class="btn btn-mini" href="' + data + '" target="_blank">PRINT</a>', {
                                    theme: 'contrastBorder',
                                    sticky: true
                                });
                                mainDataTable.draw();
                            },
                            error: function (xhr, textStatus, error) {
                                onAjaxError(xhr, textStatus, error);
                            },
                            complete: function () {
                                stopSpinner();
                                enableSubmitBtn();
                            }
                        });
                    });
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });


    </script>
@stop