@extends('layouts.app')

@section('page_css')
  @parent
  <!-- Vendors CSS -->
  <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.css') }}">
  <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/app-chat.css') }}">
@endsection

<script type="text/javascript">
  var frm_id                       = 'form#frm_chat_info';  
  var ele_currently_cht_wth_usr_id = frm_id+' input#currently_cht_wth_usr_id';
  var frm_snd_msg_id               = 'form#frm_send_message';

  var arr_valid_ext  = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'jpg', 'jpeg', 'gif', 'png'];
  var arr_valid_ext1 = [];
  var valid_ext_list = '';

  var reload_timer_id = 0;
  var reload_timer    = 0;
  var last_chat_id    = 0;
</script>

@section('content')
  <!-- Content -->
  @php
    $base_path       = asset('dist/images'); 
    $default_usr_pic = $base_path."/"."profile-default.png";
    $log_in_usr_pic  = $default_usr_pic;

    if(@$logged_in_usr_ppic && @$logged_in_usr_ppic != '')
    {
      $base_path     = asset('uploads/users_profile_pic');  
      $log_in_usr_pic = $base_path."/".$logged_in_usr_ppic;
    }
    
    $usr_type_cap = '';

    if(@$logged_in_usr_type == 'ADMIN' || @$logged_in_usr_type == _ADMIN_USER_ || @in_array(_DEVELOPER_ROLE_ID_, @$assigned_role_ids) || @in_array(_ADMIN_ROLE_ID_, @$assigned_role_ids))
    {
      $usr_type_cap = @_USER_TYPE_ARR_[@_ADMIN_USER_];      
    }
    else if(@$logged_in_usr_type == _INVESTOR_USER_ || @in_array(_INVESTOR_ROLE_ID_, @$assigned_role_ids))
    {
      $usr_type_cap = @_USER_TYPE_ARR_[@_INVESTOR_USER_];
    }
    else if(@$logged_in_usr_type == 'MENTOR' || @in_array(_MENTOR_ROLE_ID_, @$assigned_role_ids))
    {
      $usr_type_cap = @_USER_TYPE_ARR_[@_MENTOR_USER_];
    }
    else if(@$logged_in_usr_type == 'VC_FUND' || @in_array(_VC_FUND_ROLE_ID_, @$assigned_role_ids))
    {
      $usr_type_cap = @_USER_TYPE_ARR_[@_VC_FUND_USER_];
    }
    else if(@$logged_in_usr_type == 'STARTUP' || @in_array(_STARTUP_ROLE_ID_, @$assigned_role_ids))
    {
      $usr_type_cap = @_USER_TYPE_ARR_[@_STARTUP_USER_];
    }
    else if(@$logged_in_usr_type == 'INHOUSE' || @in_array(_IN_HOUSE_ROLE_ID_, @$assigned_role_ids))
    {
      $usr_type_cap = @_USER_TYPE_ARR_[@_INHOUSE_USER_];
    }

    $usr_type_cap = (@$usr_type_cap) ?? 'User';

    $chk1 = '';
    $chk2 = '';
    $chk3 = '';

    if(@$chat_status == 'busy')
    {
      $chk2 = 'checked';
    }
    elseif(@$chat_status == 'away')
    {
      $chk3 = 'checked';
    }
    else 
    {
      $chk1 = 'checked'; 
    }

    $chk_notification = '';

    if(@$chat_notification == 'Y')
    {
      $chk_notification = 'checked';      
    } 
  @endphp

  @php
    //Mtak
    $navigate_user_id = "";
    if(request()->has('navigate_user_id'))
    {
      $navigate_user_id = request()->query('navigate_user_id');
    }
  @endphp
  <form name="frm_chat_info" id="frm_chat_info" method="post" class="p-0 m-0">
    <input type="hidden" name="currently_cht_wth_usr_id" id="currently_cht_wth_usr_id" value="{{ @$currently_cht_wth_usr_id }}" />
  </form>
  <div class="container-xxl flex-grow-1 container-p-y">
    <div class="app-chat card overflow-hidden">
      <div class="row g-0">
        
        <!-- BEGIN : Sidebar Left -->
        <div class="col app-chat-sidebar-left app-sidebar overflow-hidden" id="app-chat-sidebar-left">
          <div class="chat-sidebar-left-user sidebar-header d-flex flex-column justify-content-center align-items-center flex-wrap px-4 pt-5">
            <div class="avatar avatar-xl avatar-online">
              <img src="{{ $default_usr_pic }}" alt="LoggedIn User" class="rounded-circle" />
            </div>
            <h5 class="mt-2 mb-0">{{ @$logged_in_usr_name }}</h5>
            <small>{{ @$usr_type_cap }}</small>
            <i class="ti ti-x ti-sm cursor-pointer close-sidebar" data-bs-toggle="sidebar" data-overlay data-target="#app-chat-sidebar-left"></i>
          </div>
          <div class="sidebar-body px-4 pb-4">
            <div class="my-4">
              <p class="text-muted text-uppercase">About</p>
              <textarea id="chat-sidebar-left-user-about" class="form-control chat-sidebar-left-user-about mt-3" rows="4" maxlength="500">{!! @$logged_in_usr_abt !!}</textarea>
              <input type="hidden" id="left_usr_abt_old" value="{!! @$logged_in_usr_abt !!}" />
            </div>
            <div class="my-4">
              <p class="text-muted text-uppercase">Status</p>
              <div class="d-grid gap-1">
                <div class="form-check form-check-success">
                  <input name="chat-user-status" class="form-check-input" type="radio" value="active" id="user-active" {{ $chk1 }} />
                  <label class="form-check-label" for="user-active">Active</label>
                </div>
                <div class="form-check form-check-danger">
                  <input name="chat-user-status" class="form-check-input" type="radio" value="busy" id="user-busy" {{ $chk2 }} />
                  <label class="form-check-label" for="user-busy">Busy</label>
                </div>
                <div class="form-check form-check-warning">
                  <input name="chat-user-status" class="form-check-input" type="radio" value="away" id="user-away" {{ $chk3 }} />
                  <label class="form-check-label" for="user-away">Away</label>
                </div>
                <!--
                <div class="form-check form-check-secondary">
                  <input name="chat-user-status" class="form-check-input" type="radio" value="offline" id="user-offline" />
                  <label class="form-check-label" for="user-offline">Offline</label>
                </div>
                -->
              </div>
            </div>
            <div class="my-4">
              <p class="text-muted text-uppercase">Settings</p>
              <ul class="list-unstyled d-grid gap-2 me-3">
                <li class="d-flex justify-content-between align-items-center">
                  <div>
                    <i class="ti ti-bell me-1"></i>
                    <span class="align-middle">Notification</span>
                  </div>
                  <label class="switch switch-primary me-4">
                    <input type="checkbox" class="switch-input" {{ $chk_notification }} name="switch_notification" value="Y" />
                    <span class="switch-toggle-slider">
                      <span class="switch-on"></span>
                      <span class="switch-off"></span>
                    </span>
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- END : Sidebar Left-->

        <!-- BEGIN : Chat & Contacts -->
        <div class="col app-chat-contacts app-sidebar flex-grow-0 overflow-hidden border-end" id="app-chat-contacts">
          <div class="sidebar-header">
            <div class="d-flex align-items-center">
              <div class="flex-shrink-0 avatar avatar-online me-3" data-bs-toggle="sidebar" data-overlay="app-overlay-ex" data-target="#app-chat-sidebar-left">
                <img class="user-avatar rounded-circle cursor-pointer" src="{{ $log_in_usr_pic }}" alt="User" />
              </div>
              <div class="flex-grow-1 input-group input-group-merge rounded-pill">
                <span class="input-group-text" id="basic-addon-search31"><i class="ti ti-search"></i></span>
                <input type="text" class="form-control chat-search-input" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search31"/>
              </div>
            </div>
            <i class="ti ti-x cursor-pointer close-sidebar d-lg-none d-block position-absolute top-0 end-0" data-overlay data-bs-toggle="sidebar" data-target="#app-chat-contacts"></i>
          </div>
          <hr class="container-m-nx m-0" />
          <div class="sidebar-body">
            <div class="chat-contact-list-item-title">
              <h5 class="text-primary mb-0 px-4 pt-3 pb-2">Chats</h5>
            </div>
            
            <!-- BEGIN : Unread Chats -->
            <ul class="list-unstyled chat-contact-list" id="chat-list">
              @include('admin.chat.recent_chat_list')  
            </ul>
            <!-- END : Unread Chats -->
            
            <!-- BEGIN : Contacts -->
            <ul class="list-unstyled chat-contact-list mb-0" id="contact-list">
              @include('admin.chat.contact_list')
            </ul>
            <!-- END : Contacts -->
          </div>
        </div>
        <!-- END : Chat & Contacts -->

        <!-- BEGIN : Chat History -->
        <div class="col app-chat-history bg-body" id="app-chat-history-list">
          @include('admin.chat.chat_history')  
        </div>
        <!-- END : Chat History -->

        <!-- BEGIN : Sidebar Right -->
        <div class="col app-chat-sidebar-right app-sidebar overflow-hidden" id="app-chat-sidebar-right">
          @include('admin.chat.chat_sidebar_right')  
        </div>
        <!-- END : Sidebar Right -->

        <div class="app-overlay"></div>
      </div>
    </div>
  </div>
  <div id="temp_chat_msg" style="visibility:hidden;display:none;"><ul></ul></div>
  <!--/ Content -->
