@extends('layout')

@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

@section('body')
<div class="row px-0 px-md-3 my-4">
  <!-- 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 col-md-4 mb-3">
    <div class="blck-white row row-cols-2 mx-1">
      <h6 class="my-2 col-12">Statements:</h6>
      @if($statements)
      @foreach($statements as $statement)
      @if($statement->statementfile)
      <div class="col">{{$statement->period_start}}</div>
      <div class="col"><a href="{{asset($statement->statementfile)}}" class="text-decoration-none">Download  <i class="bi bi-receipt"></i></a></div>
      @endif
      @endforeach
      @else
      @endif
    </div>
  </div>
  <div class="col-12 col-md-4 mb-3">
    <div class="blck-white mx-1">
      <h6 class="my-2 ms-2">Claims:</h6>
      @if(!$claims->isEmpty())
      @foreach($claims as $claim)
      <a href="/loads/{{$claim->id}}" class="text-decoration-none icon-table-inactive d-block">{{ $claim->pickup_city }}, {{ $claim->pickup_state }}<i class="bi bi-eye-fill float-end"></i></a>
      @endforeach
      @else
      <p class="text-center">You have not any claims</p>
      @endif
    </div>
  </div>
  <div class="col-12 col-md-4 mb-3">
    <div class="blck-white mx-1">
      <h6 class="my-2 ms-2">Files:</h6>
      @if($documents)
      <a href="{{ asset('driversdocs/'.$usr->id.'/Lease_truck.pdf') }}" download="Truck_lease.pdf" class="d-block text-decoration-none"><i class="bi bi-filetype-pdf"></i> Truck Lease Agreement</a>
      <a href="{{ asset('driversdocs/'.$usr->id.'/Lease_trailer.pdf') }}" download="Trailer_lease.pdf" class="d-block text-decoration-none"><i class="bi bi-filetype-pdf"></i> Trailer Lease Agreement</a>
      <a href="{{ asset('driversdocs/'.$usr->id.'/sign.pdf') }}" download="Sign.pdf" class="d-block text-decoration-none"><i class="bi bi-filetype-pdf"></i> Company Sign</a>
      <a href="{{ asset('driversdocs/'.$usr->id.'/policy.pdf') }}" download="Policy.pdf" class="d-block text-decoration-none"><i class="bi bi-filetype-pdf"></i> Initial Documents</a>
      @else
      <span class="btn btn-primary btngeneratedocs w-100"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span> Generate documents</span>
      @endif
    </div>
  </div>
  <div class="col-12 blck-white">
    <h4 class="my-2 ms-2">Recent loads:</h4>
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <td>Date</td>
          <td>Trip</td>
          <td class="d-none d-md-table-cell">Rate</td>
          <td class="d-none d-md-table-cell">Price</td>
          <td class="text-center">Status</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        @if($loads->isEmpty())
        <tr><td colspan="6" class="text-center">You have not any load</td></tr>
        @else
        @foreach($loads as $load)
        <tr>
          <td>{{ date('j M Y', strtotime($load->pickup_date)) }}</td>
          <td>{{ $load->pickup_city }}, {{ $load->pickup_state }} -> {{ $load->delivery_city }}, {{ $load->delivery_state }}</td>
          <td class="d-none d-md-table-cell">${{ $load->rate }}/mile</td>
          <td class="d-none d-md-table-cell">${{ $load->price }}</td>
          <td class="text-center"><span class="badge text-bg-{{ $load->status === 'booked' ? 'primary' : ($load->status === 'pickup' ? 'success' : ($load->status === 'waiting pickup' ? 'warning' : ($load->status === 'canceled' ? 'danger' : ($load->status === 'recovery' ? 'info' : 'secondary')))) }}">{{ $load->status }}</span></td>
          <td><a href="/loads/{{$load->id}}" class="icon-table-inactive" title="view"><i class="bi bi-eye-fill"></i></a></td>
        </tr>
        @endforeach
        @endif
      </tbody>
    </table>
  </div>
</div>
@endsection

@section('script')
@if(!$documents)
<script>
document.addEventListener('DOMContentLoaded', function(){
  const btngeneratedocs = document.querySelector('.btngeneratedocs');
  const msgboxSuccess = document.querySelector('.msgbox-success');
  const msgboxError = document.querySelector('.msgbox-danger');
  btngeneratedocs.addEventListener('click', (e)=>{
    e.target.classList.add('disabled');
    e.target.firstElementChild.style.display='inline-block';
    fetch('/py/driverdoc?driver={{$usr->id}}',{
      method:'GET',
    })
    .then(response=>{
      if(response.ok){
        return response.json();
      }
    })
    .then(data=>{
      console.log(data);
      if(data.message=='done'){
        msgboxSuccess.style.display='block';
        msgboxSuccess.firstElementChild.innerText='Documents were generated, please download each .';
        e.target.closest('div').innerHTML='<h6 class="my-2 ms-2">Files:</h6><a href="{{ asset("driversdocs/$usr->id/Lease_truck.pdf") }}" download="Truck_lease.pdf" class="d-block text-decoration-none"><i class="bi bi-filetype-pdf"></i> Truck Lease Agreement</a><a href="{{ asset("driversdocs/$usr->id/Lease_trailer.pdf") }}" download="Trailer_lease.pdf" class="d-block text-decoration-none"><i class="bi bi-filetype-pdf"></i> Trailer Lease Agreement</a><a href="{{ asset("driversdocs/$usr->id/sign.pdf") }}" download="Sign.pdf" class="d-block text-decoration-none"><i class="bi bi-filetype-pdf"></i> Company Sign</a><a href="{{ asset("driversdocs/$usr->id}/policy.pdf") }}" download="Policy.pdf" class="d-block text-decoration-none"><i class="bi bi-filetype-pdf"></i> Initial Documents</a>';
      } else {
        msgboxError.style.display='block';
        msgboxError.firstElementChild.innerText='Error, contact to admin.';
        e.target.classList.remove('disabled');
        e.target.firstElementChild.style.display='none';
      }
    });
  });
});
</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>
@endif
@endsection