{{-- SCR-05 他社webhook 管理 (task #33865) — màn WRITE khu vực 売上データ (System Admin).
     UI ghép component lme-ui (L16). Bảng 件数/乗り換え先(webhook)/管理名/編集 + modal「Webhook情報 編集」. --}}
@extends('layout.admin_v2.main')

@section('title')
    他社webhook 管理
@endsection

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/icon/icon.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/input/input.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/table/table.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/modal/modal.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/tooltip/tooltip.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/toast/toast.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/admin/revenue/webhook_management.css?v={{config('sns-line.version')}}">
    <style>
        .lme-table thead th {
            background-color: #f7f7f7 !important;
        }
        .lme-table-th-sortable:hover {
            background-color: #EDEDEE !important;
        }
        label:after {
            display: none !important;
        }
    </style>
@endpush

@section('content')
    <div id="webhook-management" v-cloak>
        <div class="whm">
            <h1 class="whm__title">他社webhook 管理</h1>

            <div class="whm__card">
                <lme-table
                        ref="competitorTable"
                        :columns="columns"
                        :data-source="rows"
                        row-key="id"
                        :selectable="false"
                        :loading="isLoading"
                        @sort-change="onSortChange">
                    {{-- 件数 --}}
                    <template slot="cell-count" slot-scope="slotProps">
                        <span class="whm__count">@{{ formatCount(slotProps.record.count) }}</span>
                    </template>

                    {{-- 乗り換え先(webhook) --}}
                    <template slot="cell-webhook_url" slot-scope="slotProps">
                        <span class="whm__url">@{{ slotProps.record.webhook_url }}</span>
                    </template>

                    {{-- 管理名 --}}
                    <template slot="cell-management_name" slot-scope="slotProps">
                        <span class="whm__name" :class="{ 'whm__name--empty': !slotProps.record.management_name }">
                            @{{ slotProps.record.management_name ? slotProps.record.management_name : '-' }}
                        </span>
                    </template>

                    {{-- 編集 --}}
                    <template slot="cell-actions" slot-scope="slotProps">
                        <div class="whm__action">
                            <lme-button-default type="secondary" size="sm" @click="openEditModal(slotProps.record)">編集</lme-button-default>
                        </div>
                    </template>
                </lme-table>
            </div>
        </div>

        {{-- Modal「Webhook情報 編集」--}}
        <lme-modal v-model="isModalOpen" :header="false" :width="600" @close="closeEditModal">
            <div class="whm-modal">
                <div class="whm-modal__header">
                    <span class="whm-modal__title">Webhook情報 編集</span>
                    <span class="whm-modal__close" @click="closeEditModal">
                        <lme-icon file_name="close-outlined"></lme-icon>
                    </span>
                </div>

                {{-- URL webhook read-only --}}
                <div class="whm-modal__url">@{{ selectedWebhook ? selectedWebhook.webhook_url : '' }}</div>

                {{-- 管理名 — giới hạn 50 ký tự (BR-32) bằng prop max-count của lme-input:
                     component tự chặn nhập từ ký tự thứ 51 và render sẵn counter x/50.
                     KHÔNG dùng maxlength: lme-input không khai báo prop này nên attribute rơi
                     xuống thẻ bọc ngoài, ô <input> thật không bị giới hạn. --}}
                <div class="whm-modal__field">
                    <label class="whm-modal__label">管理名</label>
                    <lme-input
                            v-model="modalForm.managementName"
                            placeholder="管理名を入力して下さい"
                            width="100%"
                            style="width: 100%"
                            :max-count="50"
                            :error-message="formErrors.managementName">
                    </lme-input>
                </div>

                {{-- サービスURL --}}
                <div class="whm-modal__field">
                    <label class="whm-modal__label">サービスURL</label>
                    <lme-input
                            v-model="modalForm.serviceUrl"
                            placeholder="https://example.com"
                            width="100%"
                            style="width: 100%"
                            :error-message="formErrors.serviceUrl">
                    </lme-input>
                </div>

                <div class="whm-modal__footer">
                    <lme-button-default type="primary" :loading="isSaving" :disabled="isSaving" @click="save">保存</lme-button-default>
                </div>
            </div>
        </lme-modal>
    </div>
@endsection

@push('script')
    <script src="/js/vue2.6.12/vue.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/icon/lme-icon.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/tooltip/lme-tooltip.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-default.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/input/lme-input.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/table/lme-table.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/modal/lme-modal.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/toast/lme-toast.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/admin/revenue/webhook_management.js?v={{config('sns-line.version')}}"></script>
@endpush