@extends('layouts.main_without_top_button')
@section('title')
    Turn Around 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">Turn Around 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;
            }
        </style>
        <div class="tab-content">
            <div class="tab-pane active" style="margin-top: 12px">
                <center>
                    <center style="margin-bottom: 8px">
                        <form class=" form-inline">
                            <div class="row">
                                <div class="col-md-12">
                                    <label class="control-label" for="Category"> Date From </label>
                                    <select id="month" name="start_month" class="searchable_select"
                                            style="width: 80px">
                                        <option value="ALL">ALL</option>
                                        <option value="12" {{ date('m') == 12 ? 'selected' : '' }}>Dec</option>
                                        <option value="11" {{ date('m') == 11 ? 'selected' : '' }}>Nov</option>
                                        <option value="10" {{ date('m') == 10 ? 'selected' : '' }}>Oct</option>
                                        <option value="09" {{ date('m') == 9 ? 'selected' : '' }}>Sept</option>
                                        <option value="08" {{ date('m') == 8 ? 'selected' : '' }}>Aug</option>
                                        <option value="07" {{ date('m') == 7 ? 'selected' : '' }}>Jul</option>
                                        <option value="06" {{ date('m') == 6 ? 'selected' : '' }}>Jun</option>
                                        <option value="05" {{ date('m') == 5 ? 'selected' : '' }}>May</option>
                                        <option value="04" {{ date('m') == 4 ? 'selected' : '' }}>Apr</option>
                                        <option value="03" {{ date('m') == 3 ? 'selected' : '' }}>Mar</option>
                                        <option value="02" {{ date('m') == 2 ? 'selected' : '' }}>Febr</option>
                                        <option value="01" {{ date('m') == 1 ? 'selected' : '' }}>Jan</option>
                                    </select>
                                    <select id="start_day" name="start_day" class="searchable_select" style="width: 80px">
                                        <option value="ALL">D</option>
                                        @foreach($days as $day)
                                            <option value="{{$day}}" {{ $day == 1 ? 'selected' : '' }}>{{$day}}</option>
                                        @endforeach
                                    </select>
                                    <select id="start_year" name="start_year" class="searchable_select" style="width: 80px">
                                        <option value="ALL">Y</option>
                                        @foreach($years as $year)
                                            <option value="{{$year}}" {{ date('Y') == $year ? 'selected' : '' }}>{{$year}}</option>
                                        @endforeach
                                    </select>
                                    <label class="control-label" for="Category"> Date To </label>
                                    <select id="end_month" name="end_month" class="searchable_select"
                                            style="width: 80px">
                                        <option value="ALL">ALL</option>
                                        <option value="12" {{ date('m') == 12 ? 'selected' : '' }}>Dec</option>
                                        <option value="11" {{ date('m') == 11 ? 'selected' : '' }}>Nov</option>
                                        <option value="10" {{ date('m') == 10 ? 'selected' : '' }}>Oct</option>
                                        <option value="09" {{ date('m') == 9 ? 'selected' : '' }}>Sept</option>
                                        <option value="08" {{ date('m') == 8 ? 'selected' : '' }}>Aug</option>
                                        <option value="07" {{ date('m') == 7 ? 'selected' : '' }}>Jul</option>
                                        <option value="06" {{ date('m') == 6 ? 'selected' : '' }}>Jun</option>
                                        <option value="05" {{ date('m') == 5 ? 'selected' : '' }}>May</option>
                                        <option value="04" {{ date('m') == 4 ? 'selected' : '' }}>Apr</option>
                                        <option value="03" {{ date('m') == 3 ? 'selected' : '' }}>Mar</option>
                                        <option value="02" {{ date('m') == 2 ? 'selected' : '' }}>Febr</option>
                                        <option value="01" {{ date('m') == 1 ? 'selected' : '' }}>Jan</option>
                                    </select>
                                    <select id="end_day" name="end_day" class="searchable_select" style="width: 80px">
                                        <option value="ALL">D</option>
                                        @foreach($days as $day)
                                            <option value="{{$day}}" {{ $day == date('d') ? 'selected' : '' }}>{{$day}}</option>
                                        @endforeach
                                    </select>
                                    <select id="end_year" name="end_year" class="searchable_select"
                                            style="width: 80px">
                                        <option value="ALL">Y</option>
                                        @foreach($years as $year)
                                            <option value="{{$year}}" {{ date('Y') == $year ? 'selected' : '' }}>{{$year}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <table style="padding: 2px">
                                <tr id="cargo_type_tr">
                                    <td style="text-align: right;padding-right: 4px;margin-top: 2px"><label class="control-label" for="Category">Type </label></td>
                                    <td style="text-align: left">
                                        <select name="type" style="width: 200px" class="searchable_select" id="type">
                                            <option value="ALL">ALL</option>
                                            <option value="IMPORT">Import</option>
                                            <option value="EXPORT">Export</option>
                                            <option value="TRANSIT">Transit</option>
                                            <option value="LOCAL">Local</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr id="cargo_type_tr">
                                    <td style="text-align: right;padding-right: 4px;margin-top: 2px"><label class="control-label" for="Category"> CARGO TYPE </label></td>
                                    <td style="text-align: left">
                                        <select name="cargo_type" style="width: 200px" class="searchable_select" id="cargo_type">
                                            <option value="ALL">ALL</option>
                                            <option value="DRY_CARGO">DRY CARGO</option>
                                            <option value="CONTAINERS">CONTAINERS ONLY</option>
                                            <option value="LOOSE_CARGO">LOOSE_CARGO ONLY</option>
                                            <option value="TANKERS">TANKERS ONLY</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: center;padding-top: 2px" colspan="2"><button type="submit" class="btn" id="re_generate_report">GENERATE</button></td>
                                </tr>
                            </table>
                        </form>
                    </center>
                    <div id="income_statement">


                    </div>
                </center>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->
    <script>
        jQuery('.searchable_select').datepicker();
        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.turn_around')}}',
                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