@extends('system.layout.main')

@section('css')

@endsection

@section('title')
    <title>Feedback issues report</title>
@endsection

@section('content')

    <div class="content" ng-controller="FeedbackIssueController" 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">
                        Feedback issues 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>
                        
                        <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>Nhà in</th>
                                <th>Tổng số đơn</th>
                                <th>Danh sách lỗi</th>
                                <th>Số sản phẩm</th>
                                <th>Tỉ lệ lỗi</th>
                                <th>Tỉ lệ trung bình</th>
                            </tr>
                            <tr ng-if="report.report_data" ng-repeat="data in report.report_data">
                                <td ng-if="data.index == 0" rowspan="@{{ data.count_issue_type }}">
                                    @{{ data.print_provider_name }}
                                </td>
                                <td ng-if="data.index == 0" rowspan="@{{ data.count_issue_type }}">
                                    @{{ data.total_order }}
                                </td>
                                <td>
                                    @{{ data.issue_name }}
                                </td>
                                <td>
                                    @{{ data.issue_product_count }}
                                </td>
                                <td>
                                    @{{ data.percent }}%
                                </td>
                                <td ng-if="data.index == 0" rowspan="@{{ data.count_issue_type }}">
                                    @{{ data.avg_issue_percent }}%
                                </td>
                            </tr>
                        </table>

                        <p ng-if="!report.report_data || !report.report_data.length" style="padding: 15px 2px">
                            Không có dữ liệu!
                        </p>
                        
                    </div>
                </div>

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

                        <table class="table table-bordered table-responsive table-hover">
                            <tr>
                                <th>Danh mục</th>
                                <th>Nhà in</th>
                                <th>Tỉ lệ lỗi</th>
                            </tr>
                            <tr ng-if="report.report_data_category" ng-repeat="data in report.report_data_category">
                                <td ng-if="data.index == 0" rowspan="@{{ data.count_fb }}">
                                    @{{ data.category }}
                                </td>
                                <td>
                                    @{{ data.feedback }}
                                </td>
                                <td>
                                    @{{ data.value.percent }}%
                                </td>
                            </tr>
                        </table>

                        <p ng-if="!report.report_data_category || !report.report_data_category.length" style="padding: 15px 2px">
                            Không có dữ liệu!
                        </p>
                        
                    </div>
                </div>

                
            </div>
        </div>
    </div>

@endsection

@section('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/feedback-issue-controller.js')?v={{ $printSupplierSourceVersion }}"></script>
@endsection
