@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4" id="topanchor">
  <div class="col-12 mb-3">
  <!-- 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="blck-white">
      <div class="row mb-2">
        <div class="col-auto"><strong>Holder</strong>: {{$holder}}</div>
        <div class="col-auto">
          <div><strong>Date</strong>: <input type="date" value="{{$statedate}}" class="ms-2 mb-2" disabled></div>
          <div><strong>Period</strong>: <input type="text" name="form-control" value="{{$period}}" class="ms-2" disabled></div>
        </div>
        <div class="col text-end">
          <span class="btn btn-outline-danger" onclick="deletestatement()">Delete</span>
          <span class="btn btn-primary mx-2" onclick="print(this)"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Print</span>
        </div>
      </div>

      <div class="col-12 table-responsive">
        <table class="table table-sm table-striped border text-center table-bordered">
          <thead>
            <tr>
              <td colspan="2">Trip #</td>
              @if($ownerstate)
              <td>Driver</td>
              @endif
              <td>Description</td>
              <td>Reference</td>
              <td>Date</td>
              <td>Amount</td>
            </tr>
          </thead>
          <tbody class="maintable">
            @if(!$stateloadlist && !$statecreditlist && !$statedeductionlist && !$stateschdeductionlist && !$statefuellist)
            <tr>
              <td colspan="{{$ownerstate?7:6}}" class="text-center">No data founded.</td>
            </tr>
            @endif
            @if($stateloadlist)
            @foreach($stateloadlist as $loadlist)
            <tr>
              <td width="10"><span class="bg-secondary text-white pointer bg-hover-primary" onclick="movedown(this,'loadlist',{{$loadlist['id']}})"><i class="bi bi-arrow-right-short"></i></span></td>
              <td><a href="/loads/{{$loadlist['id']}}" target="_blank">{{$loadlist['id']}}</td>
              @if($ownerstate)
              <td>{{ isset($loadlist['driver']) ? $loadlist['driver'] : '' }}</td>
              @endif
              <td>{{$loadlist['description']}}</td>
              <td>{{$loadlist['reference']}}</td>
              <td>{{$loadlist['date']}}</td>
              <td>${{$loadlist['amount']}}</td>
            </tr>
            @endforeach
            @endif
            @if($statecreditlist)
            @foreach($statecreditlist as $creditlist)
            <tr>
              <td width="10"><span class="bg-secondary text-white pointer bg-hover-primary" onclick="movedown(this,'creditlist',{{$creditlist['id']}})"><i class="bi bi-arrow-right-short"></i></span></td>
              <td></td>
              @if($ownerstate)
              <td></td>
              @endif
              <td>{{$creditlist['description']}}</td>
              <td>{{$creditlist['reference']}}</td>
              <td>{{$creditlist['date']}}</td>
              <td>${{$creditlist['amount']}}</td>
            </tr>
            @endforeach
            @endif
            @if($statedeductionlist)
            @foreach($statedeductionlist as $deductionlist)
            <tr>
              <td width="10"><span class="bg-secondary text-white pointer bg-hover-primary" onclick="movedown(this,'deductionlist',{{$deductionlist['id']}})"><i class="bi bi-arrow-right-short"></i></span></td>
              <td></td>
              @if($ownerstate)
              <td></td>
              @endif
              <td>{{$deductionlist['description']}}</td>
              <td>{{$deductionlist['reference']}}</td>
              <td>{{$deductionlist['date']}}</td>
              <td>$-{{$deductionlist['amount']}}</td>
            </tr>
            @endforeach
            @endif
            @if($stateschdeductionlist)
            @foreach($stateschdeductionlist as $schdeductionlist)
            <tr>
              <td width="10"><span class="bg-secondary text-white pointer bg-hover-primary" onclick="movedown(this,'schdeductionlist',{{$schdeductionlist['id']}})"><i class="bi bi-arrow-right-short"></i></span></td>
              <td></td>
              @if($ownerstate)
              <td></td>
              @endif
              <td>{{$schdeductionlist['description']}}</td>
              <td>{{$schdeductionlist['reference']}}</td>
              <td>{{$schdeductionlist['date']}}</td>
              <td>$-{{$schdeductionlist['amount']}}</td>
            </tr>
            @endforeach
            @endif
            @if($statefuellist)
            @foreach($statefuellist as $fuellist)
            <tr>
              <td width="10"><span class="bg-secondary text-white pointer bg-hover-primary" onclick="movedown(this,'fuellist',{{$fuellist['id']}})"><i class="bi bi-arrow-right-short"></i></span></td>
              <td></td>
              @if($ownerstate)
              <td>{{$fuellist['driver']}}</td>
              @endif
              <td>{{$fuellist['description']}}</td>
              <td>{{$fuellist['reference']}}</td>
              <td>{{$fuellist['date']}}</td>
              <td>$-{{$fuellist['amount']}}</td>
            </tr>
            @endforeach
            @endif
            <tr>
              <td colspan="{{$ownerstate?5:4}}"></td>
              <td class="fw-medium text-end table-primary">Total:&nbsp;</td>
              <td class="fw-medium table-primary">${{$total}}</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" href="#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 text-center">
            <thead>
              <tr>
                <td colspan="2">Trip #</td>
                <td>Load Number</td>
                @if($ownerstate)
                <td>Driver</td>
                @endif
                <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>
                <td>Payment</td>
              </tr>
            </thead>
            <tbody>
              @if($loads->isEmpty())
              <tr>
                <td colspan="12" class="text-center">No data founded</td>
              </tr>
              @else
              @foreach($loads as $load)
              <tr>
                <td width="10"><span class="bg-secondary text-white pointer" onclick="moveup(this,'loadlist',{{$load->id}})"><i class="bi bi-arrow-right-short"></i></span></td>
                <td class="px-1 text-nowrap"><a href="/loads/{{$load->id}}" target="_blank">{{$load->id}}</a></td>
                <td class="px-1 text-nowrap">{{$load->load_number}}</td>
                @if($ownerstate)
                <td class="px-1 text-nowrap">
                  {{$load->truck_number}} {{$load->driverData->firstname}} {{$load->driverData->lastname}}
                </td>
                @endif
                <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>
                <td class="px-1 text-nowrap">{{$load->payment_info}}</td>
              </tr>
              @endforeach
              @endif
            </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-sm table-striped table-bordered text-center">
            <thead>
              <tr>
                <td colspan="2">Description</td>
                <td>Date</td>
                <td colspan="2">Amount</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td colspan="2"><input type="text" class="form-control" placeholder="Description" name="creditdesc"></td>
                <td><input type="date" class="form-control" name="creditdate" value="{{Date('Y-m-d')}}"></td>
                <td><input type="text" class="form-control" placeholder="Amount 0.00" name="creditamount"></td>
                <td><span class="btn btn-primary" onclick="addcash('credit')"><i class="bi bi-plus-circle"></i></span></td>
              </tr>
              @if($credits)
              @foreach($credits as $credit)
              <tr>
                <td width="10"><span class="bg-secondary text-white pointer" onclick="moveup(this,'creditlist',{{$credit->id}})"><i class="bi bi-arrow-right-short"></i></span></td>
                <td>{{$credit->reason}}</td>
                <td>{{date('m.d.y', strtotime($credit->fund_date))}}</td>
                <td>${{$credit->amount}}</td>
                <td class="icon-table-inactive"><i class="bi bi-trash pointer" onclick="deletecash({{$credit->id}},'Credit',this)"></i></td>
              </tr>
              @endforeach
              @endif
            </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-sm table-striped table-bordered text-center">
            <thead>
              <tr>
                <td colspan="2">Description</td>
                <td>Date</td>
                <td colspan="2">Amount</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td colspan="2"><input type="text" class="form-control" placeholder="Description" name="deductiondesc"></td>
                <td><input type="date" class="form-control" name="deductiondate" value="{{Date('Y-m-d')}}"></td>
                <td><input type="text" class="form-control" placeholder="Amount 0.00" name="deductionamount"></td>
                <td><span class="btn btn-primary" onclick="addcash('deduction')"><i class="bi bi-plus-circle"></i></span></td>
              </tr>
              @if($deductions)
              @foreach($deductions as $deduction)
              <tr>
                <td width="10"><span class="bg-secondary text-white pointer" onclick="moveup(this,'deductionlist',{{$deduction->id}})"><i class="bi bi-arrow-right-short"></i></span></td>
                <td>{{$deduction->reason}}</td>
                <td>{{date('m.d.y', strtotime($deduction->fund_date))}}</td>
                <td>${{$deduction->amount}}</td>
                <td class="icon-table-inactive"><i class="bi bi-trash pointer" onclick="deletecash({{$deduction->id}},'Deduction',this)"></i></td>
              </tr>
              @endforeach
              @endif
            </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-sm table-striped table-bordered text-center">
            <thead>
              <tr>
                <td colspan="2">Description</td>
                <td>Date</td>
                <td>Amount</td>
              </tr>
            </thead>
            <tbody>
              @if($schdeductions->isEmpty())
              <tr>
                <td colspan="4" class="text-center">No data founded.</td>
              </tr>
              @else
              @foreach($schdeductions as $schdeduction)
              <tr>
                <td width="10"><span class="bg-secondary text-white pointer" onclick="moveup(this,'schdeductionlist',{{$schdeduction->id}})"><i class="bi bi-arrow-right-short"></i></span></td>
                <td>{{$schdeduction->reason}}</td>
                <td>{{date('m.d.y', strtotime($schdeduction->fund_date))}}</td>
                <td>${{$schdeduction->amount}}</td>
              </tr>
              @endforeach
              @endif
            </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-sm table-striped table-bordered text-center">
            <thead>
              <tr>
                <td colspan="2">Name</td>
                <td>Type</td>
                <td>Card</td>
                <td>Truck</td>
                <td>Date</td>
                <td>Address</td>
                <td>Amount</td>
              </tr>
            </thead>
            <tbody>
              @if($fuels->isEmpty())
              <tr>
                <td colspan="8" class="text-center">No data founded.</td>
              </tr>
              @else
              @foreach($fuels as $fuel)
              <tr>
                <td width="10"><span class="bg-secondary text-white pointer" onclick="moveup(this,'fuellist',{{$fuel->id}})"><i class="bi bi-arrow-right-short"></i></span></td>
                <td>{{$fuel->name}}</td>
                <td>{{$fuel->type}}</td>
                <td>{{$fuel->card}}</td>
                <td>{{$fuel->truck}}</td>
                <td>{{date('m.d.y', strtotime($fuel->fueldate))}}</td>
                <td>{{$fuel->address}}</td>
                <td>${{$fuel->amount}}</td>
              </tr>
              @endforeach
              @endif
            </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">{{$message}}</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">
          <a href="/statementsfile/{{date('Y-m-d',strtotime($statedate))}}/{{$userid}}/StatementParentCustomReport.pdf?timestamp={{ time() }}" target="_blank" class="d-none" id="existfile">file</a>
          <form id="fuelfile" class="my-2" enctype="multipart/form-data">
            @csrf
            <div class="spinnerblockfuel bg-success text-white rounded text-center" style="width:24px;height:24px;display:none;">
              <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
            </div>
            <label for="uploadfuel" class="h6 me-2 pointer"><i class="bi bi-plus-square-fill btnuploadfuel text-success mx-2"></i>Upload File</label>
            <input type="file" name="uploadfuelfile" id="uploadfuel" class="visually-hidden d-none">
          </form>
          <table class="table table-sm table-striped table-bordered text-center">
            <thead>
              <tr>
                <td>File Name</td>
                <td>Type</td>
                <td>Size(KB)</td>
                <td colspan="2">Created</td>
              </tr>
            </thead>
            <tbody>
              @if($statefiles)
              @foreach($statefiles as $file)
              <tr>
                <td><a href="/statementsfile/{{$statedate}}/{{$userid}}/{{$file['filename']}}" target="_blank">{{$file['filename']}}</a></td>
                <td>{{$file['type']}}</td>
                <td>{{$file['size']}} KB</td>
                <td>{{$file['created']}}</td>
                <td class="icon-table-inactive"><i class="bi bi-trash pointer" onclick="deletefiles('{{$file['filename']}}')"></i></td>
              </tr>
              @endforeach
              @else
              <tr>
                <td colspan="8" class="text-center">No data founded.</td>
              </tr>
              @endif
            </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>
