@extends('layout')

@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 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 disabled active" 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" 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>
        @if($usr->role==='admin')<li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link" href="/logs/load/{{$load->id}}"><i class="bi bi-clock-history"></i> Logs</a></li>@endif
        @if(in_array($usr->role, ['admin','accounting','dispatch','safety']))<li class="nav-item mx-1 mb-2 mb-md-0"><a class="btn btn-outline-primary" href="/loads/{{$load->id}}/edit"><i class="bi bi-pencil"></i> Edit</a></li>@endif
        @if($usr->role=='admin')
        <li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link bg-danger text-white-important" href="#" data-bs-toggle="modal" data-bs-target="#deleteAlert"><i class="bi bi-trash"></i> Delete</a></li>
        @elseif($usr->role=='dispatch' && $load->active==1)
        <li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link bg-danger text-white-important" href="#" data-bs-toggle="modal" data-bs-target="#deleteAlert"><i class="bi bi-trash"></i> Delete</a></li>
        @endif
      </ul>
    </div>
  </div>
  <div class="col-12 col-md-6 mb-3">
    <div class="blck-white">
      <p class="ms-2 my-2">
        <span class="h5">Load Information</span>
        @if(!$load->active)<span class="badge bg-secondary">Deleted</span>@endif
        @if($usr->role=='dispatch' && $load->active)<a href="/loads/{{$load->id}}/edit" class="text-decoration-none"><i class="bi bi-pencil-square"></i> edit</a>@endif
      </p>
      <div class="row">
        <div class="col mb-2">Load #:</div>
        <div class="col mb-2">{{ $load->load_number }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Customer Load #:</div>
        <div class="col mb-2">{{ $load->customer_load_id }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Pickup date:</div>
        <div class="col mb-2">{{ date('j M Y', strtotime($load->pickup_date)) }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Delivery date:</div>
        <div class="col mb-2">{{ date('j M Y', strtotime($load->delivery_date)) }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Weight(pounds):</div>
        <div class="col mb-2">{{ $load->weight }} pounds</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Length(ft):</div>
        <div class="col mb-2">{{ $load->length }} ft.</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Distance:</div>
        <div class="col mb-2">{{ $load->distance }} miles</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Price:</div>
        <div class="col mb-2">${{ $load->price }} (${{ $load->rate }}/mile)</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Trip:</div>
        <div class="col mb-2">{{ $load->pickup_city }}, {{ $load->pickup_state }} -> {{ $load->delivery_city }}, {{ $load->delivery_state }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Status:</div>
        <div class="col mb-2">
          <span class="badge bg-primary">{{ $load->status }}</span>&nbsp;
          @if($usr->role!='owner' && $usr->role!='driver' && $load->active)
          <span class="statuschangebtn pointer text-primary text-decoration-underline"><i class="bi bi-pencil-fill"></i>edit</span>
          <select class="statuschange" style="display:none">
            <option value="bolsent">BOL sent</option>
            <option value="podsent">POD sent</option>
            <option value="podrequired">POD required</option>
            <option value="cdload">CD load</option>
            <option value="tonu">Tonu</option>
            <option value="canceled">Canceled</option>
            <option value="rcsent">RC send</option>
            <option value="delivered">Delivered</option>
            <option value="scammer">Scammer</option>
            <option value="recovery">Recovery</option>
          </select>
          @endif
          @if($usr->role=='driver' && ($load->status=='pickup' || $load->status=='booked'))
          <span class="statuschangebtn pointer text-primary text-decoration-underline"><i class="bi bi-pencil-fill"></i>edit</span>
          <select class="statuschange" style="display:none">
            <option value="bolsent">BOL sent</option>
            <option value="podsent">POD sent</option>
            <option value="podrequired">POD required</option>
            <option value="cdload">CD load</option>
            <option value="tonu">Tonu</option>
            <option value="canceled">Canceled</option>
            <option value="rcsent">RC send</option>
            <option value="delivered">Delivered</option>
            <option value="scammer">Scammer</option>
            <option value="recovery">Recovery</option>
          </select>
          @endif
        </div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Payment info:</div>
        <div class="col mb-2">{{ $load->payment_info }}</div>
        @if($load->is_claimed)
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Claim status:</div>
        <div class="col mb-2">
          <span class="badge bg-danger">Claim</span>
        </div>
        @endif
        @if($load->is_paid == 0)
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Payment status:</div>
        <div class="col mb-2"><span class="badge bg-warning text-dark">Not paid</span></div>
        @endif
      </div>
    </div>
  </div>
  <div class="col-12 col-md-6 mb-3">
    <div class="blck-white">
      <h5 class="my-2 ms-2">Broker information:</h5>
      @if($load->brokerData)
      <div class="row">
        <div class="col mb-2">Company Name:</div>
        <div class="col mb-2">
          @if($usr->role!='driver' && $usr->role!='owner')
          <a href="/brokers/{{$load->broker_id}}" class="text-decoration-none">{{ $load->brokerdata->name }}</a>
          @else
          {{ $load->brokerdata->name }}
          @endif
        </div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Address:</div>
        <div class="col mb-2">{{ $load->brokerdata->address1 }} {{$load->brokerdata->city}}, {{ $load->brokerdata->state }} {{ $load->brokerdata->zipcode}}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Phone:</div>
        <div class="col mb-2">{{ $load->brokerdata->phone }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Email:</div>
        <div class="col mb-2">{{ $load->brokerdata->email }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Website:</div>
        <div class="col mb-2"><a href="{{ $load->brokerdata->website }}" target="_blank">{{ $load->brokerdata->website }}</a></div>
        <div class="clearfix mt-0"></div>
      </div>
      @else
      <div class="row">
        <div class="col mb-2">Company Name:</div>
        <div class="col mb-2">-</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Address:</div>
        <div class="col mb-2">-</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Phone:</div>
        <div class="col mb-2">-</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Email:</div>
        <div class="col mb-2">-</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Website:</div>
        <div class="col mb-2">-</div>
        <div class="clearfix mt-0"></div>
      </div>
      @endif
      <h5 class="ms-2">Agent infromation:</h5>
      @if($load->agentData)
      <div class="row">
        <div class="col mb-2">Full Name:</div>
        <div class="col mb-2">{{ $load->agentdata->fullname }}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Phone:</div>
        <div class="col mb-2">{{ $load->agentdata->phone}}</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Email:</div>
        <div class="col mb-2">{{ $load->agentdata->email}}</div>
        <div class="clearfix mt-0"></div>
      </div>
      @else
      <div class="row">
        <div class="col mb-2">Full Name:</div>
        <div class="col mb-2">-</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Phone:</div>
        <div class="col mb-2">-</div>
        <div class="clearfix mt-0"></div>
        <div class="col mb-2">Email:</div>
        <div class="col mb-2">-</div>
        <div class="clearfix mt-0"></div>
      </div>
      @endif
    </div>
  </div>
  <div class="col-12 mb-3">
    <div class="blck-white">
      <div class="row">
        <div class="col-12 col-xl-6">
          <h5 class="my-2 ms-2">Driver information:</h5>
          <div class="row">
            @if($load->loadcompany)
            <div class="col mb-2">Company:</div>
            <div class="col mb-2">{{$load->loadcompany}}</div>
            <div class="clearfix mt-0"></div>
            @endif
            <div class="col mb-2">Full Name:</div>
            <div class="col mb-2">
              @if($usr->role!='driver' && $usr->role!='owner')
              @if($load->fDriverData)
              <a href="/users/{{$load->fDriverData->id}}" class="text-decoration-none">{{ $load->fDriverData->firstname }} {{ $load->fDriverData->lastname }}</a>
              @else
              <span class="text-danger">Driver was deleted</span>
              @endif
              @else
              {{ $load->fDriverData->firstname }} {{ $load->fDriverData->lastname }}
              @endif
            </div>
            <div class="clearfix mt-0"></div>
            <div class="col mb-2">Truck #:</div>
            <div class="col mb-2">{{ $load->truck_number }}</div>
            <div class="clearfix mt-0"></div>
            <div class="col mb-2">Trailer #:</div>
            <div class="col mb-2">{{ $load->trailer_number }}</div>
            <div class="clearfix mt-0"></div>
            @if($load->driver2)
            <div class="col mb-2">Driver 2:</div>
            <div class="col mb-2">{{ $load->driver2 }}</div>
            <div class="clearfix mt-0"></div>
            @endif
          </div>
        </div>
        <div class="col-12 col-xl-6">
          <div>
            <h5 class="my-2 ms-2">Dispatch:</h5>
            <div class="row">
              <div class="col mb-2">Full Name:</div>
              @if($load->fDispatchData)
              <div class="col mb-2">
                @if($usr->role!='driver' && $usr->role!='owner')
                <a href="/users/{{$load->fDispatchData->id}}" class="text-decoration-none">{{ $load->fDispatchData->firstname }} {{ $load->fDispatchData->lastname }}</a>
                @else
                {{ $load->fDispatchData->firstname }} {{ $load->fDispatchData->lastname }}
                @endif
              </div>
              @else
              <div class="col mb-2">-</div>
              @endif
            </div>
          </div>
          <div>
            @if($load->fOwnerData)
            <h5 class="my-2 ms-2">Owner:</h5>
            <div class="row">
              <div class="col mb-2">Full Name:</div>
              <div class="col mb-2">
                @if($usr->role!='driver' && $usr->role!='owner')
                <a href="/users/{{$load->fOwnerData->id}}" class="text-decoration-none">{{ $load->fOwnerData->firstname }} {{ $load->fOwnerData->lastname }}</a>
                @else
                {{ $load->fOwnerData->firstname }} {{ $load->fOwnerData->lastname }}
                @endif
              </div>
            </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-xl-6 mb-3">
    <div class="blck-white">
      <h5 class="my-2 ms-2">Trip History:</h5>
      <table class="table">
        <thead>
          <tr>
            <td>Date</td>
            <td>Location</td>
            <td>Note</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{$load->pickup_date}}</td>
            <td>{{$load->pickup_city}}, {{$load->pickup_state}}</td>
            <td>pickup</td>
          </tr>
          @if($load->stops)
          @foreach(json_decode($load->stops,true) as $stop)
          <tr>
            <td>{{$stop['date']}}</td>
            <td>{{$stop['location']}}</td>
            <td>stop</td>
          </tr>
          @endforeach
          @endif
          <tr>
            <td>{{$load->delivery_date}}</td>
            <td>{{$load->delivery_city}}, {{$load->delivery_state}}</td>
            <td>drop</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-12 col-xl-6">
    Google maps
  </div>
</div>

<!-- Modal for delete load -->
<div class="modal fade" id="deleteAlert" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        Do you want delete this load?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-danger deleteloadbtn"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Delete the load</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close Window</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal for delete load -->
@endsection

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

@section('script')
@if($usr->role!='owner' && $load->active == 1)
<script>
const statusChangeBtn = document.querySelector('.statuschangebtn');
const statusChange = document.querySelector('.statuschange');
const msgboxSuccess = document.querySelector('.msgbox-success');
const msgboxError = document.querySelector('.msgbox-danger');

statusChangeBtn.addEventListener('click', () => {
  statusChangeBtn.style.display = 'none';
  statusChange.style.display = 'inline-block';
});

statusChange.addEventListener('change', (e) => {
  const newStatus = e.target.value;

  fetch('/update/loadstatus', {
    method: 'PUT',
    body: JSON.stringify({ 'status': newStatus }),
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
    },
  })
  .then(response => {
    if(response.ok) {
      return response.text();
    }
  })
  .then(data => {
    if(data === 'updated') {
      statusChange.style.display = 'none';
      statusChangeBtn.style.display = 'inline-block';
      msgboxSuccess.firstElementChild.innerText='Status of load was changed.';
      msgboxSuccess.style.display='block';

      const badge = statusChangeBtn.previousElementSibling;
      badge.textContent = newStatus;
    }
  })
  .catch(error => {
    console.log(error);
  });
});
</script>
@endif


<script>
document.addEventListener('DOMContentLoaded', function(){
  const deleteloadbtn = document.querySelector('.deleteloadbtn');
  deleteloadbtn.addEventListener('click', (e)=>{
    e.target.children[0].style.display="inline-block";
    fetch('/delete/load', {
      method: 'PUT',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
      },
    })
    .then(response => {
      if(response.ok){
        e.target.children[0].style.display="none";
        return response.text();
      }
    })
    .then(data => {
      console.log(data);
      if(data === 'deleted'){
        window.location.replace("/loads");
      }
    })
    .catch(error => {
      console.log(error);
    });
  });
});
</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