@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 verifiers report</title>
@endsection

@section('content')
<div class="content" ng-controller="ReportVerifierController" 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">
                    Order 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>Verifier / KPI(ngày)</th>
                            <th>Tổng KPI</th>
                            <th>Sản phẩm In Production</th>
                            <th>Sản phẩm Waiting</th>
                        </tr>
                        <tr ng-repeat="(verifier_id, verifier) in reportVerifiers">
                            <td>@{{ getVerifierDetail(verifier_id).name }} / (@{{getVerifierDetail(verifier_id).kpi}})</td>
                            <td>@{{ verifier.total_kpi }} / @{{ getVerifierDetail(verifier_id).kpi * dateRange }}</td>
                            <td>@{{ verifier.inproduction_kpi }}</td>
                            <td>@{{ verifier.waiting_kpi }}</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-verifier-controller.js')?v={{ $printSupplierSourceVersion }}"></script>
@endsection
