<style>
    .trend-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .trend_echart {
        margin-top: 15px;
    }
    .data-box {
        /*box-shadow: 0 0.125rem 0.3rem rgba(0,0,0,.075);*/
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 20px;
        background: #ffffff;
    }
    .data-box .icon {
        font-size: 20px;
    }
    .data-pie {
        margin-top: 20px;
        background: #ffffff;
        height: 360px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        padding: 20px 20px 0 20px;
    }
    .average-time {
        margin-top: 20px;
    }
    .average-time .progress {
        border-radius: 6px;
        height: 10px;
        margin-bottom: 30px;
    }
    .average-time .progress .progress-bar-info {
        background-color: #00A4FF;
    }
    .average-time-title {
        font-size: 14px;
        color: #999999;
        margin-bottom: 6px;
        display: flex;
        justify-content: space-between;
    }
    .average-time-tis {
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: justify-all;
        font-size: 14px;
    }
    .average-time-tis-p {
        text-align: center;
    }
    .average-time-strpad {
        display: inline-block;
        width: calc(100% - 60px);
        overflow: hidden;
        white-space: nowrap;
    }
    .average-time-h4 {
        margin-bottom: 40px;
        font-weight: bold;
        font-size: 18px;
        color: #666666;
    }
    .panel-top10 {
        margin-top: 20px;
    }
    .panel-top10 .table {
        margin-bottom: 0;
    }
</style>

<div class="data-boxs row">
    <div class="col-lg-3 col-xs-6">
        <div class="data-box">
            <div class="inner">
                <h3>{$wo_total}</h3>
                <p>{:__('Total number of work orders')}</p>
            </div>
            <div class="icon">
                <i class="fa fa-commenting-o text-info"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="data-box">
            <div class="inner">
                <h3>{$pending_wo_total}</h3>
                <p>{:__('Communication in progress')}</p>
            </div>
            <div class="icon">
                <i class="fa fa-ellipsis-h text-warning"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="data-box">
            <div class="inner">
                <h3>{$open_wo_total}</h3>
                <p>{:__('Total open bill')}</p>
            </div>
            <div class="icon">
                <i class="fa fa-clock-o text-warning"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="data-box">
            <div class="inner">
                <h3>{$assign_wo_total}</h3>
                <p>{:__('To be assigned')}</p>
            </div>
            <div class="icon">
                <i class="fa fa-question-circle text-red"></i>
            </div>
        </div>
    </div>
</div>

<div class="panel panel-default panel-intro">
    <div class="panel-body">
        <div class="trend-header">
            <h4 class="no-margin">{:__('Work order trend')}</h4>
            <div id="datefilter">
                <form action="" role="form" novalidate="novalidate" class="form-inline nice-validator n-default n-bootstrap">
                    <a href="javascript:;" class="btn btn-primary btn-refresh"><i class="fa fa-refresh"></i></a>
                    <a href="javascript:;" class="btn btn-success btn-filter">{:__('today')}</a>
                    <a href="javascript:;" class="btn btn-success btn-filter">{:__('yesterday')}</a>
                    <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 7 days')}</a>
                    <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 30 days')}</a>
                    <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last month')}</a>
                    <a href="javascript:;" class="btn btn-success btn-filter">{:__('This month')}</a>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control input-inline datetimerange" placeholder="{:__('Designated date')}"/>
                    </div>
                    <a href="javascript:;" class="btn btn-info btn-number"><span id="number">0</span> {:__('Work orders')}</a>
                </form>
            </div>
        </div>
        <div class="trend_echart" id="trend_echart" style="height:300px;width:100%;"></div>
    </div>
</div>

