@extends('page')
<style>
  .direct-chat-messages {
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;
  }

  .rounded {
  height: 30px;
  border-radius: 4px;
  padding: 4px;
}

.in1 {
  width: 120px;
}

.in2 {
  width: 350px;
}

i {
  margin: 0 8px;
}

.filename-container {
  margin: 20px 20px 0 0;
}

.filename {
  display: inline-block;
  padding: 0 10px;
  margin-right: 10px;
  background-color: #ccc;
  border: 1px solid black;
  border-radius: 15px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  font-family: 'verdana', sans-serif;
}

.hide {
  display: none;
}

</style>
@section('content')


<!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1></h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('chat.index') }}">Chat List</a></li>
            <li class="breadcrumb-item active">{{$chat_details->product->product_name}} </sapn>'</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

@if ($message = Session::get('success'))
    <div class="alert alert-success">
        {{ $message }}
    </div>
@endif

<!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-9">
          <div class="card card-info card-outline direct-chat direct-chat-primary">
            <!-- /.card-header -->
                <div class="card-header ui-sortable-handle" style="cursor: move;">
                  <h3 class="card-title"><strong>{{$chat_details->from->name}}</strong><span>({{$chat_details->product->product_name.'/'.$chat_details->code }} )</sapn></h3>
                </div>

                <div class="card-body">

                  <div class="direct-chat-messages" style="height : 350px">
                    @foreach($chat_details->messages as $messages)
                      @if($messages->type ==  0)
                        <div class="direct-chat-msg">
                            <div class="direct-chat-infos clearfix">
                              <span class="direct-chat-name float-left">{{$chat_details->from->name}}</span>
                              <span class="direct-chat-timestamp float-right">{{date('d M h:i a',strtotime($messages->date))}}</span>
                            </div>
                            <img class="direct-chat-img" src="{{asset('../storage/app/users/1679479709_image_2023_03_17T07_47_26_584Z.png')}}" alt="message user image">
                            <div class="direct-chat-text">
                                
                                @if($messages->chat_file != '')
                                @php  $file_extension = substr($messages->chat_file, strrpos($messages->chat_file, '.') + 1); @endphp
                                <a style="color: #1e1f21;" href="{{asset('../storage/app/chat_files/'.$messages->chat_file)}}" target="_blank">
                                  @if(in_array($file_extension,['png','jpg','jpeg']))
                                    <img height="50px" src="{{asset('../storage/app/chat_files/'.$messages->chat_file)}}">
                                  @else
                                    <i class="fa fa-file fa-lg" aria-hidden="true"></i>
                                  @endif
                                </a>
                                @else
                                  {{$messages->message}}
                                @endif
                            </div>
                          </div>
                      @elseif($messages->type ==  1)
                          <div class="direct-chat-msg right">
                            <div class="direct-chat-infos clearfix">
                              <span class="direct-chat-name float-right">{{$chat_details->to->name}}</span>
                              <span class="direct-chat-timestamp float-left">{{date('d M h:i a',strtotime($messages->date))}}</span>
                            </div>
                            <img class="direct-chat-img" src="{{asset('../storage/app/users/1679479709_image_2023_03_17T07_47_26_584Z.png')}}" alt="message user image">
                            <div class="direct-chat-text">
                              
                              @if($messages->chat_file != '')
                                @php  $file_extension = substr($messages->chat_file, strrpos($messages->chat_file, '.') + 1); @endphp
                                <a style="color: #1e1f21;" href="{{asset('../storage/app/chat_files/'.$messages->chat_file)}}" target="_blank">
                                  @if(in_array($file_extension,['png','jpg','jpeg']))
                                    <img height="50px" src="{{asset('../storage/app/chat_files/'.$messages->chat_file)}}">
                                  @else
                                    <i class="fa fa-file fa-lg" aria-hidden="true"></i>
                                  @endif
                                </a>
                              @else
                                {{$messages->message}}
                              @endif
                            </div>
                          </div>
                      @endif
                    @endforeach                   
                </div>

                <div class="card-footer" >
                  <form action="{{url('chat-details/'.$chat_details->id)}}" method="post" enctype='multipart/form-data'>
                    @csrf()
                    <div class="input-group">
                      <input type="text" name="message" id="chat_message" placeholder="Type Message ..." class="form-control">
                      
                        <span class="input-group-append">
                          
                          <button type="button"  class="btn btn-default">
                              
                              <label for="file-input">
                                <input type="file" class="file-input hide" name="messageFile" id="file-input">
                                  <i class="fa fa-paperclip fa-lg" aria-hidden="true"></i>
                              </label>
                          </button>
                        </span>
                        <span class="input-group-append">
                          <button type="submit" class="btn btn-primary">Send</button>
                        </span>
                    </div>
                  </form>
                </div>

              </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
        <div class="col-3">
            <div class="card card-info card-outline">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="ion ion-clipboard mr-1"></i>
                  Guidelines
                </h3>
                </div>
                <div class="card-body">
                Guidelines comes here.
                </div>
            </div>
        </div>
    </div>
  </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->

    <script type="text/javascript">
      
      $(document).ready(function() {
          $('.file-input').change(function() {
            $file = $(this).val();
            $file = $file.replace(/.*[\/\\]/, ''); //grab only the file name not the path
            $('#chat_message').val($file);
            $('#chat_message').prop('disabled', true);
          })

        })
    </script>
@endsection