@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
  <div class="col-12 mb-3">
    <div class="blck-white">
      <div class="row mb-2">
        <div class="col-auto">Holder: {{$holder}}</div>
        <div class="col-auto">
          <div>Date: <input type="date" class="mb-2" value="{{$statedate}}" class="ms-2" disabled></div>
          <div>Period: <input type="text" name="form-control" value="{{$period}}" class="ms-2" disabled></div>
        </div>
        <div class="col text-end">
          <span class="btn btn-outline-primary mx-2">Print</span>
          <span class="btn btn-outline-primary">Save</span>
        </div>
      </div>

      <div class="col-12 table-responsive">
        <table class="table table-striped border">
          <thead>
            <tr>
              <td></td>
              <td>Trip #</td>
              <td>Description</td>
              <td>Reference</td>
              <td>Date</td>
              <td>Amount</td>
            </tr>
          </thead>
          <tbody class="maintable">
            <tr>
              <td>Del</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-12 mb-2">
    <div class="blck-white">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="loads-tab" data-bs-toggle="tab" data-bs-target="#loads-tab-pane" type="button" role="tab" aria-controls="loads-tab-pane" aria-selected="true">Loads</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="credit-tab" data-bs-toggle="tab" data-bs-target="#credit-tab-pane" type="button" role="tab" aria-controls="credit-tab-pane" aria-selected="false">Credit</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="deduction-tab" data-bs-toggle="tab" data-bs-target="#deduction-tab-pane" type="button" role="tab" aria-controls="deduction-tab-pane" aria-selected="false">Deduction</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="schdeduction-tab" data-bs-toggle="tab" data-bs-target="#schdeduction-tab-pane" type="button" role="tab" aria-controls="schdeduction-tab-pane" aria-selected="false">Sch. Deductions</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="fuel-tab" data-bs-toggle="tab" data-bs-target="#fuel-tab-pane" type="button" role="tab" aria-controls="fuel-tab-pane" aria-selected="false">Fuel</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="comments-tab" data-bs-toggle="tab" data-bs-target="#comments-tab-pane" type="button" role="tab" aria-controls="comments-tab-pane" aria-selected="false">Comments</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="files-tab" data-bs-toggle="tab" data-bs-target="#files-tab-pane" type="button" role="tab" aria-controls="files-tab-pane" aria-selected="false">Files</button>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <!-- loads -->
        <div class="p-3 tab-pane table-responsive border-start border-end border-bottom fade show active" id="loads-tab-pane" role="tabpanel" aria-labelledby="loads-tab" tabindex="0">
          <table class="table table-sm table-striped table-bordered">
            <thead>
              <tr>
                <td width="10"></td>
                <td>Trip #</td>
                <td>From</td>
                <td>To</td>
                <td>Route</td>
                <td>Description</td>
                <td>Mileage</td>
                <td>Empty Mile</td>
                <td>Qty</td>
                <td>Rate</td>
                <td>Amount</td>
                <td>Status</td>
              </tr>
            </thead>
            <tbody>
              @foreach($loads as $load)
              <tr data-load="{{$load->id}}">
                <td width="10">
                  <span class="bg-secondary text-white pointer addload"><i class="bi bi-arrow-right-short"></i></span>
                </td>
                <td class="px-1 text-nowrap">{{$load->load_number}}</td>
                <td class="px-1 text-nowrap">{{date('m.d.y', strtotime($load->pickup_date))}}</td>
                <td class="px-1 text-nowrap">{{date('m.d.y', strtotime($load->delivery_date))}}</td>
                <td class="px-1 text-nowrap">{{$load->pickup_city}}, {{$load->pickup_state}} - {{$load->delivery_city}}, {{$load->delivery_state}}</td>
                <td class="px-1 text-nowrap">{{$salary}}% of ${{$load->price}}</td>
                <td class="px-1 text-nowrap">{{$load->distance}}</td>
                <td class="px-1 text-nowrap">{{$load->deadhead}}</td>
                <td class="px-1 text-nowrap">${{$load->price}}</td>
                <td class="px-1 text-nowrap">{{$salary}}%</td>
                <td class="px-1 text-nowrap">${{$load->price*$salary/100}}</td>
                <td class="px-1 text-nowrap">{{$load->status}}</td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        <!-- loads -->

        <!-- credit -->
        <div class="p-3 tab-pane table-responsive border-start border-end border-bottom fade" id="credit-tab-pane" role="tabpanel" aria-labelledby="credit-tab" tabindex="0">
          <table class="table table-striped">
            <thead>
              <tr>
                <td width="10"></td>
                <td>Description</td>
                <td>Date</td>
                <td>Accounting Item</td>
                <td>Debit</td>
                <td>Credit</td>
                <td>Escrow</td>
                <td>Amount</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td width="10">+</td>
                <td>Trip #</td>
                <td>From</td>
                <td>To</td>
                <td>Route</td>
                <td>Description</td>
                <td>Mileage</td>
                <td>EmptyMile</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- credit -->
        
        <!-- deduction -->
        <div class="p-3 tab-pane table-responsive border-start border-end border-bottom fade" id="deduction-tab-pane" role="tabpanel" aria-labelledby="deduction-tab" tabindex="0">
          <table class="table table-striped">
            <thead>
              <tr>
                <td width="10"></td>
                <td>Description</td>
                <td>Date</td>
                <td>Accounting Item</td>
                <td>Debit</td>
                <td>Credit</td>
                <td>Escrow</td>
                <td>Amount</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td width="10">+</td>
                <td>Trip #</td>
                <td>From</td>
                <td>To</td>
                <td>Route</td>
                <td>Description</td>
                <td>Mileage</td>
                <td>EmptyMile</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- deduction -->
        
        <!-- schdeduction -->
        <div class="p-3 tab-pane table-responsive border-start border-end border-bottom fade" id="schdeduction-tab-pane" role="tabpanel" aria-labelledby="schdeduction-tab" tabindex="0">
          <table class="table table-striped">
            <thead>
              <tr>
                <td width="10"></td>
                <td>Description</td>
                <td>Date</td>
                <td>Scheduled</td>
                <td>Escrow</td>
                <td>Amount</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td width="10">+</td>
                <td>Trip #</td>
                <td>From</td>
                <td>To</td>
                <td>Route</td>
                <td>Description</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- schdeduction -->
        
        <!-- fuel -->
        <div class="p-3 tab-pane table-responsive border-start border-end border-bottom fade" id="fuel-tab-pane" role="tabpanel" aria-labelledby="fuel-tab" tabindex="0">
          <table class="table table-striped">
            <thead>
              <tr>
                <td width="10"></td>
                <td>Description</td>
                <td>City</td>
                <td>State</td>
                <td>Invoice #</td>
                <td>Date</td>
                <td>Co.Fee</td>
                <td>Total Amount</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td width="10"></td>
                <td>Description</td>
                <td>City</td>
                <td>State</td>
                <td>Invoice #</td>
                <td>Date</td>
                <td>Co.Fee</td>
                <td>Total Amount</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- fuel -->
        
        <!-- comments -->
        <div class="p-3 tab-pane table-responsive border-start border-end border-bottom fade" id="comments-tab-pane" role="tabpanel" aria-labelledby="comments-tab" tabindex="0">
          <textarea class="form-control" placeholder="Note" name="note"></textarea>
        </div>
        <!-- comments -->
        
        <!-- files -->
        <div class="p-3 tab-pane table-responsive border-start border-end border-bottom fade" id="files-tab-pane" role="tabpanel" aria-labelledby="files-tab" tabindex="0">
          <table class="table table-striped">
            <thead>
              <tr>
                <td width="10"></td>
                <td>File Name</td>
                <td>Type</td>
                <td>Size(KB)</td>
                <td>Created</td>
                <td>Last modified</td>
                <td>File Type</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td width="10"></td>
                <td>File Name</td>
                <td>Type</td>
                <td>Size(KB)</td>
                <td>Created</td>
                <td>Last modified</td>
                <td>File Type</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- files -->
      </div>
    </div>
  </div>
</div>
@endsection

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
@endsection

@section('script')
<script>
Fancybox.bind("[data-fancybox]",{});
</script>

<script>
document.addEventListener('DOMContentLoaded',function(){
  // add loads btns
  const addloadbtns = document.querySelectorAll('span.addload');
  addloadbtns.forEach((el)=>{
    el.addEventListener('click',(e)=>{
      var parent = e.target.closest('tr');
      fetch('/api/statement/addload', {
        method:'POST',
        body:JSON.stringify({
          'load': parent.getAttribute('data-load'),
          'user': '{{$userid}}',
          'date': '{{$statedate}}',
          'holder': '{{$userrole}}',
          'rate': '{{$salary}}',
        }),
        headers:{
          'Content-Type': 'application/json'
        },
      })
      .then(response => {
        if(response.ok){
          return response.json();
        }
      })
      .then(data => {
        console.log(data);
        if(data == 'added'){
          window.location.reload();
        }
      })
      .catch(error => {
        console.log(error);
      });
    });
  });
  

})
</script>
@endsection