@extends('backendTools.layouts.backend')

@section('title', 'LINE 解除綁定')

@section('header')
    <i class="bi bi-unlock me-2"></i>LINE 解除綁定
@endsection

@section('content')
    <form method="GET" id="unbindForm" onsubmit="return confirmSubmit(event);">
        <!-- token 放這邊一起送出 POST-->
        <input type="hidden" name="token" value="{{ request('token') ?? '' }}">
        @csrf {{-- 如果是 Laravel 表單要記得csrf --}}
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5 col-xl-4">
                <div class="card shadow-sm mt-4">
                    <div class="card-header fw-bold">
                        <i class="bi bi-unlock me-2"></i>
                        解除綁定
                    </div>
                    <div class="card-body p-4">
                        {{-- alert 區塊 --}}
                        @if (!is_null($data['success'] ?? null))
                            @if ($data['success'])
                                <div class="alert alert-success d-flex align-items-center" role="alert">
                                    <i class="bi bi-check-circle-fill me-2"></i>
                                    <div>{{ $data['data'] ?? '解除綁定成功！' }}</div>
                                </div>
                            @else
                                <div class="alert alert-danger d-flex align-items-center" role="alert">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                    <div>{{ $data['data'] ?? '解除綁定失敗，請稍後再試。' }}</div>
                                </div>
                            @endif
                        @else
                            <div class="alert alert-info d-flex align-items-center" role="alert">
                                <i class="bi bi-info-circle-fill me-2"></i>
                                <div>請選擇Type與Uid</div>
                            </div>
                        @endif

                        <div class="form-floating mb-3">
                            {{-- role type --}}
                            <select class="form-select" id="role_type" name="role_type" required>
                                <option value="" selected disabled>請選擇 role type OR Bind ID</option>
                                <option value="" disabled>會員</option>

                                <option value="member" {{ old('role_type') == 'member' ? 'selected' : '' }}>Member by UID
                                </option>
                                <option value="bind_id_member" {{ old('role_type') == 'bind_id_member' ? 'selected' : '' }}>
                                    Member by Bind ID
                                </option>
                                <option value="" disabled>代理</option>
                                <option value="cagent" {{ old('role_type') == 'cagent' ? 'selected' : '' }}>Cagent by UID
                                </option>
                                <option value="bind_id_cagent" {{ old('role_type') == 'bind_id_cagent' ? 'selected' : '' }}>
                                    Cagent by Bind ID
                                </option>
                            </select>
                            <label for="role_type">Type</label>
                        </div>
                        {{-- uid --}}
                        <div class="form-floating mb-4">
                            <input type="text" name="info_uid" id="member_info_uid" class="form-control" required
                                placeholder="UID" value="{{ old('info_uid') }}">
                            <label for="member_info_uid">UID Or Bind ID</label>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg w-100 fw-bold">
                                <i class="bi bi-shield-check me-2"></i>
                                解除綁定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-5 col-xl-4">
                <div class="card shadow-sm mt-4">
                    <div class="card-header fw-bold d-flex justify-content-between align-items-center">
                        <span>
                            <i class="bi bi-view-list me-2"></i>
                            會員 - 重複綁定清單
                        </span>
                        <a class="btn btn-sm btn-secondary" data-bs-toggle="collapse" href="#collapseFilter" role="button"
                            aria-expanded="false" aria-controls="collapseFilter">
                            <i class="bi bi-search me-1"></i> 查詢
                        </a>
                    </div>
                    <div class="collapse" id="collapseFilter">
                        <div class="card-body bg-light">
                            <div class="row g-2">
                                <div class="col-md">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="filterMemId" placeholder="memId">
                                        <label for="filterMemId">memId</label>
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="filterBindId" placeholder="Bind ID">
                                        <label for="filterBindId">Bind ID</label>
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="filterUid" placeholder="UID">
                                        <label for="filterUid">UID</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body" style="max-height: 450px; overflow-y: auto;">
                        <ul class="list-group list-group-flush" id="duplicate-list">
                            @foreach ($data['bind_over'] as $bindId => $items)
                                <li class="list-group-item" data-bind-id="{{ $bindId }}">
                                    <a data-bs-toggle="collapse" href="#collapse_{{ $loop->index }}" role="button"
                                        aria-expanded="false" aria-controls="collapse_{{ $loop->index }}"
                                        class="fw-bold text-decoration-none d-flex justify-content-between align-items-center">
                                        <span>
                                            <i class="bi bi-link-45deg me-1"></i>
                                            Bind ID: <span id="bind-id-{{ $loop->index }}">{{ $bindId }}</span>
                                            <span class="badge bg-secondary ms-1">共 {{ count($items) }} 筆</span>
                                        </span>
                                        <i class="bi bi-clipboard-check-fill text-primary fs-5" style="cursor: pointer;"
                                            onclick="copyToClipboard('{{ $bindId }}', event)"
                                            title="點我複製 Bind ID"></i>
                                    </a>
                                    <div class="collapse mt-2" id="collapse_{{ $loop->index }}">
                                        <ul class="list-group">
                                            @foreach ($items as $item)
                                                <li
                                                    class="list-group-item d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <i class="bi bi-person-badge me-1"></i>
                                                        UID: <span
                                                            data-uid="{{ $item['member_info_uid'] }}">{{ $item['member_info_uid'] }}</span>
                                                        | memId: <span
                                                            data-mem-id="{{ $item['memId'] }}">{{ $item['memId'] }}</span>
                                                        | 狀態:
                                                        @if ($item['status'] == 1)
                                                            <span class="badge bg-success">啟用</span>
                                                        @else
                                                            <span class="badge bg-danger">停用</span>
                                                        @endif
                                                    </div>
                                                    <i class="bi bi-clipboard-check-fill text-primary fs-5"
                                                        style="cursor: pointer;"
                                                        onclick="copyToClipboard('{{ $item['member_info_uid'] }}', event)"
                                                        title="點我複製 UID"></i>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('footer')
    <form method="GET" id="languageForm" action="{{ route('backend-tools.line-unbind') }}">
        <input type="hidden" name="token" value="{{ request('token') ?? '' }}">
        <select name="locale" class="form-select form-select-sm w-auto"
            onchange="document.getElementById('languageForm').submit();">
            <option value="en" {{ app()->getLocale() == 'en' ? 'selected' : '' }}>English</option>
            <option value="zh-TW" {{ app()->getLocale() == 'zh-TW' ? 'selected' : '' }}>繁體中文</option>
        </select>
    </form>
