246 lines
13 KiB
PHP
246 lines
13 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Quản lý kênh Zalo')
|
|
|
|
@section('content')
|
|
<div class="row">
|
|
<!-- Form thêm kênh thủ công -->
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="card-title mb-0 fs-6"><i class="bi bi-plus-circle me-1"></i> Thêm kênh thủ công</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form action="{{ route('zalo_channels.store') }}" method="POST">
|
|
@csrf
|
|
<div class="mb-3">
|
|
<label class="form-label font-weight-bold">Zalo Thread ID (ID Nhóm / ID Cá nhân)</label>
|
|
<input type="text" name="thread_id" class="form-control" placeholder="e.g. 7680455978439532859" required>
|
|
<small class="text-muted">Nhập ID cuộc trò chuyện lấy từ trang Lịch sử.</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label font-weight-bold">Tên Kênh gợi nhớ</label>
|
|
<input type="text" name="name" class="form-control" placeholder="e.g. Nhóm Săn Deal Shopee">
|
|
<small class="text-muted">Đặt tên bất kỳ để bạn dễ phân biệt kênh nào với kênh nào.</small>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100 font-weight-bold"><i class="bi bi-save me-1"></i> Lưu kênh</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm border-info">
|
|
<div class="card-body">
|
|
<h6 class="text-info font-weight-bold"><i class="bi bi-info-circle-fill me-1"></i> Cách hoạt động:</h6>
|
|
<ul class="small mb-0 text-muted ps-3">
|
|
<li class="mb-1"><strong>Chỉ chạy trên Whitelist:</strong> Bot sẽ <strong>CHỈ</strong> phản hồi những cuộc trò chuyện (nhóm hoặc cá nhân) đã được thêm vào danh sách bên cạnh và ở trạng thái <strong>"Hoạt động"</strong>.</li>
|
|
<li><strong>Nếu danh sách trống hoặc bị chặn:</strong> Bot sẽ <strong>KHÔNG phản hồi</strong> bất kỳ tin nhắn nào để đảm bảo an toàn, tránh spam nhóm lạ.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Danh sách các kênh đã lưu -->
|
|
<div class="col-md-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0 fs-6"><i class="bi bi-list-stars me-1"></i> Danh sách kênh được phép chạy Bot</h5>
|
|
<button type="button" id="btn-bulk-delete" class="btn btn-danger btn-sm fw-bold shadow-sm d-none" onclick="submitBulkDelete()">
|
|
<i class="bi bi-trash-fill"></i> Xóa mục đã chọn (<span id="selected-count">0</span>)
|
|
</button>
|
|
</div>
|
|
<div class="card-body table-responsive p-0">
|
|
<table class="table table-hover align-middle text-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 40px;" class="px-3">
|
|
<input type="checkbox" id="select-all" class="form-check-input">
|
|
</th>
|
|
<th>Tên Kênh</th>
|
|
<th>Thread ID</th>
|
|
<th>Trạng thái</th>
|
|
<th>Ngày thêm</th>
|
|
<th class="text-end px-3">Hành động</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($channels as $channel)
|
|
<tr>
|
|
<td class="px-3">
|
|
<input type="checkbox" value="{{ $channel->id }}" class="form-check-input channel-checkbox">
|
|
</td>
|
|
<td class="fw-bold text-primary">
|
|
<i class="bi bi-chat-dots-fill me-1"></i> {{ $channel->name }}
|
|
</td>
|
|
<td><code>{{ $channel->thread_id }}</code></td>
|
|
<td>
|
|
@if($channel->is_allowed)
|
|
<span class="badge text-bg-success"><i class="bi bi-check-circle me-1"></i> Hoạt động</span>
|
|
@else
|
|
<span class="badge text-bg-danger"><i class="bi bi-slash-circle me-1"></i> Đang chặn</span>
|
|
@endif
|
|
</td>
|
|
<td>{{ $channel->created_at->format('H:i d/m/Y') }}</td>
|
|
<td class="text-end px-3">
|
|
<!-- Toggle block/allow -->
|
|
<form action="{{ route('zalo_channels.toggle', $channel->id) }}" method="POST" class="d-inline">
|
|
@csrf
|
|
@if($channel->is_allowed)
|
|
<button type="submit" class="btn btn-outline-warning btn-sm py-1 px-2 border-0" title="Chặn kênh này">
|
|
<i class="bi bi-pause-fill"></i> Tạm dừng
|
|
</button>
|
|
@else
|
|
<button type="submit" class="btn btn-outline-success btn-sm py-1 px-2 border-0" title="Cho phép kênh này">
|
|
<i class="bi bi-play-fill"></i> Kích hoạt
|
|
</button>
|
|
@endif
|
|
</form>
|
|
|
|
<!-- Delete -->
|
|
<form action="{{ route('zalo_channels.destroy', $channel->id) }}" method="POST" onsubmit="return confirm('Bạn có chắc muốn xóa kênh này?')" class="d-inline">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-outline-danger btn-sm py-1 px-2 border-0" title="Xóa bỏ">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="text-center py-4 text-muted">Chưa cấu hình giới hạn kênh nào. Bot sẽ KHÔNG phản hồi trên nhóm chat nào!</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@if($channels->hasPages())
|
|
<div class="card-footer clearfix bg-light">
|
|
{{ $channels->appends(['groups_page' => $discoveredGroups->currentPage()])->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Nhóm Zalo đã tham gia (Chưa kích hoạt) -->
|
|
<div class="card shadow-sm mt-4">
|
|
<div class="card-header bg-light">
|
|
<h5 class="card-title mb-0 fs-6"><i class="bi bi-compass me-1"></i> Khám phá nhóm Zalo đã tham gia (Chưa kích hoạt)</h5>
|
|
</div>
|
|
<div class="card-body table-responsive p-0">
|
|
<table class="table table-hover align-middle text-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th>Tên nhóm</th>
|
|
<th>Thread ID</th>
|
|
<th class="text-end px-3">Hành động</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($discoveredGroups as $group)
|
|
<tr>
|
|
<td class="fw-bold text-secondary">
|
|
<i class="bi bi-chat-left-dots me-1"></i> {{ $group->name }}
|
|
</td>
|
|
<td><code>{{ $group->group_id }}</code></td>
|
|
<td class="text-end px-3">
|
|
<form action="{{ route('zalo_channels.quick_toggle') }}" method="POST" class="d-inline">
|
|
@csrf
|
|
<input type="hidden" name="thread_id" value="{{ $group->group_id }}">
|
|
<input type="hidden" name="name" value="{{ $group->name }}">
|
|
<button type="submit" class="btn btn-sm btn-success px-3 fw-bold text-white shadow-sm">
|
|
<i class="bi bi-plus-lg me-1"></i> Cho phép chạy Bot
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="3" class="text-center py-4 text-muted">
|
|
Không có nhóm chưa kích hoạt nào. Bot sẽ tự động quét danh sách khi bạn kết nối Zalo.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@if($discoveredGroups->hasPages())
|
|
<div class="card-footer clearfix bg-light">
|
|
{{ $discoveredGroups->appends(['channels_page' => $channels->currentPage()])->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden Form for Bulk Delete -->
|
|
<form id="bulk-delete-form" action="{{ route('zalo_channels.bulk_destroy') }}" method="POST" class="d-none">
|
|
@csrf
|
|
@method('DELETE')
|
|
<div id="bulk-delete-inputs"></div>
|
|
</form>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const selectAllCheckbox = document.getElementById('select-all');
|
|
const channelCheckboxes = document.querySelectorAll('.channel-checkbox');
|
|
const btnBulkDelete = document.getElementById('btn-bulk-delete');
|
|
const selectedCountText = document.getElementById('selected-count');
|
|
|
|
if (selectAllCheckbox) {
|
|
selectAllCheckbox.addEventListener('change', function () {
|
|
channelCheckboxes.forEach(cb => {
|
|
cb.checked = this.checked;
|
|
});
|
|
updateBulkDeleteButton();
|
|
});
|
|
}
|
|
|
|
channelCheckboxes.forEach(cb => {
|
|
cb.addEventListener('change', function () {
|
|
if (!this.checked && selectAllCheckbox) {
|
|
selectAllCheckbox.checked = false;
|
|
} else if (Array.from(channelCheckboxes).every(c => c.checked) && selectAllCheckbox) {
|
|
selectAllCheckbox.checked = true;
|
|
}
|
|
updateBulkDeleteButton();
|
|
});
|
|
});
|
|
|
|
function updateBulkDeleteButton() {
|
|
const checkedBoxes = document.querySelectorAll('.channel-checkbox:checked');
|
|
const count = checkedBoxes.length;
|
|
|
|
if (count > 0) {
|
|
btnBulkDelete.classList.remove('d-none');
|
|
selectedCountText.textContent = count;
|
|
} else {
|
|
btnBulkDelete.classList.add('d-none');
|
|
selectedCountText.textContent = '0';
|
|
}
|
|
}
|
|
});
|
|
|
|
function submitBulkDelete() {
|
|
const checkedBoxes = document.querySelectorAll('.channel-checkbox:checked');
|
|
if (checkedBoxes.length === 0) return;
|
|
|
|
if (confirm(`Bạn có chắc chắn muốn xóa ${checkedBoxes.length} kênh Zalo đã chọn khỏi danh sách cho phép chạy Bot?`)) {
|
|
const inputsContainer = document.getElementById('bulk-delete-inputs');
|
|
inputsContainer.innerHTML = '';
|
|
|
|
checkedBoxes.forEach(cb => {
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'ids[]';
|
|
input.value = cb.value;
|
|
inputsContainer.appendChild(input);
|
|
});
|
|
|
|
document.getElementById('bulk-delete-form').submit();
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|
|
|
|
@endsection
|