@php
    $bgcolors = [
        'Submit Document' => '#039be5',
        'Approved' => '#3DAD5C',
        'Under Review' => '#faae42',
        'Decline' => '#ED3E3E',
    ];

    $url_update = $route;
@endphp

<div class="control">
    <div class="h-select @if (Auth::user()->hasRole(['super_admin', 'contract_user', 'doctor'])) change-status-return-worker @endif 
        @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 === 'Submit Document' && isset($fs)) {{ $fs }} @endif"
                    id="status-box{{ $name }}"
                    style="background-color: {{ $color }}; transition: all 0.3s ease;"
                    onmouseover="this.style.boxShadow='0px 2px 8px rgba(128,128,128,0.5)'; this.style.backgroundColor='{{ $color }}98';"
                    onmouseout="this.style.boxShadow='none'; this.style.backgroundColor='{{ $color }}';">

                    <div id="status-text{{ $name }}" class="text-white has-text-centered">
                        {{ $key }}
                    </div>
                </div>

                @if (Auth::user()->hasRole(['super_admin', 'contract_user', 'doctor']))
                    <div class="select-icon" style="cursor: pointer">
                        @include('components.icons.cevron-down')
                    </div>
                @endif
            @endif
        @endforeach

        <div class="select-drop has-slimscroll-sm">
            <div class="drop-inner">
                @foreach ($bgcolors as $key => $item)
                    @if ($key !== $status)
                        <div class="option-row">
                            <input type="radio" name="{{ $name }}" class="input-status-return-worker"
                                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 urlUpdateStatus = '{{ $url_update }}'

    $(document).ready(function() {
        $('input[name="{{ $name }}"].input-status-return-worker').change(function() {
            let selectedValue = $(this).val();
            let selectedColor = $(this).data('color');

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

            $.ajax({
                url: '{{ $route }}',
                type: 'POST',
                data: {
                    id: '{{ $returned_worker_id }}',
                    status: selectedValue
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: (res) => {
                    if (res.status) {
                        getDataReturnWorker()
                        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);

                }
            })
        });

        $(document).off('click', '.change-status-return-worker').on('click', '.change-status-return-worker',
            function(e) {
                e.stopPropagation();
                $(this).toggleClass('is-active');
            });

    });
</script>