@php
     $bgcolors = [
         'Approved' => '#3DAD5C',
         'Need Review' => '#FAAD43',
         'Decline' => '#ED3E3E',
     ];

     $icons = [
         'Approved' => asset('assets/img/icons/approved.svg'),
         'Need Review' => asset('assets/img/icons/pending.svg'),
         'Decline' => asset('assets/img/icons/decline.svg'),
     ];

     $url_update = isset($route) ? $route : route('employee.update-status');
 @endphp
 <div class="control">
     <div class="h-select change-status @isset($class) {{ $class }} @endisset"
         id="status_{{ $user_id }}" @isset($style) style="{{ $style }}" @endisset>
         @foreach ($bgcolors as $key => $color)
             @if ($key == $status)
                 <div class="select-box @if ($key == 'Need Review' && isset($fs)) {{ $fs }} @endif"
                     id="status-box{{ $name }}"
                     style="background-color: {{ $color }};border-color:{{ $color }}">
                     <img id="img-icon{{ $name }}" class="mr-2" src="{{ $icons[$key] }}">
                     <div id="status-text{{ $name }}" style="color: white">{{ $key }}</div>
                 </div>
                 <div class="select-icon">
                     @include('components.icons.cevron-down')
                 </div>
             @endif
         @endforeach
         <div class="select-drop has-slimscroll-sm">
             <div class="drop-inner" style="border: 1px solid #ddd;">
                 @foreach ($bgcolors as $key => $item)
                     @if ($key != $status)
                         <div class="option-row">
                             <input type="radio" name="{{ $name }}" class="input-change-status"
                                 id="{{ strtolower(str_replace(' ', '_', $key)) }}" value="{{ $key }}"
                                 data-color="{{ $item }}">
                             <label for="{{ strtolower(str_replace(' ', '_', $key)) }}">
                                 <div class="option-meta">
                                     <span>{{ $key }}</span>
                                 </div>
                             </label>
                         </div>
                     @endif
                 @endforeach
             </div>
         </div>
     </div>
 </div>
 <script>
     var iconApproved = '{{ url('assets/img/icons/approved.svg') }}'
     var iconPending = '{{ url('assets/img/icons/pending.svg') }}'
     var iconDecline = '{{ url('assets/img/icons/decline.svg') }}'
     var urlUpdateStatus = '{{ $url_update }}'

     $(document).ready(function() {
         $(document).off('change', 'input[name="{{ $name }}"].input-change-status')
               .on('change', 'input[name="{{ $name }}"].input-change-status', function() {
             let selectedValue = $(this).val();
             let selectedColor = $(this).data('color');
             var statusType = '{{ $type }}'

             let icon = iconPending
             if (selectedValue === 'Approved') {
                 icon = iconApproved
             } else if (selectedValue === 'Decline') {
                 icon = iconDecline
             } else {
                 icon = iconPending
             }

             $('#status-text{{ $name }}').text(selectedValue)
             $('#status-box{{ $name }}').css({
                 'background-color': selectedColor,
                 'border-color': selectedColor
             });
             $('#img-icon{{ $name }}').attr('src', icon)

             const params = {
                 '{{ $type }}': selectedValue,
                 user_id: '{{ $user_id }}'
             }

             @if (isset($gate_in_id))
                 params.gate_in_id = '{{ $gate_in_id }}'
             @endif

             $.ajax({
                 url: urlUpdateStatus,
                 type: 'POST',
                 data: params,
                 headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 },
                 success: (res) => {
                     if (res.status) {
                         if ('{{ $type }}' === 'user_status') {
                             if (selectedValue !== 'Approved') {
                                 getDataAccessRequest()
                                 showNotification('primary', 'Success', res.message);
                                 return
                             }
                             getDataAccessRequest()
                         }

                         if ('{{ $type }}' === 'gatein_status') {
                             dataGateInEmployee()
                         }

                         if ('{{ $type }}' === 'gatein_status_visitor') {
                             dataVisitor()
                         }

                         showNotification('primary', 'Success', res.message);

                     } else {
                         showNotification('danger', 'Failed', res.message);
                     }
                 },
                 error: (xhr, error, status) => {
                     let errorMessage = 'An unexpected error occurred.';
                     if (xhr.responseJSON && xhr.responseJSON.message) {
                         errorMessage = xhr.responseJSON.message;
                     } else if (xhr.status === 0) {
                         errorMessage =
                             'Network error. Please check your internet connection.';
                     } else if (xhr.status === 404) {
                         errorMessage = 'The requested resource was not found.';
                     } else if (xhr.status === 500) {
                         errorMessage = 'Internal server error. Please try again later.';
                     }

                     showNotification('danger', 'Failed', errorMessage);

                 }
             })
         });
     });
 </script>