@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 }}</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 class='year-switch'>
                        <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="https://law.moj.gov.tw/LawClass/LawAll.aspx?pcode=N0060033" target="_blank"
               class='text-decoration-none text-muted'>
                作業環境相關法規
                <img src="{{ asset('img/事業單位基本資料_元件_Icon_法規提示.png') }}" width="38px" class='ml-2'>
            </a>
        </div>
    </div>
    
    @foreach ($years as $year)
    <section data-year="{{ $year }}">
        <hr class='mt-0'>
        <div class='row my-4'>
            <div class='col-12 text-center'>
                <span class='year-title'>{{ $year }} 年</span>
            </div>
        </div>
        <div class='row'>
            <div class='col-12'>
            @foreach ($datas as $row)
                @if ( substr($row->examdate, 0, 4) == $year )
                <table class='monit-table monit-view-table w-100'>
                    <tr>
                        <td>檢驗日期</td>
                        <td>是否超標</td>
                        <td>修改</td>
                        <td>檢視</td>
                    </tr>
                    <tr>
                        <td>{{ $row->examdate }}</td>
                        <td>
                            <span class="{{ $row->pass == 0 ? 'text-danger' : '' }}">{{ $row->pass == 0 ? "是" : "否" }}</span>
                        </td>
                        <td>
                            <a href="/monitor/update/{{ $row->id }}?mode=modify"><img src="{{ asset('img/修改.svg') }}" width="50"></a>
                        </td>
                        <td>
                            <a href="/monitor/update/{{ $row->id }}?mode=view" class='btn-view'>查看</a>
                        </td>
                    </tr>
                </table>
                @endif
            @endforeach
            </div>
        </div>
    </section>
    @endforeach
</div>

@endsection

@section('instruct-modal')
    @foreach(File::glob(public_path('storage/instruct/monitor').'/*') as $path)
        <span data-src="{{ str_replace(public_path(), '', $path) }}"></span>
    @endforeach
@endsection

@section('scripts')
    <script src="{{ asset('js/monitor.js') }}" type="module"></script>
@endsection