@extends('layouts.app')
@push('styles')
<link href="{{ asset('css/monitor.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.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>
    <div class='row mt-3'>
        <div class='col-12 d-flex justify-content-center'>
            <form id='monitorform' data-type="update">
            <div class='card' id='monitor-card' style="background: #C8C6F8;">
                <div class='card-body'>
                    <div class='card inner-card mb-4'>
                        <div class='card-body'>
                            <ul>
                                <li>
                                    <span><b>化學品名稱：</b> {{ $data->name }} </span>
                                    <span><b>CAS.NO：</b> {{ $data->cas }} </span>
                                    <span><b>危害因子：</b> {{ $data->harm }} </span>
                                </li>
                                <li>
                                    <span><b>填寫日期：</b> <span class='last_created_at'></span> </span>
                                    <span><b>最後編輯日期：</b> <span class='last_updated_at'></span> </span>
                                </li>
                                <li>
                                    <input type="hidden" value="{{ $data->factory_chemical_id }}" name="factory_chemical_id">
                                    <input type="hidden" value="{{ $data->id }}" name="id">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class='card inner-card mb-4'>
                        <div class='card-body ml-5'>
                            <dl>
                                <dt>
                                    <b class='required'>檢驗日期： </b><input type="date" name="examdate" required>
                                </dt>
                                <dt>
                                    <b class='required'>是否合格： </b> 
                                    <label><input type="radio" name="pass" value="true" checked> 是</label> 
                                    <label><input type="radio" name="pass" value="false"> 否</label>
                                </dt>
                            </dl>
                        </div>
                    </div>
                    <div class='card inner-card'>
                        <div class='card-body d-flex justify-content-around align-items-center'>
                            <div class='input-file'>
                                <input type="file" id="input-file" name="file" accept=".pdf, image/*">
                                <label for="input-file"><img src="{{ asset('img/health/Button_uploads.svg') }}"></label>
                            </div> 
                            <span>點擊上傳圖片即可上傳 <br> 檔案建議尺寸：5MB 內 <br> 圖片不得超過 1000px * 1000px <br> <span class='text-danger'>注意：您還沒上傳任何檔案</span></span>
                            <div class='uploaded'>
                                <div class='title'>已上傳檔案</div>
                                <div class='content'></div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
            <div class='d-flex justify-content-center my-4'>
                <button type="submit" class='submit'>儲存</button>
            </div>
            </form>
        </div>
    </div>
</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="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
    <script src="{{ asset('js/monitor.js') }}" type="module"></script>
    <script src="{{ asset('js/monitorSend.js') }}" type="module"></script>
    <script src="{{ asset('js/monitorRead.js') }}" type="module"></script>
@endsection