@extends('layouts.main')

@section('pageTitle', '洗車機相關設定')

@section('content')
<x-css-asset src="css/wash-billing-setting.css" />

<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">
            {!! $data['thirdLevelTabsHtml'] !!}
        </div>
        <div class="card-body">
            <div class="tab-content" id="thirdLevel-tabContent">
                <div class="tab-pane fade show active" role="tabpanel">
                    <form action="{{ route('washMachineSetting.update') }}" method="post" class="needs-validation" id="washMachineSettingForm">
                        @csrf
                        @method('PUT')
                        <section class="wash-discount-section" aria-label="洗車機狀態判斷延遲">
                            <h2 class="wash-discount-section__title">洗車機狀態判斷</h2>
                            <div class="wash-discount-inner">
                                <div class="wash-discount-line">
                                    <span>完成繳費後，延遲</span>
                                    <input
                                        type="input"
                                        name="wash_pay_delay_sec"
                                        id="wash_pay_delay_sec"
                                        class="wash-discount-num @error('wash_pay_delay_sec') is-invalid @enderror"
                                        value="{{ old('wash_pay_delay_sec', $data['wash_pay_delay_sec'] ?? 0) }}"
                                        min="0"
                                        max="86400"
                                        step="1"
                                        required
                                        inputmode="numeric"
                                        autocomplete="off"
                                        aria-label="完成繳費後洗車機狀態判斷延遲秒數"
                                    >
                                    <span>秒再判斷洗車機狀態</span>
                                </div>
                                @error('wash_pay_delay_sec')
                                    <span class="validateError d-block w-100">{{ $message }}</span>
                                @enderror
                            </div>
                            @can('washMachineSetting.update')
                            <div class="wash-discount-actions">
                                <button type="submit" class="wash-plan-btn-primary js-no-page-overlay">儲存設定</button>
                            </div>
                            @endcan
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<x-js-asset src="js/validation-utils.js" />
<script type="module">
    import FETCH_PACK from "{{ asset('js/fetch.js') }}";
    window.FETCH_PACK = FETCH_PACK;
</script>
<script>
    $(document).ready(function() {
        const rules = {
            wash_pay_delay_sec: [
                'required',
                { type: 'number', min: 0, max: 86400, integer: true }
            ]
        };
        window.ValidationUtils.setupRealtimeValidation('#washMachineSettingForm', rules);
        window.ValidationUtils.initBootstrapValidation('body');

        var updateUrl = @json(route('washMachineSetting.update'));
        $('#washMachineSettingForm').on('submit', async function(ev) {
            ev.preventDefault();
            if (!window.FETCH_PACK || typeof window.FETCH_PACK.putWebJson !== 'function') {
                errorMessage('無法送出：請重新整理頁面');
                return;
            }
            var $form = $(this);
            $form.find('[data-async-field-error="1"]').remove();
            $form.find('.is-invalid').removeClass('is-invalid');
            var sec = parseInt($('#wash_pay_delay_sec').val(), 10);
            try {
                var res = await window.FETCH_PACK.putWebJson(updateUrl, { wash_pay_delay_sec: sec });
                successMessage(res.message || '修改成功');
            } catch (err) {
                if (err.status === 422 && err.errors) {
                    Object.keys(err.errors).forEach(function(field) {
                        var $input = $form.find('[name="' + field + '"]');
                        $input.addClass('is-invalid');
                        var msg = Array.isArray(err.errors[field]) ? err.errors[field][0] : err.errors[field];
                        $input.closest('.wash-discount-inner').append(
                            '<span class="validateError d-block w-100" data-async-field-error="1">' + msg + '</span>'
                        );
                    });
                    return;
                }
                errorMessage(err.message || '修改失敗');
            }
        });
    });
</script>
@endsection