@extends('layouts.main')

@section('pageTitle', '字幕機文字設定')

@section('content')
    <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('thirdLevel', 'App\Presenters\ThirdLevelPresenter')
                {!! $thirdLevel->createThirdLevel($globalVariable['pathMain'], $globalVariable['pathSub'], 'ledMessageSetting.index') !!}
            </div>
            <div class="card-body">
                <form action="{{ route('ledMessageSetting.update', $peripheral->id) }}" method="post">
                    @csrf
                    @method('PUT')
                    <div class="col-sm-6">
                        <h4 class="font-weight-bold mb-0">自定義文字設定</h4>
                        <hr class="mt-1 mb-2">
                        <div class="my-1 text-danger normalColor">
                            ※ 僅可輸入字數 20 個字內及全形標點符號 ("，" 或 "。" 或 "！")，不填為預設。
                        </div>
                        <div class="my-1 text-danger fullColor hide">
                            - 文案內容：字數 1~20 個字，全形標點符號，不填為預設 (符號限定 "，" 或 "。" 或 "！")<br>
                            - 換行規範 (不可自定義)：4 個字內 (單行靠左，字體大小 16)，5~8 個字 (兩行靠左，字體大小 16)，8 個字以上 (單行跑馬燈，字體大小 24)<br>
                            - 亮度中等 (75%) 或最亮 (100%)
                        </div>
                        <div class="form-group">
                            <label for="default_msg">入 / 出口字幕機顯示文字</label>
                            <input type="text" class="form-control" placeholder="若不更改將顯示預設文字" name="default_msg" value="{{ old('default_msg', $peripheral->default_msg) }}">
                            @error('default_msg')
                                <span id="default_msg-error" class="validateError">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="recognize_msg">進行車牌辨識時顯示文字</label>
                            <input type="text" class="form-control" placeholder="若不更改將顯示預設文字" name="recognize_msg" value="{{ old('recognize_msg', $peripheral->recognize_msg) }}">
                            @error('recognize_msg')
                                <span id="recognize_msg-error" class="validateError">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="temporary_full_msg">臨停車滿車訊息</label>
                            <input type="text" class="form-control" placeholder="若不更改將顯示預設文字" name="temporary_full_msg" value="{{ old('temporary_full_msg', $peripheral->temporary_full_msg) }}">
                            @error('temporary_full_msg')
                                <span id="temporary_full_msg-error" class="validateError">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="monthly_group_full_msg">月租群組滿車訊息</label>
                            <input type="text" class="form-control" placeholder="若不更改將顯示預設文字" name="monthly_group_full_msg" value="{{ old('monthly_group_full_msg', $peripheral->monthly_group_full_msg) }}">
                            @error('monthly_group_full_msg')
                                <span id="monthly_group_full_msg-error" class="validateError">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="fullColor hide">
                            <div class="form-group">
                                <label for="color">顏色</label>
                                <select class="form-control" id="color" name="color">
                                    @foreach (config('webCommonData.ledColorDropdown') as $value => $name)
                                        <option value="{{ $value }}" @if (old('color', $peripheral->color) == $value) selected @endif>{{ $name }}</option>
                                    @endforeach
                                </select>
                                @error('color')
                                    <span id="color-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="brightness">亮度</label>
                                <select class="form-control" id="brightness" name="brightness">
                                    @foreach (config('webCommonData.ledBrightnessDropdown') as $value => $name)
                                        <option value="{{ $value }}" @if (old('brightness', $peripheral->brightness) == $value) selected @endif>{{ $name }}</option>
                                    @endforeach
                                </select>
                                @error('brightness')
                                    <span id="brightness-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-info">修改</button>
                    <a class="btn btn-warning" href="{{ route('ledMessageSetting.index') }}">返回</a>
                </form>
            </div>
            <!-- /.card -->
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            let peripheral = @json($peripheral);

            showFullColorField();

            // 顯示全彩字幕機欄位
            function showFullColorField() {
                // 設備 = 顯示器 且 廠牌 = 全彩
                if (peripheral.type == 2 && [3, 4].includes(peripheral.brand)) {
                    $('.fullColor').show();
                    $('.normalColor').hide();
                } else {
                    $('.fullColor').hide();
                    $('.normalColor').show();
                }
            }
        });
    </script>
@endsection