@extends('layouts.dashboard.app')

@section('content')
    <div class="admin app-container px-3">
        <div class="app-left open">
            <div class="app-left-header" style="display: block">
                <div class="d-flex justify-content-between align-items-center">
                    <h1 class="fw-bold pt-4 pt-lg-0 text-danger">AI Moderated Messages</h1>
                </div>
            </div>
            {{-- <div class="app-profile-box">
                <img style="margin: 15px 0px" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
                    alt="profile">
                <div class="app-profile-box-name">
                    Hello Mahri!
                </div>
            </div> --}}
            <div class="chat-list-wrapper">
                <ul id="chat-list" class="chat-list">
                    @if (count($chats) > 0)
                        @foreach ($chats as $chat)
                            <li onclick="fetchData(this)" class="chat-list-item d-flex justify-content-between"
                                data-id="{{ $loop->index + 1 }}" id="{{ $chat->id }}"
                                data-sender-name="Buyer: {{ $chat->getUser->first_name . ' ' . $chat->getUser->middle_name . ' ' . $chat->getUser->last_name }}" data-sender-name2="Seller: {{ @$chat->getBusiness->name ?: '' }}">
                                <div class="align-items-start d-flex justify-content-between w-100">
                                    <div class="align-items-center d-flex">
                                        <img src="/assets/dashboard/img/icons/no_user.png" alt="user"
                                            style="margin-right: 10px;height:35px;width:auto">
                                        <span class="chat-list-name">
                                            Buyer: {{ $chat->getUser->first_name . ' ' . $chat->getUser->middle_name . ' ' . $chat->getUser->last_name }} -
                                            <br>
                                            Seller: {{ @$chat->getBusiness->name ?: 'Seller Company' }}<br>
                                            <span class="text-danger small">Moderation: 
                                                @foreach ($chat->moderation_summary as $index => $moderation)
                                                    {{ ucfirst($moderation) }}@if(!$loop->last), @endif
                                                @endforeach
                                            </span>
                                        </span>
                                    </div>
                                    <div>
                                        <span style="font-size:12px" class="text-primary">
                                            {{ $chat->updated_at->format('m/d/y') }}
                                        </span>
                                    </div>
                                </div>
                                @if ($chat->unseen_messages()->count() > 0)
                                    <div class="badge">
                                        {{ $chat->unseen_messages()->count() }}
                                    </div>
                                @endif
                            </li>
                        @endforeach
                    @else
                        <li class="chat-list-item p-4">
                            <p class="mb-0 fw-bold small w-100 text-center">You have no chats to moderate.</p>
                        </li>
                    @endif
                </ul>
                <button id="loading" class="load-more-btn">
                    Load more
                </button>
            </div>
        </div>
        <form id="messageForm" style="width: 100%">
            <div class="app-main">
                <div class="mob-allchat-menu d-flex d-lg-none align-items-center" onclick="openChatmenu()">
                    <i class="bi bi-arrow-left-square-fill" style="font-size: 24px"></i> <span class="ms-2">Back</span>
                </div>
                <div id="messagesContainer" class="chat-wrapper"></div>
                <div class="chat-input-wrapper">
                    <div id="chatdetailscontainer"></div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal fade" id="attachmentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Add Attachment</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="messageattachmentForm" enctype="multipart/form-data">
                        <input type="file" name="file" id="fileAttachment" class="fileupload gallery"
                            style="height:200px" data-allow-reorder="true" />
                        <p class="small pt-1 pb-3 text-danger">accepted file types images/documents</p>
                        <button type="submit" class="btn btn-primary w-100">Send</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('/assets/dashboard/chat/css/chat_admin.min.css?v5.2') }}">
    <link href="/assets/dashboard/css/filepond.css" rel="stylesheet" />
    <style>
        .timestamp {
            font-size: 10px;
        }

        .reverse .timestamp {
            font-size: 10px;
            text-align: right;
            display: flex;
            justify-content: end;
        }

        .admin.app-container {
            box-sizing: border-box;
            height: calc(100vh - 90px);
            margin-top: 10px;
        }

        @media only screen and (max-width: 1230px) {
            .admin.app-container {
                height: calc(100vh - 160px);
            }
        }

        .message-moderated {
            border: 2px solid red !important;
            color: red !important;
            background: #fff !important;
        }
    </style>
@endpush
@push('js')
    <script src="https://cdn.socket.io/4.3.2/socket.io.min.js"></script>

    <script>
        var socket = io("