@extends('template.home.index')

@section('style')
  <link rel="stylesheet" href="{{asset('assets/css/ajustes.css')}}">
  <style>
      .bom:hover{
		cursor: pointer;
          background: #F12D0A;
      }
      	.chat{
			margin-top: 1%;
			margin-bottom: auto;
		}
		.chat .card{
			height: 500px;
			border-radius: 15px !important;
			background-color: #dc3545 !important;
		}
		.contacts_body{
			padding:  0.75rem 0 !important;
			overflow-y: auto;
			white-space: nowrap;
		}
		.msg_card_body{
			overflow-y: auto;
		}
		.card-header{
			border-radius: 15px 15px 0 0 !important;
			border-bottom: 1ch !important black ;
		}
	 .card-footer{
		border-radius: 0 0 15px 15px !important;
			border-top: 0 !important;
	}

		.container{
			align-content: center;
		}
		.search{
			border-radius: 15px 0 0 15px !important;
			background-color: rgba(0,0,0,0.3) !important;
			border:0 !important;
			color:white !important;
		}
		.search:focus{
		     box-shadow:none !important;
           outline:0px !important;
		}
		.type_msg{
			background-color: rgba(0,0,0,0.3) !important;
			border:0 !important;
			color:white !important;
			height: 60px !important;
			overflow-y: auto;
		}
			.type_msg:focus{
		     box-shadow:none !important;
           outline:0px !important;
		}
		.attach_btn{
	border-radius: 15px 0 0 15px !important;
	background-color: rgba(0,0,0,0.3) !important;
			border:0 !important;
			color: white !important;
			cursor: pointer;
		}
		.send_btn{
	border-radius: 0 15px 15px 0 !important;
	background-color: rgba(0,0,0,0.3) !important;
			border:0 !important;
			color: white !important;
			cursor: pointer;
		}
		.search_btn{
			border-radius: 0 15px 15px 0 !important;
			background-color: rgba(0,0,0,0.3) !important;
			border:0 !important;
			color: white !important;
			cursor: pointer;
		}
		.contacts{
			list-style: none;
			padding: 0;
		}
		.contacts li{
			width: 100% !important;
			padding: 5px 10px;
			margin-bottom: 15px !important;
		}
	.active{
			background-color: rgba(0,0,0,0.3);
	}
		.user_img{
			height: 70px;
			width: 70px;
			border:1.5px solid #f5f6fa;

		}
		.user_img_msg{
			height: 40px;
			width: 40px;
			border:1.5px solid #f5f6fa;

		}
	.img_cont{
			position: relative;
			height: 70px;
			width: 70px;
	}
	.img_cont_msg{
			height: 40px;
			width: 40px;
	}
	.online_icon{
		position: absolute;
		height: 15px;
		width:15px;
		background-color: #4cd137;
		border-radius: 50%;
		bottom: 0.2em;
		right: 0.4em;
		border:1.5px solid white;
	}
	.offline{
		background-color: #c23616 !important;
	}
	.user_info{
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 15px;
	}
	.user_info span{
		font-size: 20px;
		color: white;
	}
	.user_info p{
	font-size: 10px;
	color: rgba(255,255,255,0.6);
	}
	.video_cam{
		margin-left: 50px;
		margin-top: 5px;
	}
	.video_cam span{
		color: white;
		font-size: 20px;
		cursor: pointer;
		margin-right: 20px;
	}
	.msg_cotainer{
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 10px;
		border-radius: 25px;
        color: white;
		background-color: #82ccdd;
		padding: 10px;
		position: relative;
	}
	.msg_cotainer_send{
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 10px;
		border-radius: 25px;
        color: white;
		background-color: #78e08f;
		padding: 10px;
		position: relative;
	}
	.msg_time{
		position: absolute;
		left: 0;
		bottom: -15px;
		color: rgba(255,255,255,0.5);
		font-size: 10px;
	}
	.msg_time_send{
		position: absolute;
		right:0;
		bottom: -15px;
		color: rgba(255,255,255,0.5);
		font-size: 10px;
	}
	.msg_head{
		position: relative;
	}
	#action_menu_btn{
		position: absolute;
		right: 10px;
		top: 10px;
		color: white;
		cursor: pointer;
		font-size: 20px;
	}
	.action_menu{
		z-index: 1;
		position: absolute;
		padding: 15px 0;
		background-color: rgba(0,0,0,0.5);
		color: white;
		border-radius: 15px;
		top: 30px;
		right: 15px;
		display: none;
	}
	.action_menu ul{
		list-style: none;
		padding: 0;
	margin: 0;
	}
	.action_menu ul li{
		width: 100%;
		padding: 10px 15px;
		margin-bottom: 5px;
	}
	.action_menu ul li i{
		padding-right: 10px;

	}
	.action_menu ul li:hover{
		background-color: rgba(0,0,0,0.2);
	}
	@media(max-width: 576px){
	.contacts_card{
		margin-bottom: 15px !important;
	}
	}
    .contenedor-responsivo {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
  </style>
@endsection

@section('content')
    {{-- chat --}}

<div class="chatAc pl-2 col mt-20 " id="chatDiv" >
	<div class="container-fluid h-100">
        <div class="row justify-content-center h-100">
            <div class="col-5 chat"><div class="card mb-sm-3 mb-md-0 contacts_card">
                <div class="card-header" style="text-align: center; color: white">
                    {{-- <div class="input-group">
                        <input type="text" placeholder="Search..." name="" class="form-control search">
                        <div class="input-group-prepend">
                            <span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
                        </div>
                    </div> --}}
                {{  trans('chats.chats') }}
                </div>
                <div class="card-body contacts_body scroll">
                    <ui class="contacts">
                        @foreach ($chats as $key => $item)
                        @php
                            $chat= last($item);
                            $notify = current($item);
                            $count = 0;
                            do {
                                if($notify['type'] != 2)
                                {
                                    $notify = next($item);
                                    $count++;
                                }else{
                                    $chat = $notify;
                                    break;
                                }
                            } while (count($item) > $count);
                        @endphp
                        <li  onclick="open_chatClient(null,{{ $chat['id_order'] }})" class="bom">
                            <div class="d-flex bd-highlight">
                                <div class="img_cont">
                                    <img src="http://admin.enjoit.co/images/genero/man.png" class="rounded-circle user_img">
                                    {{-- <span class="online_icon"></span> --}}
                                </div>
                                <div class="user_info col-md">
                                    <div class="row">
                                        <div class="col-12">
                                            <span>#{{  $chat['reference'] }} - {{   explode(" ", $chat['name_client'])[0] }} @if(!$chat['is_viewed'] && $chat['type'] == 2)<i class="online_icon" id="message_{{$chat['id_order']}}"></i>@endif</span>
                                            <br>
                                            <p>{{ $chat['date'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        @endforeach


                    </ui>
                </div>
            </div></div>
            <div class="col chat">
                <div id="chatBuscat" class="chatBuscat">
                    <div class="card">
                        <div class="card-header msg_head">
                            <div class="d-flex bd-highlight">
                                {{-- <div class="img_cont">
                                    <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
                                    <span class="online_icon"></span>
                                </div>
                                <div class="user_info">
                                    <span>Chat with Khalid</span>
                                    <p>1767 Messages</p>
                                </div> --}}
                                <div class="video_cam">

                                </div>
                            </div>

                        </div>
                        <div class="card">
                            <div class="card-header msg_head " >
                                <div class="d-flex bd-highlight">

                                    <div class="img_cont">
                                        <img src="http://admin.enjoit.co/images/genero/man.png" class="rounded-circle user_img">
                                        {{-- <span class="online_icon"></span> --}}
                                    </div>

                                    <div class="user_info" id="user_info">
                                        <span id="nombreUser"></span>
                                        <p id="userCaso"></p>
                                    </div>

                                </div>

                            </div>


                            <div class="card-body msg_card_body scroll"  id="cuerpoChat">





                            </div>

                            <div class="card-footer" style="border-top: solid black">
                                <div class="row">
                                    <div class="col-md-12">
                                      <div class="input-group">
                                        <input type="text" class="form-control" id="idMessageChat" placeholder="{{  trans('pventa.mensaje') }}">
                                        <div class="input-group-append">
                                          <button class="btn " onclick="openFile()" type="button"><i class="fa fa-paperclip" aria-hidden="true"></i></button>
                                          <input type="file" name="imageSend" id="imageSend"  style="display: none" accept="image/*" onchange="sendImage()">
                                        </div>
                                        <div class="input-group-append">
                                          <button class="btn btn-dark" onclick="send_firebase_chat()" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>

        </div>
    </div>
  </div>

@endsection


@section('js')
  <script src="{{asset('assets/js/ajustes.js')}}"></script>
  <script type="text/javascript">

  </script>
@endsection