@extends('layouts.main')

@section('pageTitle', '無柵欄模式設定')

@section('content')
{{-- 使用 CSS Component 載入樣式 --}}
<x-css-asset src="css/jquery.fancybox.min.css" />
<style>
    .form-check{display:inline;margin: 0 10px 0 0;}
    .enable{margin-right: 10px;}
</style>

<div class="col-12 col-sm-12">
    <div class="card card-primary card-outline card-outline-tabs">
        <div class="card-header p-0 border-bottom-0">
        @inject('thidLevel','App\Presenters\ThirdLevelPresenter')
        {!! $thidLevel->createThirdLevel($globalVariable['pathMain'], $globalVariable['pathSub'], 'unfencedSetting.index') !!}
        </div>
        <div class="card-body">
            <div class="tab-content" id="thirdLevel-tabContent">
                <div class="tab-pane fade show active" role="tabpanel">
                    <!-- 系統設定表單 -->
                    <form action="{{ route('unfencedSetting.update') }}" method="post" class="needs-validation" novalidate>
                        @csrf
                        @method('PUT')
                        <div class="col">
                            <div class="form-group">
                                <label for="unfenced_enable">是否啟用無柵欄模式：</label>
                                @foreach(config('webCommonData.enableDropdown') as $value => $name)
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="unfenced_enable" value="{{ $value }}" id="unfenced_enable_{{ $value }}" @if($value == old('unfenced_enable', $data['unfenced_enable'])) checked @endif>
                                        <label class="form-check-label" for="unfenced_enable_{{ $value }}">{{ $name }}</label>
                                    </div>
                                @endforeach
                                @error('unfenced_enable')
                                    <span id="unfenced_enable-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="unfenced_allowed_order_continue_hours">無柵欄模式接續訂單期限：</label>
                                <input name="unfenced_allowed_order_continue_hours"
                                       class="mx-1 col-2 form-control d-inline-block"
                                       id="unfenced_allowed_order_continue_hours"
                                       value="{{ old('unfenced_allowed_order_continue_hours', $data['unfenced_allowed_order_continue_hours']) }}"
                                       type="number" required>
                                <b>小時</b>
                                <span class="mx-1">※ 填 0 代表不接續訂單</span>
                                <div class="invalid-feedback">請輸入有效的小時數 (0-8760)</div>
                                @error('unfenced_allowed_order_continue_hours')
                                    <span class="validateError d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="unfenced_entry_decision">無柵欄模式進場判斷時間：</label>
                                <input name="unfenced_entry_decision"
                                       class="mx-1 col-2 form-control d-inline-block"
                                       id="unfenced_entry_decision"
                                       value="{{ old('unfenced_entry_decision', $data['unfenced_entry_decision']) }}"
                                       type="number" required>
                                <b>分</b>
                                <span class="mx-1">※ 高位攝影機適用</span>
                                <div class="invalid-feedback">請輸入有效的分鐘數</div>
                                @error('unfenced_entry_decision')
                                    <span class="validateError d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="unfenced_exit_decision">無柵欄模式出場判斷時間：</label>
                                <input name="unfenced_exit_decision"
                                       class="mx-1 col-2 form-control d-inline-block"
                                       id="unfenced_exit_decision"
                                       value="{{ old('unfenced_exit_decision', $data['unfenced_exit_decision']) }}"
                                       type="number" required>
                                <b>分</b>
                                <span class="mx-1">※ 高位攝影機適用</span>
                                <div class="invalid-feedback">請輸入有效的分鐘數</div>
                                @error('unfenced_exit_decision')
                                    <span class="validateError d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        @can('unfencedSetting.update')
                        <button type="submit" class="btn btn-info">修改</button>
                        @endcan
                    </form>
                    <hr>
                    <!-- 攝影機列表 -->
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body table-responsive p-3">
                                <table id="datatableList" class="table table-bordered table-striped table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        @if(auth()->user()->can('unfencedCamera.destroyBatch'))
                                            <th class="unsortable"><input type="checkbox" id="checkAll"></th>
                                        @endif
                                        <th class="unsortable">攝影機IP</th>
                                        <th class="unsortable">攝影機編號</th>
                                        <th class="unsortable">車格狀態</th>
                                        <th class="unsortable">攝影機類型</th>
                                        @if(auth()->user()->can('unfencedCamera.screenshot'))
                                            <th class="unsortable">擷取畫面</th>
                                        @endif
                                        @if(auth()->user()->can('unfencedCamera.edit'))
                                            <th class="unsortable">修改</th>
                                        @endif
                                        @if(auth()->user()->can('unfencedCamera.destroy'))
                                            <th class="unsortable">刪除</th>
                                        @endif
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    @can('unfencedCamera.store')
                        <button type="button" class="btn btn-danger" id="createCameraBtn">新增攝影機</button>
                    @endcan
                    @can('unfencedCamera.destroyBatch')
                        <span class="btn btn-danger" id="unfencedCameraDestroyBatch">批次刪除</span>
                    @endcan
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新增攝影機 Modal -->
<div class="modal fade" id="storeCameraModal" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新增攝影機</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="needs-validation" novalidate>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="address">攝影機IP:</label>
                        <input type="text" class="form-control w-auto" id="address" required
                               pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}(:[0-9]{1,5})?$">
                        <div class="invalid-feedback">請輸入有效的IP位址（可選端口）</div>
                    </div>
                    <div class="form-group">
                        <label for="number">攝影機編號:</label>
                        <input type="number" class="form-control w-auto" id="number" required min="1" max="65536">
                        <div class="invalid-feedback">請輸入有效的攝影機編號 (1-65536)</div>
                    </div>
                    <div class="form-group">
                        <label for="mode">攝影機模式</label>
                        <select class="form-control w-auto" name="mode" id="mode" required>
                            @foreach($cameraModeDropdown as $value => $title)
                                <option value="{{ $value }}">{{ $title }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">請選擇攝影機模式</div>
                    </div>
                    <div class="form-group">
                        <label for="screenshot">擷取畫面網址:</label>
                        <input type="url" class="form-control w-75" id="screenshot">
                        <div class="invalid-feedback">請輸入有效的網址</div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button id="storeCameraBtn" type="button" class="btn btn-primary">新增</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 修改攝影機 Modal -->
<div class="modal fade" id="editCameraModal" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改攝影機</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="needs-validation" novalidate>
                <div class="modal-body">
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label for="edit-address">攝影機IP:</label>
                        <input type="text" class="form-control w-auto" id="edit-address" required
                               pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}(:[0-9]{1,5})?$" data-original="">
                        <div class="invalid-feedback">請輸入有效的IP位址（可選端口）</div>
                    </div>
                    <div class="form-group">
                        <label for="edit-number">攝影機編號:</label>
                        <input type="number" class="form-control w-auto" id="edit-number" required
                               min="1" max="65536" data-original="">
                        <div class="invalid-feedback">請輸入有效的攝影機編號 (1-65536)</div>
                    </div>
                    <div class="form-group">
                        <label for="edit-mode">攝影機模式</label>
                        <select class="form-control w-auto" name="mode" id="edit-mode">
                            @foreach($cameraModeDropdown as $value => $title)
                                <option value="{{ $value }}">{{ $title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-screenshot">擷取畫面網址:</label>
                        <input type="url" class="form-control w-75" id="edit-screenshot" data-original="">
                        <div class="invalid-feedback">請輸入有效的網址</div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button id="updateCameraBtn" type="button" class="btn btn-primary">儲存</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
@include('include.fancybox')

{{-- 1. 先設置 FETCH_PACK 全域變數 --}}
<script type="module">
    import FETCH_PACK from "{{ asset('js/fetch.js') }}";
    window.FETCH_PACK = FETCH_PACK;
</script>

{{-- 2. 載入其他依賴庫 --}}
<x-js-asset src="js/validation-utils.js" />
<x-js-asset src="js/web/unfenced-setting-manager.js" />

{{-- 3. 初始化應用程式 --}}
<script>
    $(document).ready(function () {
        // 在初始化時傳入配置
        const appConfig = {
            routes: {
                datatableList: @json(route('unfencedCamera.datatableList')),
                store: @json(route('unfencedCamera.store')),
                update: @json(route('unfencedCamera.update', ':id')),
                destroy: @json(route('unfencedCamera.destroy', ':id')),
                destroyBatch: @json(route('unfencedCamera.destroyBatch')),
                downloadScreenshot: @json(route('unfencedCamera.downloadScreenshot', ':cameraID'))
            },
            permissions: {
                canDestroyBatch: @json(auth()->user()->can('unfencedCamera.destroyBatch')),
                canScreenshot: @json(auth()->user()->can('unfencedCamera.screenshot')),
                canEdit: @json(auth()->user()->can('unfencedCamera.edit')),
                canDestroy: @json(auth()->user()->can('unfencedCamera.destroy'))
            },
            csrf_token: @json(csrf_token()),
            validationRules: {
                systemSettings: {
                    'unfenced_allowed_order_continue_hours': [
                        'required',
                        { type: 'number', min: 0, max: 8760, integer: true }
                    ],
                    'unfenced_entry_decision': [
                        'required',
                        { type: 'number', min: 1, integer: true }
                    ],
                    'unfenced_exit_decision': [
                        'required',
                        { type: 'number', min: 1, integer: true }
                    ]
                },
                camera: {
                    'address': ['required', 'ipPort'],
                    'number': ['required', { type: 'number', min: 1, max: 65536, integer: true }],
                    'mode': ['required'],
                    'screenshot': [{ type: 'url' }]  // 選填
                }
            }
        };

        // 初始化頁面管理器，直接傳入配置
        new UnfencedSettingManager(appConfig);
    });
</script>
@endsection