@endsection

@push('scripts')
    <script>
        // 確認是否要解除
        async function confirmSubmit(e) {
            e.preventDefault(); // 擋住送出

            const uid = document.getElementById('member_info_uid').value.trim();
            const roleType = document.getElementById('role_type').value.trim();

            if (!uid || !roleType) {
                Swal.fire({
                    icon: 'warning',
                    title: '{{ trans('messages.required_fields_missing') }}',
                    text: '請輸入 UID 和 Type。',
                });
                return false;
            }

            Swal.fire({
                title: '解除 line 綁定',
                html: `要解除 <b>${roleType}</b> UID「<b>${uid}</b>」ㄉ LINE 綁定嗎？`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: '解除綁定',
                cancelButtonText: '取消',
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('unbindForm').submit();
                }
            });

            return false; // 最後還是要 return false，保險！
        }

        // 複製
        function copyToClipboard(text, event) {
            event.preventDefault();
            event.stopPropagation(); // 停止事件冒泡，不然點擊複製會開合

            navigator.clipboard.writeText(text).then(() => {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                })
                Toast.fire({
                    icon: 'success',
                    title: `「${text}」已複製`
                })
            }).catch(err => {
                console.error('無法複製: ', err);
                Swal.fire({
                    icon: 'error',
                    title: '複製失敗',
                    text: '無法複製到剪貼簿。',
                });
            });
        }

        // 篩選重複綁定清單
        document.addEventListener('DOMContentLoaded', function() {
            const filterMemId = document.getElementById('filterMemId');
            const filterBindId = document.getElementById('filterBindId');
            const filterUid = document.getElementById('filterUid');
            const list = document.getElementById('duplicate-list');
            const listItems = list.querySelectorAll('.list-group-item[data-bind-id]');

            function filterList() {
                const memIdValue = filterMemId.value.toLowerCase().trim();
                const bindIdValue = filterBindId.value.toLowerCase().trim();
                const uidValue = filterUid.value.toLowerCase().trim();

                listItems.forEach(item => {
                    const bindId = item.dataset.bindId.toLowerCase();
                    const uids = Array.from(item.querySelectorAll('[data-uid]')).map(el => el.dataset.uid
                        .toLowerCase());
                    const memIds = Array.from(item.querySelectorAll('[data-mem-id]')).map(el => el.dataset
                        .memId.toLowerCase());

                    const isBindIdMatch = bindIdValue && bindId.includes(bindIdValue);
                    const isUidMatch = uidValue && uids.some(uid => uid.includes(uidValue));
                    const isMemIdMatch = memIdValue && memIds.some(memId => memId.includes(memIdValue));

                    const noFilters = !memIdValue && !bindIdValue && !uidValue;

                    let shouldShow = noFilters || isBindIdMatch || isUidMatch || isMemIdMatch;

                    if (shouldShow) {
                        item.style.display = '';
                        const collapseElement = item.querySelector('.collapse');
                        if (collapseElement) {
                            const bsCollapse = new bootstrap.Collapse(collapseElement, {
                                toggle: false
                            });
                            if (!noFilters) {
                                bsCollapse.show();
                            } else {
                                bsCollapse.hide();
                            }
                        }
                    } else {
                        item.style.display = 'none';
                    }
                });
            }

            filterMemId.addEventListener('input', filterList);
            filterBindId.addEventListener('input', filterList);
            filterUid.addEventListener('input', filterList);
        });
    </script>
@endpush