@extends('layouts.work')

@section('title', '工業安全網站')

@section('styles')
    <link href="{{ asset('css/sm_index.css') }}" rel="stylesheet">
    <style type="text/css">
        .img-link {
            width: 180px;
            height: 100px;
            margin: 0.6em;
            object-fit: contain;
        }

        .sr-only-main {
            position: absolute;
        }
        @media screen and (max-width: 450px){
            .img-fluid{
                /* content: url("/img/slider/banner_02V2.png"); */
                /* content: url("/img/slider/banner_02V3.svg"); */
                  width: 100%;
            }
            .img-link {
                width: 80px;
                height: 100px;
                margin: 0.2em;
                object-fit: contain;
            }
            .vr{
                margin-bottom: 10px;
            }
            .drop-list > select:active{
                
            }
        }
    </style>
@endsection

@section('content')
    <div class='container-fluid position-relative'>
        <a href="#C" class='sr-only-main' accesskey="C" name="C" title="主要內容區塊">:::</a>
  
        <noscript>
            <div class='text-center'>
                <p>此網頁需要支援 JavaScript 才能正確運行，請先至你的瀏覽器設定中開啟 JavaScript。</p>
            </div>
        </noscript>
       
        <!-- Carousel -->
        <div >
            <section>
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <!--
                        <div class="carousel-item active">
                            <img src="{{ asset('img/slider/banner_01.png') }}" class="img-fluid" alt="第一張輪播圖，工業安全衛生技術輔導網" title="第一張輪播圖，工業安全衛生技術輔導網">
                        </div>
                        -->
                        <!-- <div class="carousel-item active">
                            <img src="{{ asset('img/slider/banner_02.jpg') }}" class="img-fluid" alt="第一張輪播圖，工業安全衛生技術輔導網" title="第一張輪播圖，工業安全衛生技術輔導網">
                        </div> -->
                        <div class="carousel-item active">
                            <img src="{{ asset('img/slider/banner_02V2.jpg') }}" class="img-fluid" alt="第一張輪播圖，工業安全網站" title="第一張輪播圖，工業安全網站">
                        </div>
                        <!--
                        <div class="carousel-item">
                            <img src="{{ asset('img/slider/banner_03.jpg') }}" class="img-fluid" alt="第三張輪播圖，工業安全衛生技術輔導網" title="第三張輪播圖，工業安全衛生技術輔導網">
                        </div>
                        <div class="carousel-item">
                            <img src="{{ asset('img/slider/Engtitle_2016.png') }}" class="img-fluid" alt="第四張輪播圖，工業安全衛生技術輔導網" title="第四張輪播圖，工業安全衛生技術輔導網">
                        </div>
                        -->
                    </div>

                    {{-- <span class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" title="上一張幻燈片">
                        <i class="fas fa-chevron-left" aria-hidden="true"></i>
                    </span>
                    <span class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next" title="下一張幻燈片">
                        <i class="fas fa-chevron-right" aria-hidden="true"></i>
                    </span>
                    
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active" title="到第一張幻燈片"></li>
                        <!--
                        <li data-target="#carouselExampleIndicators" data-slide-to="1" title="到第二張幻燈片"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2" title="到第三張幻燈片"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="3" title="到第四張幻燈片"></li>
                        -->
                    </ol> --}}
                </div>
            </section>
        </div>

        <!-- bulletin -->
        <div class="app-div mx-3 mx-lg-5">
            <h2 class="mb-0">
                <img class="mobile-mode" src="{{ asset('img/經濟部產業發展署元件_首頁_手機布告欄標題框2.svg') }}" title="佈告欄" alt="佈告欄">
                <img class="web-mode" src="{{ asset('img/經濟部產業發展署元件_首頁_布告欄標題框.svg') }}" title="佈告欄" alt="佈告欄">
            </h2>
            <bulletin class="p-0"></bulletin>
        </div>
        

        <div class='d-flex flex-wrap justify-content-around mx-md-5'>
            <a href="https://ccb.osha.gov.tw/content/masterpage/Index.aspx" target="_blank" title="另開新視窗，連結到化學品評估及分級管理"><img src="{{ asset('img/logo1.png') }}" class='img-link' alt="另開新視窗，連結到化學品評估及分級管理"></a>
            <a href="https://www.sahtech.org/content/ch/masterpage/Index.aspx" target="_blank" title="另開新視窗，連結到財團法人安全衛生技術中心"><img src="{{ asset('img/LOGO-01.jpg') }}" class='img-link' alt="另開新視窗，連結到財團法人安全衛生技術中心"></a>
            <a href="https://www.ftis.org.tw/" target="_blank" title="另開新視窗，連結到台灣產業服務基金會"><img src="{{ asset('img/LOGO-02.jpg') }}" class='img-link' alt="另開新視窗，連結到台灣產業服務基金會"></a>
            {{-- <a href="https://www.moeasmea.gov.tw/masterpage-tw" target="_blank" title="另開新視窗，連結到經濟部中小企業處"><img src="{{ asset('img/logo5.png') }}" class='img-link' alt="另開新視窗，連結到經濟部中小企業處"></a> --}}
            <a href="https://www.ilosh.gov.tw/" target="_blank" title="另開新視窗，連結到勞動部勞動及職業安全衛生研究所"><img src="{{ asset('img/LOGO-03.jpg') }}" class='img-link' alt="另開新視窗，連結到勞動部勞動及職業安全衛生研究所"></a>
        </div>
        <div class='d-flex flex-wrap justify-content-around mx-md-5'>
            <a href="https://www.mol.gov.tw/" target="_blank" title="另開新視窗，連結到勞動部全球資訊網"><img src="{{ asset('img/LOGO-06.png') }}" class='img-link' alt="另開新視窗，連結到勞動部全球資訊網"></a>
            {{-- <a href="https://www.facebook.com/moeaidb" target="_blank" title="另開新視窗，連結到經濟部工業局臉書粉絲專頁"><img src="{{ asset('img/logo9.png') }}" class='img-link' alt="另開新視窗，連結到經濟部工業局臉書粉絲專頁"></a> --}}
            <a href="https://www.isha.org.tw/" target="_blank" title="另開新視窗，連結到中華民國工業安全衛生協會"><img src="{{ asset('img/LOGO-05.jpg') }}" class='img-link' alt="另開新視窗，連結到中華民國工業安全衛生協會"></a>
            <a href="https://www.idbevent.org.tw/" target="_blank" title="另開新視窗，連結到經濟部產業發展署，活動報報"><img src="{{ asset('img/LOGO-04.jpg') }}" class='img-link' alt="另開新視窗，連結到經濟部產業發展署，活動報報"></a>
            {{-- <a href="https://www.moeaidb.gov.tw/ctlr?PRO=idx2015" target="_blank" title="另開新視窗，連結到經濟部產業發展署"><img src="{{ asset('img/new_logo.jpg') }}" class='img-link' alt="另開新視窗，連結到經濟部產業發展署"></a> --}}
            <a href="https://www.ida.gov.tw/" target="_blank" title="另開新視窗，連結到經濟部產業發展署"><img src="{{ asset('img/new_logo.jpg') }}" class='img-link' alt="另開新視窗，連結到經濟部產業發展署"></a>
        </div>
    </div>
@endsection
@section('script')
<script>
    var select = document.getElementById("select");
    $(document).on("click", ".drop-list", function (){        
        
        test();

        // document.getElementById('select').click();
        // var len = sel.options.length;
        // console.log('test');
        // var event;
        // event = document.createEvent('MouseEvents');
        // event.initMouseEvent('mousedown', true, true, window);
        // element.dispatchEvent(event);
    });

    function test(){
        console.log('select click');
        $('#select').trigger('click');
    }
    
</script>
@endsection