// 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='';
    });
  });
});

function showmsgbox(type,message){
  const top = document.querySelector('#topanchor');
  top.scrollIntoView({ behavior: 'smooth' });
  var msgboxnotify = document.querySelector('.msgbox-'+type);
  msgboxnotify.firstElementChild.innerText=message;
  msgboxnotify.style.display='block';
}
</script>

<script>
// return to currect anchor
var currectAnchor = window.location.hash;
const mytabs = document.querySelectorAll('#myTab button');
const mytabspane = document.querySelectorAll('.tab-pane');
if(currectAnchor){
  mytabs.forEach((elem) => elem.classList.remove('active'));
  mytabspane.forEach((elem) => {
    elem.classList.remove('active');
    elem.classList.remove('show');
  });
  document.querySelector(currectAnchor).classList.add('active');
  document.querySelector(currectAnchor+'-pane').classList.add('active');
  document.querySelector(currectAnchor+'-pane').classList.add('show');
  // document.querySelector(currectAnchor).click();
}
mytabs.forEach((elem)=>{
  elem.addEventListener('click', (e)=>{
    window.location.hash = e.target.id;
  });
});
</script>

<script>
function moveup(objrow,model,id){
  objrow.removeAttribute('onclick');
  fetch('/update/statementlist', {
    method: 'POST',
    body:JSON.stringify({'model':model,'id':id,'action':'add'}),
    headers:{
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
    },
  })
  .then(response => {
    if(response.ok){
      return response.json();
    }
  })
  .then(data => {
    if(data.status==='ok'){
      window.location.reload();
    } else {
      showmsgbox('danger',data.message);
    }
  })
  .catch(error => {
    console.log(error);
  });
}

