@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('washBillingSetting.update') }}" method="post" class="needs-validation" id="washBillingDiscountForm">
                        @csrf
                        @method('PUT')
                        @php
                            $discountEnable = (int) old('charging_wash_discount_enable', $data['charging_wash_discount_enable']);
                        @endphp
                        <section class="wash-discount-section" aria-label="洗車優惠設定">
                            <h2 class="wash-discount-section__title">洗車優惠設定</h2>
                            <div class="wash-discount-inner">
                                <div class="wash-discount-toggle-row">
                                    <p class="wash-discount-toggle-row__label">充電洗車優惠</p>
                                    <div class="wash-discount-toggle-row__side">
                                        <input type="hidden" name="charging_wash_discount_enable" id="charging_wash_discount_enable_value" value="{{ $discountEnable === 1 ? '1' : '0' }}">
                                        <label class="wash-discount-switch">
                                            <input type="checkbox" id="charging_wash_discount_toggle" value="1" class="@error('charging_wash_discount_enable') is-invalid @enderror" @if($discountEnable === 1) checked @endif>
                                            <span class="wash-discount-slider"></span>
                                        </label>
                                    </div>
                                    @error('charging_wash_discount_enable')
                                        <span class="validateError d-block w-100">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="wash-discount-config" id="charging_wash_discount_div">
                                    <div class="wash-discount-line">
                                        <span>充電</span>
                                        <input type="text" name="wash_discount_required_kwh" class="wash-discount-num @error('wash_discount_required_kwh') is-invalid @enderror" value="{{ old('wash_discount_required_kwh', $data['wash_discount_required_kwh']) }}" required inputmode="numeric" autocomplete="off" aria-label="充電度數門檻">
                                        <span>度，給予洗車優惠</span>
                                        <input type="text" name="wash_discount_amount" class="wash-discount-num @error('wash_discount_amount') is-invalid @enderror" value="{{ old('wash_discount_amount', $data['wash_discount_amount']) }}" required inputmode="numeric" autocomplete="off" aria-label="洗車優惠金額">
                                        <span>元</span>
                                    </div>
                                    <div class="wash-discount-line">
                                        <span>優惠期限為</span>
                                        <input type="text" name="wash_discount_duration_hours" class="wash-discount-num @error('wash_discount_duration_hours') is-invalid @enderror" value="{{ old('wash_discount_duration_hours', $data['wash_discount_duration_hours']) }}" required inputmode="numeric" autocomplete="off" aria-label="優惠有效小時數">
                                        <span>小時</span>
                                        <span class="wash-discount-line__note">※優惠期限自繳費時間起算</span>
                                    </div>
                                    @foreach (['wash_discount_required_kwh', 'wash_discount_amount', 'wash_discount_duration_hours'] as $washDiscountField)
                                        @error($washDiscountField)
                                            <span class="validateError d-block w-100">{{ $message }}</span>
                                        @enderror
                                    @endforeach
                                </div>
                            </div>
                            @can('washBillingSetting.update')
                            <div class="wash-discount-actions">
                                <button type="submit" class="wash-plan-btn-primary js-no-page-overlay">儲存洗車優惠設定</button>
                            </div>
                            @endcan
                        </section>
                    </form>
                    <section class="wash-plan-section" aria-label="洗車方案">
                        <div class="wash-plan-section__head">
                            <div class="wash-plan-section__intro">
                                <h2 class="wash-plan-section__title">洗車方案管理</h2>
                                <p class="wash-plan-section__subtitle">調整當前營運之洗車服務項目與定價</p>
                            </div>
                            <div class="wash-plan-section__actions">
                                @can('sellItem.store')
                                <button type="button" class="wash-plan-btn-primary" id="createItemBtn"><i class="fas fa-plus mr-2"></i>新增方案</button>
                                @endcan
                            </div>
                        </div>
                        <div id="washPlanCardGrid" class="wash-plan-card-grid" role="list"></div>
                    </section>
                </div>
            </div>
        </div>
        <!-- /.card -->
    </div>
</div>

