@extends('layouts.master')
@section('content')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container-fluid px-4">

    <div class="card mt-4">
                   <div class="card-header">
                    @if (session('status'))
                    <div class="alert alert-success">{{ session('status') }}</div>
                @endif

                                  <h1 class="">{{__('customerList')}}</h1>
                                
                                  <div class="table-responsive text-nowrap">
                                  <table id="myDataTable" class="table" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{{__('userName')}}</th>
                                            <th>{{__('userNumber')}}</th>
                                            <th>{{__('action')}}</th>
                                            

                                        </tr>
                                    </thead>
                                    <tbody  class="table-border-bottom-0">
                                        <!-- Table rows -->
                                        @foreach($UsersList->unique('uid') as $user)
                                        <tr>
                                            <td>{{ $user->user->id }}</td>
                                            <td>{{ $user->user->fname }}</td>
                                            <td>{{ $user->user->mobile }}</td>
                                      
                                            <td>
                                                @if (isset($botIds[$user->user->id]) && $botIds[$user->user->id] !== "-" && $botIds[$user->user->id] !== null)
                                                <a href="https://connect.littlehelp.co.jp/24321469/line/inbox/1/{{ $botIds[$user->user->id] }}" class="btn" target="_blank" data-toggle="tooltip" data-placement="bottom" style="background-color: #3498db;" title="Send Messages">
                                                    <img src="{{ asset('assets/img/icons/chat.png') }}" alt="New Icon" style="filter: invert(100%); width: 20px; height: 20px;">
                                                </a>
                                                @else
                                                <span class="btn disabled" data-toggle="tooltip" data-placement="bottom" style="background-color: #3498db; opacity: 0.6; cursor: not-allowed;" title="Send Messages">
                                                    <img src="{{ asset('assets/img/icons/chat.png') }}" alt="New Icon" style="filter: invert(100%); width: 20px; height: 20px;">
                                                </span>
                                            @endif
                                            </td>

                                        </tr>
                                        @endforeach
                                    </tbody>

                                </table>
                            </div>
                   </div>


    </div>
<script>
      $('#myDataTable').hide(); // Hide the table initially
        $(document).ready(function() {
            $('#myDataTable').DataTable({
                order: [
                    [0, 'desc']
                ], // Sort by the first column (index 0) in descending order
                orderMulti: false, // Disable multi-column ordering
                initComplete: function(settings, json) {
                    $('#myDataTable')
                        .show(); // Show the table after DataTable initialization
                }
            });
        });
</script>
</div>
 @endsection
