@extends('layouts.app')
@push('styles')
<link href="{{ asset('css/license.css?t=20231228') }}" rel="stylesheet">
@endpush
@section('content')
<div class='w-100 bg-white'>
    <img src="{{ asset('img/license/Banner.svg') }}" class='w-100'>
</div>

<div class='container-fluid'>
    @include('user_manage_banner')

    <div class='row d-flex justify-content-center mt-4'>
        <ul class="nav" id="tabs">
            <li>
                <a class="nav-link active" id="license-tab" data-toggle="pill" href="#pills-license"><img src="{{ asset('/img/license/Button_cert_selected.svg') }}" width="350"></a>
            </li>
            <li>
                <a class="nav-link" id="training-tab" data-toggle="pill" href="#pills-training"><img src="{{ asset('/img/license/Button_train_unselected.svg') }}" width="350"></a>
            </li>
        </ul>
    </div>

    <hr>

    <!-- form -->
    <div class='row mt-4'>
        <div class='col-lg-12'>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="pills-license">
                    @foreach ($licenses as $rows)
                    <div class='card license_card my-5'>
                       <div class='row flex-wrap align-items-center mt-4'>
                            <div class='col-lg-2'>
                                <h2 class='mt-3 ml-5 text-white font-weight-bold'>{{ !$loop->index ? '人員證照' : '作業證照' }}</h2>
                            </div>
                            <div class='col-lg-6 d-flex'>
                                <div class='select flex-grow-1'>
                                    <input type="search" class="table-search" placeholder="請輸入搜尋內容">
                                    <i class="fa fa-search"></i>
                                </div>
                            </div>
                            <div class='col-lg-3 d-flex'>
                                <div class='select flex-grow-1'>
                                    <select class='col-select'>
                                        <option selected disabled>請選擇</option>
                                        <option value="0">編號</option>
                                        <option value="1">證照名稱</option>
                                        <option value="2">所需張數</option>
                                        <option value="3">持有張數</option>
                                    </select>
                                    <!--<i class="fa fa-caret-down"></i>-->
                                </div>
                            </div>
                        </div>
                        <div class='card-body'>
                            <div class='card inner-card mt-2'>
                                <div class='card-body'>
                                    <table class='lice-tbl w-100'>
                                        <thead>
                                        <tr class='sub-label text-white'>
                                            <th>編號</th>
                                            <th>證照名稱</th>
                                            <th>所需張數</th>
                                            <th>持有張數</th>
                                            <th>查看資訊</th>
                                        </tr>
                                        </thead>
                                        <tbody class='table-o'>
                                        @foreach ($rows as $r)
                                        <tr>
                                            <td>{{ str_pad($loop->index+1, 3, "0", STR_PAD_LEFT) }}</td>
                                            <td>{{ $r->name }}</td>
                                            <td>{{ $r->need_num }}</td>
                                            <td>{{ $r->num }}</td>
                                            <td>
                                                <a href="{{ url('/license-detail/'.$r->id) }}"><img src="{{ asset('img/health/Icon_view.svg') }}" width="50"></a>
                                            </td>
                                        </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="tab-pane fade" id="pills-training">
                    <div class='card license_card mb-3'>
                        <div class='row mt-4'>
                            <div class='col-lg-2'>
                                <h2 class='mt-3 ml-5 text-white font-weight-bold'>教育訓練</h2>
                            </div>
                            <div class='col-lg-6 d-flex'>
                                <div class='select flex-grow-1'>
                                    <input type="search" class="table-search" placeholder="請輸入搜尋內容">
                                    <i class="fa fa-search"></i>
                                </div>
                            </div>
                            <div class='col-lg-3 d-flex'>
                                <div class='select flex-grow-1'>
                                    <select class='col-select'>
                                        <option selected disabled>請選擇</option>
                                        <option value="0">編號</option>
                                        <option value="1">員工姓名</option>
                                        <!-- <option value="2">最近應回訓日期</option>
                                        <option value="3">教育訓練狀態</option> -->
                                    </select>
                                    <!--<i class="fa fa-caret-down"></i>-->
                                </div>
                            </div>
                        </div>
                        <div class='card-body'>
                            <div class='card inner-card mt-2'>
                                <div class='card-body'>
                                    <table class='lice-tbl w-100'>
                                        <thead>
                                        <tr class='sub-label text-white'>
                                            <th>編號</th>
                                            <th>員工姓名</th>
                                            <th>即將到期證照名稱</th>
                                            <th>有效日期</th>
                                            <th>累積時數</th>
                                            <th>查看詳情</th>
                                        </tr>
                                        </thead>
                                        <tbody class='table-o'>
                                        @foreach ($employees as $e)
                                        <tr>
                                            <td>{{ $e->memberid }}</td>
                                            <td>{{ $e->name_zh }}</td>
                                            <td>{{ $e->training->name ?? "尚未有資料請盡快補齊" }}</td>
                                            <td>{{ $e->training ? $e->training->t1 . " ~ " . $e->training->t2 : "--" }}</td>
                                            <td>{{ $e->training ? $e->training->sum : "--" }}</td>
                                            <td>
                                                <a href="{{ url('/training/'.$e->id) }}" class='expired__alerm__link'>
                                                    <img src="{{ asset('img/license/Icon_training.svg') }}" width="50">
                                                    @if ( $e->training && $e->training->num )
                                                        <span class='expired__alerm'>{{ $e->training->num }}</span>
                                                    @endif
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('instruct-modal')
    {{-- @foreach(File::glob(public_path('storage/instruct/license').'/*') as $path)
        <span data-src="{{ str_replace(public_path(), '', $path) }}"></span>
    @endforeach --}}
    @foreach(File::glob(public_path('storage/instruct/license').'/*') as $path)
        @php
            $relativePath = Str::after($path, public_path()) . "?" . date("YM"); 
        @endphp
        <span data-src="{{ asset($relativePath) }}"></span>
    @endforeach
@endsection

@section('scripts')
    <script src="{{ asset('js/license.js') }}" type="module"></script>
@endsection