function movedown(objrow,model,id){
  objrow.removeAttribute('onclick');
  fetch('/update/statementlist', {
    method: 'POST',
    body:JSON.stringify({'model':model,'id':id,'action':'remove'}),
    headers:{
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
    },
  })
  .then(response => {
    if(response.ok){
      return response.json();
    }
  })
  .then(data => {
    if(data.status==='ok'){
      window.location.reload();
    } else {
      if(model=='loadlist'){
        showmsgbox('danger','Something wrong with this load.');
      }
      if(model=='creaditlist'){
        showmsgbox('danger','Something wrong with this credit.');
      }
      if(model=='deductionlist'){
        showmsgbox('danger','Something wrong with this deduction.');
      }
      if(model=='schdeductionlist'){
        showmsgbox('danger','Something wrong with this scheduled deduction.');
      }
      if(model=='fuellist'){
        showmsgbox('danger','Something wrong with this fuel.');
      }
    }
  })
  .catch(error => {
    console.log(error);
  });
}

function addcash(type){
  let cashdesc = document.querySelector('input[name='+type+'desc]');
  let cashdate = document.querySelector('input[name='+type+'date]');
  let cashamount = document.querySelector('input[name='+type+'amount]');
  
  if(!cashdesc.value){
    showmsgbox('danger','Fill Description Field.');
    return;
  }
  if(!cashamount.value || cashamount.value < 1){
    showmsgbox('danger','Fill Amount Field.')
    return;
  }
  if(type=='credit'){
    cashtype = 0;
  }
  if(type=='deduction'){
    cashtype = 1;
  }
  fetch('/store/cash',{
    method: 'POST',
    body: JSON.stringify({
      'date': cashdate.value,
      'driver_id': '{{ $userid }}',
      'reason': cashdesc.value,
      'amount': cashamount.value,
      'type': cashtype,
    }),
    headers:{
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
    }
  })
  .then(response => {
    if(response.ok){
      return response.json();
    }
  })
  .then(data => {
    if(data.status==='ok'){
      window.location.reload();
    } else {
      showmsgbox('danger',data.message);
    }
  })
  .catch(error => {
    console.log(error);
  });
}

