@extends('layouts.app')
@push('styles')
<link href="{{ asset('css/monitor.css') }}" rel="stylesheet">
@endpush
@section('content')
<div class='w-100 bg-white'>
    <img src="{{ asset('img/monitor/banner.svg') }}" class='w-100'>
</div>

<div class='container-fluid'>
    <!-- turn back -->
    <div class='row mt-3'>
        <a href="javascript:history.back()" class='btn-return text-decoration-none ml-3'>
            <i class="fa fa-long-arrow-left"></i>
            回上一頁
        </a>
    </div>

    <!-- main title: chemical name -->
    <div class='row mt-3 monit-chem-h1'>
        <div class='col-12 text-center w-100'>
            <h1>{{ $name[0]->name }}</h1>
        </div>
    </div>
    <div class='row main-tab sub-tab'>
        <div class='col-3'></div>
        <div class='col-6 d-flex justify-content-around align-items-center'>
            <a href="/monitor/add/{{ request()->type }}/{{ request()->id }}" class="text-dark text-decoration-none">
                <img src="{{ asset('img/員工資料表_新增_加符號button.svg') }}" width="60">
                新增監測
            </a>
            <div>
                年份 &nbsp;
                <span class='select'>
                    <select>
                        <option value="all" selected>全部</option>
                        @foreach ($years as $y)
                            <option value="{{ $y }}">{{ $y }}</option>
                        @endforeach
                    </select>
                    <i class="fa fa-caret-down"></i>
                </span>
            </div>
        </div>
        <div class='col-3 d-flex justify-content-end align-items-center'>
            <a href="#" class='text-decoration-none text-muted'>作業環境相關法規<img src="{{ asset('img/事業單位基本資料_元件_Icon_法規提示.png') }}" width="38px" class='ml-2'></a>
        </div>
    </div>

    <!-- main content -->
    <!-- year -->
    
    @foreach ($datas as $year => $rows)
    <div class='year-row' id="{{ $year }}">
        <hr class='mt-0'>
        <div class='row my-4'>
            <div class='col-12 text-center'>
                <span class='year-title'>{{ $year }}  年</span>
            </div>
        </div>

        <!-- sheets -->
        <div class='row'>
            <div class='col-12'>
                @foreach ($rows as $d)
                <table class='monit-table monit-view-table w-100'>
                    <tbody>
                        <tr>
                            <td>檢驗日期</td>
                            <td>容許濃度</td>
                            <td>單一檢驗最高數值</td>
                            <td>平均檢驗數值</td>
                            <td>是否超標</td>
                            <td>修改</td>
                            <td>檢視</td>
                        </tr>
                        <tr>
                            <td>{{ substr($d->fintime, 0, 10) }}</td>
                            <td>{{ $d->unit == 0 ? $d->accept2 : $d->accept }} {!! $d->unit == 0 ? 'mg/m<sup>3</sup>' : '/ppm' !!}</td>
                            <td>{{ $d->maxresult }} {!! $d->unit == 0 ? 'mg/m<sup>3</sup>' : '/ppm' !!}</td>
                            <td>{{ $d->avgresult }} {!! $d->unit == 0 ? 'mg/m<sup>3</sup>' : '/ppm' !!}</td> 
                            <td></td>
                            <td>
                                <a href="/monitor/add/{{ request()->type }}/{{ request()->id }}?date={{ $d->date }}&mode=modify"><img src="{{ asset('img/修改.svg') }}" width="50"></a>
                            </td>
                            <td>
                                <a href="/monitor/add/{{ request()->type }}/{{ request()->id }}?date={{ $d->date }}&mode=view" class='btn-view'>查看</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                @endforeach
            </div>
        </div>
    </div>
    @endforeach
</div>

@endsection
@section('scripts')

<script src="{{ asset('js/monitorView.js') }}"></script>
@endsection