@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">Trip Sales</li>
    </ul>
@stop
@section('contentinner')
<style>
    .highlight-red{
        background-color: #f26522;
    }
</style>
    <div class="tabbable">
{{--        @include('clients.profile.includes.client_summary')--}}
        @include('clients.includes.client_summary')
        <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="client_invoicing"  data-title="Select trip of the same Batch">GENERATE INVOICE</a>

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

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

                    <div style="margin-bottom: 8px">
                        <form target="_blank" class="form-inline form-filter" method="get"
                              action="{{route('clients.trips_sales.print')}}">
                            <input type="hidden" name="client_id" value="{{$client->id}}">
                            <label class="control-label" for="Category">Routes</label>
                            <select name="route_id" width="200px" id="route_id">
                                <option value="">ALL</option>
                                @foreach($route_definitions as $route_definition)
                                    <option value="{{$route_definition->id}}">{{$route_definition->route}}</option>
                                @endforeach
                            </select>
                            <label class="control-label" for="Category">Batch #</label>
                            <select name="loading_order_id" width="200px" id="loading_order_id">
                                <option value="">ALL</option>
                                @foreach($loading_orders as $loading_order)
                                    <option value="{{$loading_order->loading_order_id}}">{{$loading_order->loading_order_id}}</option>
                                @endforeach
                            </select>
                            <label class="control-label" for="Category">Date From</label>
                            <input type="text" name="date_from" id="starting_date" class="input-large datepicker"
                                   value="">
                            <label class="control-label" for="Category">Date to</label>
                            <input type="text" name="date_to" id="end_date" class="input-large datepicker">
                            <label class="control-label" for="Category">Truck</label>
                            <select name="truck_id" width="50px" id="truck_id" multiple="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">DON</label>
                            <select name="delivery_number" width="50px" id="delivery_number" multiple="multiple">
                                <option value="">ALL</option>
                                @foreach($delivery_numbers as $delivery_number)
                                    <option value="{{$delivery_number->d_o_number}}">{{$delivery_number->d_o_number}}</option>
                                @endforeach
                            </select>
                            <label class="control-label" for="Category">Status</label>
                            <select name="status" width="200px" id="status">
                                <option value="">ALL</option>
                                <option value="1">INVOICED</option>
                                <option value="2" selected>NOT INVOICED BUT OFFLOADED</option>
                                <option value="0">NOT INVOICED</option>
                            </select>
                            <button class="btn" style="" id="search-form">FILTER</button>
                            <input class="btn" id="print_permits" type="submit" value="PRINT">
                        </form>
                    </div>
                </div>

                <table class="table table-bordered table-condensed logistics_table"
                       id="clients-route-assignments-list_">
                    <thead>
                    <tr>
                        <th class=" nosort" width="10px"><input type="checkbox" class="checkall"/></th>
                        <th>Batch ID</th>
                        <th>Loading Date</th>
                        <th>Truck </th>
                        <th>Trailer.</th>
                        <th>REF NO.</th>
                        <th>Cargo</th>
                        <th>Destination</th>
                        <th>Quantity(LOADED)</th>
                        <th>Quantity(OFFLOADED)</th>
                        <th>Rate</th>
                        <th>Amount</th>
                        <th>Invoice</th>
                    </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div>
    </div>




    {{--<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-es-ES.js"></script>--}}
    <script>




        jQuery('#container,#route_assignment_id,#truck_id,#route_id,#status,#delivery_number').select2();
        jQuery('.datepicker').datepicker();

        var calcDataTableHeight = function () {
            var viewportHeight = jQuery(window).height();
            var headerpanel = jQuery('#headerpanel').height();
            var breadcrumbwidget = jQuery('#breadcrumbwidget').height();
            var widgettitle_msghead = jQuery('#widgettitle_msghead').height();
            var page_widget_title = jQuery('#page_widget_title').height();
            var msg_head = jQuery('#msg_head').height();
            var footer = jQuery('#footer').height();


            return viewportHeight - (headerpanel + breadcrumbwidget + widgettitle_msghead + page_widget_title + msg_head + footer);

        };


        var mainDataTable = jQuery('#clients-route-assignments-list_').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            jQuery.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No Clients records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                ajax: {
                    url: '{{route('clients.data-table.route-assignments.index',array('clients'=>$client->id))}}',
                    data: function (d) {
                        d.route_id = jQuery('#route_id').val();
                        d.route_assignment_id = jQuery('#route_assignment_id').val();
                        d.truck_id = jQuery('#truck_id').val();
                        d.container = jQuery('#container').val();
                        d.status = jQuery('#status').val();
                        d.loading_order_id = jQuery('#loading_order_id').val();
                        d.starting_date = jQuery('#starting_date').val();
                        d.end_date = jQuery('#end_date').val();
                        d.delivery_number = jQuery('#delivery_number').val();
                    }
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
//                scrollY: calcDataTableHeight(),
                "sPaginationType": "full_numbers",
                scrollCollapse: true,
                processing: true,
                serverSide: true,
                "order": [[1, "desc"]],
                "aoColumnDefs": [
                    {
                        "aTargets": [7],
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            jQuery(nTd).css('text-align', 'right');
                            if (sData <= 0.00) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    },
                    {
                        "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) {
                                jQuery(nTd).addClass('highlight-red')
                            }
                        }
                    },
                    {
                        "aTargets": [10],
                        "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": "link", data: 'loading_order_id'},
                    {"class": "link", data: 'loading_date'},
                    {"class": "link", data: 'truck'},
                    {"class": "link", data: 'trailer'},
                    {"class": "link", data: 'd_o_number'},
                    {"class": "link", data: 'product'},
                    {"class": "link", data: 'destination'},
                    {"class": "link", data: 'loading_quantity'},
                    {"class": "link", data: 'offloading_quantity'},
                    {"class": "link", data: 'rate'},
                    {"class": "link", data: 'amount'},
                    {"class": "link", data: 'is_invoiced'}
                ],
                "fnDrawCallback": function () {
                    $('.loading_order_destination_id').on('click', function () {

                        var loading_order_id = [];
                        jQuery('.loading_order_destination_id').each(function () {
                            if ($(this).is(':checked')) {
                                var tr = jQuery(this).parents('tr');
                                loading_order_id.push(tr.find('.loading_order_id').val());
                            }
                        });
                        if(new Set(loading_order_id).size !== 1){
                            $('#client_invoicing').hide();
                        }else{
                            $('#client_invoicing').show();
                        }
                    });
                },
                "bStateSave": true
            });

        jQuery(window).resize(function () {
            var oSettings = mainDataTable.fnSettings();
            oSettings.oScroll.sY = calcDataTableHeight();
            mainDataTable.fnDraw();
        });

        jQuery('#search-form').on('click', function (e) {
            searchTable(e);
        });

        function searchTable(e) {
            mainDataTable.draw();
            e.preventDefault();
        }

        jQuery('#client_invoicing').on('click', function () {
            var checked = jQuery('.loading_order_destination_id:checked').length > 0;
            if (!checked) {
                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_destination_id = [];
            jQuery('.loading_order_destination_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    loading_order_destination_id.push(jQuery(this).val());
                }
            });
            jQuery.ajax({
                url: "{{route('invoices.create')}}",
                type: 'GET',
                data: {
                    loading_order_destination_id: loading_order_destination_id,
                    client_id: '{{$client->id}}',
                    type: 'INVOICE'
                },
                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();
                }
            });
        });


        jQuery('#profroma_client_invoicing').on('click', function () {
            var checked = jQuery('.loading_order_destination_id:checked').length > 0;
            if (!checked) {
                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_destination_id = [];
            jQuery('.loading_order_destination_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    loading_order_destination_id.push(jQuery(this).val());
                }
            });
            jQuery.ajax({
                url: "{{route('invoices.create')}}",
                type: 'GET',
                data: {
                    loading_order_destination_id: loading_order_destination_id,
                    client_id: '{{$client->id}}}',
                    type: 'PROFORMA_INVOICE'
                },
                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();
                }
            });
        });

        jQuery('#generate_invoice').click(function () {
            var checked = jQuery('.loading_order_destination_id:checked').length > 0;
            if (!checked) {
                alert("PLEASE CHECK AT LEAST ONE ROUTE TO CONTINUE WITH INVOICING... PROCESS");
                return false;
            }
            var loading_order_destination_id = [];
            jQuery('.loading_order_destination_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    loading_order_destination_id.push(jQuery(this).val());
                }
            });
            jQuery.ajax({
                url: "{{route('invoices.create')}}",
                type: 'GET',
                data: {
                    loading_order_destination_id: loading_order_destination_id,
                    client_id: '{{$client->id}}}'
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data);
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });


        function openAdvancedSearch() {
            jQuery("#advanced_search").css({
                "width": 230,
                'padding-left': 30
            });
        }
        /* Set the width of the side navigation to 0 */
        function closeAdvancedSearch() {
            jQuery("#advanced_search").css({
                "width": 0,
                'padding-left': 0
            });
        }
    </script>
@stop