@extends('layouts.main')

@section('pageTitle', 'QR code 特約管理 - 新增編碼優惠規則')

@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('thidLevel','App\Presenters\ThirdLevelPresenter')
        {!! $thidLevel->createThirdLevel($globalVariable['pathMain'], $globalVariable['pathSub'], 'qrcodeRule.index') !!}
        </div>
        <div class="card-body">
            <form action="{{ route('qrcodeRule.store') }}" method="post">
            @csrf
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="form-group">
                        <label for="store_id">特約商店</label>
                        @inject('qrcodeStoresRepository','App\Repositories\QrcodeStoresRepository')
                        <select class="form-control" name="store_id" id="store_id">
                            @foreach($qrcodeStoresRepository->getAll() as $qrcodeStore)
                                <option value="{{ $qrcodeStore->id }}"  @if($qrcodeStore->id == old('store_id')) selected @endif>{{ $qrcodeStore->name }}({{ $qrcodeStore->number }}) @if ($qrcodeStore->type == 0) - 不開立發票 @endif</option>
                            @endforeach
                        </select>
                        @error('store_id')
                            <span id="store_id-error" class="validateError">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group">
                    <label for="vehicle_type">車種</label>
                    <select class="form-control" name="vehicle_type" id="vehicle_type">
                        @inject('vehicleTypeRepo', 'App\Repositories\VehicleTypesRepository')
                        @foreach($vehicleTypeRepo->getVehicleTypeList() as $id => $name)
                            <option value="{{ $id }}"   @if($id == old('vehicle_type', 9)) selected @endif>{{ $name }}</option>
                        @endforeach
                    </select>
                    @error('vehicle_type')
                        <span id="vehicle_type-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="discount_value">平日折抵額度</label>
                    <input type="text" class="form-control" placeholder="平日折抵額度" name="discount_value" id="discount_value" value="{{ old('discount_value') }}">
                    @error('discount_value')
                        <span id="discount_value-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="holiday_discount_value">假日折抵額度</label>
                    <input type="text" class="form-control" placeholder="假日折抵額度" name="holiday_discount_value" id="holiday_discount_value" value="{{ old('holiday_discount_value') }}">
                    @error('holiday_discount_value')
                        <span id="holiday_discount_value-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="multiple_vehicle_used">是否多車共用同一張優惠券</label>
                    <select class="form-control" name="multiple_vehicle_used" id="multiple_vehicle_used">
                        @foreach(config('webCommonData.multipleVehicleUsedDropdown') as $value => $name)
                            <option value="{{ $value }}"  @if($value == old('multiple_vehicle_used', 0)) selected @endif>{{ $name }}</option>
                        @endforeach
                    </select>
                    @error('multiple_vehicle_used')
                        <span id="multiple_vehicle_used-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="quantity">產出數量</label> ※ 請輸入 0 ~ 500 之間的整數。
                    <input type="text" class="form-control" placeholder="產出數量" name="quantity" id="quantity" value="{{ old('quantity') }}">
                    @error('quantity')
                        <span id="quantity-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <div class="form-group">
                        <label for="discount_rule">折抵效期</label>
                        <select class="form-control" name="discount_rule" id="discount_rule">
                            @foreach(config('webCommonData.qrcodeDiscountRuleDropdown') as $value => $name)
                                <option value="{{ $value }}"  @if($value == old('discount_rule')) selected @endif>{{ $name }}</option>
                            @endforeach
                        </select>
                        @error('discount_rule')
                            <span id="discount_rule-error" class="validateError">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group">
                        <label for="cycle_enable">是否排程產出優惠券</label> ※ 當優惠券產出有效日期小於商店有效期限時，會以商店有效期限為主。
                        <select class="form-control" name="cycle_enable" id="cycle_enable">
                            @foreach(config('webCommonData.yesOrNoDropdown') as $value => $name)
                                <option value="{{ $value }}"  @if($value == old('cycle_enable', 0)) selected @endif>{{ $name }}</option>
                            @endforeach
                        </select>
                        @error('cycle_enable')
                            <span id="cycle_enable-error" class="validateError">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group">
                        <label for="print_layout">優惠券版面格式</label>
                        <select class="form-control" name="print_layout" id="print_layout">
                            @foreach(config('webCommonData.qrcodeRulePrintLayoutDropdown') as $value => $name)
                                <option value="{{ $value }}"  @if($value == old('print_layout')) selected @endif>{{ $name }}</option>
                            @endforeach
                        </select>
                        @error('print_layout')
                            <span id="cycle_enable-error" class="validateError">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group" name="print_layout_size" id="print_layout_size"  @if(1 == old('print_layout', 1)) style="display:none;" @endif>
                        <label>單頁尺寸(單位mm)</label> ※ 建議寬，高，採用輸出紙張的大小尺寸，預設建議 寬55*高80mm
                        <div class="row">
                            <div class="input-group col-sm-5" style="max-width: 30%;">
                                <div class="input-group-prepend">
                                    <span class="form-control">寬</span>
                                </div>
                                <input type="text" class="form-control" name="print_layout_width" style="margin-right: 10px;min-width: 60%;">
                                @error('print_layout_width')
                                    <span id="print_layout_width-error" class="validateError" style="margin-top: 0;">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="input-group col-sm-5" style="max-width: 30%;">
                                <div class="input-group-prepend">
                                    <span class="form-control">高</span>
                                </div>
                                <input type="text" class="form-control" name="print_layout_height" style="margin-right: 10px;min-width: 60%;">
                                @error('print_layout_height')
                                    <span id="print_layout_height-error" class="validateError"  style="margin-top: 0;">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="enable_date">啟用日期</label>
                    <input type="text" class="form-control bg-white" placeholder="啟用日期" name="enable_date" id="enable_date" value="{{ old('enable_date', date('Y-m-d')) }}" readonly>
                    @error('enable_date')
                        <span id="enable_date-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group hide" id="customer_rule_field">
                    <label for="effective_date">有效日期</label>
                    <input type="text" class="form-control bg-white" placeholder="有效日期" name="effective_date" id="effective_date" value="{{ old('effective_date', date('Y-m-d')) }}" readonly>
                    @error('effective_date')
                        <span id="effective_date-error" class="validateError">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <button type="submit" class="btn btn-primary">新增</button>
            <a class="btn btn-warning" href="{{ route('qrcodeRule.index') }}">返回</a>
        </form>
        </div>
        <!-- /.card -->
    </div>
