@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
  <div class="col-12 mb-2">
    <div class="blck-white">
      <div class="row">
        <div class="col">
          <h5 class="ms-2 my-2">Statements:</h5>
        </div>
        @if($usr->role == 'admin' || $usr->role=='accounting')
        <div class="col-auto">
          <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#drivermodal">Driver Statement</button>
          <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#ownermodal">Owner Statement</button>
          <button type="button" class="btn btn-outline-warning" data-bs-toggle="modal" data-bs-target="#searchmodal">Search Statement</button>
        </div>
        @endif
      </div>
      <div>
        @if($statements->isEmpty())
        <div class="h5">No data founded.</div>
        @else
        <div class="border my-2 p-3">
          @foreach($statements as $date => $stl)
          <div>
          <span class="collapsedate pointer"><i class="bi bi-plus-square mx-2"></i>{{date('m.d.y', strtotime($date))}}</span>
          <div class="d-none table-responsive ps-3">
            <table class="table table-striped border">
              <tr class="fw-medium">
                <td>Holder</td>
                <td>Date</td>
                <td>Total</td>
                <td>File</td>
              </tr>
              @foreach($stl as $st)
              <tr>
                <td>
                  @if($usr->role == 'admin' || $usr->role=='accounting')
                  <a href="/statements/{{$st->driver_id}}/{{$st->statedate}}">{{$st->fullname}}</a>
                  @else
                  {{$st->fullname}}
                  @endif
                </td>
                <td>{{date('m.d.y',strtotime($st->statedate))}}</td>
                <td>${{$st->total?$st->total:0}}</td>
                <td>
                  @if(file_exists(public_path('statementsfile/'.date('Y-m-d',strtotime($st->statedate)).'/'.$st->driver_id.'/StatementParentCustomReport.pdf')))
                  <a href="{{asset('statementsfile/'.date('Y-m-d',strtotime($st->statedate)).'/'.$st->driver_id.'/StatementParentCustomReport.pdf?'.time())}}">File</a>
                  @endif
                  {{$st->files}}
                </td>
              </tr>
              @endforeach
            </table>
          </div>
          </div>
          @endforeach
        </div>
        @endif
      </div>
    </div>
  </div>
</div>
@if($usr->role == 'admin' || $usr->role=='accounting')
<!-- Driver -->
<div class="modal fade" id="drivermodal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="ownermodal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <form id="driverformstate" class="row row-cols-2 g-2">
          <div class="col">
            <label class="form-label">Driver:</label>
          </div>
          <div class="col">
            <input type="text" name="holder" class="form-control" list="driverlist" placeholder="Truck # | Driver name" required>
            <datalist id="driverlist">
              @foreach($drivers as $driver)
              @if($driver->fDriverData && $driver->fDriverData->fTruckData)
              <option value="{{$driver->fDriverData->fTruckData->number}} {{$driver->firstname}} {{$driver->lastname}} [id:{{$driver->id}}]"></option>
              @else
              <option value="{{$driver->firstname}} {{$driver->lastname}} [id:{{$driver->id}}]"></option>
              @endif
              @endforeach
            </datalist>
            <input type="hidden" name="type" value="driver">
          </div>
          <div class="col">
            <label class="form-label">Statement Date:</label>
          </div>
          <div class="col">
            <input type="date" name="dd" class="form-control" required>
          </div>
          <div class="col">
            <label class="form-label">Period Start:</label>
          </div>
          <div class="col">
            <input type="date" name="dpd" class="form-control" disabled>
          </div>
          <div class="col">
            <label class="form-label">Period End:</label>
          </div>
          <div class="col">
            <input type="date" name="dpe" class="form-control" disabled>
          </div>
          <div class="col-auto mx-auto">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close Window</button>
            <button class="btn btn-primary">Open Statement</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Driver -->
