Files
quayso.sisvietnam.vn/resources/views/frontend/game/customprize_popup.blade.php
T

133 lines
4.6 KiB
PHP

@if (Auth::check())
<div class="modal fade default_background" id="customPrizeModal" tabindex="-1" aria-labelledby="customPrizeModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- <h5 class="modal-title" id="customPrizeModalLabel">Cập nhật giải thưởng</h5> -->
<button type="button" class="btn btn-primary btn-close" data-bs-dismiss="modal" aria-label="Đóng">X</button>
</div>
<div class="modal-body" id="customPrize">
<div class="container custom_list">
<div class="input-group">
<input type="text" id="newItem" placeholder="Thêm công việc mới">
<button id="addButton">Thêm</button>
</div>
<ul id="taskList">
@foreach ($game_data as $game_item)
<li>
<span>{{ $game_item['label'] ?? '' }}</span>
<button class="delete-btn">Xóa</button>
</li>
@endforeach
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
<button type="button" class="btn btn-primary" id="saveData">Lưu thay đổi</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const newItemInput = document.getElementById('newItem');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');
const sendDataButton = document.getElementById('saveData'); // Tạo nút gửi dữ liệu
function addItem() {
const newItemText = newItemInput.value.trim();
const currentPrizeCount = taskList.querySelectorAll('li').length; // Đếm số lượng giải thưởng hiện tại
if (newItemText !== '') {
if (currentPrizeCount < 6) { // Kiểm tra nếu chưa đạt đến giới hạn
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>${newItemText}</span>
<button class="delete-btn">Xóa</button>
`;
taskList.appendChild(listItem);
newItemInput.value = '';
const deleteButton = listItem.querySelector('.delete-btn');
deleteButton.addEventListener('click', removeItem);
} else {
alert('Bạn chỉ có thể thêm tối đa 6 giải thưởng.'); // Thông báo khi vượt quá giới hạn
}
}
}
function removeItem(event) {
const listItem = event.target.parentNode;
taskList.removeChild(listItem);
}
function sendTaskListToServer() {
const prizeItems = taskList.querySelectorAll('li span');
const prizeArray = [];
prizeItems.forEach(span => {
prizeArray.push(span.textContent.trim());
});
if (prizeArray.length > 0) {
fetch('updateprize', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
},
body: JSON.stringify({ prizes: prizeArray })
})
.then(response => response.json())
.then(data => {
alert('Cập nhật thành công');
window.location.reload();
})
.catch(error => {
console.error('Lỗi AJAX:', error);
});
} else {
alert('Danh sách công việc đang trống.');
}
}
addButton.addEventListener('click', addItem);
newItemInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
addItem();
}
});
taskList.addEventListener('click', function (event) {
if (event.target.classList.contains('delete-btn')) {
removeItem(event);
}
});
sendDataButton.addEventListener('click', sendTaskListToServer);
});
</script>
@else
<div class="modal fade default_background" id="customPrizeModal" tabindex="-1" aria-labelledby="customPrizeModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- <h5 class="modal-title" id="customPrizeModalLabel">Cập nhật giải thưởng</h5> -->
<button type="button" class="btn btn-primary btn-close" data-bs-dismiss="modal" aria-label="Đóng">X</button>
</div>
<div class="modal-body" id="customPrize">
<div class="alert alert-danger font-weight-normal">
Vui lòng <a class="custom_btn login_btn" href="{{ route('login') }}">Đăng nhập</a>
để xem nội dung này
</div>
</div>
</div>
</div>
</div>
@endif