@extends('layouts.main_without_top_button')
@section('title')
    Route Expenses
@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">Loading Orders Expenses</li>
    </ul>
@stop
@section('contentinner')
    <style>
        .table {
            font-size: 10px;
            overflow: scroll;
            border-top: 1px solid #000000;
            margin-left: 5px;
        }

        .table thead tr th, .table tbody tr td {
            border: 1px solid #000000;
            padding: 2px;
        }

        .table thead tr th {
            text-align: center;
        }

        .table thead tr:first-child th,
        .table thead tr:nth-child(2) th:first-child,
        .table tbody tr td:first-child,
        .table tbody tr td:nth-child(2),
        .table tbody tr td:nth-child(3),
        .table tbody tr td:nth-child(4),
        /*.table tbody tr td:last-child,*/
        .table thead tr th, .table thead tr:nth-child(2) th,
        .table thead tr:nth-child(2) th:last-child,
        .table tfoot th {
            background-color: #e8e8e8;
            color: #000000;
            border: 1px solid #000000;
        }

        /*#income_statement, #income_statement .content{*/
        /*transform:rotateX(180deg);*/
        /*-ms-transform:rotateX(180deg); !* IE 9 *!*/
        /*-webkit-transform:rotateX(180deg); !* Safari and Chrome *!*/
        /*}*/
    </style>
    <div class="tab-content">
        <div class="tab-pane active" style="margin-top: 12px">
            <center>
                <center style="margin-bottom: 8px">
                    <form class=" form-inline">
{{--                        <label class="control-label" for="Category"> Date from </label>--}}
{{--                        <input type="text" name="start_date" id="start_date"--}}
{{--                               class="form-control date_picker"--}}
{{--                               value="{{\Carbon\Carbon::parse($date[0])->format('Y-m-d')}}"  style="width: 70px">--}}
{{--                        <label class="control-label" for="Category"> Date To </label>--}}
{{--                        <input type="text" name="end_date" id="end_date" class="form-control date_picker"--}}
{{--                               value="{{\Carbon\Carbon::parse($date[1])->format('Y-m-d')}}"  style="width: 70px">--}}

{{--                        <label class="control-label" for="Category"> Client </label>--}}
{{--                        <select name="client_id" id="client_id" style="width: 200px" >--}}
{{--                            <option value="ALL">ALL</option>--}}
{{--                            @foreach($clients as $client)--}}
{{--                                <option value="{{$client->id}}">{{$client->code}}</option>--}}
{{--                            @endforeach--}}
{{--                        </select>--}}
                        <label class="control-label" for="Category"> Loading Orders </label>
                        <select name="loading_order_id" id="loading_order_id" style="width: 200px" multiple>
                            <option value="ALL">ALL</option>
                            @foreach($loading_orders as $loading_order)
                                <option value="{{$loading_order->id}}">{{$loading_order->id}}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="btn" id="re_generate_report">RE-GENERATE</button>
{{--                        <a id="print_generate_report" class="btn" style="" data-href="">PRINT</a>--}}
                        {{--<a class="btn" style="margin-right: 20px;" data-href="" id="export_generate_report">--}}
                        {{--<span class="iconsweets-excel"></span>EXPORT</a>--}}
                    </form>
                </center>
                <div id="income_statement">

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

    <script>
        $('.date_picker').datepicker({dateFormat: 'dd-mm-yy'}).val();
        $('#client_id,#loading_order_id').select2();

        $('#re_generate_report').on('click', function (e) {
            e.preventDefault();
            jQuery.ajax({
                url: '{{route('reports.managements_reports.loading_orders.expenses_sheet.re_generate')}}',
                type: 'get',
                data: jQuery('form').serialize(),
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    jQuery('#income_statement').empty().append(data);
                    calculateWidth();
                },
                complete: function () {
                    stopSpinner();
                },
                error: function (xhr, textStatus, error) {
                    console.log(error);
                    console.log(textStatus);
                    stopSpinner();
                }
            });
        });

        $('#print_generate_report').on('click', function (e) {
            e.preventDefault();

            var url = '{{ route('reports.managements_reports.trip_expenses_sheet.print',[':start_date',':end_date',':cargo_type',':destination_id']) }}';
            url = url.replace(':start_date', $('#start_date').val());
            url = url.replace(':end_date', $('#end_date').val());
            url = url.replace(':destination_id', $('#destination_id').val());
            url = url.replace(':cargo_type', $('#cargo_type').val());

            window.open(url, '_blank');

        });

        $('#export_generate_report').on('click', function (e) {
            e.preventDefault();
            var url = jQuery('#income_statement_date').attr("data-href");
            window.open(url, '_blank');
        });

        $(document).ready(function () {
            calculateWidth();
        });
        $(window).resize(function () {
            var viewportWidth = $(window).width();
            var leftpanel = $('#leftpanel').width();

            $('#income_statement').css({
                "width": viewportWidth - leftpanel
            });

        });
        function calculateWidth() {
            var viewportWidth = $(window).width();
            var leftpanel = $('#leftpanel').width();

            $('#income_statement').css({
                "width": viewportWidth - leftpanel,
                "overflow": "scroll"
            });
        }
    </script>
@stop