@if (count($paxBySectorMorris))
    @php $chartHeight = count($sectorLabels) * 25 < 150 ? 150 : count($sectorLabels) * 25 @endphp
    <article class="col-sm-12 col-md-6 col-lg-6">

        <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-pax-by-sector3" data-widget-colorbutton="false"
             data-widget-fullscreenbutton="false" data-widget-editbutton="false"
             data-widget-sortable="false">
            <!-- widget options:
                usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">

                data-widget-colorbutton="false"
                data-widget-editbutton="false"
                data-widget-togglebutton="false"
                data-widget-deletebutton="false"
                data-widget-fullscreenbutton="false"
                data-widget-custombutton="false"
                data-widget-collapsed="true"
                data-widget-sortable="false"

            -->
            <header>
                <h2>@lang("content.pax_by_sectors"), Nos.</h2>
            </header>

            <!-- widget div-->
            <div>

                <!-- widget edit box -->
                <div class="jarviswidget-editbox">
                    <!-- This area used as dropdown edit box -->
                    <input class="form-control" type="text">
                </div>
                <!-- end widget edit box -->

                <!-- widget content -->
                <div class="widget-body">
                    <!-- this is what the user will see -->
                    <canvas id="chart_pax_by_sector" height="{{ $chartHeight }}"></canvas>
                </div>
                <!-- end widget content -->

            </div>
            <!-- end widget div -->

        </div>

    </article>

    <article class="col-sm-12 col-md-6 col-lg-6">

        <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-pax-by-sector4" data-widget-colorbutton="false"
             data-widget-fullscreenbutton="false" data-widget-editbutton="false"
             data-widget-sortable="false">
            <!-- widget options:
                usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">

                data-widget-colorbutton="false"
                data-widget-editbutton="false"
                data-widget-togglebutton="false"
                data-widget-deletebutton="false"
                data-widget-fullscreenbutton="false"
                data-widget-custombutton="false"
                data-widget-collapsed="true"
                data-widget-sortable="false"

            -->
            <header>
                <h2>@lang("content.seat_factors_by_sectors"), Nos.</h2>
            </header>

            <!-- widget div-->
            <div>

                <!-- widget edit box -->
                <div class="jarviswidget-editbox">
                    <!-- This area used as dropdown edit box -->
                    <input class="form-control" type="text">
                </div>
                <!-- end widget edit box -->

                <!-- widget content -->
                <div class="widget-body">
                    <!-- this is what the user will see -->
                    <canvas id="chart_pax_by_sector_sf" height="{{ $chartHeight }}"></canvas>
                </div>
                <!-- end widget content -->

            </div>
            <!-- end widget div -->

        </div>

    </article>
@endif

<article class="col-sm-12 col-md-12 col-lg-12">
    <div class="jarviswidget jarviswidget-color-blueDark" id="wid-px-flight-sector-2" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-table"></i> </span>
        <h2>PAX by Sector</h2>

    </header>

    <!-- widget div-->
    <div>

        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->

        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body no-padding">

            <div class="table-responsive" style="max-height: 400px; overflow: auto">

                <table class="table table-bordered table-hover" id="pax-sector-table">
                    <thead>
                    <tr>
                        <th class="text-center">No</th>
                        <th class="text-center">@lang("content.sector")</th>
                        <th class="text-center">@lang("content.total_capacity")</th>
                        <th class="text-center">@lang("content.total_pax")</th>
                        <th class="text-center">@lang("content.no_of_flights")</th>
                        <th class="text-center">@lang("content.average_pax")</th>
                        <th class="text-center">@lang("content.average_seat_factors")</th>
                    </tr>

                    </thead>
                    <tbody>

                    @php $j = 0 @endphp
                    @foreach($paxBySector as $sector => $data)
                        <tr class="category">
                            <td data-center>{{ ++$j }}</td>
                            <td data-center>{{ $sector }}</td>
                            <td data-center>{{ $data["capacity"] }}</td>
                            <td data-center>{{ $data["pax"] }}</td>
                            <td data-center>{{ $data["flights"] }}</td>
                            <td data-center>{{ $data["average_pax"] }}</td>
                            @php $sf = $data["average_sf"] @endphp
                            <td style="">
                                <div class="col-md-12 progress no-padding no-margin">
                                    @php $labelClass = $sf < 15 ? "color-black" : "" @endphp
                                    @php $bgClass = getPunctualityBgClassByPercentage($sf) @endphp
                                    <div class="progress-bar {{ $bgClass }} {{ $labelClass }}" aria-valuetransitiongoal="{{ $sf }}" aria-valuenow="{{ $sf }}" style="width: {{ $sf }}%;">{{ $sf }}%</div>
                                </div>
                            </td>
                        </tr>
                    @endforeach

                    </tbody>
                </table>

            </div>
        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
</article>