@extends('layouts/contentLayoutMaster')

@section('title', 'Inbox')

@section('page-style')
  <link rel="stylesheet" href="{{ asset(('css/base/pages/app-chat.css')) }}">
  <link rel="stylesheet" href="{{ asset(('css/base/pages/app-chat-list.css')) }}">
@endsection

@section('content')

<section>
  <div class="content-area-wrapper container-xxl p-0">
    <div class="sidebar-left">
      <div class="sidebar">
        <div class="chat-profile-sidebar">
          <span class="close-icon hidden">
            <i data-feather="x"></i>
          </span>
        </div>
        <div class="sidebar-content card">
          <span class="sidebar-close-icon hidden">
            <i data-feather="x"></i>
          </span>
          <div class="sidebar-title px-2 pt-2 pb-1">
            <h4 class="text-primary font-weight-bolder mb-1">{{ __('locale.inbox') }}</h4>
            <div class="form-group m-0">
              <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                <label class="btn btn-outline-primary active">
                  <input class="btn-filter" type="radio" name="radio_options" data-filter="all" checked /> {{ __('locale.all') }}
                </label>
                <label class="btn btn-outline-primary">
                  <input class="btn-filter" type="radio" name="radio_options" data-filter="unread" /> {{ __('locale.unread') }}
                </label>
                <label class="btn btn-outline-primary">
                  <input class="btn-filter" type="radio" name="radio_options" data-filter="read" /> {{ __('locale.read') }}
                </label>
              </div>
            </div>
          </div>
          <div id="users-list" class="chat-user-list-wrapper list-group ps ps--active-y">
            <ul class="chat-users-list chat-list media-list" data-filter="all" data-group="{{$selectedGroup}}" @if (Auth::user()->status == 0) data-status="0" @else data-status="1" @endif>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="content-right">
      <section class="chat-app-window">
        @if ($totalChat != 0)
          <div class="active-chat hidden" data-chat="0">
            <div class="chat-navbar position-relative">
              <header class="chat-header">
                <div class="d-flex align-items-center">
                  <div class="sidebar-toggle d-block d-lg-none mr-1">
                    <i data-feather="menu" class="font-medium-5"></i>
                  </div>
                  <div class="avatar avatar-border opponent_avatar user-profile-toggle m-0 mr-1 pointer-events-none">
                    <img src="{{ asset('images/avatars/1.png') }}" alt="avatar" height="36" width="36" />
                  </div>
                  <h5 class="mb-0 opponent_name"></h5>
                  <span class="d-inline-block badge-verified ml-25 mb-1 hidden">
                      <img src="{{asset('images/icon/icon-verified.png')}}" class="w-100">
                  </span>
                </div>
                <div class="d-flex align-items-center">
                  <div class="dropdown">
                    <button
                      class="btn-icon btn btn-transparent hide-arrow btn-sm dropdown-toggle"
                      type="button"
                      data-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false"
                    >
                      <i data-feather="more-vertical" id="chat-header-actions" class="font-medium-2"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="chat-header-actions">
                      <a class="dropdown-item profile" href="">View Profile</a>
                    </div>
                  </div>
                </div>
              </header>
              <div class="d-block px-2 w-100 chat-note">
                <label class="my-50">{{ __('locale.chat_disclaimer') }}</label>
              </div>
            </div>
            <div class="user-chats overflow-auto inbox">
              <div class="chats">
              </div>
            </div>
            <form class="chat-app-form" action="javascript:void(0);">
              <div class="input-group input-group-merge mr-1 form-send-message">
                <input type="text" class="form-control message" placeholder="Type your message" />
              </div>
              <button type="button" class="btn btn-primary send btn-send-chat" onclick="enterChat();">
                <i data-feather="send" class="d-lg-none"></i>
                <span class="d-none d-lg-block">{{ __('locale.send') }}</span>
              </button>
            </form>
          </div>
        @else
          <div class="w-100 text-center mt-2">
            <div class="divider w-25 d-inline-block">
                <div class="divider-text">{{ __('locale.inbox_empty') }}</div>
            </div>
          </div>
        @endif
      </section>
    </div>
  </div>
</section>
@endsection

@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(('js/scripts/member/inbox.js')) }}"></script>
@endsection