@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'>
    @include('user_manage_banner')

    <div class='row mx-2 mt-2'>
        <img src="{{ asset('img/monitor/alert.svg') }}" class='w-100'>
    </div>
    
    <div class='row mt-4'>
        <div class='col-lg-12 d-flex justify-content-center'>
            <div class='select monit-search'>
                <input type="search" class="table-search">
                <i class="fa fa-search"></i>
            </div>

            <div class='select ml-5'>
                <select class='col-select monit-select'>
                    <option value="1">化學品名稱</option>
                    <option value="2">CAS-NO</option>
                    <option value="4">狀態</option>
                </select>
                <i class="fa fa-caret-down"></i>
            </div>
        </div>
    </div>

    <div class='row mt-4'>
        <div class='col-lg-12 d-flex justify-content-center filter-buttons'>
            <button data-maintype="8" class='btn-blue-tag mr-3'>粉塵</button>
            <button data-maintype="1" class='btn-blue-tag mr-3'>有機溶劑</button>
            <button data-maintype="2" class='btn-blue-tag mr-3'>特定化學物質</button>
            <button data-maintype="others" class='btn-blue-tag mr-3'>其他</button>
        </div>
    </div>
    <span hidden id="filter"></span>

    <hr>

    <div class='row mt-4'>
        <div class='col-lg-12'>
            <div class='card' id='monitor-card'>
                <div class='card-body'>
                    <div class='row main-tab'>
                        <div class='col-lg-12 d-flex justify-content-end'>
                            <!--
                            <a href="/monitor/add" class='text-white'>
                                <img src="{{ asset('img/員工資料表_新增_加符號button.svg') }}" width="60">
                                新增監測
                            </a> 
                            -->

                            <button class='export text-white'>
                                <img src="{{ asset('img/化學品及機械設備_匯出匯入_icon.svg') }}" width="60">
                                匯入/匯出 (Excel)
                            </button>    
                        </div>
                    </div>

                    <div class='card inner-card mt-2'>
                        <div class='card-body'>
                            <table class='monit-tbl w-100'>
                                <thead>
                                <tr class='sub-label text-white'>
                                    <th>編號</th>
                                    <th>化學品名稱</th>
                                    <th>CAS NO.</th>
                                    <th>危害因子</th>
                                    <th>狀態</th>
                                    <th>最新檢驗日期</th>
                                    <!-- <th>最後填寫時間</th> -->
                                    <th>下次填寫時間</th>
                                    <th>新增監測</th>
                                    <th>查看資訊</th>
                                </tr>
                                </thead>
                                <tbody class='table-o'>
                                @foreach ($rows as $r)
                                <tr data-maintype="{{ $r->maintype }}">
                                    <td>{{ str_pad($loop->index+1, 3, "0", STR_PAD_LEFT) }}</td>
                                    <td>{{ $r->name }}</td>
                                    <td>{{ $r->cas }}</td>
                                    <td>{{ $r->harm }}</td>
                                    <td><span class='tag'>{{ $r->state }}</span></td>
                                    <td>{{ $r->finishedtime }}</td>
                                    <!-- <td>{{ substr($r->newest, 0, 10) }} {{ substr($r->newest2, 0, 10) }}</td> -->
                                    <td>
                                        {{ $r->newest ? substr(Carbon\Carbon::parse($r->newest)->addDays($r->period), 0, 10) : "" }}
                                        {{ $r->newest2 ? substr(Carbon\Carbon::parse($r->newest2)->addDays($r->period), 0, 10) : "" }}
                                    </td>
                                    <td>
                                        <a href="monitor/add/{{ $r->harm === '化學' ? 'chemicals' : 'physics' }}/{{ $r->id }}"><img src="{{ asset('img/monitor/icon_add.svg') }}" width="50"></a>
                                    </td>
                                    <td>
                                        <!-- <a href="/monitor/view" class='text-decoration-none text-white check-tag'>查看</a> -->
                                        <a href="monitor/view/{{ $r->harm === '化學' ? 'chemicals' : 'physics' }}/{{ $r->id }}"><img src="{{ asset('img/monitor/icon_view.svg') }}" width="50"></a>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class='modal export' style='display: {{ count($errors) ? "flex" : "none" }}'>
    <div class='container d-flex flex-column text-left w-100'>
        <div>
            <h2 class='title-blue py-3'>
                <img src="{{ asset('img/化學品及機械設備_匯出匯入_icon.svg') }}" width="60" class='mx-2'>
                匯入/匯出
                <span class='btn-close float-right'>
                    &times;
                </span>
            </h2>
        </div>
        <div class='px-2 py-3 my-2' style="border: 1px solid #9AD3EE;">
            <p class='text-danger'>* 若需匯入資料，請先下載以下格式範例，並依格式填寫資料表。</p>
            <a href='/storage/import_files/monitor.xlsx' target="_blank"><img src="{{ asset('img/化學品及機械設備_匯出匯入_excel檔案_icon.svg') }}" width="60">monitor.xlsx</a>
        </div>
        <div class='py-3 my-2' style="background: #9AD3EE;">
            <form method="post" action="import/import/monitor" enctype="multipart/form-data" id="import_monitor_excel">
                @csrf
                <div class='card mx-auto mb-3' style="border-radius: 7px; border: 2px solid #999; width: 97%;">
                    <div class='card-body'>
                        <input type='file' name="file" required>
                        <p class='text-danger mt-2'>
                            * 上傳檔案須符合上方範例格式，若格式不符將上傳失敗。目前僅支援 .xlsx、.xls 檔<br>
                            <ol>
                            @foreach($errors as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                            </ol>
                        </p>
                    </div>
                </div>
                <div class='text-center'>
                    <button type="submit" class='btn btn-import'>確認匯入</button>
                </div>
            </form>
            <div class='card mx-auto mt-3' style="border-radius: 7px; border: 2px solid #999; width: 97%;">
                <div class='card-body'>
                    <div>
                        <a href="export/export/monitor" class='btn btn-export'>匯出檔案</a>
                    </div>
                    <p class='text-danger mt-2'>* 匯出目前已有化學品監測表單資料。</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
    <script src="{{ asset('js/modal_toggle.js') }}"></script>
    <script src="{{ asset('js/monitor.js') }}"></script>
@endsection