@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('thidLevel','App\Presenters\ThirdLevelPresenter')
        {!! $thidLevel->createThirdLevel($globalVariable['pathMain'], $globalVariable['pathSub'], $tabName) !!}
        </div>
        <div class="card-body">
            <div class="tab-content" id="thirdLevel-tabContent">
                <div class="tab-pane fade show active" id="" role="tabpanel">
                    <form action="{{ route('vehicle.update', $data->id) }}" method="post">
                        @csrf
                        @method('PUT')
                        @inject('vehicleTypesPresenter', 'App\Presenters\VehicleTypesPresenter')
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>已停放總車位</label><br>
                                {{ $vehicleTypesPresenter->getParkedSpace($data->id) }}
                            </div>
                            <div class="form-group">
                                <label for="parking_temporary">已停放總臨停車</label>
                                <input type="text" class="form-control" placeholder="已停放總臨停車" name="parking_temporary" value="{{ old('parking_temporary', $data->parking_temporary) }}">
                                @error('parking_temporary')
                                    <span id="parking_temporary-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="parking_monthly_not_guaranteed">已停放不保證月租車</label>
                                <input type="text" class="form-control" placeholder="已停放不保證月租車" name="parking_monthly_not_guaranteed" value="{{ old('parking_monthly_not_guaranteed', $data->parking_monthly_not_guaranteed) }}">
                                @error('parking_monthly_not_guaranteed')
                                    <span id="parking_monthly_not_guaranteed-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="parking_monthly">已停放保證月租車</label>
                                <input type="text" class="form-control" placeholder="已停放保證月租車" name="parking_monthly" value="{{ old('parking_monthly', $data->parking_monthly) }}">
                                @error('parking_monthly')
                                    <span id="parking_monthly-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>總車位</label><br>
                                {{ $vehicleTypesPresenter->getTotalParkingSpace($data->id) }}
                            </div>

                            <div class="form-group">
                                <label for="total_temporary">臨停車位</label> ＊與不保證月租共用車位。
                                <input type="text" class="form-control" placeholder="臨停車位" name="total_temporary" value="{{ old('total_temporary', $data->total_temporary) }}">
                                @error('total_temporary')
                                    <span id="total_temporary-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="total_monthly">保證月租車位</label>
                                <input type="text" class="form-control" placeholder="保證月租車位" name="total_monthly" value="{{ old('total_monthly', $data->total_monthly) }}">
                                @error('total_monthly')
                                    <span id="total_monthly-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>是否與 888 顯示器同步</label>
                                <select class="form-control" name="counter_synchronous">
                                    @foreach(config('webCommonData.yesOrNoDropdown') as $value => $name)
                                        <option value="{{ $value }}" @if($value == old('counter_synchronous', $data->counter_synchronous)) selected @endif >{{ $name }}</option>
                                    @endforeach
                                </select>
                                @error('counter_synchronous')
                                    <span id="counter_synchronous-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>擋車規則</label>
                                <select class="form-control" name="stall_rules">
                                    @foreach(config('webCommonData.stallRulesDropdown') as $value => $name)
                                        <option value="{{ $value }}" @if($value == old('stall_rules', $data->stall_rules)) selected @endif >{{ $name }}</option>
                                    @endforeach
                                </select>
                                @error('stall_rules')
                                    <span id="stall_rules-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            @can('vehicle.update')
                            <button type="submit" class="btn btn-info" id="vehicle">修改</button>
                            @endcan

                            <h4 style="text-align: center;">888 顯示車位數</h4>

                            <div class="form-group">
                                <label>顯示規則</label> ＊變更後即完成設定，不須按下確定修改。
                                <select class="form-control" name="display_rules">
                                    @foreach($vehicleTypesPresenter->getDisplayRulesDropdown($data->id) as $value => $name)
                                        <option value="{{ $value }}" @if($value == old('display_rules', $data->display_rules)) selected @endif>{{ $name }}</option>
                                    @endforeach
                                </select>
                                @error('display_rules')
                                    <span id="display_rules-error" class="validateError">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>目前顯示車位</label><br>
                                <span id="displayNumber">{{ $vehicleTypesPresenter->adjustDisplayNumber($data->current_show_parking_spaces) }}</span>
                                <input type="hidden" name="finalNumber" id="finalNumber" value="">
                            </div>
                            <div class="form-group">
                                <label for="showNumber">輸入指定顯示車位</label>
                                <input type="text" class="form-control" placeholder="輸入指定顯示車位" name="showNumber">
                            </div>
                            <div class="row">
                                <div class="col-sm-10">
                                    <div class="form-group">
                                        <label for="editNumber">輸入增減顯示車位</label>＊請輸正整數字。
                                        <input type="text" class="form-control" placeholder="輸入指定顯示車位" name="editNumber">
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label for="action">&nbsp;</label>
                                        <select class="form-control" name="action">
                                            @foreach(config('webCommonData.plusOrMinusDropdown') as $value => $name)
                                                <option value="{{ $value }}" >{{ $name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @can('vehicle.update')
                        <span  class="btn btn-info" id="display888">修改</span>
                        @endcan
                    </form>
                </div>
            </div>
        </div>
        <!-- /.card -->
    </div>
</div>
@endsection
@section('js')
<script>
$(document).ready(function () {
    $('span#display888').click(function (e) {
        var showNumber = $('[name=showNumber]').val();
        var editNumber = $('[name=editNumber]').val();
        var number = Number($('#displayNumber').html());

        if(showNumber != '' || editNumber != ''){
            if(isNaN(showNumber) || isNaN(editNumber)){
                resetNumberModifyField('showNumber');
                alert('請輸入數字！');
                return false;
            }

            // 顯示數字
            if(showNumber != ''){
                if(showNumber < 0 || showNumber > 9999){
                    resetNumberModifyField('showNumber');
                    alert('請輸入介於 0 ~ 9999 之間的數字！');
                    return false;
                }
                var finalNumber = Number(showNumber);
            }
            else if(showNumber == '' && editNumber != ''){
                var action = $('select[name=action]').val();
                if(action == 1){
                    var finalNumber = number + Number(editNumber);
                }
                else{
                    var finalNumber = number - Number(editNumber);
                }

                if(finalNumber > 9999){
                    alert('修改後的數字 ' + finalNumber + ' 不能大於 9999');
                    resetNumberModifyField('editNumber');
                    return false;
                }

                if(finalNumber < 0){
                    alert('修改後的數字 ' + finalNumber + ' 不能為負值');
                    resetNumberModifyField('editNumber');
                    return false;
                }
            }

            if(!confirm('修改後的顯示數字為 ' + finalNumber)){
                return false;
            }

            $('input#finalNumber').val(finalNumber);

            setToken();
            $.ajax({
                type: 'POST',
                url: "{{ route('vehicle.modifyCounterNumber', $data->id) }}",
                async: false,
                data: {
                    counterNumber: finalNumber
                },
                dataType: "json"
            }).done(function (data, textStatus, jqXHR) {
                // ajax 呼叫成功後執行
                if (data.retCode == '0') {
                    successMessage(data.retMsg);
                    modifyCurrentShowParkingSpace(data.retVal);
                } else {
                    errorMessage(data.retMsg);
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                // ajax 呼叫失敗後執行
                errorMessage(`修改錯誤：${jqXHR.status} ${errorThrown}`);
            }).then(function (data, textStatus, jqXHR) {
                // ajax 執行完之後執行
            });
        }
    });

    function resetNumberModifyField(numberField){
        $('[name=showNumber], [name=editNumber]').val('');
        $('[name=' + numberField + ']').focus();
    }

    $('select[name=display_rules]').change(function (e) {
        var data = {
            display_rules: $(this).val()
        };

        changeAjax("{{ route('vehicle.updateDisplayRules', $data->id) }}", data, modifyCurrentShowParkingSpace);
    });

    function modifyCurrentShowParkingSpace(number){
        if (number != '') {
            $('#displayNumber').html(number);
        }
    }
});
</script>
@endsection