@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-education') }}" 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>{{ $member->name_zh }}</h3>
                            <div class='card-line'></div>
                        </div>
                    </div>

                    <div class='card-body'>
                        {{-- 改為 grid 容器，寬版雙欄、窄版單欄 --}}
                        <div class='cards-grid'>
                            @foreach ($datas as $data)
                            <div class='card inner-card mt-2'>

                                <div class='license-header d-flex align-items-center justify-content-center'>
                                    <span>{{ $data->name }}</span>
                                </div>

                                <div class='card-body'>
                                    <div id='licenses'>
                                        <li class='position-relative mb-5'>
                                            <div class='license'>
                                                <form>
                                                    <ul>
                                                        <!-- <div class='license-header d-flex align-items-center justify-content-center'>
                                                            <span>{{ $data->name }}</span>
                                                        </div> -->
                                                        <li class='hidden'>
                                                            <input type="hidden" name="" value="" class='id'>
                                                            <input type="hidden" name="employee_id" value="{{ $member->id }}">
                                                            <input type="hidden" name="certificate_id" value="{{ $data->certificate_id }}">
                                                            <input type="hidden" name="timeperiod1" value="{{ $data->get_dat }}">
                                                            <input type="hidden" name="timeperiod2" value="{{ $data->expired_dat }}">
                                                        </li>
                                                        <li class="info-row">
                                                            <div class="info-title">教育訓練需求時數</div>
                                                            <div class="info-content">
                                                                <span class="fake-input">{{ $data->hour }}</span> 小時
                                                            </div>
                                                        </li>
                                                        <li class="info-row">
                                                            <div class="info-title">教育訓練狀態</div>
                                                            <div class="info-content">
                                                                <span class="select">
                                                                    <select name="status_id">
                                                                        <option selected disabled>請選擇</option>
                                                                        <option value="0">已完成</option>
                                                                        <option value="1">進修中</option>
                                                                        <option value="2">待進行</option>
                                                                    </select>
                                                                </span>
                                                            </div>
                                                        </li>
                                                        <li class="info-row">
                                                            <div class="info-title">教育訓練時間範圍</div>
                                                            <div class="info-content">
                                                                <span class="timeperiod1">{{ $data->get_dat }}</span>
                                                                <span>至</span>
                                                                <span class="timeperiod2">{{ $data->expired_dat }}</span>
                                                            </div>
                                                        </li>
                                                        <li class='info-row align-items-start'>
                                                            <div class="info-title ">教育訓練回訓日期</div>
                                                            <div>
                                                                <button type="button" class="btn btn-remind"
                                                                    data-toggle="tooltip" data-placement="top"
                                                                    title="{{ $data->name }}，需於 {{ $data->period }} 年內回訓 {{ $data->hour }} 小時。">
                                                                    <img src="{{ asset('img/license/Icon_bell.svg') }}"> 小提醒
                                                                </button>
                                                                <ol class='list-unstyled mx-0 px-0'>
                                                                    <li class='hd-li mb-3'>
                                                                        <input type="date" name="retrain_date[]" max="{{ $data->expired_dat }}" class='mr-3'> 時數
                                                                        <input type="number" name="hour[]" oninput="this.value" min="0" step="0.5"> 小時
                                                                    </li>
                                                                    <li class='insert'>
                                                                        <button type="button" class='btn btn-add'>
                                                                            <img width=30px src="{{ asset('img/license/plus-square-regular.svg') }}">
                                                                        </button>
                                                                    </li>

                                                                </ol>
                                                            </div>

                                                        </li>
                                                        <li class="info-row retrain-content">
                                                            <div class="info-title">檔案上傳</div>
                                                            <div class='input-field text-left '>
                                                                <!-- <div class='text mb-4'>點擊上傳圖片或將檔案拖拉至方框內即可上傳。檔案建議大小: 5MB 內 <br> 圖片不得超過 1000 * 1000px，可上傳圖檔、pdf、doc 格式</div> -->
                                                                <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>
                                                                    <!-- <img src="{{ asset('img/health/Button_uploads.svg') }}" height="80"> -->
                                                                </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-cogs training-edit">
                                                            <span class="edit-text">編輯</span>
                                                        </button>
                                                    </div>

                                                    <div class="btns-row d-flex justify-content-center">
                                                        <button type="button" class="btn btn-cancel">
                                                            <span>取消</span>
                                                        </button>
                                                        <button type="submit" class="btn btn-save btn-submit">
                                                            <span>儲存</span>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </li>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        {{-- /cards-grid --}}
                    </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)
@php
$relativePath = Str::after($path, public_path()) . "?" . date("YM");
@endphp
<span data-src="{{ asset($relativePath) }}"></span>
@endforeach
@endsection

@section('scripts')
<script src="{{ asset('js/training.js?date=20260413') }}" type="module"></script>
<script src="{{ asset('js/license.js?d=20260615') }}" type="module"></script>
<script src="{{ asset('js/license_modal.js') }}"></script>
<script src="{{ asset('js/training_submit.js?d=20260625') }}" type="module"></script>
<script src="{{ asset('js/training_read.js') }}" type="module"></script>
@endsection