@endsection

@section('page_scripts')
  @parent
  <!-- Page JS -->
  <script type="text/javascript">
    
    function checkFileExtension(chat_file)
    {
      var response = {'status' : 0, 'msg' : 'File not found'};
      chat_file     = $.trim(chat_file);

      if(chat_file != '')
      {
        var ext_found = 0;
        var arr_file  = chat_file.split('.');  

        if(arr_file.length)
        {
          var ext = $.trim(arr_file[1]).toLowerCase();

          for(var idx in arr_valid_ext)
          {
            var v_ext = $.trim(arr_valid_ext[idx]);

            if(v_ext == ext)
            {
              ext_found = 1;
              break;
            }  
          }
        }  

        var msg = (ext_found == 0) ? 'Invalid File Type, Valid File Types are : '+valid_ext_list : '';  
        
        response.status = ext_found;
        response.msg    = msg; 
      }
      
      return response;  
    }

    function loadChatContacts()
    {
      var currently_cht_wth_usr_id = $(ele_currently_cht_wth_usr_id).val();
      $.ajax(
        { 
          type : "post", url : "{{ route('admin.chat.get_contacts') }}", 
          data: {"_token" : "{{ csrf_token() }}", 'currently_cht_wth_usr_id' : currently_cht_wth_usr_id }, async:false,
          success : function(response_contacts)
          {
            $('.app-chat #contact-list').html(response_contacts);
          }
        }).done(function(){});
    }

    function loadChatHistory()
    {
      var currently_cht_wth_usr_id = $(ele_currently_cht_wth_usr_id).val();

      $.ajax(
        { 
          type : "post", url : "{{ route('admin.chat.get_chat_history') }}", 
          data: {"_token" : "{{ csrf_token() }}", 'currently_cht_wth_usr_id' : currently_cht_wth_usr_id }, async:false,
          
          success : function(response_chat_history)
          {
            $('.app-chat #app-chat-history-list').html(response_chat_history);
            reloadHistoryJs();
          }
        }).done(function(){});   
    }

    function loadChatSidebarRight()
    {
      var currently_cht_wth_usr_id = $(ele_currently_cht_wth_usr_id).val();
      
      $.ajax(
        { 
          type : "post", url : "{{ route('admin.chat.get_chat_sidebar_right') }}", 
          data: {"_token" : "{{ csrf_token() }}", 'currently_cht_wth_usr_id' : currently_cht_wth_usr_id }, async:false,
          
          success : function(response_sidebar_right)
          {
            $('.app-chat #app-chat-sidebar-right').html(response_sidebar_right);
          }
        }).done(function(){});  
    }

    function reloadHistoryJs()
    {
      $.ajax(
      { 
        type : "post", url : "{{ route('admin.chat.get_chat_history_js') }}", 
        data: {"_token" : "{{ csrf_token() }}" }, async : false,
        
        success : function(response_chat_history_js)
        {
          reload_timer = 0;
          $('div#chat_history_js').html(response_chat_history_js);
        }
      }).done(function(){});
    }


    $(document).ready(function()
    {
      for(var idx in arr_valid_ext)
      {
        var v_ext = $.trim(arr_valid_ext[idx]).toLowerCase(); //Valid Extension

        if(v_ext != '')
        {
          arr_valid_ext1.push('*.'+v_ext);
        }  
      }

      if(arr_valid_ext1.length)
      {
        valid_ext_list = arr_valid_ext1.join(', '); 
      }
    });
  </script>
  <div class="p-0 m-0" id="chat_history_js">
    @include('admin.chat.chat_history_js')
  </div>
  <div class="p-0 m-0" id="chat_message_list_js">
    @include('admin.chat.chat_message_list_js')
  </div>

  <!--Mtak Begin -->
  <script type="text/javascript">
    //Mtak inpage user navigate
    inPageNavigateUser = function(navigate_user_id = ""){
      if(Boolean(navigate_user_id))
      {
        let element_id = 'contact_'+navigate_user_id;
        let elementExist = document.body.contains(document.getElementById(element_id));
        if(elementExist)
        {
          //console.log(element_id);
          let target_contact = document.getElementById(element_id);
          target_contact.scrollIntoView({behavior: 'smooth',block: 'center',inline: 'center'});    
          target_contact.click();
        }
      }
    }

    //Begin in page navigate
    let prev_handler = window.onload;
    window.onload = function () {
      if (prev_handler) {
        prev_handler();
      }
      let navigate_user_id = @JSON($navigate_user_id);
      setTimeout(function(){
        inPageNavigateUser(navigate_user_id);
      },0);
    };
    //End in page navigate
  </script>
  <!-- End  -->
@endsection

<!--/ END PAGE CONTENT -->