@extends('layouts.app')
@push('styles')
<link href="{{ asset('css/license_training.css') }}" rel="stylesheet">
@endpush
@section('content')
<div id='loading-page' hidden></div>

<div class='container-fluid w-98-5'>
    <!-- turn back -->

    <div class='row mt-3'>
        <a href="{{ asset('/license-person') }}" class='btn-return text-decoration-none ml-3'>
            <i class="fa fa-reply"></i>
            返回
        </a>
    </div>

    <!-- form -->
    <div class='row'>
        <div class='col-lg-12'>
            <div class='card mb-3' id='license-card'>
                <div class="tab-content mb-3">

                    <div class='row mt-4'>
                        <div class='col-12'>
                            <h3>{{ $name }}</h3>
                            <div class='card-line'></div>
                        </div>
                    </div>

                    <div class='card-body'>
                        <div class='text-right'>
                            <span class='alerm-word text-danger'>請先點選【編輯】，以新增或修改人員證照資料</span>
                        </div>
                        <div class='text-right mb-4'>

                            <button class='btn btn__add__training'>
                                <i class="fa fa-plus" aria-hidden="true"></i>
                                新增欄位
                            </button>
                        </div>

                        <div class='cards-grid'>
                            @for ($i = 0; $i < $nums; $i++)
                                <div class='card inner-card mt-2'>

                                <div class='license-header d-flex align-items-center justify-content-center'>
                                    <span></span>
                                </div>

                                <div class='card-body'>
                                    <span id="period" hidden>{{ $period }}</span>

                                    <div id='licenses'>
                                        <li class='position-relative mb-5'>
                                            <div class='license'>
                                                <form>
                                                    <ul>
                                                        <li class='hidden'>
                                                            <input type="hidden" name="" value="" class='id'>
                                                            <input type="hidden" name="factory_id" value="{{ $fid }}">
                                                            <input type="hidden" name="certificate_id" value="{{ $typeid }}">
                                                        </li>
                                                        <li class="info-row">
                                                            <div class="info-title"> 證照持有人</div>
                                                            <div class='select employee info-content'>
                                                                <select name="employee_id" required>
                                                                    <option selected disabled>請選擇</option>
                                                                </select>
                                                                <!--<i class="fa fa-caret-down"></i>-->
                                                            </div>
                                                        </li>
                                                        <li class="info-row">

                                                            <div class="info-title"> 證照狀態</div>

                                                            <div class='select status'>
                                                                <select name="status" required>
                                                                    <option selected disabled>請選擇</option>
                                                                    <option value="1">持有</option>
                                                                    <option value="0">進修中</option>
                                                                </select>
                                                                <!--<i class="fa fa-caret-down"></i>-->
                                                            </div>

                                                        </li>
                                                        <li class="info-row">
                                                            <div class="info-title"> 證照取得日期</div>
                                                            <label>
                                                                <input type="date" name="get_dat">
                                                                <input type="hidden" name="expired_dat">
                                                            </label>
                                                        </li>
                                                        <li class="info-row">
                                                            <div class="info-title"> 證照有效日期</div>
                                                            <label>
                                                                <span class='expired_dat fake-input  ml-3'></span>
                                                            </label>
                                                        </li>
                                                        {{--
                                                        <li>
                                                            <label>證照回訓日期 <input type="date" name="return_dat"></label>
                                                            <label>預計回訓日期 <input type="date" name="planned_dat"></label>
                                                        </li>
                                                        --}}
                                                        <li class="info-row retrain-content">
                                                            <div class="info-title">檔案上傳</div>
                                                            <div class='input-field text-center'>
                                                                <label>
                                                                    <img width=60px src="{{ asset('img/Icon_upload.png') }}">
                                                                    <span class='upload-word'>請將檔案拖曳至此 或</span>
                                                                    <input type="file" class="input-files" name="file[]" accept=".pdf, image/*" multiple>
                                                                    <span class='btn btn-upload'>上傳</span>
                                                                </label>
                                                                <ol class='uploaded d-flex justify-content-around flex-wrap' data-delete=""></ol>
                                                                <ol class='files d-flex justify-content-around flex-wrap'></ol>
                                                            </div>
                                                        </li>
                                                    </ul>

                                                    <div class="edit-row d-flex justify-content-center">
                                                        <button type="button" class='btn btn-trash training-trash ' data-trash="">
                                                            <!-- <i class="fa fa-trash-o" title="刪除"></i> -->
                                                            <span class='edit-text'>刪除</span>
                                                        </button>
                                                        <button type="button" class='btn btn-cogs training-edit'>
                                                            <!-- <i class="fa fa-cogs" title="編輯"></i> -->
                                                            <span class='edit-text'>編輯</span>
                                                        </button>
                                                    </div>

                                                    <div class='btns-row d-flex justify-content-center'>
                                                        <button type="button" class='btn btn-cancel'>取消</button>
                                                        <button type="button" class='btn btn-save'>儲存</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </li>

                                    </div>
                                </div>
                        </div>
                        @endfor
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

<!-- modal -->
<div class="modal fade" id="modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class='modal-header d-flex justify-content-center'>
                <h5>
                    <span class='idx'></span> /
                    <span class='max'></span>
                </h5>
            </div>
            <div class="modal-body">
                <img src="">

                <button data-src="">
                    <i class="fa fa-caret-left prev"></i>
                </button>
                <button data-src="">
                    <i class="fa fa-caret-right next"></i>
                </button>
            </div>
            <div class="modal-footer d-block text-center">
                <div class='filename'></div>
                <div class='dl'>
                    <button type="button" class='btn btn-dl js-license-download'>
                        下載
                    </button>
                </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?d=20260615') }}" type="module"></script>
<script src="{{ asset('js/license_modal.js') }}"></script>
<script src="{{ asset('js/license_read.js') }}" type="module"></script>
<script src="{{ asset('js/license_submit.js?d=20260625') }}" type="module"></script>
<script src="{{ asset('js/license_delete.js') }}" type="module"></script>
@endsection