@extends('layouts.app')

@section('title', 'Daftar Chat - INUFA')
@section('header', 'Chat')

@push('styles')
<style>
    .chat-list-container {
        max-width: 800px;
        margin: 0 auto;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    .chat-list-header {
        padding: 16px 20px;
        background-color: #03a382;
        color: white;
    }
    .chat-list-header h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }
    .chat-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .chat-item {
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s;
    }
    .chat-item:hover {
        background-color: #f5f5f5;
    }
    .chat-item:last-child {
        border-bottom: none;
    }
    .chat-link {
        display: flex;
        padding: 12px 20px;
        text-decoration: none;
        color: inherit;
    }
    .chat-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #03a382;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 20px;
        margin-right: 15px;
        flex-shrink: 0;
    }
    .chat-content {
        flex: 1;
        min-width: 0; /* Untuk memastikan text truncation bekerja */
    }
    .chat-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }
    .chat-name {
        font-weight: 600;
        font-size: 16px;
    }
    .chat-time {
        color: #8696a0;
        font-size: 12px;
    }
    .chat-message {
        color: #667781;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .chat-badge {
        background-color: #03a382;
        color: white;
        border-radius: 50%;
        min-width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin-left: 8px;
    }
    .empty-state {
        padding: 40px 20px;
        text-align: center;
        color: #667781;
    }
    .empty-state svg {
        width: 60px;
        height: 60px;
        margin-bottom: 16px;
        color: #03a382;
    }
    .empty-state p {
        margin: 0;
        font-size: 16px;
    }
</style>
@endpush

@section('content')
<div class="container mx-auto px-4 py-6">
    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    <div class="chat-list-container">
        <div class="chat-list-header">
            <h2>
                @if(auth()->user()->tipe_pengguna === 'admin')
                    Daftar Chat Pengguna
                @else
                    Chat
                @endif
            </h2>
        </div>
        
        @if(auth()->user()->tipe_pengguna === 'admin' && isset($users) && count($users) > 0)
            <ul class="chat-list">
                @foreach($users as $user)
                    <li class="chat-item">
                        <a href="{{ route('chat.show', $user->id) }}" class="chat-link">
                            <div class="chat-avatar">
                                {{ strtoupper(substr($user->nama, 0, 1)) }}
                            </div>
                            <div class="chat-content">
                                <div class="chat-header">
                                    <span class="chat-name">{{ $user->nama }}</span>
                                    @if(isset($user->unread_chats_count) && $user->unread_chats_count > 0)
                                        <span class="chat-badge">{{ $user->unread_chats_count }}</span>
                                    @endif
                                </div>
                                <div class="chat-message">
                                    {{ $user->email }}
                                </div>
                            </div>
                        </a>
                    </li>
                @endforeach
            </ul>
        @elseif(auth()->user()->tipe_pengguna !== 'admin' && isset($adminUsers) && count($adminUsers) > 0)
            <ul class="chat-list">
                @foreach($adminUsers as $admin)
                    <li class="chat-item">
                        <a href="{{ route('chat.show', $admin->id) }}" class="chat-link">
                            <div class="chat-avatar">
                                {{ strtoupper(substr($admin->nama, 0, 1)) }}
                            </div>
                            <div class="chat-content">
                                <div class="chat-header">
                                    <span class="chat-name">{{ $admin->nama }}</span>
                                </div>
                                <div class="chat-message">
                                    Admin INUFA
                                </div>
                            </div>
                        </a>
                    </li>
                @endforeach
            </ul>
        @else
            <div class="empty-state">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                </svg>
                <p>
                    @if(auth()->user()->tipe_pengguna === 'admin')
                        Tidak ada pengguna untuk chat
                    @else
                        Belum ada chat 
                    @endif
                </p>
            </div>
        @endif
    </div>
</div>
@endsection