@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">
                {!! $thirdLevelTabsHtml !!}
            </div>
            <div class="card-body">
                <div class="tab-content" id="thirdLevel-tabContent">
                    <div class="tab-pane fade show active" id="" role="tabpanel">
                        <div class="col-12">
                            <table id="datatableList" class="table table-bordered table-striped table-hover text-nowrap">
                                <thead>
                                <tr>
                                    <th class="unsortable">設備名稱(編號)</th>
                                    <th class="unsortable">洗車機IP</th>
                                    @can('washMachine.edit')
                                        <th class="unsortable">修改</th>
                                    @endcan
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@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>
    class WashMachineManager {
        constructor(config) {
            this.config = config; // 直接接收配置參數
            this.table = null;
            this.init();
        }

        init() {
            this.initValidation();
            this.initDataTable();
            this.initEventListeners();
        }

        // 初始化驗證規則
        initValidation() {
            // 初始化Bootstrap驗證
            window.ValidationUtils.initBootstrapValidation('body');
            // input mask
            $('#code').inputmask('alphaNumUnderscore');
        }

        // 初始化 DataTable
        initDataTable() {
            const url = this.config?.routes?.datatableList;
            if (!url) {
                console.error('UnfencedSettingManager: datatableList route not found in config');
                return;
            }

            const columns = this.buildTableColumns();
            this.table = createDatatable('datatableList', url, columns, [], 0);
        }

        // 建立表格欄位配置
        buildTableColumns() {
            let columns = [];
            const permissions = this.config?.permissions || {};

            columns.push(
                {data: 'name', name: 'name'},
                {data: 'machine_ip', name: 'machine_ip', className: 'text-center machine-ip'},
            );
            if (permissions.canEdit) {
                columns.push({data: 'edit', name: 'edit'});
            }

            return columns;
        }

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

            // 修改按鈕
            $('#datatableList').on('click', 'button[behavior=edit]', (event) => {
                this.toggleEdit(event);
            });
            // 儲存按鈕
            $('#datatableList').on('click', 'button[behavior=save]', (event) => {
                this.saveEdit(event);
            });

        }

        // 切換修改
        toggleEdit(event) {
            event.preventDefault();
            const row = $(event.target).closest('tr');
            const rowData = this.table.row(row).data();
            if (rowData.machine_ip == '未設定') {
                rowData.machine_ip = '';
            }
            row.find('.machine-ip').html(`<input type="text" class="form-control" name="machine_ip" value="${rowData.machine_ip}">`);
            $('input[name="machine_ip"]').inputmask('ip');
            const $btn = $(event.target).closest('button');
            $btn.attr('behavior', 'save');
            $btn.html('<i class="fas fa-save"></i> 儲存');
        }

        // 儲存修改
        saveEdit(event) {
            event.preventDefault();
            const row = $(event.target).closest('tr');
            const rowData = this.table.row(row).data();
            rowData.machine_ip = row.find('input[name="machine_ip"]').val();
            const $btn = $(event.target).closest('button');
            $btn.attr('behavior', 'edit');
            $btn.html('<i class="fas fa-edit"></i> 修改');

            this.updateWashMachine(rowData);
        }

        // 更新方案
        async updateWashMachine(rowData) {
            console.log(rowData);
            const formData = this.getUpdateFormData(rowData);

            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);
            } catch (error) {
                console.error('Update sell item error:', error);
            }
        }

        // 取得更新表單資料
        getUpdateFormData(rowData) {
            return {
                id: rowData.id,
                machine_ip: rowData.machine_ip
            };
        }

        // 處理回應
        handleResponse(response, modalSelector) {
            this.table.ajax.reload(null, false);
            if (response.retCode == 1) {
                errorMessage(response.retMsg);
                return;
            }

            successMessage(response.retMsg);
        }
    }

    $(document).ready(function() {
        // 在初始化時傳入配置
        const appConfig = {
            routes: {
                datatableList: @json(route('washMachine.datatableList')),
                update: @json(route('washMachine.update', ':id')),
            },
            permissions: {
                canEdit: @json(auth()->user()->can('washMachine.edit')),
            },
            csrf_token: @json(csrf_token()),
            validationRules: {
                washMachine: {
                    'machine_ip': [
                        'required'
                    ],
                }
            }
        };

        // 初始化頁面管理器，直接傳入配置
        new WashMachineManager(appConfig);
    })
</script>
@endsection