@extends('layouts.app')
@push('styles')
<link href="{{ asset('css/home-applies.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class='container-fluid mt-5'>
    <div class='row d-flex justify-content-between'>
        <!-- sidebar -->
        <div class='col-lg-2 col-12'>
            <div class='card' id="index-sidebar">
                <div class='card-header text-center'>
                    <h2 class='font-weight-bold'>最新消息</h2>
                </div>
                <div class='card-body'>
                    <h3>0602. 更新項目</h3>
                    <ul>
                        <li>新增 作業環境監測 頁面</li>
                        
                    </ul>
                </div>
            </div>
        </div>

        <!-- main-content -->
        <div class='col-lg-10 col-12'>
            @include('user_manage_banner')

            <div class='row my-2'>
                <h1 class='w-100 text-center font-weight-bold'>雲端輔導資訊平台</h1>
            </div>
            <div class='card-deck index-bulletin text-center w-100 p-3'>
                <div class='card' style="border: 4px solid #82C7FF;">
                    <div class='card-body'>
                        <circle-ring color="#2482E2" radius="75" progress="{{ 50 }}"></circle-ring>
                        <h3 class='mt-1 font-weight-bold' style="color: #2482E2;">基線清查</h3>
                        <hr style="border-color: #2482E2;">
                        <ul class='list-unstyled'>
                            <li>總項目 {{ 50 }} 項</li>
                            <li>已填寫 {{ 25 }} 項</li>
                            <li>未填寫 {{ 25 }} 項</li>
                        </ul>
                        <btn-goto color-dark="#2584E2" color-bright="#7EC3FE" color-sub="#C2E3FF" color-bg="linear-gradient(to right, #7EC3FE, #2584E2)" 
                                  color-bdr="#fff" text="查看更多" link='/applies'></btn-goto>
                    </div>
                </div>
                <div class='card' style="border: 4px solid #FFCB80;">
                    <div class='card-body'>
                        <circle-ring color="#FF9700" radius="75" progress="95"></circle-ring>
                        <h3 class='mt-1 font-weight-bold' style="color: #FF9700;">健康檢查</h3>
                        <hr style="border-color: #FF9700;">
                        <ul class='list-unstyled'>
                            <li>總項目 5 項</li>
                            <li>已填寫 5 項</li>
                            <li>未填寫 5 項</li>
                        </ul>
                        <btn-goto color-dark="#FF9803" color-bright="#FFC876" color-sub="#FEE5BC" color-bg="linear-gradient(to right, #FFC876, #FF9803)" 
                                  color-bdr="#fff" text="查看更多" link='/health'></btn-goto>
                    </div>
                </div>
                <div class='card' style="border: 4px solid #86DB9F;">
                    <div class='card-body'>
                        <circle-ring color="#0BB53B" radius="75" progress="27"></circle-ring>
                        <h3 class='mt-1 font-weight-bold' style="color: #0BB53B;">人員證照與教育訓練</h3>
                        <hr style="border-color: #0BB53B;">
                        <ul class='list-unstyled'>
                            <li>總項目 5 項</li>
                            <li>已填寫 5 項</li>
                            <li>未填寫 5 項</li>
                        </ul>
                        <btn-goto color-dark="#62CF58" color-bright="#7FE175" color-sub="#E7FAE6" color-bg="linear-gradient(to right, #7FE175, #62CF58)" 
                                  color-bdr="#fff" text="查看更多" link='/license'></btn-goto>
                    </div>
                </div>
                <div class='card' style="border: 4px solid #FECCCB;">
                    <div class='card-body'>
                        <circle-ring color="#FF9494" radius="75" progress="75"></circle-ring>
                        <h3 class='mt-1 font-weight-bold' style="color: #FF9494;">作業環境監測</h3>
                        <hr style="border-color: #FF9494;">
                        <ul class='list-unstyled'>
                            <li>總項目 5 項</li>
                            <li>已填寫 5 項</li>
                            <li>未填寫 5 項</li>
                        </ul>
                        <btn-goto color-dark="#FEA3A2" color-bright="#FFC8C8" color-sub="#FFF7F7" color-bg="linear-gradient(to right, #FFC8C8, #FEA3A2)" 
                                  color-bdr="#fff" text="查看更多" link='/monitor'></btn-goto>
                    </div>
                </div>
                <div class='card' style="border: 4px solid #D0ADF0;">
                    <div class='card-body'>
                        <circle-ring color="#A458DF" radius="75" progress="46"></circle-ring>
                        <h3 class='mt-1 font-weight-bold' style="color: #A458DF;">機械設備自動檢查</h3>
                        <hr style="border-color: #A458DF;">
                        <ul class='list-unstyled'>
                            <li>總項目 5 項</li>
                            <li>已填寫 5 項</li>
                            <li>未填寫 5 項</li>
                        </ul>
                        <btn-goto color-dark="#BD88E2" color-bright="#D7ABF0" color-sub="#FBF4FE" color-bg="linear-gradient(to right, #D7ABF0, #BD88E2)" 
                                  color-bdr="#fff" text="查看更多" link='/machine'></btn-goto>
                    </div>
                </div>
            </div>
            
            <div class='index-bulletin text-center justify-content-around row w-100 my-4 p-3'>
                <div class='circle-box'>
                    <div class='bg'>
                        <div class='ring' style="background: linear-gradient(to right top, #2986E3, #82C7FF);">
                            <div class='ring-content'>
                                <div class='error'>!</div>
                                <h4>基線清查</h4>
                                <h3>異常項目 5 項</h3>
                                <btn-goto color-dark="#2584E2" color-bright="#7EC3FE" color-sub="#C2E3FF" color-bg="#fff" color-bdr="#2584E2" text="前往查看" link='#'></btn-goto>    
                            </div>
                        </div>
                    </div>
                </div>
                <div class='circle-box'>
                    <div class='bg'>
                        <div class='ring' style="background: linear-gradient(to right top, #FB9607, #FFCB80);">
                            <div class='ring-content'>
                                <div class='error'>!</div>
                                <h4>健康檢查</h4>
                                <h3>異常項目 5 項</h3>
                                <btn-goto color-dark="#FF9803" color-bright="#FFC876" color-sub="#FEE5BC" color-bg="#fff" color-bdr="#FF9803" text="前往查看" link='#'></btn-goto>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='circle-box'>
                    <div class='bg'>
                        <div class='ring' style="background: linear-gradient(to right top, #14B642, #86DB9F);">
                            <div class='ring-content'>
                                <div class='error'>!</div>
                                <h4>人員證照<br>與教育訓練</h4>
                                <h3>異常項目 5 項</h3>
                                <btn-goto color-dark="#62CF58" color-bright="#7FE175" color-sub="#E7FAE6" color-bg="#fff" color-bdr="#62CF58" text="前往查看" link='#'></btn-goto>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='circle-box'>
                    <div class='bg'>
                        <div class='ring' style="background: linear-gradient(to right top, #FE9695, #FECCCB);">
                            <div class='ring-content'>
                                <div class='error'>!</div>
                                <h5>作業環境監測</h5>
                                <h4>異常項目 5 項</h4>
                                <btn-goto color-dark="#FEA3A2" color-bright="#FFC8C8" color-sub="#FFF7F7" color-bg="#fff" color-bdr="#FEA3A2" text="前往查看" link='#'></btn-goto>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='circle-box'>
                    <div class='bg'>
                        <div class='ring' style="background: linear-gradient(to right top, #A760E0, #D0ADF0);">
                            <div class='ring-content'>
                                <div class='error'>!</div>
                                <h4>機械設備<br>自動檢查</h4>
                                <h3>異常項目 5 項</h3>
                                <btn-goto color-dark="#BD88E2" color-bright="#D7ABF0" color-sub="#FBF4FE" color-bg="#fff" color-bdr="#BD88E2" text="前往查看" link='#'></btn-goto>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('js/circle-ring.js') }}"></script>  
<script src="{{ asset('js/btn-goto.js') }}"></script>  
@endsection