From 1e524727d504daad16209aee1737f85a61a26153 Mon Sep 17 00:00:00 2001
From: Afiq Hamzah <afiq.hamzah@pkb.net.my>
Date: Mon, 10 Jun 2024 22:05:10 +0800
Subject: [PATCH] Enhance UX on unsold commodity notification

---
 .../unsold-commodity-notifications.blade.php  | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/resources/views/tetapan/unsold-commodity-notifications.blade.php b/resources/views/tetapan/unsold-commodity-notifications.blade.php
index efa61ad..1fa5899 100644
--- a/resources/views/tetapan/unsold-commodity-notifications.blade.php
+++ b/resources/views/tetapan/unsold-commodity-notifications.blade.php
@@ -9,7 +9,7 @@
             <breadcrumb :items="[{ 'title' : 'Unsold Commodity Notifications', 'icon' : 'fas fa-globe-asia' }]"></breadcrumb>
 
             <div class="flex justify-center">
-                <div class="w-1/2 bg-white rounded-xl shadow-md overflow-hidden mb-5">
+                <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>
@@ -28,7 +28,7 @@
                                     </div>
                                 </label>
 
-                                <div class="w-full max-w-md  flex pt-10">
+                                <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'] ?? '' }}">
@@ -39,7 +39,7 @@
                                     </div>
                                 </div>
 
-                                <div class="w-full max-w-md pt-10">
+                                <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>
@@ -72,21 +72,17 @@
                                                     <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)]);
+                                                            $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 : '';
+                                                                <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 }}</option>
+                                                                    <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)
@@ -122,6 +118,16 @@
     @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() {
 
@@ -174,7 +180,7 @@
                         };
 
 
-                        if(data_object.id !== ''){
+                        if (data_object.id !== '') {
                             accumulator.push(data_object);
                             return accumulator;
                         }