@extends('layouts.main_without_top_button')
@section('title')
    Trucks Optimizations Reports
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('operations.reports.reports')}}">Managements Reports</a> <span class="divider">/</span></li>
        <li class="active">Trucks Optimizations Reports</li>
    </ul>
@stop
@section('contentinner')
    <div class="tabbable">
        <style>
            .td_left_border {
                border-top: 1px solid #dddddd;
                border-left: 1px solid #dddddd;
                border-bottom: 0;
            }

            .td_border_right {
                border-right: 1px solid #dddddd;
            }

            .widgettitle {
                color: #000000;
            }
            .si_units{
                font-size: 14px;
                font-weight: bold;
            }
        </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="date_from" id="date_from" 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="date_to" id="date_to" class="form-control date_picker"
                                   value="{{\Carbon\Carbon::parse($date[1])->format('Y-m-d')}}"
                                   style="width: 70px">
                            <select name="cargo_type" style="width: 200px" class="searchable_select" id="cargo_type">
                                <option value="">ALL</option>
                                <option value="DRY_CARGO">DRY CARGO</option>
                                <option value="TANKERS">TANKERS</option>
                            </select>

                            <select name="client_id" id="client_id" class="searchable_select">
                                <option value="ALL">Client</option>
                                @foreach($clients as $client)
                                    <option value="{{$client->id}}">{{$client->name}}</option>
                                @endforeach
                            </select>
                            <label class="control-label" for="Category"> Nature </label>
                            <select name="nature" id="nature" style="width: 70px"  class="searchable_select">
                                <option value="ALL" selected>ALL</option>
                                <option value="ALL_TRANSIT" selected>ALL TRANSIT</option>
                                <option value="IMPORT" selected>IMPORT</option>
                                <option value="EXPORT" selected>EXPORT</option>
                                <option value="LOCAL" selected>LOCAL</option>
                            </select>
                            {{--<label class="control-label" for="Category"> Currency </label>--}}
                            {{--<select name="currency_id" id="currency_id" style="width: 70px">--}}
                                {{--<option value=""></option>--}}
                                {{--@foreach($currencies as $currency)--}}
                                    {{--<option value="{{$currency->id}}" {{($currency->is_default) ? "selected" : " "}}>{{$currency->code}}</option>--}}
                                {{--@endforeach--}}
                            {{--</select>--}}
                            <a type="button" class="btn" id="re_generate_report">RE-GENERATE</a>
                            {{--<a type="button" class="btn" id="print_generate_report">PRINT</a>--}}
                            {{--<input type="submit" value="PRINT">--}}
                            {{--<a id="print_generate_report" class="btn" style="" data-href=""></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-->
    </div><!--tabbable-->
    <script>
        jQuery('.searchable_select').select2();
        jQuery('.date_picker').datepicker();
        jQuery('#cargo_type').on('change', function (e) {
            var cargo_type = jQuery(this).val();
            if(cargo_type = "DRY_CARGO"){
                jQuery('#cargo_type_tr').next('' +
                    '<tr id="cargo_direction_tr">\n' +
                    '                                    <td style="text-align: right;padding-right: 4px;margin-top: 2px"><label class="control-label" for="Category"> CARGO TYPE </label></td>\n' +
                    '                                    <td style="text-align: left">\n' +
                    '                                    </td>\n' +
                    '                                </tr>');
            }else{
                jQuery('#cargo_direction_tr').remove();
            }

        });
        jQuery('#re_generate_report').on('click', function (e) {
            e.preventDefault();
            jQuery.ajax({
                url: '{{route('reports.managements_reports.trucks_optimizations.re_generate')}}',
                type: 'get',
                data: jQuery('form').serialize(),
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    jQuery('#income_statement').empty().append(data);

                },
                complete: function () {
                    stopSpinner();
                },
                error: function (xhr, textStatus, error) {
                    console.log(error);
                    console.log(textStatus);
                    stopSpinner();
                }
            });
        });

    </script>
@stop