<div class="data-pies row">
    <div class="col-lg-4 col-xs-12">
        <div class="data-pie">
            <h4 class="average-time-h4">{:__('Overall response time')}</h4>
            <div class="average-time">
                <div class="average-time-title">
                    <span>{:__('Average response time')}</span>
                    <span>{$average_time.response.value}</span>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{$average_time.response.progress}" aria-valuemax="100" style="width: {$average_time.response.progress}%"></div>
                </div>
            </div>
            <div class="average-time">
                <div class="average-time-title">
                    <span>{:__('Average solution time')}</span>
                    <span>{$average_time.solution.value}</span>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{$average_time.solution.progress}" aria-valuemax="100" style="width: {$average_time.solution.progress}%;"></div>
                </div>
            </div>
            <div class="average-time">
                <div class="average-time-title">
                    <span>{:__('Average first response time')}</span>
                    <span>{$average_time.first_response.value}</span>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{$average_time.first_response.progress}" aria-valuemax="100" style="width: {$average_time.first_response.progress}%"></div>
                </div>
            </div>

            <div class="average-time-tis">
                <span><span class="text-black">0</span>&nbsp;&nbsp;<i class="fa fa-caret-left"></i></span>
                <span class="average-time-strpad">{:str_pad('',200,'·')}</span>
                <span><i class="fa fa-caret-right"></i>&nbsp;&nbsp;<span class="text-black">100</span></span>
            </div>
            <p class="average-time-tis-p">hrs</p>

        </div>
    </div>

    <div class="col-lg-4 col-xs-12">
        <div id="pie-solve" class="data-pie"></div>
    </div>
    <div class="col-lg-4 col-xs-12">
        <div id="pie-pleased" class="data-pie"></div>
    </div>

</div>

<div class="row">
    <div class="col-lg-4 col-xs-12">
        <div class="panel panel-default panel-intro panel-top10">
            <div class="panel-body">
                <p>{:__('Category work order quantity top 10')}</p>
                <table class="table">
                    <tr>
                        <th width="60%">{:__('Work order category')}</th>
                        <th width="20%" class="text-center">{:__('Number of work orders')}</th>
                        <th>{:__('Proportion')}</th>
                    </tr>
                    {volist name="workorder_category_top10" id="cat" empty="<tr><td colspan='3'>暂时没有数据...</td></tr>"}
                    <tr>
                        <td>{$cat.name}</td>
                        <td class="text-center">{$cat.order_quantity}</td>
                        <td>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" data-toggle="tooltip" data-title="{$cat.progress}%" style="width: {$cat.progress}%"></div>
                            </div>
                        </td>
                    </tr>
                    {/volist}
                </table>
            </div>

        </div>
    </div>
    <div class="col-lg-4 col-xs-12">
        <div class="panel panel-default panel-intro panel-top10">
            <div class="panel-body">
                <p>{:__('Top 10 orders received by engineers')}</p>
                <table class="table">
                    <tr>
                        <th width="60%">{:__('Engineers')}</th>
                        <th class="text-center" width="40%">{:__('Engineers Work order quantity')}</th>
                    </tr>
                    {volist name="workorder_engineers_top10" id="engineer" empty="<tr><td colspan='2'>暂时没有数据...</td></tr>"}
                    <tr>
                        <td>{$engineer.title}</td>
                        <td class="text-center">{$engineer.work_order_quantity}</td>
                    </tr>
                    {/volist}
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-xs-12">
        <div class="panel panel-default panel-intro panel-top10">
            <div class="panel-body">
                <p>{:__("Top 10 engineers' response speed")}</p>
                <table class="table">
                    <tr>
                        <th width="70%">{:__('Engineers')}</th>
                        <th class="text-center" width="40%">{:__('Avg Response Time')}</th>
                    </tr>
                    {volist name="avg_response_time_top10" id="response_time" empty="<tr><td colspan='2'>暂时没有数据...</td></tr>"}
                    <tr>
                        <td>{$response_time.title}</td>
                        <td class="text-center">{$response_time.avg_response_time}</td>
                    </tr>
                    {/volist}
                </table>
            </div>
        </div>
    </div>
</div>