function deletecash(id,type,row){
  fetch('/delete/cash', {
    method: 'POST',
    body:JSON.stringify({'id':id, 'type':type}),
    headers:{
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
    },
  })
  .then(response => {
    if(response.ok){
      return response.json();
    }
  })
  .then(data => {
    if(data.status == 'ok'){
      row.closest('tr').remove();
      showmsgbox('success',data.message);
    }
  })
  .catch(error => {
    console.log(error);
  });
}
</script>

<script>
const textfield = document.querySelector('textarea');
textfield.addEventListener('change',(e)=>{
  fetch('/update/statementlist', {
    method: 'POST',
    body:JSON.stringify({'model':'message','text':e.target.value}),
    headers:{
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
    },
  })
  .then(response => {
    if(response.ok){
      return response.json();
    }
  })
  .then(data => {
    if(data.status == 'ok'){
      showmsgbox('success',data.message);
    }
  })
  .catch(error => {
    console.log(error);
  });
});
</script>

<script>
function deletefiles(filename){
  fetch('/delete/statementfile',{
    method:'POST',
    body:JSON.stringify({'file':filename}),
    headers:{
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
    },
  })
  .then(response => {
    if(response.ok){
      return response.json();
    }
  })
  .then(data => {
    if(data.status == 'ok'){
      window.location.reload();
    } else {
      showmsgbox('danger', data.message);
    }
  })
  .catch(error => {
    console.log(error);
  });
}
</script>

