@extends('layouts.public.app')

@section('title', 'My Messages | Chemical Wholesale')

@section('content')
    <div class="container-fluid">
        <div class="app-container">
            <div class="app-left open">
                <div class="app-left-header" style="display: block">
                    <h1 class="fw-bold pt-lg-0 pt-4">My 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!
                </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')
                                        : '';
                                    $supplierlogo = @$chat->getBusiness->getLogo->path ?: '';
                                    //$mainImagePath = @$images && @$images['mainimage']? @$images['mainimage']->first()->path: $supplierlogo;
                                    $mainImagePath = $supplierlogo;
                                @endphp
                                <li onclick="fetchData(this)" class="chat-list-item d-flex justify-content-between"
                                    data-id="{{ $loop->index + 1 }}" id="{{ $chat->id }}"
                                    @if ($chat->getBusiness) data-sender-name="Seller" @else data-sender-name="CW Admin" @endif>
                                    <div class="align-items-start d-flex justify-content-between w-100">
                                        @if ($chat->getBusiness)
                                            <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->getBusiness->getOwner->first_name . ' ' . $chat->getBusiness->getOwner->last_name }}
                                                    <br>
                                                    <span class="small mt-1">({{ $chat->getBusiness->company }})</span> <br>
                                                    <span class="small mt-2">{{ $chat->getBusiness->company_email }}</span>
                                                </span>
                                            </div>
                                        @else
                                            <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>
                                        @endif
                                        <div>
                                            <span style="font-size:12px" class="text-primary">
                                                {{ $chat->updated_at->format('m/d/y') }}
                                            </span>
                                        </div>
                                    </div>
                                    @if ($chat->unseen_messages_from_admin()->count() > 0)
                                        <div class="badge">
                                            {{ $chat->unseen_messages_from_admin()->count() }}
                                        </div>
                                    @endif
                                </li>
                            @endforeach
                        @else
                            <li class="chat-list-item p-4">
                                <p class="mb-0 fw-bold small">You have no chats to display.</p>
                            </li>
                        @endif
                    </ul>
                    @if (0 < count($chats))
                        <button id="loading" class="load-more-btn">
                            Load more
                        </button>
                    @endif
                </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>

    <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="attachmentModal">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 .png, .jpg and .pdf
                        </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.4') }}">
    <link href="/assets/dashboard/css/filepond.css" rel="stylesheet" />
    <style>
        .app-container {
            box-sizing: border-box;
            height: calc(100vh - 210px);
            margin-top: 10px;
        }

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

        .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;
        }

        .reverse .profile-picture {
            background: #dbe6ff;
            color: #477eff;
        }

        .footer {
            display: none;
        }

        .report-an-issue-div {
            display: none;
        }

        .timestamp {
            font-size: 10px;
        }

        .reverse .timestamp {
            font-size: 10px;
            text-align: right;
            display: flex;
            justify-content: end;
        }
    </style>
@endpush
@push('js')
    <script src="{{ asset('assets/dashboard/js/socket.io.min.js') }}"></script>

    <script>
        var socket = io("