@extends('layouts.main')

@section('pageTitle', '洗車計費設定')

@section('content')
<style>
    .form-check{display:inline;margin: 0 10px 0 0;}
    .enable{margin-right: 10px;}
</style>

<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">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label for="charging_wash_discount_enable">是否啟用充電洗車優惠功能：</label>
                            @foreach(config('webCommonData.enableDropdown') as $value => $name)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="charging_wash_discount_enable" value="{{ $value }}" id="charging_wash_discount_enable_{{ $value }}" @if($value == old('charging_wash_discount_enable', $data['charging_wash_discount_enable'])) checked @endif>
                                    <label class="form-check-label" for="charging_wash_discount_enable_{{ $value }}">{{ $name }}</label>
                                </div>
                            @endforeach
                            @error('charging_wash_discount_enable')
                                <span id="charging_wash_discount_enable-error" class="validateError">{{ $message }}</span>
                            @enderror
                            <div class="border rounded p-3" id="charging_wash_discount_div">
                                <div class="mb-2">充電<input name="wash_discount_required_kwh" class="mx-1 col-1" value="{{ old('wash_discount_required_kwh', $data['wash_discount_required_kwh']) }}" required>度，給予洗車優惠<input name="wash_discount_amount" class="mx-1 col-1" value="{{ old('wash_discount_amount', $data['wash_discount_amount']) }}" required>元</div>
                                <div>優惠期限為<input name="wash_discount_duration_hours" class="mx-1 col-1" value="{{ old('wash_discount_duration_hours', $data['wash_discount_duration_hours']) }}" required>小時 ※優惠期限自繳費時間起算</div>
                            </div>
                        </div>
                        @can('washBillingSetting.update')
                        <button type="submit" class="btn btn-info">修改</button>
                        @endcan
                    </form>
                    <hr>
                    <!-- 方案列表 -->
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body table-responsive p-3">
                                <table id="datatableList" class="table table-bordered table-striped table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        @can('sellItem.destroyBatch')
                                            <th class="unsortable"><input type="checkbox" id="checkAll"></th>
                                        @endcan
                                        <th class="unsortable">方案代碼</th>
                                        <th class="unsortable">方案名稱</th>
                                        <th class="unsortable">價格</th>
                                        @can('sellItem.edit')
                                            <th class="unsortable">修改</th>
                                        @endcan
                                        @can('sellItem.destroy')
                                            <th class="unsortable">刪除</th>
                                        @endcan
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    @can('sellItem.store')
                        <button type="button" class="btn btn-danger" id="createCameraBtn">新增方案</button>
                    @endcan
                    @can('sellItem.destroyBatch')
                        <span class="btn btn-danger" id="destroyBatchBtn">批次刪除</span>
                    @endcan
                </div>
            </div>
        </div>
        <!-- /.card -->
    </div>
</div>

@can('sellItem.store')
<!-- 新增方案 Modal -->
<div class="modal fade" id="storeSellItemModal" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新增方案</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="needs-validation" novalidate>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="code">方案代碼:</label>
                        <input type="text" class="form-control w-auto" id="code" required min="1" max="25">
                        <div class="invalid-feedback">請輸入方案代碼</div>
                    </div>
                    <div class="form-group">
                        <label for="address">方案名稱:</label>
                        <input type="text" class="form-control w-auto" id="name" required>
                        <div class="invalid-feedback">請輸入方案名稱</div>
                    </div>
                    <div class="form-group">
                        <label for="price">價格:</label>
                        <input type="text" class="form-control w-auto" id="price" required min="0">
                        <div class="invalid-feedback">請輸入價格</div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button id="storeSellItemBtn" type="button" class="btn btn-primary">新增</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan

