@extends('layouts.app', ['class' => '', 'elementActive' => 'listChat'])



@section('content')

<div class="content">
        <div class="container-fluid">
          <div class="row">
                <div class="col-12">
                    <div class="shadow p-3 mb-5 bg-white rounded">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col-12 col-md-8">
                                    <h3 class="mb-0">{{ __('Chats') }}</h3>
                                </div>
                            </div>
                        </div>

        <div class="col-12">
                            
        @if (count($errors) > 0)
        @if($errors->any())
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{$errors->first()}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
          </div>
        @endif
    @endif
                            @if (session('status'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('status') }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif
                        </div>

 
                        
                         <div class="table-responsive">
                   
                           <table class="table datatable"> 
                                <thead>
            <tr>
                <th>#</th>
                <th>Chat With</th>
                <th>Your Role</th>
                <th>Started At</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($listChat as $index => $chat)
                @php
                    $isStarter = $chat->user_one_code == $userCode;
                    $otherName = $isStarter ? $chat->user_two_name : $chat->user_one_name;
                    $otherBusiness = $isStarter ? $chat->user_two_business : $chat->user_one_business;
                     
                @endphp
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $otherBusiness }} ({{ $otherName }})</td>
                    <td><span class="badge {{ $isStarter ? 'bg-success' : 'bg-info' }}">{{ $isStarter ? 'Von Ihnen gestartet' : 'Von ihnen gestartet' }}  </span></td>
                    <td>{{ $chat->chat_added_date }}</td>
                    <td>

                        <div class="d-flex flex-column align-items-center">
                    <small class="text-muted d-block mb-1">Chat öffnen</small>

                        <a href="{{ route('chat.singleChat', $chat->chat_id) }}" class="btn btn-round btn-primary"><i class="nc-icon nc-chat-33"> </i></a>
                       
                            @if ($chat->is_unread)
                                <span class="badge bg-danger">💬 Neue Nachricht</span>
                            @endif
                        </div>


                        <div class="d-flex flex-column align-items-center">

                    <small class="text-muted d-block mb-1">Löschen</small>

                                             <a href="deleteChat/{{$chat->chat_id}}" 
                                            onclick="return confirm('Möchten Sie diesen Chat wirklich löschen?')"
                                            class="btn btn-danger btn-round" role="button" aria-disabled="true">
                                             <i class="nc-icon nc-button-power"> </i></a>
                        </div>  

                    </td>
                </tr>
            @endforeach
        </tbody>
                            </table>
                        </div>



                        
     </div>
   </div>
  </div>
 </div>
</div>
@endsection



@stack('css')
<style>
@-webkit-keyframes pulse {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.badge.bg-danger {
  -webkit-animation: pulse 1.5s infinite;
  animation: pulse 1.5s infinite;
}

</style>
<!-- @endstack -->


@push('scripts')
<!-- or stack  -->
    <script> //for jquerys use push scripts


</script>
@endpush



<!-- @stack('js')
    <script> -->