@extends('template.home.index')
@section('title', 'Admin Web')

@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')
  <br>
  <ul class="nav nav-pills nav-justified nav-servicios-pv" id="pills-tab" role="tablist">
    @sidebar('adminweb.getCategories')
	<div class="col-md-2">
      <li class="nav-item mrg_right_10">
      <a class="nav-link nav_item_ordenar itemService" href="javascript:;" onclick="getViewCategories()">
        <div class="row">
          <div class="col-md-12">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <b>{{  trans('adminweb.agotado') }} </b>
          </div>
        </div>
      </a>
    </li>
    </div>
	@endsidebar
    @sidebar('adminweb.soporte.openChat')
	<div class="col-md-2">
        {{-- @php dd(session()->get('session_enjoit')) @endphp --}}
        <li class="nav-item mrg_right_10">
        <a class="nav-link nav_item_ordenar itemService" href="{{ route('soporte') }}" >
            {{-- <a class="nav-link nav_item_ordenar itemService" href="{{env('CRM_ROUTE').'/support/form?token='. session()->get('session_enjoit')->restaurant->idRestaurant . '&type=1&name='. session()->get('session_enjoit')->restaurant->name}}" target="_blank"> --}}
          <div class="row">
            <div class="col-md-12">
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <b>{{  trans('adminweb.soporteEnjoit') }}</b>
            </div>
          </div>
        </a>
      </li>
      </div>
	  @endsidebar
  </ul>
  <div class="subcategories pl-2 col-md-12">

  </div>




 {{-- Modal --}}

  <div class="modal fade" id="openModalState" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">{{  trans('adminweb.cambiarEstado') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row" id="states">
                <label for="typeState">{{  trans('adminweb.seleccioneEstado') }}</label>
                <div class="col-md-12 text-center" id="estadosProducto">
                 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

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

  </script>
@endsection