@php
    use App\Models\Chat;
    use App\Models\Instalasi;
@endphp
<div>

    <div class="page" wire:poll.keep-alive>
        <!-- Message Sidebar -->
        <div class="page-aside">
            <div class="page-aside-switch">
                <i class="icon md-chevron-left" aria-hidden="true"></i>
                <i class="icon md-chevron-right" aria-hidden="true"></i>
            </div>
            <div class="page-aside-inner" wire:ignore>
                <div class="input-search">
                    <button class="input-search-btn" type="submit">
                        <i class="icon md-search" aria-hidden="true"></i>
                    </button>
                    <form>
                        <input class="form-control" type="text" placeholder="Search Keyword" name="">
                    </form>
                </div>

                <div class="app-message-list page-aside-scroll">
                    <div data-role="container">
                        <div data-role="content">
                            <ul class="list-group">

                                @foreach ($customer as $row)
                                    @php
                                        $count_notif = Chat::where('notif_chat', 1)
                                            ->where('id_customer', $row->id_customer)
                                            ->count('id_chat');
                                    @endphp
                                    <li wire:key="{{ $row->id_customer }}" class="list-group-item">
                                        <div class="media">
                                            <div class="pr-20">
                                                <a class="avatar avatar-online"
                                                    wire:click.prevent="show({{ $row->id_customer }})">
                                                    <img class="img-fluid"
                                                        src="{{ asset('material') }}/global/portraits/1.jpg"><i></i></a>
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mt-0 mb-5">{{ $row->nama }}</h5>
                                                <span class="media-time">15 sec ago</span>
                                            </div>
                                            <div class="pl-20">
                                                @if ($count_notif != 0)
                                                    <span
                                                        class="badge badge-pill badge-danger">{{ $count_notif }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                @endforeach

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Message Sidebar -->
        <div class="page-main">
            <!-- Chat Box -->
            <div class="app-message-chats">
                <button type="button" id="historyBtn" class="btn btn-round btn-default btn-flat primary-500">History
                    Chat {{ $this->nama }} </button>
                <div class="chats" wire:poll.keep-alive>

                    @if (!empty($this->nama))
                        @foreach ($chat as $row)
                            @if (empty($row->id_chat))
                                <div wire:key="{{ $row->id_chat }}" class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right"
                                            title="">
                                            <img src="{{ asset('material') }}/global/portraits/4.jpg" alt="June Lane">
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>
                                                Hello. What can I do for you?
                                            </p>

                                        </div>
                                    </div>
                                </div>
                                <div class="chat chat-left">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="left"
                                            title="">
                                            <img src="{{ asset('material') }}/global/portraits/5.jpg"
                                                alt="Edward Fletcher">
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>
                                                I'm just looking around.
                                            </p>
                                            <p>Will you tell me something about yourself? </p>

                                        </div>
                                        <div class="chat-content">
                                            <p>
                                                Are you there? That time!
                                            </p>

                                        </div>
                                    </div>
                                </div>
                                <div class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right"
                                            title="">
                                            <img src="{{ asset('material') }}/global/portraits/4.jpg" alt="June Lane">
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>
                                                Where?
                                            </p>

                                        </div>
                                        <div class="chat-content">
                                            <p>
                                                OK, my name is Limingqiang. I like singing, playing basketballand so on.
                                            </p>

                                        </div>
                                    </div>
                                </div>
                                <p class="time">1 hours ago</p>
                                <div class="chat chat-left">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="left"
                                            title="">
                                            <img src="{{ asset('material') }}/global/portraits/5.jpg"
                                                alt="Edward Fletcher">
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>You wait for notice.</p>
                                        </div>
                                        <div class="chat-content">
                                            <p>Consectetuorem ipsum dolor sit?</p>

                                        </div>
                                        <div class="chat-content">
                                            <p>OK?</p>

                                        </div>
                                    </div>
                                </div>
                                <div class="chat">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="right"
                                            title="">
                                            <img src="{{ asset('material') }}/global/portraits/4.jpg" alt="June Lane">
                                        </a>
                                    </div>
                                    <div class="chat-body">
                                        <div class="chat-content">
                                            <p>OK!</p>
                                        </div>
                                    </div>
                                </div>
                            @else
                                @if ($row->id_customer == 1)
                                    <div class="chat">
                                        <div class="chat-avatar">
                                            <a class="avatar" data-toggle="tooltip" href="#"
                                                data-placement="right" title="">
                                                <img src="{{ asset('material') }}/global/portraits/4.jpg"
                                                    alt="June Lane">
                                            </a>
                                        </div>
                                        <div class="chat-body">
                                            <div class="chat-content">
                                                <p>
                                                    {{ $row->isi_chat }}
                                                </p>

                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                @else
                                    <div class="chat chat-left">
                                        <div class="chat-avatar">
                                            <a class="avatar" data-toggle="tooltip" href="#"
                                                data-placement="left" title="">
                                                <img src="{{ asset('material') }}/global/portraits/5.jpg"
                                                    alt="Edward Fletcher">
                                            </a>
                                        </div>
                                        <div class="chat-body">
                                            <div class="chat-content">
                                                <p>
                                                    {{ $row->isi_chat }}
                                                </p>

                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                @endif
                            @endif
                        @endforeach
                    @else
                        <div class="chat">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="right"
                                    title="">
                                    <img src="{{ asset('material') }}/global/portraits/4.jpg" alt="June Lane">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>
                                        Hello. What can I do for you?
                                    </p>

                                </div>
                            </div>
                        </div>
                        <div class="chat chat-left">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="left"
                                    title="">
                                    <img src="{{ asset('material') }}/global/portraits/5.jpg" alt="Edward Fletcher">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>
                                        I'm just looking around.
                                    </p>
                                    <p>Will you tell me something about yourself? </p>

                                </div>
                                <div class="chat-content">
                                    <p>
                                        Are you there? That time!
                                    </p>

                                </div>
                            </div>
                        </div>
                        <div class="chat">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="right"
                                    title="">
                                    <img src="{{ asset('material') }}/global/portraits/4.jpg" alt="June Lane">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>
                                        Where?
                                    </p>

                                </div>
                                <div class="chat-content">
                                    <p>
                                        OK, my name is Limingqiang. I like singing, playing basketballand so on.
                                    </p>

                                </div>
                            </div>
                        </div>
                        <p class="time">1 hours ago</p>
                        <div class="chat chat-left">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="left"
                                    title="">
                                    <img src="{{ asset('material') }}/global/portraits/5.jpg" alt="Edward Fletcher">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>You wait for notice.</p>
                                </div>
                                <div class="chat-content">
                                    <p>Consectetuorem ipsum dolor sit?</p>

                                </div>
                                <div class="chat-content">
                                    <p>OK?</p>

                                </div>
                            </div>
                        </div>
                        <div class="chat">
                            <div class="chat-avatar">
                                <a class="avatar" data-toggle="tooltip" href="#" data-placement="right"
                                    title="">
                                    <img src="{{ asset('material') }}/global/portraits/4.jpg" alt="June Lane">
                                </a>
                            </div>
                            <div class="chat-body">
                                <div class="chat-content">
                                    <p>OK!</p>
                                </div>
                            </div>
                        </div>

                    @endif



                </div>
                <!-- End Chat Box -->

                <!-- Message Input-->
                <form wire:submit="store" class="app-message-input">
                    <div class="input-group form-material">
                        <span class="input-group-prepend">
                            <a href="javascript: void(0)" class="btn btn-pure btn-default icon md-camera"></a>
                        </span>
                        <input class="form-control" wire:model.live="isi_chat" type="text"
                            placeholder="Ketik Pesan Disini ...">
                        <span class="input-group-append">
                            <button type="submit" class="btn btn-pure btn-default icon md-mail-send"></button>
                        </span>
                    </div>
                </form>
                <!-- End Message Input-->



            </div>
        </div>


    </div>