@extends('layouts.work')

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

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

@section('content')
<div class='container-fluid'>
    <div class='row'>
        <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>
                <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
            </ol>
        </nav>
    </div>
    
    <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>

    <div class='row d-flex justify-content-center my-3'>
        <div class='col-10'>
            <div class='card main-card detail-card'>
                <div class='card-header text-center'><h3 class='font-weight-bold'>{{ $title }}</h3></div>
                <div class='card-body'>
                    <div class='table-container d-flex justify-content-center align-items-center'>
                        <table 
                                summary="此表格為講義下載的詳細內容表，第一直欄為發布日期，第二直欄為標題名稱，第三直欄為詳情資訊。" 
                                style="width: 100%"
                                class='detail-table'>
                            <caption class='sr-only'>產業發展署講義下載詳細內容</caption>
                            <thead class='text-center'>
                                <tr>
                                    <th scope="col">發布日期</th>
                                    <th scope="col" style="width: 55%">標題名稱</th>
                                    <th scope="col">詳情資訊</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($datas as $row)
                                <tr>
                                    <td class='text-center'>{{ $row->created_at ? explode(" ", $row->created_at)[0] : "" }}</td>
                                    <td>{{ $row->detail_title }}</td>
                                    <td class='text-center'>
                                        @if ($row->attach_type == 0)
                                            <a href="{{ $row->link }}" title="前往影片連結，{{ $row->linkname }}" class='btn btn-video'>觀看影片</a>
                                        @elseif ($row->attach_type == 1)
                                            <!-- <a href="/storage/{{ $row->filepath }}" title="打開附件，{{ $row->filerealname }}" class='btn btn-file'>瀏覽附件</a> -->
                                            <a href="javascript:void(0)" onclick="downloadfile( '{{ $row->filepath }}', '{{ $row->filerealname }}' )" title="下載附件，{{ $row->filerealname }}" class='btn btn-file'>下載附件</a>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class='row text-center mb-2'>
        <a class="dynamic-link" href="/coursedownloads" title="回上一頁"><img src="{{ asset('/img/活動招生/經濟部產業發展署元件_button_回上一頁.png') }}" class="btn-goback" alt="回上一頁"></a>
    </div>
    
    <noscript>
        <div class='text-center'>
            <p>此網頁需要支援 JavaScript 才能正確運行，請先至你的瀏覽器設定中開啟 JavaScript。</p>
        </div>
    </noscript>
</div>
@endsection
@section('script')
<script src="{{ asset('js/coursedl.js') }}"></script>
@endsection