@extends('driver._layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
  <div class="col-12 mb-3 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>

  @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

  <div class="col-12 mb-3">
    <div class="blck-white row">
      <div class="col-12 col-md-8">
        <div class="d-flex flex-column">

          @foreach($load->reportData as $report)
          @if($report->active == 1)
          <div class="report-chat d-flex flex-row mb-3">
            <div class="avatar {{ $report->user_id === $current_user ? 'order-1':'order-3' }}"></div>
            <div class="flex-fill order-2 px-2" style="border:1px solid #c3c3c3;{{ $report->user_id === $current_user ? 'background:#efefef;':'' }} ">
              <div>
                <small class="text-muted">{{ $report->created_at }}</small>
                {!! $report->user_id === $current_user ? '<small id="'.$report->id.'" class="text-danger pointer"><i class="bi bi-trash"></i> Delete</small>': '' !!}
                <p>{{$report->context}}</p>
                @if($report->files)
                <hr class="mb-1">
                <a href="{{ asset('/uploads/'.$report->files)}}" class="d-block mb-2 icon-table-inactive">
                  <i class="bi bi-file-earmark-arrow-down h2"></i>
                  <small>{{$report->files}}</small>
                </a>
                @endif
              </div>
            </div>
            <div class="avatar {{ $report->user_id === $current_user ? 'text-end order-3' : 'order-1' }}">
              <a href="/users/{{ $report->userData->id }}" title="{{$report->userData->firstname.' '.$report->userData->lastname}}" class="d-block"><img class="img-fluid" src="{{ $report->userData->avatar ? $report->userData->avatar : 'https://placehold.co/50?text='.$report->userData->firstname[0].$report->userData->lastname[0] }}" width="40"></a>
            </div>
          </div>
          @endif
          @endforeach

          <form method="POST" action="/load/{{$load->id}}/report" class="border-top d-flex flex-row report-chat pt-3" enctype="multipart/form-data">
            @csrf
            <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">
              </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>
  </div>
</div>
@endsection

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

@section('script')
<script>
const deleteBtn = document.querySelectorAll('small.text-danger.pointer');
deleteBtn.forEach((elem) => {
  elem.addEventListener('click', (e) => {
    e.preventDefault();
    fetch('/report/'+elem.id+'/delete', {
      method: 'PUT',
      headers:{
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
      },
    })
    .then(response => {
      return response.text();
    })
    .then(textData => {
      if(textData == 1)
        elem.parentNode.parentNode.parentNode.remove();
    })
    .catch(error => {
      console.log(error);
    })
  });
});

const fileUploadBtn = document.querySelector('.attach i');
const fileUploadInput = document.querySelector('#attach');
fileUploadInput.addEventListener('change', ()=>{
  if(fileUploadInput.files.length > 0){
    fileUploadBtn.classList.remove('bi-file-earmark-plus');
    fileUploadBtn.classList.add('bi-file-earmark-check');
  } else {
    fileUploadBtn.classList.remove('bi-file-earmark-check');
    fileUploadBtn.classList.add('bi-file-earmark-plus');
  }
});

</script>
@endsection