@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">Chat History
                    </span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>

            <div class="collapse d-lg-block my-lg-auto ms-lg-auto" id="page_header">
                <div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-3">
                    <div class="d-inline-flex mt-3 mt-sm-0">
                        <a href="{{ url()->previous() }}"
                            class="status-indicator-container ms-1 btn btn-primary rounded-pill">
                            Back
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Chat History
                    </span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        @include('error-success')

        <div class="card">
            <div class="content-wrapper">
                <div class="content-body">
                    <div class="content-page">
                        <div id="loading" style="display: none;">
                            <img id="loading-image" src="{{ asset('assets/images/loader.gif') }}" alt="Loading...">
                        </div>
                        <div class="card-box" style="height: 900px;">
                            <h4 class="header-title mb-3">Chat History</h4>
                            <hr>
                            <div class="chat-conversation">
                                @if (count($data) > 0)
                                    <div class="slimScrollDiv"
                                        style="position: relative; overflow: hidden; width: auto; height: 332px;">
                                        <ul class="conversation-list slimscroll"
                                            style="max-height: 775px; overflow: auto; width: auto; height: 775px;"
                                            id="scroll">
                                            @php
                                                $date = '';
                                            @endphp
                                            @foreach($data as $item)
                                                @if ($date != date('Y-m-d', strtotime($item->created_at)))

                                                    <span class="line">
                                                        <p><span>{{$item->created_at }}</span></p>
                                                    </span>
                                                @endif
                                                    <li class="clearfix">
                                                        <div class="chat-avatar">
                                                            <img src="{{ $user->image ?? asset('web/images/no_image.jpg') }}" alt="">
                                                        </div>
                                                        <div class="conversation-text">
                                                            <div class="ctext-wrap">
                                                                <i>{{ $user->name }}</i>
                                                                <p style="font-size: 15px;">{{ $item->general_situation }}</p>
                                                                <p style="font-size: 15px;">{{ $item->specific_question }}</p>
                                                                <p style="font-size: 11px;">
                                                                    {{ time_by_timezone($item->created_at, 'd F, Y h:i A') }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="clearfix odd">
                                                        <div class="chat-avatar">
                                                            <img src="{{ $advisor->image ?? asset('web/images/no_image.jpg') }}" alt="male">
                                                        </div>
                                                        <div class="conversation-text">
                                                            <div class="ctext-wrap">
                                                                <i>{{ $advisor->nick_name }}</i>
                                                                <p style="font-size: 15px;">{{ $item->chat }}</p>
                                                                <p style="font-size: 11px;">
                                                                    {{ time_by_timezone($item->created_at, 'd F, Y h:i A') }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                        </ul>
                                    </div>
                                @else
                                    <p class="text-center">
                                        <span class="badge chat-start"
                                            style="background-color: #c2a098;height: 34px;font-size: 20px;width: 25%;box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%);">No
                                            chat history found!
                                        </span>
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style type="text/css">
        .slimScrollDiv {
            height: auto !important;
        }

        .card-box {
            background-color: #fff;
            padding: 1.5rem;
            -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
            box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
            margin-bottom: 24px;
            border-radius: .25rem;
        }

        .conversation-list {
            list-style: none;
            height: 332px;
            padding: 0 20px;
        }

        .conversation-list li {
            margin-bottom: 24px;
        }

        .conversation-list .chat-avatar {
            float: left;
            text-align: center;
            width: 42px;
        }

        .conversation-list .chat-avatar img {
            border-radius: 100%;
            width: 100%;
            height: 40px;
        }

        img {
            vertical-align: middle;
            border-style: none;
        }

        .conversation-list .conversation-text {
            float: left;
            font-size: 12px;
            margin-left: 12px;
            width: 70%;
        }

        .clearfix::after {
            display: block;
            clear: both;
            content: "";
        }

        .conversation-list .ctext-wrap {
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            background: #eceff1;
            border-radius: 3px;
            display: inline-block;
            padding: 12px;
            position: relative;
        }

        .conversation-list .ctext-wrap i {
            display: block;
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            position: relative;
        }

        .conversation-list .ctext-wrap p {
            margin: 0;
            padding-top: 3px;
        }

        .conversation-list .ctext-wrap:after {
            right: 99%;
            top: 0;
            border: solid #0000;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-top-color: #eceff1;
            border-width: 8px;
            margin-left: -1px;
            border-right-color: #eceff1;
        }

        .conversation-list .odd .chat-avatar {
            float: right !important;
        }

        .conversation-list .odd .conversation-text {
            float: right !important;
            margin-right: 12px;
            text-align: right;
            width: 70% !important;
        }

        .conversation-list .odd .ctext-wrap {
            background-color: #fef5e4;
        }

        .conversation-list .odd .ctext-wrap:after {
            border-color: #0000;
            border-left-color: #fef5e4;
            border-top-color: #fef5e4;
            left: 99% !important;
        }

        .line {
            display: block;
            margin: 25px
        }

        .line p {
            font-size: 15px;
            text-align: center;
            border-bottom: 1px solid #cda192;
            position: relative;
        }

        .line p span {
            background-color: white;
            position: relative;
            top: 10px;
            padding: 0 10px;
        }

        #loading {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed;
            display: block;
            opacity: 0.7;
            background-color: #fff;
            z-index: 99;
            text-align: center;
        }

        #loading-image {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 100;
        }

        .alert {
            width: 100%;
        }

        .alert p {
            margin-bottom: 0;
        }
    </style>
@endsection

@section('script')
    <script type="text/javascript">
        $('.alert').delay(3000).fadeOut(300);

        $(document).ready(() => {
            var element = document.getElementById("scroll");

            element.scrollTop = element.scrollHeight;
        });
        $(window).on('load', function() {
            $("#loading").fadeOut("slow");
        });
    </script>
@endsection