@extends('system.layout.main')

@section('css')
    <style>

    .chosen-container-single, .chosen-container-multi {
        width: 100%!important;
    }
    .chosen-single {
        height: 34px!important;
        padding-top: 5px!important;
        font-size: 15px;
    }

    </style>
@endsection

@section('title')
    <title>Order product verifiers report</title>
@endsection

@section('content')
<div class="content" ng-controller="ReportProductVerifierController" ng-cloak style="max-width: 1330px;">
    <div class="row">
        <div class="col-md-12" style="margin: 15px 0px">
            <div class="pull-left">
                <h3 style="margin: 0; margin-bottom: 10px">
                    Product verifiers report
                </h3>
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Từ <span class="hidden-xs">ngày</span></span>
                            <input type="text" class="form-control" id="date-from" placeholder="yyyy-mm-dd" autocomplete="off" />
                            <span class="input-group-addon">đến <span class="hidden-xs">ngày</span></span>
                            <input type="text" class="form-control" id="date-to" placeholder="yyyy-mm-dd" autocomplete="off" />
                        </div>
                        <div class="input-group">
                            <select ng-options="staff.email as staff.name for staff in verifierDetail"
                                    chosen
                                    class="form-control"
                                    ng-model="selectedVerifier"
                            >
                                <option value="" selected>-- Chọn Verifier --</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group text-center">
                        <button type="button" class="btn btn-primary" ng-click="feedReport()">Xem thống kê</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-12" style="min-height: 500px">

            <div class="box no-border">
                <div class="box-body">

                    <table class="table table-bordered table-responsive table-hover">

                        <tr>
                            <th>#</th>
                            <th>Verifier / KPI (ngày)</th>
                            <th>Thị trường</th>
                            {{-- <th>Tổng KPI</th> --}}
                            <th>SP In Production</th>
                            <th>SP Confirm</th>
                            <th>SP Waiting</th>
                        </tr>
                        <tr ng-repeat="row in reportRows">
                            <td rowspan="@{{ row.rowspan }}" ng-if="row.rowspan">
                                @{{ row.rowId }}
                            </td>
                            <td rowspan="@{{ row.rowspan }}" ng-if="row.rowspan">
                                <div ng-if="row.email">
                                    <strong>@{{ getVerifierDetail(row.email).name }}</strong> <span ng-show="row.email"> / @{{getVerifierDetail(row.email).kpi}} </span>
                                    <br>
                                    <small>@{{ row.email }}</small>
                                </div>
                            </td>
                            <td>
                                <span style="text-transform: uppercase">@{{ row.locale }}</span>
                                <img width="30" ng-src="/modules/localization/images/@{{ row.locale }}.svg">
                            </td>
                            {{-- <td>@{{ row.total_kpi }}</td> --}}
                            <td>
                                <span style="color: @{{ getReactColor(row.inproduction_kpi, 'inproduction') }}">
                                    <strong>@{{ row.inproduction_kpi }}</strong>
                                </span>
                            </td>
                            <td>
                                <span style="color: @{{ getReactColor(row.pending_kpi, 'pending') }}">
                                    <strong>@{{ row.pending_kpi }}</strong>
                                </span>
                            </td>
                            <td>
                                <span style="color: @{{ getReactColor(row.waiting_kpi, 'waiting') }}">
                                    <strong>@{{ row.waiting_kpi }}</strong>
                                </span>
                            </td>
                        </tr>
                </div>
            </div>
            
        </div>
    </div>
</div>
@endsection

@section('script')
    @php
    $locales = array_values(array_filter(getModuleLocale(), function($config) {
        return $config['enable'] && $config['locale'] != 'glob';
    }));
    @endphp

    <script>
        var dashboardLocalization = {!! json_encode($locales) !!};
        var currentLocale = "{{ (!empty(env('APP_LOCALE'))) ? env('APP_LOCALE') : 'us' }}";
    </script>

    <script src="/modules/print-suppliers/js/fulfill-base.js?v=<?= $printSupplierSourceVersion ?>"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
    <script src="@asset('print-suppliers/js/report-product-verifier-controller.js')?v={{ $printSupplierSourceVersion }}"></script>
@endsection