</div>
@endsection

@section('js')
@include('include.datePickerAndMask')
<script>
$(document).ready(function () {
    renderDateRangePicker();
    toggleCustomerRuleField();
    toggleMultipleVehicleUsed();

    // 折抵效期
    $('#discount_rule').change(function (e) {
        renderDateRangePicker();
        toggleCustomerRuleField();
    });

    $('#print_layout').change(function(){
        if ($(this).val() == '2') {
            $('#print_layout_size').show();
        } else {
            $('#print_layout_size').hide();
        }
    })

    $('#multiple_vehicle_used').change(function(){
        toggleMultipleVehicleUsed();
    })

    function renderDateRangePicker() {
        let localSetting = datePickerSetting;
        localSetting.drops = "up";
        localSetting.timePicker = false;
        localSetting.timePickerSeconds = false;
        localSetting.locale.format = 'YYYY-MM-DD';
        $('#enable_date, #effective_date').daterangepicker(localSetting);
        if ($('#discount_rule').val() == 5) {
            localSetting.timePicker = true;
            localSetting.timePickerSeconds = true;
            localSetting.timePickerIncrement = 1;
            localSetting.locale.format = 'YYYY-MM-DD HH:mm:ss';
            $('#enable_date, #effective_date').daterangepicker(localSetting);
        }
    }

    // 切換顯示有效日期的欄位
    function toggleCustomerRuleField() {
        if ($('#discount_rule').val() == 5) {
            $('#customer_rule_field').show();
        } else {
            $('#customer_rule_field').hide();
        }
    }

    // 切換顯示多車共用所需的欄位
    function toggleMultipleVehicleUsed() {
        if ($('#multiple_vehicle_used').val() != '0') {
            $('#quantity').val(1);
            $('#print_layout').parent().hide();
            $('#quantity').parent().hide();
        } else {
            $('#print_layout').parent().show();
            $('#quantity').parent().show();
        }
    }
});
</script>
@endsection