@extends('owner._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">
  <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-1 mb-sm-0"><a class="nav-link disabled active" href="#"><i class="bi bi-info-square"></i> Information</a></li>
        <li class="nav-item mx-1 mb-1 mb-sm-0"><a class="nav-link" href="/drivers/{{ $driver->id }}/loads"><i class="bi bi-truck"></i> Loads</a></li>
      </ul>
    </div>
  </div>
  <div class="col-12 col-lg-4 mb-3">
    <div class="blck-white h-100">
      <h6 class="my-2 ms-2">Drivers Information:</h6>
      <div class="row">
        <div class="col">Full Name:</div>
        <div class="col-auto me-2">{{ $driver->userData->firstname }} {{ $driver->userData->lastname }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col">Cell phone:</div>
        <div class="col-auto me-2">{{ $driver->userData->cellphone }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col">Home phone:</div>
        <div class="col-auto me-2">{{ $driver->userData->homephone }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col">Status:</div>
        <div class="col-auto me-2">{!! $driver->status === 'loaded' ? '<span class="badge text-bg-success">loaded</span>' : '<span class="badge text-bg-secondary">waiting</span>' !!}</div>
        <div class="clearfix mt-0"></div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-4 mb-3">
    <div class="blck-white h-100">
      <h6 class="my-2 ms-2">Truck Information:</h6>
      <div class="row">
        <div class="col">Truck:</div>
        <div class="col-auto me-2">{{ $driver->truckData->number }} {{ $driver->truckData->make }} {{ $driver->truckData->model }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col">Trailer:</div>
        <div class="col-auto me-2">{{ $driver->trailerData->number }} {{ $driver->trailerData->make }} {{ $driver->trailerData->model }}</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-4 mb-3">
    <div class="blck-white h-100">
      <h6 class="my-2 ms-2">Dispatch Information:</h6>
      <div class="row">
        <div class="col">Full Name:</div>
        <div class="col-auto me-2">{{ $driver->dispatchData->firstname }} {{ $driver->dispatchData->lastname }}</div>
      </div>
    </div>
  </div>
  <div class="col-12 mb-3">
    <div class="blck-white">
      <h6 class="my-2 ms-2">Last location:</h6>
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <td width="200">Date</td>
            <td>Location</td>
            <td></td>
          </tr>
        </thead>
        <tbody>
          @foreach($driver->locationData as $location)
          <tr>
            <td>{{ date('H:i, j F Y', strtotime($location->created_at)) }}</td>
            <td>{{ $location->latitude }} {{ $location->longitude}}</td>
            <td><a href="https://www.google.com/maps/search/{{ $location->latitude }}+{{ $location->longitude}}" target="_blank">open in google maps</a>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection

@section('script')
<script>
  
</script>
@endsection