@extends('layouts.work')

@section('title', '講義下載 - 經濟部產業發展署工業安全網站')

@section('styles')
    <link href="{{ asset('css/coursedls.css') }}" rel="stylesheet">
@endsection

@php
    $filteredYears = [];

    foreach ($main as $row) {
        if (!array_key_exists($row->type_id, $filteredYears)) {
            $filteredYears[$row->type_id] = [];
        }

        if (!in_array($row->year, $filteredYears[$row->type_id])) {
            $filteredYears[$row->type_id][] = $row->year;
        }
    }
@endphp

@section('content')
<div class='container-fluid'>

    <div class='row'>
        <h2>
            <picture>
                <source srcset="{{ asset('img/course/course_banner_sm.jpg') }}" media="(max-width: 992px)">
                <img src="{{ asset('img/course/course_banner.jpg') }}" alt="講義下載" title="講義下載" style="width:100%;">
            </picture>
        </h2>
    </div>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a class="dynamic-link" href="/" title="首頁">首頁</a></li>
            <li class="breadcrumb-item"><a class="dynamic-link" href="/coursedownloads" title="講義下載">講義下載</a></li>
            @if($eid == 1)
            <li class="breadcrumb-item active" aria-current="page">研討會</li>
            @elseif($eid == 2)
            <li class="breadcrumb-item active" aria-current="page">成果發表</li>
            @endif
            
        </ol>
    </nav>
  
    <div class='row d-flex justify-content-around'>
        <div class='col-lg-7 px-3'>
            <div class='tab-content mb-4'>
                @if ($eid == 1)
                    <div class='row d-flex justify-content-around align-items-center font-weight-bold course-row flex-nowrap'>
                        
                        <span id="yearHint">選擇年度或輸入關鍵字後，下方資料會自動更新</span>
                        <div class='my-2 d-flex flex-grow-1 align-items-center'>
                            <label for="select_2">年度</label>
                            <select class='flex-grow-1 ml-2' id="select_2" aria-label="選擇年度" aria-describedby="yearHint">
                                    <option value="all">全年度</option>
                                    @foreach ($filteredYears[0] ?? [] as $year)
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    @endforeach
                                    <!-- @foreach ($main as $row)
                                        @if ($row->type_id == 0)
                                            <option value="{{ $row->year }}">{{ $row->year }}</option> 
                                        @endif
                                    @endforeach -->
                                </select>
                        </div>
                        <div class='my-2 d-flex flex-grow-1 align-items-center input-div'>
                            <label for="search_2">關鍵字</label>
                            <input type="search" class='flex-grow-1 ml-2' id="search_2" aria-label="輸入關鍵字後，下方資料會自動更新" placeholder="輸入關鍵字後，下方資料會自動更新" aria-describedby="yearHint">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div class="tab-pane card show active my-2 main-card" id="link1">
                        <div class='card-header'>
                            
                            <a class="dynamic-link" href="/coursedownloads" title="返回" aria-label="返回"><svg xmlns="https://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16" title="返回前頁" alt="返回前頁">
                                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
                                </svg>
                            </a>
                            <h3 class='text-center font-weight-bold m-0'>研討會</h3>
                        </div>
                        <div class='card-body'>
                            <table class='main-table'
                                style="width: 100%;"
                                summary="此表格為講義下載——研討會一覽表，第一直欄為年度，第二直欄為標題名稱，第三直欄為查看詳情。">
                                <caption class='sr-only'>產業發展署講義下載——研討會一覽表</caption>
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 10%;">年度</th>
                                        <th scope="col" style="width: 70%;">標題名稱</th>
                                        <th scope="col" style="width: 20%;">查看詳情</th>
                                    </tr>
                                </thead>
                                <tbody id='tbody_2'>
                                    @foreach($main as $row)
                                        @if ($row->type_id == 0)
                                        <tr>
                                            <td class='text-center'>{{ $row->year }}</td>
                                            <td>{{ $row->title }}</td>
                                            <td class='text-center'>
                                                <a class="dynamic-link" href="/coursedl-detail_p/{{$eid}}/{{ $row->id }}" title="前往詳細頁：{{ $row->title }}">
                                                    <img src="{{ asset('/img/活動招生/經濟部產業發展署元件_Icon_活動招生網頁連結.svg') }}" alt="前往詳細頁：{{ $row->title }}" title="前往詳細頁">
                                                </a>
                                            </td>
                                        </tr>
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @elseif ($eid == 2)
                    <div class='row justify-content-around align-items-center font-weight-bold course-row'>
                        
                        <span id="yearHint2">選擇年度或輸入關鍵字後，下方資料會自動更新</span>
                        <div class='my-2 d-flex flex-grow-1 align-items-center'>
                            <label for="search_2">年度</label>
                            <select class='flex-grow-1 ml-2' id="select_2" aria-label="選擇年度" aria-describedby="yearHint2">
                                    <option value="all">全年度</option>
                                    @foreach ($filteredYears[1] ?? [] as $year)
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    @endforeach
                                </select>
                        </div>
                        <div class='my-2 d-flex flex-grow-1 align-items-center input-div'>
                            <label for="search_2">關鍵字</label>
                            <input type="search" class='flex-grow-1 ml-2' id="search_2" aria-label="輸入關鍵字後，下方資料會自動更新" placeholder="輸入關鍵字後，下方資料會自動更新" aria-describedby="yearHint2">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div class="tab-pane card show active my-2 main-card">
                        <div class='card-header'>
                            <a class="dynamic-link" href="/coursedownloads" title="返回" aria-label="返回"><svg xmlns="https://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16" title="返回前頁" alt="返回前頁">
                                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
                                </svg>
                            </a>
                            <h3 class='text-center font-weight-bold m-0'>成果發表</h3>
                        </div>
                        <div class='card-body'>
                            
                            <table class='main-table'
                                style="width: 100%;"
                                summary="此表格為講義下載——研討會一覽表，第一直欄為年度，第二直欄為標題名稱，第三直欄為查看詳情。">
                                <caption class='sr-only'>產業發展署講義下載——成果發表一覽表</caption>
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 10%;">年度</th>
                                        <th scope="col" style="width: 70%;">標題名稱</th>
                                        <th scope="col" style="width: 20%;">查看詳情</th>
                                    </tr>
                                </thead>
                                <tbody id='tbody_2'>
                                    @foreach($main as $row)
                                        @if ($row->type_id == 1)
                                        <tr>
                                            <td class='text-center'>{{ $row->year }}</td>
                                            <td>{{ $row->title }}</td>
                                            <td class='text-center'>
                                                <a class="dynamic-link" href="/coursedl-detail_p/{{$eid}}/{{ $row->id }}" title="前往詳細頁：{{ $row->title }}">
                                                    <img src="{{ asset('/img/活動招生/經濟部產業發展署元件_Icon_活動招生網頁連結.svg') }}" alt="前往詳細頁：{{ $row->title }}" title="前往詳細頁">
                                                </a>
                                            </td>
                                        </tr>
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
                    {{-- <div class="tab-pane card fade my-2 main-card" id="link2">
                        <div class='card-header text-center'><h3 class='text-center font-weight-bold'>成果發表</h3></div>
                        <div class='card-body'>
                            <div class='row d-flex flex-wrap justify-content-around align-items-center font-weight-bold course-row'>
                                <div class='my-2 d-flex flex-grow-1'>
                                    <span>年度</span>
                                    <select class='flex-grow-1 mx-2 select_1'>
                                        <option value="all">全年度</option>
                                        @foreach ($filteredYears[1] ?? [] as $year)
                                            <option value="{{ $year }}">{{ $year }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class='my-2 d-flex flex-grow-1 align-items-center input-div'>
                                    <span>關鍵字</span>
                                    <input type="search" class='flex-grow-1 ml-2 search_1'>
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                </div>
                            </div>
                            <table  summary="此表格為講義下載——成果發表會一覽表，第一直欄為年度，第二直欄為標題名稱，第三直欄為查看詳情。" 
                                    style="width: 100%;"
                                    class='main-table'>
                                <caption class='sr-only'>產業發展署講義下載——成果發表會一覽表</caption>
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 10%;">年度</th>
                                        <th scope="col" style="width: 70%;">標題名稱</th>
                                        <th scope="col" style="width: 20%;">查看詳情</th>
                                    </tr>
                                </thead>
                                <tbody class="tbody_1">
                                    @foreach($main as $row)
                                        @if ($row->type_id == 1)
                                        <tr>
                                            <td class='text-center'>{{ $row->year }}</td>
                                            <td>{{ $row->title }}</td>
                                            <td class='text-center'>
                                                <a href="/coursedl-detail/{{ $row->id }}">
                                                    <img width="60px" height="50px" src="/img/活動招生/經濟部產業發展署元件_Icon_活動招生網頁連結.svg" alt="前往詳細頁：{{ $row->title }}" title="前往詳細頁：{{ $row->title }}">
                                                </a>
                                            </td>
                                        </tr>
                                        @endif
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div> --}}
            </div>
        </div>
    </div>
    
    <noscript>
        <div class='text-center'>
            <p>此網頁需要支援 JavaScript 才能正確運行，請先至你的瀏覽器設定中開啟 JavaScript。</p>
        </div>
    </noscript>
</div>
@endsection
@section('script')
<script src="{{ asset('js/coursedl.js') }}"></script>
@endsection