@extends('layouts.main')

@section('pageTitle', '非假日表')

@section('content')
<style>
.form-check{display:inline;margin: 0 10px 0 0;}
</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'], 'workday.index') !!}
        </div>
        <div class="card-body">
            <form action="{{ route('workday.store') }}" method="post">
            @csrf
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="execute_type">新增類型</label>
                    <select class="form-control" name="execute_type">
                        @foreach(config('webCommonData.holidayScheduleDropdown') as $value => $name)
                            <option value="{{ $value }}" @if(old('execute_type', 1) == $value) selected @endif>{{ $name }}</option>
                        @endforeach
                    </select>
                    @error('execute_type')
                        <span id="execute_type-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group" id="date">
                    <label for="date">日期</label>
                    <input type="text" class="form-control date" placeholder="日期" name="date" value="{{ old('date', date('Y-m-d')) }}" readonly>
                    @error('date')
                        <span id="date-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group" id="cycle">
                    <label>選擇新增假日</label>
                    <div>
                        @foreach(config('webCommonData.weekdayDropdown') as $value => $name)
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="cycle" value="{{ $value }}" id="cycle_{{ $value }}" @if($value == 1) checked @endif>
                                <label class="form-check-label" for="cycle_{{ $value }}">{{ $name }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="form-group" id="startDate">
                    <label for="start_date">週期開始日期</label>
                    <input type="text" class="form-control start_date" placeholder="週期開始日期" name="start_date" value="{{ old('start_date', date('Y-m-d')) }}" readonly>
                    @error('start_date')
                        <span id="start_date-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group" id="endDate">
                    <label for="end_date">週期結束日期</label>
                    <input type="text" class="form-control end_date" placeholder="週期結束日期" name="end_date" value="{{ old('end_date', date('Y-m-d')) }}" readonly>
                    @error('end_date')
                        <span id="end_date-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <button type="submit" class="btn btn-primary">新增</button>
            <a class="btn btn-warning" href="{{ route('workday.index') }}">返回</a>
        </form>
        </div>
        <!-- /.card -->
    </div>
</div>
@endsection

@section('js')
@include('include.datePickerAndMask')
<script>
$(document).ready(function () {
    $('.date, .start_date, .end_date').daterangepicker(datePickerSetting);

    executeFieldShowAndHide();

    $('[name=execute_type]').change(function (e) {
        executeFieldShowAndHide();
    });

    function executeFieldShowAndHide(){
        var executeType = $('[name=execute_type]').val();
        if(executeType == 1){
            $('#date').show();
            $('#cycle,#startDate,#endDate').hide();
        }
        else{
            $('#cycle,#startDate,#endDate').show();
            $('#date').hide();
        }
    }
});
</script>
@endsection