@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
  @if(session('message'))
  <div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>{{ session('message') }}</strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  @endif
  <!-- js message alert -->
  <div class="msgbox msgbox-success">
    <span class="fw-medium"></span>
    <span class="msgboxclose btn-close pointer"></span>
  </div>
  <div class="msgbox msgbox-danger">
    <span class="fw-medium"></span>
    <span class="msgboxclose btn-close pointer"></span>
  </div>
  <!-- js message alert -->
  <div class="col-12 mb-3">
    <div class="blck-white inner-page-menu">
      <ul class="nav nav-pills justify-content-center">
        <li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link" href="/loads/{{$load_id}}"><i class="bi bi-file-earmark-text"></i> Preview</a></li>
        <li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link disabled active" href="/loads/{{$load_id}}/report"><i class="bi bi-chat-square-dots"></i> Reports</a></li>
        <li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link" href="/loads/{{$load_id}}/files"><i class="bi bi-file-earmark-pdf"></i> Files</a></li>
      </ul>
    </div>
  </div>
  <div class="col-12 col-lg-8 mx-0 mx-lg-auto mb-3">
    <div class="blck-white">
      @if($reports->isEmpty())
      <div class="col-12 text-center mb-3">
        <i class="bi bi-chat-right-text"></i> Nobody leave message yet
      </div>
      @else
      @foreach($reports as $report)
      <div class="row report-chat mb-2">
        <div class="col {{ $report->user_id == $usr->id ? 'order-1':'order-3' }}"></div>
        <div class="col-9 order-2 px-2 border" style="{{ $report->user_id == $usr->id ? 'background:#efefef;':'' }} ">
          <div>
            <small class="text-muted">{{ $report->created_at }}</small>
            {!! $report->user_id == $usr->id || $usr->role == 'admin' ? '<small id="'.$report->id.'" class="text-danger pointer"><i class="bi bi-trash"></i> Delete</small>': '' !!}
            @if($report->active == 0)
            <p class="text-decoration-line-through">{{$report->context}}</p>
            @else
            <p>{{$report->context}}</p>
            @endif
            @if($report->files)
            @if($report->context!='')
            <hr class="mb-1">
            @endif
            <a href="{{ asset('/uploads/'.$report->files)}}" class="d-block mb-2 icon-table-inactive" download="{{$report->files}}">
              <i class="bi bi-file-earmark-arrow-down h2"></i>
              <small>{{$report->files}}</small>
            </a>
            @endif
          </div>
        </div>
        <div class="col text-left {{ $report->user_id == $usr->id ? 'text-start order-3' : 'order-1 text-end' }}">
          <a href="/users/{{ $report->userData->id }}" title="{{$report->userData->firstname.' '.$report->userData->lastname}}"><img src="{{ $report->userData->avatar ? $report->userData->avatar : 'https://placehold.co/50?text='.$report->userData->firstname[0].$report->userData->lastname[0] }}" width="40" height="40" class="img-fluid"></a>
        </div>
      </div>
      @endforeach
      @endif
      <form method="POST" action="/store/report" class="border-top d-flex flex-row report-chat pt-3" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="load_id" value="{{$load_id}}">
        <div class="input-group mb-3">
          <span class="input-group-text bg-warning">
            <label class="attach pointer" for="attach"><i class="bi bi-file-earmark-plus h3"></i></label>
            <input type="file" name="attach" class="visually-hidden" id="attach" accept=".jpg,.jpeg,.svg,.png,.heic,.pdf,.xlsx,.csv,.xls,.doc,.docx,.txt,.rtf">
          </span>
          <textarea class="form-control" name="text" rows="1" placeholder="Type message here..."></textarea>
          <span class="input-group-text bg-primary border-0">
            <button class="btn btn-send"><i class="bi bi-send text-white h3"></i></button>
          </span>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('script')
<script>
document.addEventListener('DOMContentLoaded', function(){
  const deleteBtn = document.querySelectorAll('small.text-danger.pointer');
  const msgboxSuccess = document.querySelector('.msgbox-success');
  const msgboxError = document.querySelector('.msgbox-danger');
  deleteBtn.forEach((elem) => {
    elem.addEventListener('click', (e) => {
      e.preventDefault();
      fetch('/delete/report/', {
        method: 'PUT',
        body: JSON.stringify({'report_id':elem.id}),
        headers:{
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
      })
      .then(response => {
        if (!response.ok){
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.text();
      })
      .then(res => {
        console.log(res);
        if(res=='deleted'){
          msgboxSuccess.firstElementChild.innerText='You comment was deleted.';
          msgboxSuccess.style.display='block';
          e.target.parentElement.parentElement.parentElement.remove();
        }
      })
      .catch(error => {
        console.log(error);
        msgboxError.firstElementChild.innerText='Something gone wrong. Contact to admin.';
        msgboxError.style.display='block';
      })
    });
  });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  const fileUploadBtn = document.querySelector('.attach i');
  const fileUploadInput = document.querySelector('#attach');
  fileUploadInput.addEventListener('change', () => {
    const iconClass = fileUploadInput.files.length > 0 ? 'bi-file-earmark-check' : 'bi-file-earmark-plus';
    fileUploadBtn.classList.remove('bi-file-earmark-plus', 'bi-file-earmark-check');
    fileUploadBtn.classList.add(iconClass);
  });
});
</script>

<script>
// js msgbox alert
document.addEventListener('DOMContentLoaded', function(){
  const msgboxCloseBtn = document.querySelectorAll('.msgboxclose');
  msgboxCloseBtn.forEach((elem)=>{
    elem.addEventListener('click',(e)=>{
      e.target.closest('div').style.display='none';
      e.target.previousElementSibling.innerHTML='';
    });
  });
});
</script>
@endsection