@extends('layouts.work')

@section('title', '輔導案例 - 經濟部產業發展署工業安全網站')

@section('styles')
    <link href="{{ asset('css/counseling.css') }}?d=20250402" 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="link-event">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mt-2">
                <li class="breadcrumb-item"><a class="dynamic-link" href="/" title="首頁">首頁</a></li>
                <li class="breadcrumb-item active" aria-current="page">輔導案例</li>
            </ol>
        </nav>
    </div>

    <div class='row'>
        <h2>
            <picture>
                <source srcset="{{ asset('img/course/手機版banner_輔導案例點鎮化.svg') }}" media="(max-width: 992px)">
                <img src="{{ asset('img/course/counseling_banner.jpg') }}" alt="輔導案例" title="輔導案例" style="width:100%;">
            </picture>
        </h2>
    </div>

    <div class="titlelink">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb m-0">
                <li class="breadcrumb-item"><a class="dynamic-link" href="/">首頁</a></li>
                <li class="breadcrumb-item active" aria-current="page">輔導案例</li>
            </ol>
        </nav>
    </div>

    {{-- 網頁版連結 --}}
    <div class='row d-flex justify-content-around'>
        <div class='col-lg-3'>
            <a href="#L" accesskey="L" name="L" title="側邊區塊" id="L">:::</a>

            <div class="card my-2 left-slide">
                <ul class="list-group">
                    <li class="list-group-item text-center font-weight-bold">
                        講義下載
                    </li>
                    <li class="list-group-item">
                        <a data-toggle="tab" href="#link1" title="輔導案例"><img src="{{ asset('img/經濟部產業發展署元件_相關資源_Icon_箭頭.svg') }}" style="width:50px;" class='mr-2' aria-hidden="true" alt="">輔導案例</a>
                    </li>
                    {{-- <li class="list-group-item">
                        <a data-toggle="tab" href="#link2"><img src="{{ asset('img/經濟部工業局元件_相關資源_Icon_箭頭.svg') }}" style="width:50px;" class='mr-2' aria-hidden="true" alt="">成果發表</a>
                    </li> --}}
                </ul>
            </div>
        </div>

        <div class='col-lg-8'>
            <a href="#C" class='sr-only-main' accesskey="C" name="C" title="主要內容區塊">:::</a>
            <div class="mobile-mode">
                <span id="yearHint1">選擇年度或輸入關鍵字後，下方資料會自動更新</span>
                <div class='row d-flex justify-content-around align-items-center font-weight-bold course-row'>
                    <div class='my-2 d-flex flex-grow-1 align-items-center'>
                        <label for="select_1">年度</label><select class='flex-grow-1 ml-2' id="select_1" aria-label="選擇年度" aria-describedby="yearHint1">
                                <option value="all">全年度</option>
                                @foreach ($filteredYears[2] ?? [] 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_1">關鍵字</label>
                        <input type="search" class='flex-grow-1 ml-2' id="search_1" aria-label="輸入關鍵字後，下方資料會自動更新" placeholder="輸入關鍵字後，下方資料會自動更新" aria-describedby="yearHint1">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            
            <div class='tab-content mb-4'>
                <div class="tab-pane card show active my-2 main-card" id="link1">
                    <div class='card-header'><h3 class='text-center font-weight-bold m-0'>輔導案例</h3></div>
                    <div class='card-body'>
                        <div class="web-mode">
                            <span id="yearHint2">選擇年度或輸入關鍵字後，下方資料會自動更新</span>
                            <div class='row d-flex justify-content-around align-items-center font-weight-bold course-row'>
                                <div class='my-2 d-flex flex-grow-1 align-items-center'>
                                    <label for="select_0">年度</label><select class='flex-grow-1 ml-2' id="select_0" aria-label="選擇年度" aria-describedby="yearHint2">
                                            <option value="all">全年度</option>
                                            @foreach ($filteredYears[2] ?? [] 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_0">關鍵字</label>
                                    <input type="search" class='flex-grow-1 ml-2' id="search_0"  aria-label="輸入關鍵字後，下方資料會自動更新" placeholder="輸入關鍵字後，下方資料會自動更新" aria-describedby="yearHint2">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                        <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_0">
                                @foreach($main as $row)
                                    @if ($row->type_id == 2)
                                    <tr>
                                        <td class='text-center'>{{ $row->year }}</td>
                                        <td>{{ $row->title }}</td>
                                        <td class='text-center'>
                                            <a class="dynamic-link" href="/counseling-detail/{{ $row->id }}" title="前往詳細頁：{{ $row->title }}">
                                                <img src="{{ asset('/img/活動招生/經濟部產業發展署元件_Icon_活動招生網頁連結.svg') }}" alt="前往詳細頁：{{ $row->title }}" 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