@can('sellItem.edit')
<!-- 修改方案 Modal -->
<div class="modal fade" id="editSellItemModal" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改方案</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="needs-validation" novalidate>
                <div class="modal-body">
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label for="code">方案代碼:</label>
                        <input type="text" class="form-control w-auto" id="edit-code" disabled>
                    </div>
                    <div class="form-group">
                        <label for="edit-name">方案名稱:</label>
                        <input type="text" class="form-control w-auto" id="edit-name" required data-original="">
                        <div class="invalid-feedback">請輸入方案名稱</div>
                    </div>
                    <div class="form-group">
                        <label for="edit-price">價格:</label>
                        <input type="text" class="form-control w-auto" id="edit-price" required min="0" data-original="">
                        <div class="invalid-feedback">請輸入價格</div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button id="updateSellItemBtn" type="button" class="btn 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>
    class WashBillingSettingManager {
        constructor(config) {
            this.config = config; // 直接接收配置參數
            this.table = null;
            this.init();
        }

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

        // 初始化驗證規則
        initValidation() {
            // 設定系統設定表單的即時驗證
            window.ValidationUtils.setupRealtimeValidation('form', this.config.validationRules.billingSettings);
            // 初始化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 || {};

            if (permissions.canDestroyBatch) {
                columns.push({data: 'destroyBatch', name: 'destroyBatch'});
            }

            columns.push(
                {data: 'code', name: 'code'},
                {data: 'name', name: 'name'},
                {data: 'price', name: 'price'},
            );

            if (permissions.canEdit) {
                columns.push({data: 'edit', name: 'edit'});
            }
            if (permissions.canDestroy) {
                columns.push({data: 'delete', name: 'delete'});
            }

            return columns;
        }

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

            // 充電洗車優惠功能啟用時，顯示充電洗車優惠功能輸入框
            $(document).on('change', 'input[name="charging_wash_discount_enable"]', () => {
                this.chargingWashDiscountView();
            });

            // 刪除按鈕
            $(document).on('click', 'button[behavior=delete]', (event) => {
                const targetId = $(event.target).attr('targetId');
                const url = routes.destroy?.replace(':id', targetId);
                if (url && this.table) {
                    datatableDeleteAjax(this.table, url);
                }
            });

            // 批次刪除
            $('#destroyBatchBtn').on('click', () => {
                console.log(routes.destroyBatch);
                console.log(this.table);
                if (routes.destroyBatch && this.table) {
                    datatableDeleteBatchAjax(this.table, routes.destroyBatch);
                }
            });

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

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

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

        chargingWashDiscountView() {
            if ($('input[name="charging_wash_discount_enable"]:checked').val() == 1) {
                $('#charging_wash_discount_div').show();
                return;
            }
            $('#charging_wash_discount_div').hide();
            return;
        }

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

        // 顯示修改 Modal
        showEditModal(event) {
            event.preventDefault();
            const row = $(event.target).closest('tr');
            const rowData = this.table.row(row).data();
            console.log(rowData);

            $('#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(formData)) {
                return false;
            }

            try {
                const storeUrl = this.config?.routes?.store;
                console.log(storeUrl);
                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(formData)) {
                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: name,
                code: code,
                price: price,
                type: type,
            };
        }

        // 取得更新表單資料
        getUpdateFormData() {
            const name = $('#edit-name').val().trim();
            const price = $('#edit-price').val().trim();

            return {
                id: $('#edit-id').val().trim(),
                name: name,
                price: price,
                originalName: $('#edit-name').attr('data-original'),
                originalPrice: $('#edit-price').attr('data-original'),
            };
        }

            // 驗證新增表單
        validateCreateForm(formData) {
            const result = window.ValidationUtils.validateForm('#storeSellItemModal form', this.config.validationRules.sellItem);
            return result.isValid;
        }

        // 驗證更新表單
        validateUpdateForm(formData) {
            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.table.ajax.reload(null, false);
            $(modalSelector).modal('hide');
            successMessage(response.retMsg);
        }
    }

    $(document).ready(function() {
        // 在初始化時傳入配置
        const appConfig = {
            routes: {
                datatableList: @json(route('sellItem.datatableList')),
                store: @json(route('sellItem.store')),
                update: @json(route('sellItem.update', ':id')),
                destroy: @json(route('sellItem.destroy', ':id')),
                destroyBatch: @json(route('sellItem.destroyBatch')),
            },
            permissions: {
                canDestroyBatch: @json(auth()->user()->can('sellItem.destroyBatch')),
                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