@can('sellItem.store')
<!-- 新增方案 Modal（stitch_settings 版型） -->
<div class="modal fade wash-plan-modal" id="storeSellItemModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="storeSellItemModalTitle">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <form class="needs-validation" novalidate>
                <div class="wash-plan-modal__header">
                    <h2 class="wash-plan-modal__title" id="storeSellItemModalTitle">新增洗車方案</h2>
                    <button type="button" class="wash-plan-modal__close" data-dismiss="modal" aria-label="關閉">
                        <span class="wash-plan-modal-close-icon" aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="wash-plan-modal__body">
                    <div class="wash-plan-field">
                        <label class="wash-plan-field__label" for="code">方案代碼</label>
                        <input type="text" class="wash-plan-input" id="code" name="code" required minlength="1" maxlength="25" autocomplete="off">
                        <div class="invalid-feedback">請輸入方案代碼</div>
                    </div>
                    <div class="wash-plan-field">
                        <label class="wash-plan-field__label" for="name">方案名稱</label>
                        <input type="text" class="wash-plan-input" id="name" name="name" required placeholder="例如：尊榮全方位手工打蠟" autocomplete="off">
                        <div class="invalid-feedback">請輸入方案名稱</div>
                    </div>
                    <div class="wash-plan-field">
                        <label class="wash-plan-field__label" for="price">價格</label>
                        <div class="wash-plan-input-wrap">
                            <span class="wash-plan-input-wrap__prefix">NT$</span>
                            <input type="text" class="wash-plan-input" id="price" name="price" required min="0" inputmode="decimal" autocomplete="off">
                        </div>
                        <div class="invalid-feedback">請輸入價格</div>
                    </div>
                </div>
                <div class="wash-plan-modal__footer">
                    <button type="button" class="wash-plan-modal__btn-secondary" data-dismiss="modal">取消</button>
                    <button id="storeSellItemBtn" type="button" class="wash-plan-modal__btn-primary">儲存方案</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan

@can('sellItem.edit')
<!-- 修改方案 Modal（stitch_settings 版型） -->
<div class="modal fade wash-plan-modal" id="editSellItemModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="editSellItemModalTitle">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <form class="needs-validation" novalidate>
                <input type="hidden" id="edit-id" name="id">
                <div class="wash-plan-modal__header">
                    <h2 class="wash-plan-modal__title" id="editSellItemModalTitle">修改洗車方案</h2>
                    <button type="button" class="wash-plan-modal__close" data-dismiss="modal" aria-label="關閉">
                        <span class="wash-plan-modal-close-icon" aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="wash-plan-modal__body">
                    <div class="wash-plan-field">
                        <label class="wash-plan-field__label" for="edit-code">方案代碼</label>
                        <input type="text" class="wash-plan-input" id="edit-code" name="code" disabled>
                    </div>
                    <div class="wash-plan-field">
                        <label class="wash-plan-field__label" for="edit-name">方案名稱</label>
                        <input type="text" class="wash-plan-input" id="edit-name" name="name" required data-original="" autocomplete="off">
                        <div class="invalid-feedback">請輸入方案名稱</div>
                    </div>
                    <div class="wash-plan-field">
                        <label class="wash-plan-field__label" for="edit-price">價格</label>
                        <div class="wash-plan-input-wrap">
                            <span class="wash-plan-input-wrap__prefix">NT$</span>
                            <input type="text" class="wash-plan-input" id="edit-price" name="price" required min="0" data-original="" inputmode="decimal" autocomplete="off">
                        </div>
                        <div class="invalid-feedback">請輸入價格</div>
                    </div>
                </div>
                <div class="wash-plan-modal__footer">
                    <button type="button" class="wash-plan-modal__btn-secondary" data-dismiss="modal">取消</button>
                    <button id="updateSellItemBtn" type="button" class="wash-plan-modal__btn-primary">儲存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan
@endsection

@section('js')
@include('include.inputmask')
{{-- 1. 先設置 FETCH_PACK 全域變數 --}}
<script type="module">
    import FETCH_PACK from "{{ asset('js/fetch.js') }}";
    window.FETCH_PACK = FETCH_PACK;
</script>

