@extends('layout.app')
@section('title', 'Team Members')
@section('style')
    <style>
        .online-users {
            display: flex;
            overflow-x: auto;
            gap: 16px;
            white-space: nowrap;
        }

        .online-user {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 50px;
            text-align: center;
            position: relative;
        }

        .online-user img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid #dee2e6;
        }

        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            position: absolute;
            bottom: 12px;
            right: 12px;
            border: 2px solid white;
        }

        .status-online {
            background-color: #28a745;
        }

        .status-offline {
            background-color: #dc3545;
        }

        .status-busy {
            background-color: #ffc107;
        }

        .online-user-name {
            margin-top: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .online-users::-webkit-scrollbar {
            height: 6px;
        }

        .online-users::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }
    </style>

@endsection
@section('main')
    <div class="mt-2">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item">
                    <a href="#">
                        <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </a>
                </li>
                <li class="breadcrumb-item"><a href="#">Team</a></li>
                <li class="breadcrumb-item active" aria-current="page">Team Members</li>
            </ol>
        </nav>
    </div>

    <div class="row mt-3">
        <div class="col-12 col-xl-12">
            <div class="row">
                <div class="col-12 col-xxl-12">
                    <div class="card border-0 shadow">
                        <div class="card-body">
                            <div class="online-users" id="team-members-horizontal">
                            </div>
                            <hr>
                            <div class="col-12 col-xxl-12 mt-2 mb-2">
                                <h6>Recent Chats</h6>
                                <hr>
                                <div class="message-wrapper border-0 bg-white shadow rounded mb-4">

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

    </div>

@endsection
@section('script')
    <script>
        $(document).ready(function () {
            $.ajax({
                url: "{{ route('chat.users') }}",
                method: "GET",
                success: function (data) {
                    let container = $('#team-members-horizontal');
                    container.empty();

                    data.forEach(member => {
                        let messageWrapper = $('.message-wrapper');
                        messageWrapper.empty(); // clear previous entries

                        data.forEach(member => {
                            // Avatar fallback
                            let avatar = member.image ? member.image : "{{ asset('assets/img/team/default-avatar.png') }}";

                            // Only show members with messages
                            if (member.last_message && member.last_message.trim() !== "") {
                                messageWrapper.append(`
                                    <div class="card hover-state border-bottom rounded-0 rounded-top py-3">
                                        <div class="card-body d-flex align-items-center flex-wrap flex-lg-nowrap py-0">
                                            <div class="col-1 align-items-center px-0 d-none d-lg-flex">
                                                <div class="form-check inbox-check me-2 mb-0">
                                                    <input class="form-check-input" type="checkbox" value="" id="mailCheck_${member.id}">
                                                    <label class="form-check-label" for="mailCheck_${member.id}"></label>
                                                </div>
                                                <svg class="icon icon-sm rating-star d-none d-lg-inline-block" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                                            </div>
                                            <div class="col-10 col-lg-2 ps-0 ps-lg-3 pe-lg-3">
                                                <a href="{{ route('chat-members') }}?user_id=${member.id}&user_name=${encodeURIComponent(member.name)}" class="d-flex align-items-center">
                                                    <img src="${avatar}" class="avatar-sm rounded-circle me-3" alt="${member.name}">
                                                    <span class="h6 fw-bold mb-0">${member.name}</span>
                                                </a>
                                            </div>
                                            <div class="col-2 col-lg-2 d-flex align-items-center justify-content-end px-0 order-lg-4">
                                                <div class="text-muted small d-none d-lg-block">${member.last_seen_human ?? ''}</div>
                                            </div>
                                            <div class="col-12 col-lg-7 d-flex align-items-center mt-3 mt-lg-0 ps-0">
                                                <a href="#" class="fw-normal text-gray-600-900 truncate-text">
                                                    <span class="fw-bold ps-lg-5">${member.last_message}</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                `);
                            }
                        });
                        let avatar = member.image? member.image: "{{ asset('assets/img/team/default-avatar.png') }}";

                        // Determine status and class
                        let dotClass = "status-offline";
                        if (member.is_online) {
                            dotClass = "status-online";
                        } else if (member.last_login) {
                            let lastLogin = new Date(member.last_login);
                            let now = new Date();
                            let diffMinutes = (now - lastLogin) / (1000 * 60);
                            if (diffMinutes < 60) dotClass = "status-busy";
                        }

                        // Append to container
                        container.append(`
                                <a href="{{ route('chat-members') }}?user_id=${member.id}&user_name=${encodeURIComponent(member.name)}">
                                    <div class="online-user">
                                        <img src="${avatar}" alt="${member.name}">
                                        <span class="status-dot ${dotClass}"></span>
                                        <span class="online-user-name">${member.name}</span>
                                    </div>
                                </a>
                            `);
                    });
                },
                error: function () {
                    $('#team-members-horizontal').html('<p class="text-danger">Failed to load users.</p>');
                }
            });
        });
    </script>
@endsection