Untitled

var user_id = item.id;
                    var url =
                        `{{ route('live_quizzes.banned', ['code_id' => $live_quiz->code->id, 'user_id' => 'USER_ID']) }}`
                        .replace('USER_ID', user_id);

                    if (item.image == 'public/default/profile.png') {
                        console.log('true for => ' + item.name);
                        default_location = item.image;
                        name = item.name;
                        console.log(name);
                        firstLetter = name.charAt(0);
                        console.log(firstLetter);

                        lederbordHtml += `
                                        <div class="p-3 d-grid gap-3">
                                            <div class="rounded-3 px-2 overflow-hidden w-100 position-relative point-table-container " style="background:#505157;border-radius:10px">
                                                <div class="position-relative  text-white d-flex justify-content-between align-items-center" style="z-index: 1;">
                                                    <div>
                                                        
                                                            <span>
                                                                <div class="d-flex justify-content-start mt-3">
                                                                    <p class="mr-3">${++key}</p>
                                                                    <div class="d-flex justify-content-center align-items-center text-white mr-3" style="width:30px; height:30px; background-color:#2098F0; border-radius:50%;">
                                                                        <h5 class="mt-1"> ${firstLetter} </h5>
                                                                    </div>
                                                                    <p style="margin-bottom: 0.5rem !important;">
                                                                        @ ${item.name} 
                                                                    </p>
                                                                </div>
                                                            </span>
                                                            </div>
                                                                <div class="d-flex align-items-center">
                                                                    <span class="float-end mr-2">
                                                                        ${item.points}
                                                                    </span>

                                                                    <form action="${url}"
                                                                            method="post" class="cursor-point ajax-delete2">
                                                                            @method('get')
                                                                            @csrf
                                                                            <button title="Dismiss user from the quiz !!" type="submit"
                                                                                class="btn-remove delete cursor-point btn btn-sm  btn-outline-light ml-2 border" style="border: solid 1px red !important;">
                                                                                <i class="fas fa-user-times fa-lg" style="color: #ff0000;"></i>
                                                                            </button>
                                                                    </form>  
                                                                </div>
                                                            </div>
                                                    <div class="bg-gray-black-content  p-3 width_content start-0 h-100 rounded-3 position-absolute "
                                                        style="width:${(item.attempt_ques / $total_ques) * 100}%;top:0;left:0; border-radius: 0 5px 5px 0">
                                                    </div>
                                            </div>
                                        </div>
                                            `;
                    } else {
                        lederbordHtml += `
                                        <div class="p-3 d-grid gap-3">
                                                        <div
                                                            class="rounded-3 p-2 overflow-hidden w-100 position-relative point-table-container " style="background:#505157;border-radius:10px">
                                                            <div class="position-relative  text-white d-flex justify-content-between align-items-center" style="z-index: 1;">
                                                                <div class="mt-2">
                                                                    <span class="mr-3">${++key}</span>
                                                                    <span>
                                                                        <img src="${_url}/${item.image}" alt="user" srcset=""
                                                                            class="user-info mr-3 ms-4 rounded-circle" style="width:30px;height:30px;">
                                                                        <span>
                                                                            @ ${item.name} 
                                                                        </span>
                                                                    </span>
                                                                </div>
                                                                <div class="d-flex align-items-center">
                                                                <span class="float-end mr-2">
                                                                    ${item.points}
                                                                </span>
                                                                <form action="${url}"
                                                                                method="post" class="cursor-point ajax-delete2">
                                                                                @method('get')
                                                                                @csrf
                                                                        <button title="Dismiss user from the quiz !!" type="submit"
                                                                            class="btn-remove delete cursor-point btn btn-sm  btn-outline-light ml-2 border" style="border: solid 1px red !important;">
                                                                            <i class="fas fa-user-times fa-lg" style="color: #ff0000;"></i>
                                                                        </button>
                                                                    </form>                                                          
                                                                </div>
                                                            </div>
                                                            <div class="bg-gray-black-content  p-3 width_content start-0 h-100 rounded-3 position-absolute "
                                                                style="width:${(item.attempt_ques / $total_ques) * 100}%;top:0;left:0; border-radius: 0 5px 5px 0">
                                                            </div>

                                                        </div>
                                                </div>
                                         `;
                    }
                });
            } else {
                lederbordHtml += `
                    <div class="car-content text-start mt-2">
                                <div class="card-body">
                                <div class=" d-flex justify-content-between align-items-center waiting_area">
                                    <div class="d-flex align-items-center">
                                        <h3 class="card-text text-white m-2">No User Join Yet!</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
            }