@extends('layouts.main')

@section('pageTitle', '預設時間')

@section('content')
    <!-- /.card-header -->
    <div class="card-body">
        <form action="{{ route('whiteList.setDefaultTime') }}" method="post">
            @csrf
            @method('PUT')
            <div class="col-sm-6">
                <div class="form-group">
                    <label>類型</label>
                    <select class="form-control" name="type">
                        @foreach (config('webCommonData.timeTypeDropdown') as $value => $name)
                            <option value="{{ $value }}" @if ($value == old('type', $setting->type)) selected @endif>{{ $name }}</option>
                        @endforeach
                    </select>
                    @error('type')
                        <span id="type-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div id="absolute">
                    <div class="form-group">
                        <label for="enabled_at">啟用時間</label>
                        <input type="text" class="form-control" placeholder="啟用時間" name="enabled_at" value="{{ old('enabled_at', $setting->enabled_at) }}" id="enabled_at">
                        @error('enabled_at')
                            <span id="enabled_at-error" class="validateError">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="expired_at">有效時間</label>
                        <input type="text" class="form-control" placeholder="有效時間" name="expired_at" value="{{ old('expired_at', $setting->expired_at) }}" id="expired_at">
                        @error('expired_at')
                            <span id="expired_at-error" class="validateError">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div id="relative">
                    <div class="form-group">
                        <label for="enabled_time">啟用時間</label>

                        <div class="row align-items-center">
                            <div class="col-sm-2">
                                <input type="text" class="form-control" placeholder="天數" name="add_enabled_days" value="{{ old('add_enabled_days', $setting->add_enabled_days) }}">
                                @error('add_enabled_days')
                                    <span id="add_enabled_days-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <span class="col-auto">天後</span>
                            <div class="col">
                                <input type="text" class="form-control" placeholder="啟用時間" name="enabled_time" value="{{ old('enabled_time', $setting->enabled_time) }}" data-inputmask-alias="datetime" data-inputmask-inputformat="HH:MM:ss" data-mask>
                                @error('enabled_time')
                                    <span id="enabled_time-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="expired_time">有效時間</label>
                        <div class="row align-items-center">
                            <div class="col-sm-2">
                                <input type="text" class="form-control" placeholder="天數" name="add_expired_days" value="{{ old('add_expired_days', $setting->add_expired_days) }}">
                                @error('add_expired_days')
                                    <span id="add_expired_days-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <span class="col-auto">天後</span>
                            <div class="col">
                                <input type="text" class="form-control" placeholder="有效時間" name="expired_time" value="{{ old('expired_time', $setting->expired_time) }}" data-inputmask-alias="datetime" data-inputmask-inputformat="HH:MM:ss" data-mask>
                                @error('expired_time')
                                    <span id="expired_time-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group mt-1">
                            <p class="text-secondary">* 如設定為 0 天後則為當天，1 天後為明天，以此類推。</p>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">儲存</button>
                <a class="btn btn-warning" href="{{ route('whiteList.index') }}">返回</a>
        </form>
    </div>
    <!-- /.card-body -->
@endsection

@section('js')
    @include('include.datePickerAndMask')
    <script>
        $(document).ready(function() {
            let type = $('[name=type]').val();
            switchOption(type);

            datePickerSetting.timePicker = true;
            datePickerSetting.timePickerSeconds = true;
            datePickerSetting.timePickerIncrement = 1;
            datePickerSetting.locale.format = 'YYYY-MM-DD HH:mm:ss';
            $('#enabled_at, #expired_at').daterangepicker(datePickerSetting);

            $('[name=enabled_time], [name=expired_time]').inputmask();

            $('[name=type]').change(function() {
                let type = $(this).val();
                switchOption(type);
            });

            // 切換選單
            function switchOption(type) {
                $('#absolute').hide();
                $('#relative').hide();

                switch (type) {
                    case '1': // 絕對時間
                        $('#absolute').show();
                        break;
                    case '2': // 相對時間
                        $('#relative').show();
                        break;
                }
            }
        });
    </script>
@endsection