@extends('layout.emapp')
@section('content')
    <style>
        /**,*/
        /**::before,*/
        /**::after{*/
        /*  box-sizing:border-box;*/
        /*  margin:0;*/
        /*  padding:0;*/
        /*}*/


        ::selection {
            background: hsl(0, 0%, 0%);
            color: #04b4a9;
        }

        /* width */
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: hsla(0, 0%, 100%);
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: hsl(0, 0%, 50%);
            border-radius: 10px;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        li {
            display: inline-block;
        }

        #chaticn {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /*html,*/
        /*body{*/
        /*  height:100%;*/
        /*}*/

        /*body{*/
        /*  display:grid;*/
        /*  place-items:center;*/
        /*  font-family:sans-serif;*/
        /*}*/

        /*img{*/
        /*  display:block;*/
        /*  max-width:100%;*/
        /*}*/

        .chat {
            width: auto;
            max-width:100%;
            min-width:100%;
            max-height:900px;
             min-height:900px;
            /*max-height:600px;*/
            border-radius: 7px;
            background: transparent;
            /*box-shadow:0 0 10px hsla(0, 0%, 0%, 0.2);*/
            overflow: hidden;
            display:grid;
            grid-template-rows:80% 20%;
        }



        .chat-texts {
            background: white;
            padding: 2rem;
            overflow: auto;
        }

        .textt {
            display: flex;
            padding: 0.7rem;
            align-items: start;
            opacity: 0;
        }

        @keyframes fade-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .textt.sent {
            flex-direction: row-reverse;
        }

        .textt.sent .profile-pic {
            margin-right: 0;
            margin-left: 0.7rem;
        }

        .textt.sent .textt-content {
            border-radius: 10px 10px 10px 10px;
        }

        .textt.sent .textt-content {
            background: #d8d8d8;
            color: #000;
        }

        .profile-pic {
            min-width: 50px;
            height: 50px;
            /*background: gray;*/
            border-radius: 50%;
            margin-right: 0.7rem;
            overflow: hidden;
        }

        .profile-pic img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .textt-content {
            background: #25D366;
            /*background:hsl(220, 20%, 94%);*/
            padding: 1.5rem;
            border-radius: 10px 10px 10px 10px;
            font-size: 0.8rem;
            line-height: 130%;
            letter-spacing: 0.5px;
            text-align: left;
        }

        .timestamp {
            display: block;
            font-size: 0.5rem;
            /*color:hsl(0, 0%, 50%);  */
            color: #666666;
            margin-top: 0.2rem;
            text-align: right;
        }

        /*.timestamp2{*/
        /*  display:block;*/
        /*  font-size:0.7rem;*/
        /*color:hsl(0, 0%, 50%);  */
        /*  color: #666666;*/
        /*  margin-top:0.2rem;*/
        /*}*/


        .textt.sent .timestamp {
            color: #666666;
        }

        .textt-content h5 {
            letter-spacing: 0;
            font-size: 0.9rem;
            margin-bottom: 0.2rem;
        }

        .send-message {
            width: 100%;
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

        }

        .message-textt {
            width: 90%;
            background: #EDEFF3;
            padding: 0 1.2rem;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-basis: 90%;
            /*background:hsl(220, 20%, 94%);*/
        }

        .form-control {
            background: #EDEFF3 !important;
        }

        .form-control:focus {
            color: #000 !important;
            background-color: transparent !important;
            border-color: #6367FF !important;
            outline: 0 !important;
            box-shadow: none !important;
        }

        .smiley,
        .attachment {
            width: 20px;
            height: 20px;
            display: grid;
            place-items: center;
            color: #6367FF;

        }

        .message-textt input {
            padding: 0.5rem;
            border: none;
            background: transparent;
        }

        .message-textt input:focus {
            outline: none;
        }

        button {
            border: none;
            /*background:transparent;*/
            /*width:60px;*/
            /*height:60px;*/
            /*font-size:2rem;*/
            /*border-radius:50%;*/
            /*background:#04b4a9;*/
            /*color:white;*/
            /*display:grid;*/
            place-items: center;
            transition: 300ms ease;
        }

        button:hover {
            background: black;
            cursor: pointer;
        }
        
        @media(max-width: 576px){
         .chat-texts{
             padding: 1rem;
             padding-top: 2rem;
         }
         .textt-content {
           padding: 1rem;  
         }
            .send-message {
            width: 100%;
            /*padding: 1rem;*/
            display: flex;
            align-items: center;
            justify-content: space-between;

        }
        
        .chat{
            overflow: visible;
        }

        .message-textt {
            width: 90%;
            background: #EDEFF3;
            /*padding: 0 1.2rem;*/
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-basis: 90%;
            /*background:hsl(220, 20%, 94%);*/
        }
        }
        .btn_upload {
            cursor: pointer;
            display: inline-block;
            overflow: hidden;
            position: relative;
            color: #fff;
            background-color: #2a72d4;
            border: 1px solid #166b8a;
            padding: 5px 10px;
        }

        .btn_upload:hover,
        .btn_upload:focus {
            background-color: #7ca9e6;
        }

        .yes {
            display: flex;
            align-items: flex-start;
            margin-top: 10px !important;
        }

        .btn_upload input {
            cursor: pointer;
            height: 100%;
            position: absolute;
            filter: alpha(opacity=1);
            -moz-opacity: 0;
            opacity: 0;
        }

        .it {
            height: 100px;
            margin-left: 10px;
        }

        .btn-rmv1,
        .btn-rmv2 {
            display: none;
        }

        .rmv {
            cursor: pointer;
            color: #fff;
            border-radius: 30px;
            border: 1px solid #fff;
            display: inline-block;
            background: rgba(255, 0, 0, 1);
            margin: -5px -10px;
        }

        .rmv:hover {
            background: rgba(255, 0, 0, 0.5);
        }
        textarea {
            border: none;
            background-color: transparent;
            resize: none;
            outline: none;
        }
        
       
    </style>

    <section class="home">
        <div class="container">
            <div class="chat">
                <!--<div style="paddint-top: 3rem;">-->
                <div class="chat-texts" id="scrolldiv">
                    @foreach ($chat['chats'] as $item)
                        @if ($item['replied_by'] == 1)
                            <div class="row">
                                <div class="col">
                                    <div class="textt">
                                        <div class="profile-pic"> <img
                                                src="{{asset('front-con1/images/icon2.jpg')}}"
                                                alt=""> </div>
                                                <div class="timestamp">
                                        <div class="textt-content">
                                            <!--<h5>Joannie</h5>-->
                                            <span style="white-space: pre-line; word-break: break-all;">{{ $item['comment'] }}</span>
                                            @if ($item['attachment'])
                                                <span><a target="_blank" style="color: aliceblue"
                                                    href="{{ asset('images/chat/' . $item['attachment']) }}">attachment</a></span>
                                            @endif
                                        </div>
                                        {{ $item['created_at'] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="row">
                                <div class="col">
                                    <div class="textt sent">
                                        <div class="profile-pic"> <img
                                                src="{{ asset('images/employer/' . session()->get('employer')['attachment']) }}"
                                                alt=""> </div>
<div class="timestamp">
                                        <div class="textt-content">
                                            <!--<h5>Laurie</h5>-->
                                            <span style="white-space: pre-line; word-break: break-all;">{{ $item['comment'] }}</span>
                                            @if ($item['attachment'])
                                               <span> <a target="_blank"
                                                    href="{{ asset('images/chat/' . $item['attachment']) }}">attachment</a></span>
                                            @endif
                                        </div>
                                        {{ $item['created_at'] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                    <div id="newchat"></div>

                </div>

                <div class="row">
                    <div class="col-12">

                        <div class="send-message">
                            <div class="message-textt shadow">
                                <!--<div class="smiley"><i class="lni lni-smile"></i></div>-->
                                <div class="col-10">
                                    <form method="POST" action="{{ route('messages-em', ['id' => $chat['id']]) }}"
                                        enctype="multipart/form-data">
                                        <div class="form-group pt-3">
                                            @csrf
                                            <textarea class="form-control" id="comment" name="comment" required type="text"
                                                placeholder="Type Something..."></textarea>
                                            <input type="file" name="image" id="myFile" style="display: none;" onchange="$('#upload-img-info').text(this.files[0].name)">
                                            <input type="submit" id="submit" style="display: none;">
                                        </div>
                                        <!--<div class="row">-->
                                             <div class="" style="word-break: break-all;">
                                        <span class='label label-info' id="upload-img-info" ></span>&nbsp &nbsp<span><input
                                            type="button" id="removeImage2" value="x" class="btn-rmv2 text-danger" /></span>
                                            </div>
                                            <!--</div>-->
                                    </form>
                                </div>
                                <ul id="chaticn">
                                    <li class="pr-2"><img src="{{ asset('employer-con/images/attach.png') }}"
                                            height="24" width="26" id="image" class="img-responsive contactimg"
                                            alt="attach" style=""></li>

                                    <li> <img src="{{ asset('employer-con/images/send-message.png') }}" height="20"
                                            width="22" id="send" class="img-responsive contactimg" alt="attach"
                                            style="">
                                    </li>


                                    <!--<li> <div class="attachment"> <i class="fa-solid fa-paper-plane"></i></div></li>-->
                                </ul>
                                <!--<div class="attachment"><i class="lni lni-upload"></i></div>-->
                            </div>
                            <button class="profile-pic"><img
                                    src="{{ asset('images/employer/' . session()->get('employer')['attachment']) }}"
                                    alt=""></button>
                        </div>
                    </div>
                </div>
                



                <!--</div>-->
            </div>



        </div>
    </section>
@endsection
@section('script')
    <script>
        const text = document.querySelectorAll(".textt");
        let delay = 0;
        text.forEach(el => {
            el.style.animation = "fade-in 1s ease forwards";
            el.style.animationDelay = delay + "s";
            delay += 0;
        });
        $('#image').click(function() {
            $('#myFile').click()
        });
        // $('#myFile').change(function() {
        //     alert("Image uploaded successfully")
        // });
        $('#send').click(function() {
            $('#submit').click()
        });
        $(document).ready(function() {
            $('#scrolldiv').scrollTop($('#scrolldiv')[0].scrollHeight);
        function readURL(input, imgControlName) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $(imgControlName).attr('src', e.target.result);
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }
            $("#myFile").change(function() {
                var imgControlName = "#ImgPreview2";
                readURL(this, imgControlName);
                $('.preview2').addClass('it');
                $('.btn-rmv2').addClass('rmv');
                $("#comment").prop("required", false);
            });
            $("#removeImage2").click(function(e) {
                e.preventDefault();
                $("#myFile").val("");
                $("#comment").prop("required", true);
                $("#upload-img-info").html("");
                $("#ImgPreview2").attr("src", "");
                $('.preview2').removeClass('it');
                $('.btn-rmv2').removeClass('rmv');
            });
            });
    </script>
@endsection