Afiq Hamzah
363 lines
19 KiB
PHP
363 lines
19 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
|
|
<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
|
|
<main>
|
|
<div class="pt-6 px-4">
|
|
|
|
<breadcrumb :items="[{ 'title' : 'Unsold Commodity Notifications', 'icon' : 'fas fa-globe-asia' }]"></breadcrumb>
|
|
|
|
<div class="flex justify-center">
|
|
<div class="w-4/6 bg-white rounded-xl shadow-md overflow-hidden mb-5">
|
|
<div class="flex justify-left">
|
|
<div class="p-8 w-full">
|
|
<div>
|
|
<label for="message" class="block text-lg font-medium text-gray-700 mb-2">Notification Status</label>
|
|
<label for="toggle" class="flex items-center cursor-pointer">
|
|
<div class="mr-3 text-gray-700 font-medium">
|
|
OFF
|
|
</div>
|
|
<div class="relative">
|
|
<input type="checkbox" id="toggle" class="sr-only" name="status" {{ $settings['status'] === '1' ? 'checked' : ''}} />
|
|
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
|
|
<div class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition"></div>
|
|
</div>
|
|
<div class="ml-3 text-gray-700 font-medium">
|
|
ON
|
|
</div>
|
|
</label>
|
|
|
|
<div class="w-full flex pt-10">
|
|
<div class="w-1/2 pr-5">
|
|
<label for="start-time" class="block text-lg font-medium text-gray-700 mb-2">Start Time</label>
|
|
<input type="time" id="start-time" name="start-time" class="w-full p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white" value="{{ $settings['start_time'] ?? '' }}">
|
|
</div>
|
|
<div class="w-1/2">
|
|
<label for="end-time" class="block text-lg font-medium text-gray-700 mb-2">End Time</label>
|
|
<input type="time" id="end-time" name="end-time" class="w-full p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white" value="{{ $settings['end_time'] ?? '' }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full pt-10">
|
|
<label for="message" class="block text-lg font-medium text-gray-700 mb-2">Notification Message</label>
|
|
<textarea id="message" name="message" rows="6" class="w-full p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white resize-none">{{ $settings['message'] ?? '' }}</textarea>
|
|
</div>
|
|
|
|
|
|
<div id="person-in-charge-section" class="pt-3">
|
|
<label for="message" class="block text-lg font-medium text-gray-700 mb-2">Person In Charge</label>
|
|
<div id="tabs-1">
|
|
<table class="min-w-full leading-normal">
|
|
<thead class="text-center">
|
|
<tr>
|
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Hari
|
|
</th>
|
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
PIC
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($days as $day)
|
|
<tr>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<div class="flex items-center">
|
|
<div class="ml-3">
|
|
<p class="font-bold whitespace-no-wrap p-2 rounded-lg">{{ $day }}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<div class="select-container">
|
|
@php
|
|
$array = json_decode($settings['pic_' .strtolower($day)]);
|
|
@endphp
|
|
@foreach($array as $pic)
|
|
<div class="ml-3 flex mb-3">
|
|
<select name="pic_{{ strtolower($day) }}[]" class="select-staff-operasi form-select w-full block px-3 py-2 mt-1 text-base leading-6 text-gray-700 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm sm:leading-5" @php $pic_id=isset($pic->id) ? $pic->id : '';
|
|
@endphp
|
|
data-telefon-no-selected="{{ $operasi_users->where('id', $pic_id)->first()->no_telefon ?? '' }}"
|
|
>
|
|
<option value="">Select an option</option>
|
|
@foreach($operasi_users as $user)
|
|
<option value="{{ $user->id }}" {{ $user->id == $pic_id ? 'selected' : '' }} data-telefon-no="{{ $user->no_telefon }}">{{ $user->name }} - {{ $user->no_telefon }} </option>
|
|
@endforeach
|
|
</select>
|
|
@if($loop->index === 0)
|
|
<button class="add-pic-button flex items-center px-4 font-semibold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 ml-3">
|
|
+
|
|
</button>
|
|
@else
|
|
<button class="remove-pic-button flex items-center px-4 font-semibold text-white bg-red-500 rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 ml-3">
|
|
-
|
|
</button>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded update-notification-setting mt-5">Update Notification Settings</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
@include('layouts.footer')
|
|
@endsection
|
|
|
|
@push('additional_scripts')
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
|
|
const input_time = document.querySelectorAll('input[type="time"]');
|
|
|
|
input_time.forEach(input => input.addEventListener('click', function(){
|
|
this.showPicker();
|
|
}));
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
|
|
let button_update_notification_setting = document.querySelector('button.update-notification-setting');
|
|
|
|
function sendToApi(data) {
|
|
let api_url = "{{ $api_url }}";
|
|
|
|
return fetch(api_url + '/api/settings/unsold-commodity-notifications', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(response => {
|
|
console.log(response);
|
|
return response;
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
|
|
function handleClick(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
const status = document.querySelector('input[name="status"]');
|
|
const startTime = document.querySelector('input[name="start-time"]');
|
|
const endTime = document.querySelector('input[name="end-time"]');
|
|
const message = document.querySelector('textarea[name="message"]');
|
|
const pic_sunday = Array.from(document.querySelectorAll('select[name="pic_sunday[]"]'));
|
|
const pic_monday = Array.from(document.querySelectorAll('select[name="pic_monday[]"]'));
|
|
const pic_tuesday = Array.from(document.querySelectorAll('select[name="pic_tuesday[]"]'));
|
|
const pic_wednesday = Array.from(document.querySelectorAll('select[name="pic_wednesday[]"]'));
|
|
const pic_thursday = Array.from(document.querySelectorAll('select[name="pic_thursday[]"]'));
|
|
const pic_friday = Array.from(document.querySelectorAll('select[name="pic_friday[]"]'));
|
|
const pic_saturday = Array.from(document.querySelectorAll('select[name="pic_saturday[]"]'));
|
|
|
|
let extractUserId = function(pic_array) {
|
|
return pic_array.reduce((accumulator, nextItem) => {
|
|
|
|
let data_object = {
|
|
'id': nextItem.value,
|
|
'no_telefon': nextItem.dataset.telefonNoSelected,
|
|
};
|
|
|
|
|
|
if (data_object.id !== '') {
|
|
accumulator.push(data_object);
|
|
return accumulator;
|
|
}
|
|
|
|
return accumulator;
|
|
}, []);
|
|
};
|
|
|
|
|
|
let data = {
|
|
'status': status.checked,
|
|
'start_time': startTime.value,
|
|
'end_time': endTime.value,
|
|
'message': message.value,
|
|
'pic_sunday': extractUserId(pic_sunday),
|
|
'pic_monday': extractUserId(pic_monday),
|
|
'pic_tuesday': extractUserId(pic_tuesday),
|
|
'pic_wednesday': extractUserId(pic_wednesday),
|
|
'pic_thursday': extractUserId(pic_thursday),
|
|
'pic_friday': extractUserId(pic_friday),
|
|
'pic_saturday': extractUserId(pic_saturday),
|
|
};
|
|
|
|
if (status.checked) {
|
|
|
|
let checkEmpty = x => x.trim() === '';
|
|
|
|
let is_input_incomplete = [startTime.value, endTime.value, message.value].map(x => checkEmpty(x))
|
|
.some(x => x === true);
|
|
|
|
if (is_input_incomplete) {
|
|
alert('Anda telah pilih untuk buka notifikasi, sila isi maklumat di tempat yang disediakan');
|
|
return;
|
|
}
|
|
|
|
sendToApi(data).then(x => x === 'success' ? alert('Tetapan berjaya dikemaskin') : alert('Tetapan tidak berjaya dikemaskini'));
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
sendToApi(data).then(x => x === 'success' ? alert('Tetapan berjaya dikemaskin') : alert('Tetapan tidak berjaya dikemaskini'));
|
|
|
|
|
|
}
|
|
|
|
button_update_notification_setting.addEventListener('click', function(e) {
|
|
handleClick(e);
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const toggle = document.querySelector('#toggle');
|
|
const dot = document.querySelector('.dot');
|
|
|
|
// input
|
|
const startTimeInput = document.querySelector('input[name="start-time"]');
|
|
const endTimeInput = document.querySelector('input[name="end-time"]');
|
|
const messageInput = document.querySelector('textarea[name="message"]');
|
|
|
|
let disableInput = () => {
|
|
startTimeInput.disabled = true;
|
|
endTimeInput.disabled = true;
|
|
messageInput.disabled = true;
|
|
|
|
startTimeInput.value = '';
|
|
endTimeInput.value = '';
|
|
messageInput.value = '';
|
|
|
|
startTimeInput.classList.add('bg-gray-300');
|
|
endTimeInput.classList.add('bg-gray-300');
|
|
messageInput.classList.add('bg-gray-300');
|
|
};
|
|
|
|
let enableInput = () => {
|
|
startTimeInput.disabled = false;
|
|
endTimeInput.disabled = false;
|
|
messageInput.disabled = false;
|
|
|
|
startTimeInput.classList.remove('bg-gray-300');
|
|
endTimeInput.classList.remove('bg-gray-300');
|
|
messageInput.classList.remove('bg-gray-300');
|
|
};
|
|
|
|
let hidePICSection = () => {
|
|
let pic_section = document.getElementById('person-in-charge-section');
|
|
pic_section.classList.add('hidden');
|
|
|
|
}
|
|
|
|
let displayPICSection = () => {
|
|
let pic_section = document.getElementById('person-in-charge-section');
|
|
pic_section.classList.remove('hidden');
|
|
|
|
}
|
|
|
|
toggle.addEventListener('change', function() {
|
|
if (toggle.checked) {
|
|
dot.classList.add('transform', 'translate-x-full', 'bg-green-500');
|
|
dot.classList.remove('bg-white');
|
|
enableInput();
|
|
displayPICSection();
|
|
} else {
|
|
dot.classList.remove('transform', 'translate-x-full', 'bg-green-500');
|
|
dot.classList.add('bg-white');
|
|
disableInput();
|
|
hidePICSection();
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Get the element
|
|
const toggle = document.querySelector('#toggle');
|
|
|
|
// Function to trigger the change event
|
|
function triggerChangeEvent() {
|
|
// Create a new change event
|
|
const event = new Event('change', {
|
|
bubbles: true, // Event bubbles up through the DOM
|
|
cancelable: true // Event can be cancelled
|
|
});
|
|
|
|
// Dispatch the event on the input element
|
|
toggle.dispatchEvent(event);
|
|
}
|
|
|
|
// Call the function to trigger the change event
|
|
triggerChangeEvent();
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
let add_pic_buttons = document.querySelectorAll('button.add-pic-button');
|
|
let remove_pic_buttons = document.querySelectorAll('button.remove-pic-button');
|
|
|
|
let duplicateFields = function(element) {
|
|
let container = element.closest('div.select-container');
|
|
let select = element.parentNode.cloneNode(true);
|
|
select.classList.add('mt-2');
|
|
let button = select.querySelector('button');
|
|
button.classList.remove('bg-blue-500');
|
|
button.classList.remove('hover:bg-blue-700');
|
|
button.classList.add('bg-red-500');
|
|
button.classList.add('hover:bg-red-700');
|
|
button.classList.add('px-4');
|
|
button.classList.add('py-2');
|
|
button.addEventListener('click', x => x.target.parentNode.remove());
|
|
button.textContent = '-';
|
|
container.appendChild(select);
|
|
};
|
|
|
|
add_pic_buttons.forEach(function(x) {
|
|
x.addEventListener('click', y => duplicateFields(x))
|
|
});
|
|
|
|
remove_pic_buttons.forEach(function(x) {
|
|
x.addEventListener('click', y => x.parentNode.remove())
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
let select_staff_operasi = document.querySelectorAll('select.select-staff-operasi')
|
|
|
|
select_staff_operasi.forEach(x => {
|
|
x.addEventListener('input', function(select_element) {
|
|
const selectedOption = this.options[this.selectedIndex];
|
|
select_element.target.dataset.telefonNoSelected = selectedOption.dataset.telefonNo;
|
|
})
|
|
})
|
|
});
|
|
</script>
|
|
@endpush
|