{{-- 2. 載入其他依賴庫 --}}
<x-js-asset src="js/validation-utils.js" />
<script>
    /**
     * 洗車計費設定頁：表單驗證、方案清單（API 載入卡片網格）、Modal 操作
     */
    class WashBillingSettingManager {
        constructor(config) {
            this.config = config;
            /** @type {Array<object>} 方案列資料（與 sellItem.planList retVal 相同結構） */
            this.planRows = [];
            this.init();
        }

        init() {
            this.initValidation();
            this.reloadPlanList();
            this.syncChargingWashDiscountEnableValue();
            this.chargingWashDiscountView();
            this.bindDiscountFormAsyncSubmit();
            this.initEventListeners();
        }

        /**
         * 非同步送出洗車優惠表單（不重載整頁）
         */
        bindDiscountFormAsyncSubmit() {
            const url = @json(route('washBillingSetting.update'));
            $('#washBillingDiscountForm').on('submit', async (ev) => {
                ev.preventDefault();
                this.syncChargingWashDiscountEnableValue();
                if (!window.FETCH_PACK || typeof window.FETCH_PACK.putWebJson !== 'function') {
                    errorMessage('無法送出：請重新整理頁面');
                    return;
                }
                this.clearAsyncFieldErrors('#washBillingDiscountForm');
                const payload = this.getDiscountFormPayload();
                try {
                    const res = await window.FETCH_PACK.putWebJson(url, payload);
                    successMessage(res.message || '修改成功');
                } catch (err) {
                    if (err.status === 422 && err.errors) {
                        this.applyAsyncFieldErrors('#washBillingDiscountForm', err.errors);
                        return;
                    }
                    errorMessage(err.message || '修改失敗');
                }
            });
        }

        /**
         * @returns {Object} 送後端之洗車優惠欄位
         */
        getDiscountFormPayload() {
            const enable = parseInt($('#charging_wash_discount_enable_value').val(), 10);
            return {
                charging_wash_discount_enable: Number.isNaN(enable) ? 0 : enable,
                wash_discount_required_kwh: this.parseNumOrZero($('input[name="wash_discount_required_kwh"]').val()),
                wash_discount_amount: this.parseNumOrZero($('input[name="wash_discount_amount"]').val()),
                wash_discount_duration_hours: this.parseNumOrZero($('input[name="wash_discount_duration_hours"]').val()),
            };
        }

        /**
         * @param {string|number|undefined} v
         * @returns {number}
         */
        parseNumOrZero(v) {
            const n = parseFloat(String(v).trim());
            return Number.isNaN(n) ? 0 : n;
        }

        /**
         * @param {string} formSelector
         */
        clearAsyncFieldErrors(formSelector) {
            const $f = $(formSelector);
            $f.find('[data-async-field-error="1"]').remove();
            $f.find('.is-invalid').removeClass('is-invalid');
        }

        /**
         * @param {string} formSelector
         * @param {Record<string, string[]>} errors
         */
        applyAsyncFieldErrors(formSelector, errors) {
            const $f = $(formSelector);
            Object.keys(errors).forEach((field) => {
                const $input = $f.find('[name="' + field + '"]');
                if (!$input.length) {
                    return;
                }
                $input.addClass('is-invalid');
                const msg = Array.isArray(errors[field]) ? errors[field][0] : String(errors[field]);
                const $row = $input.closest('.wash-discount-line');
                const $wrap = $row.length ? $row : $input.closest('.wash-discount-toggle-row');
                $wrap.append('<span class="validateError d-block w-100" data-async-field-error="1">' + msg + '</span>');
            });
        }

        /**
         * 將開關狀態同步至表單 hidden（供後端與 ValidationUtils 讀取單一值）
         */
        syncChargingWashDiscountEnableValue() {
            const on = $('#charging_wash_discount_toggle').is(':checked');
            $('#charging_wash_discount_enable_value').val(on ? '1' : '0');
        }

        // 初始化驗證規則
        initValidation() {
            // 設定系統設定表單的即時驗證
            window.ValidationUtils.setupRealtimeValidation('form', this.config.validationRules.billingSettings);
            // 初始化Bootstrap驗證
            window.ValidationUtils.initBootstrapValidation('body');
            // input mask
            $('#code').inputmask('alphaNumUnderscore');
        }

        /**
         * 自後端載入方案列表並重繪卡片
         */
        async reloadPlanList() {
            const url = this.config?.routes?.planList;
            if (!url || !window.FETCH_PACK) {
                console.error('WashBillingSettingManager: planList 或 FETCH_PACK 未就緒');
                return;
            }
            try {
                const res = await window.FETCH_PACK.get(url);
                if (res.retCode !== 0) {
                    errorMessage(res.retMsg || '讀取方案列表失敗');
                    return;
                }
                this.planRows = Array.isArray(res.retVal) ? res.retVal : [];
                this.renderPlanCards();
            } catch (err) {
                console.error('reloadPlanList:', err);
                errorMessage(`讀取方案列表錯誤：${err.message || err}`);
            }
        }

        /**
         * 依目前 planRows 繪製方案卡片
         */
        renderPlanCards() {
            const grid = $('#washPlanCardGrid');
            grid.empty();
            const rows = this.planRows;
            const perms = this.config?.permissions || {};
            if (rows.length === 0) {
                grid.append('<p class="wash-plan-empty">尚無方案，請新增方案。</p>');
                return;
            }
            rows.forEach((row) => {
                const { id, code, name, price } = row;
                let actionsHtml = '<div class="wash-plan-card__actions">';
                if (perms.canEdit) {
                    actionsHtml += `<button type="button" class="wash-plan-icon-btn" behavior="edit" data-id="${id}" title="修改"><i class="fas fa-edit"></i></button>`;
                }
                if (perms.canDestroy) {
                    actionsHtml += `<button type="button" class="wash-plan-icon-btn wash-plan-icon-btn--danger" behavior="delete" targetId="${id}" title="刪除"><i class="fas fa-trash-alt"></i></button>`;
                }
                actionsHtml += '</div>';
                const card = $(`
                    <div class="wash-plan-card" role="listitem">
                        <div class="wash-plan-card__watermark" aria-hidden="true"><i class="fas fa-tint"></i></div>
                        <div class="wash-plan-card__body">
                            <div class="wash-plan-card__header">
                                <div class="wash-plan-card__icon"><i class="fas fa-tint"></i></div>
                                <h3 class="wash-plan-card__title"></h3>
                            </div>
                            <p class="wash-plan-card__code"></p>
                            <div class="wash-plan-card__footer">
                                <div class="wash-plan-card__price"></div>
                                ${actionsHtml}
                            </div>
                        </div>
                    </div>
                `);
                card.find('.wash-plan-card__title').text(name);
                card.find('.wash-plan-card__code').text(`方案代碼：${code}`);
                card.find('.wash-plan-card__price').text(`NT$ ${price}`);
                grid.append(card);
            });
        }

        /**
         * 由方案 id 從 planRows 取得一筆資料（供編輯 Modal）
         * @param {string|number} id
         * @returns {object|undefined}
         */
        findRowDataById(id) {
            const idStr = String(id);
            return this.planRows.find((r) => String(r.id) === idStr);
        }

        /**
         * 刪除單筆方案（不依賴 DataTable）
         * @param {string|number} targetId
         */
        deleteSellItem(targetId) {
            const routes = this.config?.routes;
            const url = routes?.destroy?.replace(':id', String(targetId));
            if (!url) {
                return;
            }
            if (typeof setToken === 'function') {
                setToken();
            }
            Swal.fire({
                title: '確定要刪除？',
                showCancelButton: true,
                confirmButtonText: '刪除',
            }).then((result) => {
                if (!result.value) {
                    return;
                }
                $.ajax({
                    type: 'DELETE',
                    url: url,
                    dataType: 'json',
                }).done((data) => {
                    if (data.retCode == 0) {
                        successMessage(data.retMsg);
                    } else {
                        errorMessage('刪除失敗：' + data.retMsg);
                    }
                }).fail((jqXHR, textStatus, errorThrown) => {
                    errorMessage(`刪除錯誤：${jqXHR.status} ${errorThrown}`);
                }).always(() => {
                    this.reloadPlanList();
                });
            });
        }

        // 初始化事件監聽器
        initEventListeners() {
            const routes = this.config?.routes;
            if (!routes) {
                console.error('WashBillingSettingManager: routes not found in config');
                return;
            }

            $(document).on('change', '#charging_wash_discount_toggle', () => {
                this.syncChargingWashDiscountEnableValue();
                this.chargingWashDiscountView();
            });

            $(document).on('click', '#washPlanCardGrid button[behavior=delete]', (event) => {
                const btn = $(event.currentTarget).closest('button[behavior=delete]');
                const targetId = btn.attr('targetId');
                this.deleteSellItem(targetId);
            });

            // 新增方案按鈕
            $('#createItemBtn').on('click', () => this.showCreateModal());

            $(document).on('click', '#washPlanCardGrid button[behavior=edit]', (event) => {
                this.showEditModal(event);
            });

            // Modal 內的按鈕
            $('#storeSellItemBtn').on('click', () => this.storeSellItem());
            $('#updateSellItemBtn').on('click', () => this.updateSellItem());
        }

        chargingWashDiscountView() {
            const show = $('#charging_wash_discount_toggle').is(':checked');
            $('#charging_wash_discount_div').toggle(show);
        }

        // 顯示新增 Modal
        showCreateModal() {
            const modal = $('#storeSellItemModal');
            this.resetModalInputs(modal);
            modal.modal('show');
        }

        /**
         * 開啟修改方案 Modal
         * @param {jQuery.Event} event
         */
        showEditModal(event) {
            event.preventDefault();
            const btn = $(event.currentTarget).closest('button[behavior=edit]');
            const rowData = this.findRowDataById(btn.data('id'));
            if (!rowData) {
                return;
            }

            $('#edit-id').val(rowData.id);
            $('#edit-code').val(rowData.code).attr('data-original', rowData.code);
            $('#edit-name').val(rowData.name).attr('data-original', rowData.name);
            $('#edit-price').val(rowData.price).attr('data-original', rowData.price);

            const modal = $('#editSellItemModal');
            modal.removeAttr('style');
            modal.modal('show');
        }

        // 重置 Modal 輸入框
        resetModalInputs(modal) {
            modal.removeAttr('style');
            modal.find('input').each(function() {
                $(this).val('').removeClass('is-invalid');
            });
        }

        // 新增方案
        async storeSellItem() {
            const formData = this.getCreateFormData();

            if (!this.validateCreateForm()) {
                return false;
            }

            try {
                const storeUrl = this.config?.routes?.store;
                if (!storeUrl) {
                    return;
                }

                const response = await window.FETCH_PACK.post(storeUrl, formData);
                this.handleResponse(response, '#storeSellItemModal');
            } catch (error) {
                console.error('Store sell item error:', error);
            }
        }

        // 更新方案
        async updateSellItem() {
            const formData = this.getUpdateFormData();

            if (!this.validateUpdateForm()) {
                return false;
            }

            if (this.isDataUnchanged(formData)) {
                $('#editSellItemModal').modal('hide');
                successMessage('修改成功');
                return;
            }

            try {
                const updateUrlTemplate = this.config?.routes?.update;
                if (!updateUrlTemplate) {
                    console.error('Update route not found in config');
                    return;
                }

                const url = updateUrlTemplate.replace(':id', formData.id);
                const response = await window.FETCH_PACK.put(url, formData);
                this.handleResponse(response, '#editSellItemModal');
            } catch (error) {
                console.error('Update sell item error:', error);
            }
        }

        // 取得新增表單資料
        getCreateFormData() {
            const name = $('#name').val().trim();
            const code = $('#code').val().trim();
            const price = $('#price').val().trim();
            const type = @json($data['itemType']);
            return { name, code, price, type };
        }

        // 取得更新表單資料
        getUpdateFormData() {
            const name = $('#edit-name').val().trim();
            const price = $('#edit-price').val().trim();
            return {
                id: $('#edit-id').val().trim(),
                name,
                price,
                originalName: $('#edit-name').attr('data-original'),
                originalPrice: $('#edit-price').attr('data-original'),
            };
        }

        validateCreateForm() {
            const result = window.ValidationUtils.validateForm('#storeSellItemModal form', this.config.validationRules.sellItem);
            return result.isValid;
        }

        validateUpdateForm() {
            const result = window.ValidationUtils.validateForm('#editSellItemModal form', this.config.validationRules.sellItem);
            return result.isValid;
        }

        // 檢查資料是否未變更
        isDataUnchanged(formData) {
            return formData.name === formData.originalName &&
                formData.price === formData.originalPrice;
        }

        // 處理回應
        handleResponse(response, modalSelector) {
            if (response.retCode == 1) {
                errorMessage(response.retMsg);
                return;
            }

            this.reloadPlanList();
            $(modalSelector).modal('hide');
            successMessage(response.retMsg);
        }
    }

    $(document).ready(function() {
        // 在初始化時傳入配置
        const appConfig = {
            routes: {
                planList: @json(route('sellItem.planList')),
                store: @json(route('sellItem.store')),
                update: @json(route('sellItem.update', ':id')),
                destroy: @json(route('sellItem.destroy', ':id')),
            },
            permissions: {
                canEdit: @json(auth()->user()->can('sellItem.edit')),
                canDestroy: @json(auth()->user()->can('sellItem.destroy'))
            },
            csrf_token: @json(csrf_token()),
            validationRules: {
                billingSettings: {
                    'charging_wash_discount_enable': [
                        'required',
                        { type: 'number', min: 0, max: 1, integer: true }
                    ],
                    'wash_discount_required_kwh': [
                        'required',
                        { type: 'number', min: 1, integer: true }
                    ],
                    'wash_discount_amount': [
                        'required',
                        { type: 'number', min: 1, integer: true }
                    ],
                    'wash_discount_duration_hours': [
                        'required',
                        { type: 'number', min: 1, integer: true }
                    ]
                },
                sellItem: {
                    'name': [
                        'required',
                        { type: 'string', max: 255 }
                    ],
                    'code': [
                        'required',
                        { type: 'string', min: 1, max: 25 }
                    ],
                    'price': [
                        'required',
                        { type: 'number', min: 0 }
                    ]
                }
            }
        };

        // 初始化頁面管理器，直接傳入配置
        new WashBillingSettingManager(appConfig);
    });

</script>
@endsection