@extends('layouts.main')
@section('contentinner')
    <style>
        .table {
            font-size: 10px;
        }
    </style>
@section('title')
    All Income Statement Summary
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Reports</a> <span class="divider">/</span></li>
        <li class="active">All Income Statement Summary</li>
    </ul>
@stop
@section('msghead_menu')
    <li class="right btn-group">
        <a class="btn" href="javascript:;" onclick="PrintRoutes()"><i class="icon-print"></i>
            &nbsp;PRINT</a>
    </li>
    <li class="right btn-group">
        <a class="btn" href="javascript:;" onclick="PrintRoutes()"><i class="icon-print"></i>
            &nbsp;EXCEL</a>
    </li>
    <li class="right btn-group">
        <button class="btn" onclick="openAdvancedSearch()">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
    </li>
@stop

<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('permits.print')}}">

            <label class="control-label" for="Category">Date From</label>
            <input type="text" name="date_from" id="starting_date" class="input-large date_picker-1" value="">
            <label class="control-label" for="Category">Date to</label>
            <input type="text" name="date_to" id="end_date" class="input-large date_picker-2">
            <label class="control-label" for="Category">Truck</label>
            <select name="select" width="50px" id="truck_id">
                <option value="">ALL</option>
                @foreach($trucks as $truck)
                    <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                @endforeach
            </select>
            <label class="control-label" for="Category">Routes</label>
            <select name="select" width="200px" id="route_id">
                <option></option>
                @foreach($routes as $route)
                    <option value="{{$route->id}}">{{$route->route}}</option>
                @endforeach
            </select>
            <label class="control-label" for="Category">Client</label>
            <select name="select" width="200px" id="client_id">
                <option></option>
                @foreach($clients as $client)
                    <option value="{{$client->id}}">{{$client->name}}</option>
                @endforeach
            </select>
            <label class="control-label" for="Category">Financial Position</label>
            <select name="select" width="200px" id="financial_position">
                <option></option>
                <option value="PROFIT">GROSS PROFIT</option>
                <option value="LOSS">GROSS LOSS</option>
            </select>
            <button class="btn" style="" id="income_statements_lists-search-form">FILTER</button>
            {{--<input class="btn" id="print_permits" type="submit" value="PRINT">--}}
        </form>
    </div>
</div>

<table class="table table-bordered table-condensed table-striped" id="income_statements_lists">
    <thead>
    <tr>
        <th class="head0 nosort">SNO.</th>
        <th class="head0">Route No.</th>
        <th class="head0">Date Assigned</th>
        <th class="head1">Route</th>
        <th class="head1">Truck /Trailer</th>
        <th class="head0">Driver</th>
        <th class="head0">Revenue (TSH)</th>
        <th class="head1">Route Expenses (TSH)</th>
        <th class="head1">Route Profit/Loss (TSH)</th>
        <th class="head1">Average Gross Margin (%)</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th colspan="10" style="text-align: right">&nbsp;</th>
    </tr>
    <tr>
        <th colspan="8" style="text-align: right">Total Revenue:</th>
        <th colspan="2" style="text-align: right" id="total_revenue">0 (TSH)</th>
    </tr>
    <tr>
        <th colspan="8" style="text-align: right">Total Expenses</th>
        <th colspan="2" style="text-align: right" id="total_expenses">0(TSH)</th>
    </tr>
    <tr>
        <th colspan="8" style="text-align: right">Total Profit/Loss:</th>
        <th colspan="2" style="text-align: right" id="total_profit">0(TSH)</th>
    </tr>
    <tr>
        <th colspan="8" style="text-align: right">Average Profit Margin:</th>
        <th colspan="2" style="text-align: right" id="average_profit_margin">0(TSH)</th>
    </tr>
    </tfoot>
</table>
<script>
    var oTable = jQuery('#income_statements_lists').DataTable({
        lengthMenu: [
            [100, 250, 500, -1],
            ['100 Routes', '250 Routes', '500 Routes', 'Show all']
        ],
        "oLanguage": {
            "sLoadingRecords": "Please wait - loading records...",
            "sZeroRecords": "No records to display.",
            "sProcessing": "Please wait - loading records...",
            "sInfoEmpty": "No entries to display.",

        },
        ajax: {
            url: '{{route('reports.income-statements.data-table.index')}}',
            data: function (d) {
                d.route_id = jQuery('#route_id').val();
                d.starting_date = jQuery('#starting_date').val();
                d.end_date = jQuery('#end_date').val();
                d.truck_id = jQuery('#truck_id').val();
                d.client_id = jQuery('#client_id').val();
                d.financial_position = jQuery('#financial_position').val();
            },
            error: function (xhr, textStatus, error) {
                if (textStatus === 'timeout') {
                    alert('Timout error. The server took too long to send back the data.\nPlease try again.');
                    location.href = "{{route('login.page')}}";
                }
                oTable.fnProcessingIndicator(false);
            }
        },
        "sPaginationType": "full_numbers",
        processing: true,
        serverSide: true,
        "columns": [
            {
                "orderable": false,
                "data": null,
                "defaultContent": ""
            },
            {"class": "link", data: 'route_assignment_number'},
            {"class": "link", data: 'departure_date'},
            {"class": "link", data: 'route_name'},
            {"class": "link", data: 'vehicles'},
            {"class": "link", data: 'driver_name'},
            {"class": "link", data: 'revenue'},
            {"class": "link", data: 'expenses'},
            {"class": "link", data: 'gross_profit'},
            {"class": "link", data: 'average_profit_margin'}
        ],
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };

            // Total over all pages
            total_revenue = api.column(6).data().reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);

            total_expenses = api.column(7).data().reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);


            // Update footer
            jQuery('#total_revenue').html('TSH ' + total_revenue.toLocaleString());
            jQuery('#total_expenses').html('TSH ' + total_expenses.toLocaleString());
            jQuery('#total_profit').html('TSH ' + (total_revenue - total_expenses).toLocaleString());
            jQuery('#average_profit_margin').html((((total_revenue - total_expenses)/total_revenue)*100).toFixed(2)+' %');
        },
        "bStateSave": true,
    });

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

    function searchTable(e) {
        oTable.draw();
        e.preventDefault();
    }
    jQuery('.date_picker-1,.date_picker-2').datepicker();
    jQuery('#truck_id').chosen();
    jQuery('#route_id').chosen();
    jQuery('#client_id').chosen();
    jQuery('#financial_position').chosen();

    /* Set the width of the side navigation to 250px */
    function openNav() {
        jQuery("#mySidenav").css({
            "width": 230,
            'padding-left': 30
        });
    }

    function openAdvancedSearch() {
        jQuery("#advanced_search").css({
            "width": 230,
            'padding-left': 30
        });
    }

    /* Set the width of the side navigation to 0 */
    function closeNav() {
        jQuery("#mySidenav").css({
            "width": 0,
            'padding-left': 0
        });
    }

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