From b0ffdcfd82a3d5088a39129c3e3c8fb3507400a9 Mon Sep 17 00:00:00 2001
From: Afiq Hamzah <afiq.hamzah@pkb.net.my>
Date: Mon, 27 May 2024 20:24:51 +0800
Subject: [PATCH] Update unsold commodity notification settings

Add parameters to determine PIC for each day
---
 app/Http/Controllers/TetapanController.php    |  40 ++--
 .../unsold-commodity-notifications.blade.php  | 173 +++++++++++++++---
 2 files changed, 170 insertions(+), 43 deletions(-)

diff --git a/app/Http/Controllers/TetapanController.php b/app/Http/Controllers/TetapanController.php
index 26c30e0..cda3aef 100644
--- a/app/Http/Controllers/TetapanController.php
+++ b/app/Http/Controllers/TetapanController.php
@@ -2,59 +2,61 @@
 
 namespace App\Http\Controllers;
 
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Session;
-use Illuminate\Support\Facades\Http;
-use Illuminate\Support\Facades\Storage;
-use Carbon\Carbon;
+use App\Models\User;
 use Illuminate\Support\Arr;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Http;
 
 class TetapanController extends Controller
 {
 
-    public function home(){
+    public function home()
+    {
 
         $auth_user = Auth::user();
 
-        return view('tetapan.home',compact('auth_user'));
+        return view('tetapan.home', compact('auth_user'));
     }
 
-    public function index(){
+    public function index()
+    {
         $api_url = config('api.url');
         $auth_user = Auth::user();
 
-        return view('tetapan.index',compact('api_url','auth_user'));
+        return view('tetapan.index', compact('api_url', 'auth_user'));
     }
 
-    public function margin(){
+    public function margin()
+    {
         $api_url = config('api.url');
         $auth_user = Auth::user();
 
-        return view('tetapan.margin',compact('api_url','auth_user'));
+        return view('tetapan.margin', compact('api_url', 'auth_user'));
     }
 
     public function payableUjrahBranches()
     {
-        $api_url =  config('api.url');
+        $api_url = config('api.url');
         $auth_user = Auth::user();
 
-        $payable_cawangan = json_decode( Http::get(config('api.url').'/api/payable-ujrah-branches')->json() );
-        return view('tetapan.payable-ujrah-branches',compact('api_url','auth_user', 'payable_cawangan'));
+        $payable_cawangan = json_decode(Http::get(config('api.url') . '/api/payable-ujrah-branches')->json());
+        return view('tetapan.payable-ujrah-branches', compact('api_url', 'auth_user', 'payable_cawangan'));
     }
 
-
     public function unsoldCommodityNotification()
     {
-        $api_url =  config('api.url');
+        $api_url = config('api.url');
         $auth_user = Auth::user();
 
-        $settings =  Http::get(config('api.url').'/api/settings/unsold-commodity-notifications')->json();
+        $settings = Http::get(config('api.url') . '/api/settings/unsold-commodity-notifications')->json();
 
         $key = Arr::pluck($settings, 'key');
         $values = Arr::pluck($settings, 'value');
         $settings = array_combine($key, $values);
 
-        return view('tetapan.unsold-commodity-notifications',compact('api_url','auth_user', 'settings'));
+        $days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+        $operasi_users = User::where('cawangan', 'operasi')->get(['id', 'name']);
+
+        return view('tetapan.unsold-commodity-notifications', compact('api_url', 'auth_user', 'settings', 'operasi_users', 'days'));
     }
 }
diff --git a/resources/views/tetapan/unsold-commodity-notifications.blade.php b/resources/views/tetapan/unsold-commodity-notifications.blade.php
index 3dc4619..ff0aa78 100644
--- a/resources/views/tetapan/unsold-commodity-notifications.blade.php
+++ b/resources/views/tetapan/unsold-commodity-notifications.blade.php
@@ -44,6 +44,65 @@
                                     <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 $id)
+                                                            <div class="ml-3 flex mb-3">
+                                                                <select name="pic_{{ strtolower($day) }}[]" class="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">
+                                                                    <option value="">Select an option</option>
+                                                                    @foreach($operasi_users as $user)
+                                                                    <option value="{{ $user->id }}" {{ $user->id == $id ? 'selected' : '' }}>{{ $user->name }}</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>
@@ -56,11 +115,6 @@
     @endsection
 
     @push('additional_scripts')
-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
-
-        });
-    </script>
     <script>
         document.addEventListener("DOMContentLoaded", function() {
 
@@ -78,6 +132,10 @@
                         body: JSON.stringify(data)
                     })
                     .then(response => response.json())
+                    .then(response => {
+                        console.log(response);
+                        return response;
+                    })
                     .catch((error) => {
                         console.error('Error:', error);
                     });
@@ -92,15 +150,38 @@
                 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) => {
+                        accumulator.push(nextItem.value);
+                        return accumulator;
+                    }, []);
+                };
+
 
                 let data = {
-                    'status' : status.checked,
-                    'start_time' : startTime.value,
-                    'end_time' : endTime.value,
-                    'message' : message.value,
+                    '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() === '';
@@ -165,15 +246,29 @@
                 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();
                 }
             });
 
@@ -181,23 +276,53 @@
     </script>
     <script>
         document.addEventListener("DOMContentLoaded", function() {
-        // Get the element
-        const toggle = document.querySelector('#toggle');
+            // 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
+            // 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))
             });
 
-            // Dispatch the event on the input element
-            toggle.dispatchEvent(event);
-        }
-
-        // Call the function to trigger the change event
-        triggerChangeEvent();
-    });
+            remove_pic_buttons.forEach(function(x) {
+                x.addEventListener('click', y => x.parentNode.remove())
+            });
+        });
     </script>
     @endpush