<script>
function print(e){
  e.firstElementChild.style.display='inline-block';
  e.classList.add('disabled');
  fetch('/py/statementsingle', {
    method: 'GET',
    headers:{
      'Content-Type': 'application/json',
    },
  })
  .then(response => {
    if(response.ok){
      return response.json();
    }
  })
  .then(data => {
    if(data.status == 'ok'){
      showmsgbox('success',data.message);
      e.firstElementChild.style.display='none';
      e.classList.remove('disabled');
      document.querySelector('#existfile').click();
    } else {
      showmsgbox('danger', data.message);
      e.firstElementChild.style.display='none';
      e.classList.remove('disabled');
    }
  })
  .catch(error => {
    console.log(error);
  });
}
</script>

<script>
//upload fuel
const uploadfuelbtn = document.querySelector('input[name=uploadfuelfile]');
uploadfuelbtn.addEventListener('change', (e) => {
  let parent = e.target.closest('div');
  parent.querySelector('label').style.display='none';
  parent.querySelector('.spinnerblockfuel').style.display='block';
  const formData = new FormData(document.querySelector('#fuelfile'));
  fetch('/store/statementfile', {
    method:'POST',
    body:formData,
    headers:{
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
    }
  })
  .then(response => {
    if(response.ok){
      return response.text();
    }
  })
  .then(data => {
    if(data == 'ok'){
      window.location.reload();
    } else {
      showmsgbox('danger', data);
    }
  })
  .catch(error => {
    console.log(error);
  });
});
</script>

<script>
function deletestatement(){
  fetch('/delete/statement', {
    method:'POST',
    headers:{
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
      'Content-Type': 'application/json',
    }
  })
  .then(response => {
    if(response.ok){
      return response.json();
    }
  })
  .then(data => {
    if(data.status == 'ok'){
      window.location.href = '/statements';
    } else {
      showmsgbox('danger', data.message);
    }
  })
  .catch(error => {
    console.log(error);
  });
}
</script>
@endsection