@extends('layouts.seller.app')

@section('content')
    <div class="admin app-container px-3">
        <div class="app-left open">
            <div class="app-left-header" style="display: block">
                <h1 class="fw-bold pt-4 pt-lg-0">Messages</h1>
            </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)
                            @php
                                $images = @$chat->getProduct->getimages
                                    ? @$chat->getProduct->getimages->groupBy('section')
                                    : '';
                                $userlogo = @$chat->getUser->userprofile->profile_image ?: '';
                                //$mainImagePath = @$images && @$images['mainimage']? @$images['mainimage']->first()->path: $userlogo;
                                $mainImagePath = $userlogo;
                            @endphp
                            <li onclick="fetchData(this)" class="chat-list-item d-flex justify-content-between"
                                data-id="{{ $loop->index + 1 }}" id="{{ $chat->id }}"
                                data-sender-name="{{ $chat->admin_type == 1 ? $chat->getUser->first_name . ' ' . $chat->getUser->middle_name . ' ' . $chat->getUser->last_name : 'Chemical Wholesale Admin'}}">

                                    @if ($chat->admin_type == 1)
                                        <div class="align-items-start d-flex justify-content-between w-100">
                                            <div class="align-items-center d-flex">
                                                <img src="{{ $mainImagePath }}" alt="img"
                                                    onerror="src='/assets/img/noimg.jpg'" style="margin-right: 10px;">
                                                <span class="chat-list-name">
                                                    
                                                {{ $chat->getUser->first_name . ' ' . $chat->getUser->middle_name . ' ' . $chat->getUser->last_name }}
                                                    <br>
                                                    <span class="small mt-1">({{ $chat->getUser->email }})</span> <br>
                                                    <span class="small mt-2">{{ @$chat['getBusiness']['company'] }}</span>
                                                </span>
                                            </div>
                                            <div>
                                                <span style="font-size:12px" class="text-primary">
                                                    {{ $chat->updated_at->format('m/d/y') }}
                                                </span>
                                            </div>
                                        </div>
                                    @else
                                        <div class="align-items-start d-flex justify-content-between w-100">
                                            <div class="align-items-center d-flex">
                                                <img src="{{ asset('assets/img/logo-sq.png') }}" alt="img"
                                                    onerror="src='/assets/img/noimg.jpg'" style="margin-right: 10px;">
                                                <span class="chat-list-name">
                                                    Chemical Wholesale Admin
                                                    <br>
                                                    <span class="small mt-1">(Chemical Wholesale)</span> <br>
                                                    <span class="small mt-2">support@chemicalwholesale.com</span>
                                                </span>
                                            </div>
                                            <div>
                                                <span style="font-size:12px" class="text-primary">
                                                    {{ $chat->updated_at->format('m/d/y') }}
                                                </span>
                                            </div>
                                        </div>
                                    @endif
                                @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 display.</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 class="input-wrapper">
                        <input type="hidden" id="chat_id" value="">
                        <input type="hidden" id="sender_id" value="{{ @Auth::user()->id }}">
                        <input type="text" id="message" class="chat-input" placeholder="Enter your message here">
                    </div>
                    <a class="btn btn-secondary me-2" data-bs-toggle="modal" data-bs-target="#attachmentModal">
                        <i class="bi bi-paperclip"></i></a>
                    <button class="chat-send-btn" type="submit">Send</button>
                </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);
            }
        }
        .profile-picture {
            border-radius: 103px;
            width: 32px;
            height: 32px;
            padding: 0;
            background: #ddd;
            overflow: hidden;
            margin-right: 12px;
            flex-shrink: 0;
            color: #2c303a;
            border: 1px solid #ddd;
        }
    </style>
@endpush
@push('js')
    <script src="https://cdn.socket.io/4.3.2/socket.io.min.js"></script>

    <script>
        var socket = io("