<!-- Owner -->
<div class="modal fade" id="ownermodal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="ownermodal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <form id="ownerformstate" class="row row-cols-2 g-2">
          <div class="col">
            <label class="form-label">Owner:</label>
          </div>
          <div class="col">
            <input type="text" name="holder" class="form-control" list="ownerlist" placeholder="Owner Name" required>
            <datalist id="ownerlist">
              @foreach($owners as $owner)
              <option value="{{$owner->firstname}} {{$owner->lastname}} [id:{{$owner->id}}]"></option>
              @endforeach
            </datalist>
            <input type="hidden" name="type" value="owner">
          </div>
          <div class="col">
            <label class="form-label">Statement Date:</label>
          </div>
          <div class="col">
            <input type="date" name="od" class="form-control" required>
          </div>
          <div class="col">
            <label class="form-label">Period Start:</label>
          </div>
          <div class="col">
            <input type="date" name="opd" class="form-control" disabled>
          </div>
          <div class="col">
            <label class="form-label">Period End:</label>
          </div>
          <div class="col">
            <input type="date" name="ope" class="form-control" disabled>
          </div>
          <div class="col-auto mx-auto">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close Window</button>
            <button class="btn btn-primary">Open Statement</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Owner -->
<!-- Search -->
<div class="modal fade" id="searchmodal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <form method="GET" class="row row-cols-2 g-2">
          <div class="col">
            <label class="form-label">Truck:</label>
          </div>
          <div class="col">
            <select class="form-control" name="holder" required>
              <option value="0">Select Truck</option>
              @foreach($owners as $owner)
              <option value="{{$owner->id}}">{{$owner->firstname}} {{$owner->lastname}}</option>
              @endforeach
            </select>
            <input type="hidden" name="type" value="owner">
          </div>
          <div class="col">
            <label class="form-label">Statement Date:</label>
          </div>
          <div class="col">
            <input type="date" name="statementdate" class="form-control" required>
          </div>
          <div class="col-auto mx-auto">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close Window</button>
            <button class="btn btn-primary">Find Statement</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Search -->
@endif
@endsection


@section('script')
<script>
document.addEventListener('DOMContentLoaded',function(){
  const driverinputlist = document.querySelector('input[name=namedriverholder]');
  const ownerinputlist = document.querySelector('input[name=nameownerholder]');
  ownerinputlist.addEventListener('change',function(){
    document.querySelector('input[name=holder]')
  });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  function updatePeriodDates(dateInput, periodStartInput, periodEndInput) {
    var end = new Date(dateInput.value);
    var start = new Date(end);
    start.setDate(end.getDate() - 7);
    periodStartInput.value = start.toISOString().slice(0, 10);
    periodEndInput.value = end.toISOString().slice(0, 10);
  }

  const dd = document.querySelector('input[name=dd]');
  const dpd = document.querySelector('input[name=dpd]');
  const dpe = document.querySelector('input[name=dpe]');
  const od = document.querySelector('input[name=od]');
  const opd = document.querySelector('input[name=opd]');
  const ope = document.querySelector('input[name=ope]');

  dd.addEventListener('change', (e) => {
    updatePeriodDates(e.target, dpd, dpe);
  });

  od.addEventListener('change', (e) => {
    updatePeriodDates(e.target, opd, ope);
  });

  const formdriver = document.querySelector('form#driverformstate');
  const formowner = document.querySelector('form#ownerformstate');

  formdriver.addEventListener('submit',(e)=>{
    e.preventDefault();
    let holder = formdriver.querySelector('input[name=holder]').value;
    let usrid = holder.match(/\[id:(\d+)\]/)[1];
    if(usrid != 0 && dd.value!==''){
      window.location.href='/statements/'+usrid+'/'+dd.value;
    }
  });

  formowner.addEventListener('submit',(e)=>{
    e.preventDefault();
    let holder = formowner.querySelector('input[name=holder]').value;
    let usrid = holder.match(/\[id:(\d+)\]/)[1];
    if(usrid != 0 && od.value!==''){
      window.location.href='/statements/'+usrid+'/'+od.value;
    }
  });
});
</script>

<script>
const datedropdown = document.querySelectorAll('.collapsedate');
datedropdown.forEach((elem)=>{
  elem.addEventListener('click',(e)=>{
    console.log(e);
    e.target.childNodes[0].classList.toggle('bi-plus-square');
    e.target.childNodes[0].classList.toggle('bi-dash-square');
    e.target.parentNode.querySelector('div').classList.toggle('d-none');
  });
});
</script>
@endsection