@extends('layouts.app')
@push('styles')
<link href="{{ asset('css/banner.css') }}" rel="stylesheet">
<link href="{{ asset('css/license_new.css?t=20231228') }}" rel="stylesheet">
@endpush
@section('content')

<div class='row d-flex justify-content-center'>
    <div class='w-97 banner-content'>
        <video autoplay muted loop playsinline class='video-banner'>
            <source src="{{ asset('img/license/人員證照與教育訓練_小.mp4') }}" type=" video/mp4">
            您的瀏覽器不支援 HTML5 影片。
        </video>
        <div class="banner-text">
            <span class="line"></span>
            人員證照與教育訓練-人員證照
        </div>
    </div>
</div>

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


    <div>

        <div class="tab-content white-bg mb-3">
            <div class='row d-flex justify-content-center pt-3'>
                <ul class="nav" id="tabs">
                    <li>
                        <a class="nav-link active" id="license-tab" data-toggle="pill" href="#pills-license">人員證照</a>
                    </li>
                    <li>
                        <a class="nav-link" id="training-tab" data-toggle="pill" href="#pills-training">作業證照</a>
                    </li>
                </ul>
            </div>
            {{-- 人員證照 --}}
            <div class="tab-pane fade show active" id="pills-license">
                <div class='card license_card my-5 js-paginated-list' data-global-search>
                    <div class='mt-3 align-items-center table-header'>
                        <!-- <span class='font-weight-bold'>篩選條件</span> -->
                        <div class='select w-25'>
                            <input type="search" class="table-search" placeholder="">
                            <i class="fa fa-search"></i>
                        </div>

                        <div class="table-pagination">
                            <button type="button" class="page-btn page-prev" aria-label="上一頁">
                                <i class="fa fa-chevron-left"></i>
                            </button>

                            <input type="text" class="page-state" value="1 / 1" readonly aria-label="目前頁數">

                            <button type="button" class="page-btn page-next" aria-label="下一頁">
                                <i class="fa fa-chevron-right"></i>
                            </button>
                        </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 class="text-center">編號</th>
                                            <th class="text-left pl-2">證照名稱</th>
                                            <th class="text-center">所需張數</th>
                                            <th class="text-center">持有張數</th>
                                            <th class="text-center">查看資訊</th>
                                        </tr>
                                    </thead>
                                    <tbody class='table-o'>
                                        @foreach ($personLicenses as $r)
                                        <tr>
                                            <td class="text-center">{{ str_pad($loop->iteration, 3, "0", STR_PAD_LEFT) }}</td>
                                            <td class="text-left pl-2">{{ $r->name }}</td>
                                            <td class="text-center">{{ $r->need_num }}</td>
                                            <td class="text-center">{{ $r->num }}</td>
                                            <td class="text-center">
                                                <a href="{{ url('/license-detail/'.$r->id) }}">
                                                    <img src="{{ asset('img/license/Icon_training.svg') }}" class="icon-training">
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 作業證照 --}}
            <div class="tab-pane fade" id="pills-training">
                <div class='card license_card my-5 js-paginated-list' data-global-search>
                    <div class='mt-3 align-items-center table-header'>
                        <!-- <span class='font-weight-bold'>篩選條件</span> -->
                        <div class='select w-25'>
                            <input type="search" class="table-search" placeholder="">
                            <i class="fa fa-search"></i>
                        </div>

                        <div class="table-pagination">
                            <button type="button" class="page-btn page-prev" aria-label="上一頁">
                                <i class="fa fa-chevron-left"></i>
                            </button>

                            <input type="text" class="page-state" value="1 / 1" readonly aria-label="目前頁數">

                            <button type="button" class="page-btn page-next" aria-label="下一頁">
                                <i class="fa fa-chevron-right"></i>
                            </button>
                        </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 class="text-center">編號</th>
                                            <th class="text-left pl-2">證照名稱</th>
                                            <th class="text-center">所需張數</th>
                                            <th class="text-center">持有張數</th>
                                            <th class="text-center">查看資訊</th>
                                        </tr>
                                    </thead>
                                    <tbody class='table-o'>
                                        @foreach ($jobLicenses as $r)
                                        <tr>
                                            <td class="text-center">{{ str_pad($loop->iteration, 3, "0", STR_PAD_LEFT) }}</td>
                                            <td class="text-left pl-2">{{ $r->name }}</td>
                                            <td class="text-center">{{ $r->need_num }}</td>
                                            <td class="text-center">{{ $r->num }}</td>
                                            <td class="text-center">
                                                <a href="{{ url('/license-detail/'.$r->id) }}">
                                                    <img src="{{ asset('img/license/Icon_training.svg') }}" class="icon-training">
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </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
        $filename = basename($path);
        $url = asset('storage/instruct/license/' . $filename) . '?d=' . date('Ym');
    @endphp

    <span data-src="{{ $url }}"></span>
@endforeach
@endsection

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