@extends('layout')

@section('body')
<div id="topanchor" class="row px-0 px-md-3 my-4">
  <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">
      <h5 class="ms-2 my-2">Upload Form:</h5>
      <form class="row align-items-center" id="fuelform" enctype="multipart/form-data">
        @csrf
        <div class="col-auto mb-2">
          <label class="form-label">File:</label>
        </div>
        <div class="col-auto mb-2">
          <input type="file" accept=".pdf,.xls,.xlsx,.csv" class="form-control" name="fuelfile" required>
        </div>
        <div class="col-auto mb-2">
          <span onclick="truncatefuel(this)" class="btn btn-outline-danger"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Delete Fuels</span>
        </div>
        <div class="col-auto mb-2">
          <button type="submit" class="btn btn-primary"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Upload File</button>
        </div>
      </form>
    </div>
  </div>

  <!-- result -->
  <div class="col-12">
    <div class="blck-white table-responsive">
      <span class="h5 ms-2 my-2">Fuels:</span>
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <td>Driver</td>
            <td>Card #</td>
            <td>Unit</td>
            <td>Date</td>
            <td>Location</td>
            <td>Amount</td>
          </tr>
        </thead>
        <tbody class="resultfuel">
          @if(!$fuels->isEmpty())
          @foreach($fuels->items() as $fuel)
          <tr>
            <td>{{$fuel->name}}</td>
            <td class="text-nowrap">{{$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>
      @if(!$fuels->isEmpty())
      {{ $fuels->links('vendor.pagination') }}
      @endif
    </div>
  </div>

</div>
@endsection


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

@section('script')

<script>
  const fuelForm = document.querySelector('#fuelform');
  fuelForm.addEventListener('submit', (e)=>{
    e.preventDefault();
    e.submitter.firstElementChild.style.display="inline-block";
    fetch('/store/fuel',{
      method:'POST',
      body:new FormData(fuelForm),
    })
    .then(response => {
      if(response.ok){
        return response.json(); // Parse the response as JSON
      } else {
        throw new Error('File upload failed.');
      }
    })
    .then(data => {
      console.log(data);
      if(data.status == 'ok'){
        showmsgbox('success', data.message);
        window.location.reload();
      }
      if(data.status == 'err'){
        showmsgbox('danger', data.message);
      }
      e.submitter.firstElementChild.style.display='none';
      fuelForm.reset();
    })
    .catch(error => {
      console.log(error);
    });
    // fuelForm.reset();
  });
</script>
<script>
function truncatefuel(e){
  e.firstElementChild.style.display="inline-block";
  fetch('/delete/fuel',{
    method:'GET',
  })
  .then(response=>{
    if(response.ok){
      return response.json();
    }
  })
  .then(data=>{
    console.log(data);
    if(data.status == 'ok'){
      window.location.reload();
    } else {
      showmsgbox('danger',data.message);
      e.target.firstElementChild.style.display="none";
    }
  })
  .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='';
    });
  });
});

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>
@endsection