@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="my-2 ms-2">Scheduled Deduction:</h5>
      <form id="cashform" class="row align-items-center">
        @csrf
        <input type="hidden" name="type" value="2">
        <div class="col-12 col-md-3"><label class="form-label">Description<span class="text-danger fw-medium">*</span>:</label></div>
        <div class="col mb-3"><input type="text" name="reason" class="form-control" required></div>
        <div class="clearfix"></div>
        <div class="col-12 col-md-3"><label class="form-label">Start<span class="text-danger fw-medium">*</span>:</label></div>
        <div class="col mb-3"><input type="date" name="date" value="{{date('Y-m-d', strtotime($dates))}}" class="form-control"></div>
        <div class="clearfix"></div>
        <div class="col-12 col-md-3"><label class="form-label">Driver/Owner<span class="text-danger fw-medium">*</span>:</label></div>
        <div class="col mb-3">
          <input type="hidden" name="driver_id" class="userid" required>
          <input type="text" name="driverinput" list="drivers" class="form-control driverinput" required>
          <datalist id="drivers">
            @if($drivers)
            @foreach($drivers as $driver)
            <option value="{{$driver->firstname}} {{$driver->lastname}} [id:{{$driver->id}}]">
            @if($driver->role=='driver')
            Truck #:{{$driver->fDriverData?$driver->fDriverData->fTruckData?$driver->fDriverData->fTruckData->number:'-':'-'}}
            @else
            [owner]
            @endif
            @endforeach
            @endif
          </datalist>
        </div>
        <div class="clearfix"></div>
        <div class="col-12 col-md-3"><label class="form-label">Amount<span class="text-danger fw-medium">*</span>:</label></div>
        <div class="col input-group mb-3">
          <span class="input-group-text">$</span>
          <input type="text" class="form-control" name="amount" placeholder="0.00" required value="{{old('amount')}}">
        </div>
        <div class="clearfix"></div>
        <div class="col-12 col-md-3"><label class="form-label">Repeat:</label></div>
        <div class="col row mb-3">
          <div class="col">
            <div class="form-check">
              <input type="radio" name="repeat" value="1" checked class="form-check-input" id="repeatlab1">
              <label class="form-check-label" for="repeatlab1">No repeat</label>
            </div>
            <div class="form-check">
              <input type="radio" name="repeat" value="2" class="form-check-input" id="repeatlab2">
              <label class="form-check-label" for="repeatlab2">Daily</label>
            </div>
            <div class="form-check">
              <input type="radio" name="repeat" value="3" class="form-check-input" id="repeatlab3">
              <label class="form-check-label" for="repeatlab3">Weekly</label>
            </div>
            <div class="form-check">
              <input type="radio" name="repeat" value="4" class="form-check-input" id="repeatlab4">
              <label class="form-check-label" for="repeatlab4">Monthly</label>
            </div>
          </div>
          <div class="col">
            <div class="form-check">
              <input type="radio" name="endrepeat" value="1" class="form-check-input" checked id="repeatlab6">
              <label class="form-check-label" for="repeatlab6">End By:</label>
              <input type="date" name="endbydate" class="mx-2">
            </div>
            <div class="form-check">
              <input type="radio" name="endrepeat" value="2" class="form-check-input" id="repeatlab7">
              <label class="form-check-label" for="repeatlab7">End after:</label>
              <input type="number" name="endbytimes" step="1" class="mx-2" value="1" min="0" max="50">
            </div>
            <div class="form-check">
              <input type="radio" name="endrepeat" value="3" class="form-check-input" id="repeatlab8">
              <label class="form-check-label" for="repeatlab8">End in this year</label>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-12 ms-0 ms-md-auto col-md-auto"><button class="btn btn-success px-0 px-md-5 w-100 disabled">Submit</button></div>
      </form>
    </div>
  </div>

  <div class="col-12 mb-3">
    <div class="blck-white">
    <span class="my-2 ms-2 h5 d-block">Scheduled Deductions <span class="text-primary">{{$dates}}</span></span>
    @if($funds!='')
    <table class="table table-borderless">
      <thead>
        <tr class="border-bottom">
          <td>Reason</td>
          <td>Amount</td>
          <td>Driver</td>
          <td>Issued By</td>
        </tr>
      </thead>
      <tbody>
        @if(count($funds)>0)
        @foreach($funds as $fund)
        <tr>
          <td>{{$fund->reason}}</td>
          <td>
            @if($fund->type==0)
            <span class="text-success">${{$fund->amount}}</span>
            @else
            <span class="text-danger">${{$fund->amount}}</span>
            @endif
          </td>
          <td>
            @if($fund->driverData)
            <a href="/users/{{$fund->driverData->id}}" class="text-decoration-none"><img src="{{$fund->driverData->avatar}}" width="24" height="24" class="rounded me-1">{{$fund->driverData->firstname}} {{$fund->driverData->lastname}}</a>
            @else
            no driver founded {{$fund->id}}
            @endif
          </td>
          <td><a href="/users/{{$fund->userData->id}}" class="text-decoration-none"><img src="{{$fund->userData->avatar}}" width="24" height="24" class="rounded me-1">{{$fund->userData->firstname}} {{$fund->userData->lastname}}</a></td>
          <td><span class="delete icon-table-inactive pointer" onclick="deletecash({{$fund->id}}, 'Scheduled Deduction',this)"><i class="bi bi-trash-fill"></i></span></td>
        </tr>
        @endforeach
        @else
        <tr>
          <td colspan="6" class="text-center">No Cash Advance or Charge for this date</td>
        </tr>
        @endif
      </tbody>
    </table>
    @endif
  </div>
  </div>
</div>
@endsection

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

@section('script')
<script>
document.addEventListener('DOMContentLoaded', function(){
  // autofill
  const userinput = document.querySelector('.driverinput');
  const userid = document.querySelector('.userid');
  userinput.addEventListener('change',(e)=>{
    if(e.target.value!=''){
      userid.value = e.target.value.match(/\[id:(\d+)\]/)[1];
    } else {
      userid.value = '';
    }
  });
});
</script>

<script>
// add
document.addEventListener('DOMContentLoaded', function(){
  const cashform = document.querySelector('#cashform');
  const drid = cashform.querySelector('input[name=driver_id]');
  cashform.querySelector('button').classList.remove('disabled');
  cashform.addEventListener('submit', (e)=>{
    e.preventDefault();
    if(!drid.value){
      showmsgbox('danger', 'Driver not founded.');
      return 0;
    }
    fetch('/store/cash',{
      method:'POST',
      body:new FormData(cashform),
      headers:{
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
      }
    })
    .then(response => {
      if(response.ok){
        return response.json();
      }
    })
    .then(data => {
      if(data.status == 'ok'){
        return window.location.reload();
      } else {
        showmsgbox('danger',data.message);
      }
    })
  });
});
</script>



<script>
// delete
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 => {
    console.log(data);
    if(data.status == 'ok'){
      row.closest('tr').remove();
      showmsgbox('success',data.message);
    }
  })
  .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