@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
  
  <!-- 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="col-12 mb-3">
    <div class=" blck-white">
      <h5 class="my-2 ms-2">Documents</h5>
      <div class="row">
        <div class="col-12 col-lg-5 mb-2">
          <form id="fakecompany" class="row align-items-center" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            @foreach($fakecompany as $fc)
            <div class="col-12 col-md mb-2"><label class="form-label">{{$fc->colname}}:</label></div>
            @if($fc->iname != 'sign' && $fc->iname!='companysign')
            <div class="col-12 col-md-auto mb-2"><input type="{{ $fc->iname=='date' ? 'date' : 'text' }}" name="{{$fc->iname}}" class="form-control" value="{{$fc->colvalue}}"></div>
            <div class="clearfix"></div>
            @endif
            @if($fc->iname=='sign')
            <div class="col-12 col-md-auto mb-2">
              <label class="input-group-text pointer" for="sign">
                <img src="{{asset($fc->colvalue)}}" class="img-fluid sign" width="150">
              </label>
              <input type="file" name="{{$fc->iname}}" class="form-control visually-hidden" id="sign">
            </div>
            <div class="clearfix"></div>
            @endif
            @if($fc->iname=='companysign')
            <div class="col-12 col-md-auto mb-2">
              <label class="input-group-text pointer" for="companysign">Select PDF</label>
              <input type="file" name="{{$fc->iname}}" class="form-control visually-hidden" id="companysign" accept=".pdf">
            </div>
            @endif
            @endforeach
            <button class="fakecompanybtn btn btn-outline-primary w-100"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Update Company</button>
          </form>
        </div>
        <div class="col-12 col-lg-6 align-self-center">
          <div class="my-2">
            <div class="progress" role="progressbar">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>
            </div>
            <small class="progress-text"></small>
          </div>
          <div class="d-flex flex-row d-flex justify-content-around firstbtnblock">
            <a href="#" class="previewdownload" display="none"></a>
            <div class="border px-3 py-3 p-lg-3 btn text-white fw-medium btn-primary btn-preview-safety" onclick="preview(this)">
              <span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Preview
            </div>
            <div class="border px-3 py-3 p-lg-3 btn text-white fw-medium btn-primary btn-preview-generate" onclick="generate(this)">
              <span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Generate
            </div>
            <div class="border px-3 py-3 p-lg-3 btn text-white fw-medium btn-primary btn-preview-email" onclick="email(this)">
              <span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Email it
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 mb-3">
    <div class="blck-white">
      <h5 class="my-2 ms-2">Passenger</h5>
      <form id="passengerform" class="row">
        @csrf
        <div class="col-12 col-lg-5 mb-2">
          <div class="row">
            <div class="col-12 col-md mb-2"><label class="form-label">Full Name:</label></div>
            <div class="col-12 col-md-auto mb-2"><input type="text" name="fullname" class="form-control"></div>
            <div class="clearfix"></div>
            <div class="col-12 col-md mb-2"><label class="form-label">Address:</label></div>
            <div class="col-12 col-md-auto mb-2"><input type="text" name="address" class="form-control"></div>
            <div class="clearfix"></div>
            <div class="col-12 col-md mb-2"><label class="form-label">Date Of Birth:</label></div>
            <div class="col-12 col-md-auto mb-2"><input type="date" name="dob" class="form-control"></div>
            <div class="clearfix"></div>
            <div class="col-12 col-md mb-2"><label class="form-label">Emergency Name:</label></div>
            <div class="col-12 col-md-auto mb-2"><input type="text" name="emergencyname" class="form-control"></div>
            <div class="clearfix"></div>
            <div class="col-12 col-md mb-2"><label class="form-label">Emergency Phone:</label></div>
            <div class="col-12 col-md-auto mb-2"><input type="text" name="emergencyphone" class="form-control"></div>
          </div>
        </div>
        <div class="col-12 col-lg-6 align-self-center">
          <div class="d-flex flex-row d-flex justify-content-around">
            <button class="border px-3 py-3 px-lg-5 py-lg-5 btn text-white fw-medium btn-primary btn-passenger" type="submit">
              <span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Generate</button>
            <a href="{{asset('driversdocs/temp/passenger.pdf')}}" download="passenger.pdf" class="border px-3 py-3 px-lg-5 py-lg-5 btn text-white fw-medium btn-primary btn-download disabled">Download</a>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="col-12">
    <div class="blck-white">
      <livewire:driverswarning :role="$usr->role" :endMonth="date('Y-m-t', strtotime('+1 month'))" :items="(int)'10'" />
    </div>
  </div>
</div>
@endsection

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

@section('script')
<script>
// document.addEventListener('DOMContentLoaded', function() {
//   const fakecompanyForm = document.getElementById('fakecompany');
//   const fakecompanyBtn = document.querySelector('.fakecompanybtn');
//   const successMsg = document.querySelector('.resultsuccess');

//   fakecompanyBtn.addEventListener('click', function(e) {
//     e.preventDefault();
//     const formData = new FormData(fakecompanyForm);
//     fetch('/update/fakecompany', {
//       method: 'POST',
//       body: formData,
//       headers: {
//         'X-CSRF-TOKEN': '{{ csrf_token() }}',
//       },
//     })
//       .then(response => {
//         if (response.ok) {
//           return response.text();
//         }
//       })
//       .then(data => {
//         console.log(data);
//         if (data === 'updated') {
//           successMsg.querySelector('p').innerText = 'Fake Company was updated.';
//           successMsg.style.display = "block";
//         }
//       })
//       .catch(error => {
//         console.error('Error:', error);
//       });
//   });
// });
// var sameprogress = 0;
// var samepid = 0;

// const progressbar = document.querySelector('.progress-bar');
// const progresslog = document.querySelector('.progress-text');
// const statusgenerate = document.querySelector('.status-generate');

// async function generate1(e){
//   e.classList.add('disabled');
//   statusgenerate.style.display="inline-block";
//   fetch('/py/driversdocs');
//   await checkProgress();
//   updateProgress();
// }


// async function updateProgress(sameprogress = 0) {
//   const response = await fetch('/py/log?script=driversdocs');
//   const data = await response.json();

//   if(progresslog.innerText == '..'){
//     sameprogress=sameprogress+1;
//   }

//   if(sameprogress>10){
//     statusgenerate.style.display="none";
//     statusgenerate.parentNode.classList.remove('disabled');
//     return;
//   }

//   progressbar.style.width = data.progress + '%';
//   progressbar.innerText = data.progress + '%';
//   progresslog.innerText = data.message;

//   setTimeout(() => updateProgress(sameprogress), 5000);
// }

// async function checkProgress(samepid = 0) {
//   const response = await fetch('/py/pid?script=driversdocs');
//   const data = await response.text();
//   samepid=samepid+1;
//   if(data == 1){
//     return 1;
//   } else {
//     if(samepid>10){
//       return 0;
//     }
//     setTimeout(() => checkProgress(samepid), 5000);
//   }
// }

// async function currentScript() {
//   var repeat = await checkProgress();
//   if(repeat === 'undefined'){
//     return;
//   }
//   if(repeat == 1) {
//     statusgenerate.style.display="inline-block";
//     updateProgress();
//   }
// }

// currentScript();
</script>

<script>
// document.addEventListener('DOMContentLoaded', function(){
//   const passengerform = document.querySelector('#passengerform');
//   const passengerforminputs = passengerform.querySelectorAll('input');
//   const passengerformdownload = document.querySelector('.btn-download');
//   const passengerBtn = document.querySelector('.btn-passenger');
  
//   passengerforminputs.forEach((inputfield) => {
//     inputfield.addEventListener('change',() => {
//       if(!passengerformdownload.classList.contains('disabled')){
//         passengerformdownload.classList.add('disabled');
//       }
//     });
//   });
  
//   passengerBtn.addEventListener('click',(e)=>{
//     e.preventDefault();
//     const passengerdata = new FormData(passengerform);
//     e.target.firstElementChild.style.display="inline-block";
//     fetch('/update/passenger', {
//       method: 'POST',
//       body: passengerdata,
//       headers: {
//         'X-CSRF-TOKEN': '{{ csrf_token() }}',
//       },
//     })
//     .then(response => {
//       if(response.ok) {
//         return response.text();
//       }
//     })
//     .then(data => {
//       if(data == 'updated'){
//         fetch('/py/passenger',{
//           method:'GET',
//         })
//         .then(response => {
//           if(!response.ok){
//             throw new Error('Network response was not ok');
//           }
//           return response.text();
//         })
//         .then(data => {
//           if(data == 'created'){
//             passengerformdownload.classList.remove('disabled');
//             e.target.firstElementChild.style.display="none";
//           }
//         })
//         .then(error => {
//           console.log('Error: ', error);
//         });
//       }
//     })
//     .catch(error => {
//       console.error('Error:', error);
//     });
//   });
// });
</script>

<script>
// function email(e){
//   e.querySelector('.status').style.display="inline-block";
//   e.classList.add('disabled');
//   fetch('/py/driversdocsemail',{
//     method:'GET',
//   })
//   .then(response => {
//     if(!response.ok){
//       throw new Error('Network response was not ok');
//     }
//     return response.text();
//   })
//   .then(data => {
//     if(data == 'sended'){
//       e.querySelector('.status').style.display="none";
//       e.classList.remove('disabled');
//       // const progressbar = document.querySelector('.progress-bar');
//       // const progresslog = document.querySelector('.progress-text');
//       progressbar.style.width = data.progress + '100%';
//       progressbar.innerText = data.progress + '100%';
//       progresslog.innerText = 'New documents were sended to drivers...';
//     }
//   })
// }
</script>

<!---------------- REAL --->

<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='';
    });
  });
});
</script>

<script>
// update company
document.addEventListener('DOMContentLoaded', function() {
  const fakecompanyForm = document.getElementById('fakecompany');
  const fakecompanyBtn = document.querySelector('.fakecompanybtn');
  let msgboxSuccess = document.querySelector('.msgbox-success');
  let msgboxError = document.querySelector('.msgbox-danger');

  fakecompanyForm.addEventListener('submit', function(e) {
    e.preventDefault();
    fakecompanyBtn.firstElementChild.style.display='inline-block';
    const formData = new FormData(fakecompanyForm);
    fetch('/update/fakecompany', {
      method: 'POST',
      body: formData,
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
      },
    })
    .then(response => {
      if(response.ok){
        return response.text();
      }
    })
    .then(data => {
      console.log(data);
      if(data === 'updated'){
        fakecompanyBtn.firstElementChild.style.display='none';
        msgboxSuccess.firstElementChild.innerText = 'Company data was updated.';
        msgboxSuccess.style.display='block';
      }
    })
    .catch(error => {
      console.error('Error:', error);
      fakecompanyBtn.firstElementChild.style.display='none';
      msgboxError.firstElementChild.innerText = 'Company data was not updated. Contact to admin.';
      msgboxError.style.display='block';
    });
  });
});
</script>

<script>
// progress bar
async function showProgress(apiUrl, btn, msgsuccess, msgerror) {
  const progressbar = document.querySelector('.progress-bar');
  const realtimemsgblock = document.querySelector('.progress-text');
  let btnManage = document.querySelectorAll('.firstbtnblock div');

  try {
    const response = await fetch(apiUrl);

    if(!response.ok){
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();

    console.log('Fetched data:', data);

    progressbar.style.width = data.progress + '%';
    progressbar.innerHTML = data.progress + '%';
    realtimemsgblock.innerHTML = data.message;

    if(data.message === 'done..' || data.message === 'stop'){
      btn.querySelector('.status').style.display = 'none';
      document.querySelector('.msgbox-success span.fw-medium').innerText = msgsuccess;
      document.querySelector('.msgbox-success').style.display = 'block';
      btnManage.forEach((btnm) => btnm.classList.remove('disabled'));
      return;
    }

    if(data.message === 'error..'){
      progressbar.style.width = '0%';
      progressbar.style.innerHTML = '';
      document.querySelector('.msgbox-danger span.fw-medium').innerText = msgerror;
      document.querySelector('.msgbox-danger').style.display = 'block';
      btnManage.forEach((btnm) => btnm.classList.remove('disabled'));
      console.log('Stopping interval due to error.');
      return;
    }
  } catch (error) {
    console.error('Error:', error.message);
  }
}
</script>

<script>
// preview button
function preview(e){
  e.querySelector('.status').style.display="inline-block";
  let btnManage = document.querySelectorAll('.firstbtnblock div');
  btnManage.forEach((btnm)=>btnm.classList.add('disabled'));
  let msgboxSuccess = document.querySelector('.msgbox-success');
  let msgboxError = document.querySelector('.msgbox-danger');
  fetch('/py/preview',{
    method:'GET',
  })
  .then(response => {
    if(!response.ok){
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    if(data.message == 'success'){
      e.querySelector('.status').style.display="none";
      msgboxSuccess.style.display='block';
      msgboxSuccess.firstElementChild.innerHTML='Preview was generated. Please download from <a href="{{asset("/driversdocs/temp/preview.pdf?".time())}}">here</a>';
      btnManage.forEach((btnm)=>btnm.classList.remove('disabled'));
    }
  })
  .then(error => {
    console.log('Error: ', error);
  });
}
</script>

<script>
// generate button
function generate(e) {
  let btnManage = document.querySelectorAll('.firstbtnblock div');
  btnManage.forEach((btnm) => btnm.classList.add('disabled'));
  e.querySelector('.status').style.display = 'inline-block';
  fetch('/py/driversdocs');
  const apiUrl = '/py/log?script=driversdocs';
  setInterval(() => showProgress(apiUrl, e, 'Drivers new docs were generated.', 'Error please contact to admin.'), 2000);
}
</script>

<script>
// email button
function email(e){
  let btnManage = document.querySelectorAll('.firstbtnblock div');
  btnManage.forEach((btnm)=>btnm.classList.add('disabled'));
  e.querySelector('.status').style.display="inline-block";
  fetch('/py/driversemails');
  const apiUrl = '/py/log?script=driversemails';
  setInterval(() => showProgress(apiUrl, e, 'Emails were sent.', 'Error please contact to admin.'), 2000);
}
</script>

<script>
// passanger button
document.addEventListener('DOMContentLoaded', function(){
  const passengerForm = document.querySelector('#passengerform');
  let msgboxSuccess = document.querySelector('.msgbox-success');
  let msgboxError = document.querySelector('.msgbox-danger');
  passengerForm.addEventListener('submit',(e)=>{
    e.preventDefault();
    // e.target.querySelector('.btn-passenger').classList.add('disabled');
    e.target.querySelector('.status').style.display='inline-block';
    fetch('/py/passenger', {
      method:'POST',
      body:new FormData(e.target),
      headers:{
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
      }
    })
    .then(response =>{
      if(response.ok){
        return response.json();
      }
    })
    .then(data => {
      console.log(data);
      if(data.message=='success'){
        e.target.querySelector('.status').style.display='none';
        e.target.querySelector('.btn-passenger').classList.remove('disabled');
        e.target.querySelector('.btn-download').classList.remove('disabled');
        msgboxSuccess.firstElementChild.innerText = 'Passenger document was generated. Click the download button.';
        msgboxSuccess.style.display='block';
        scrollToTop();
      }
      if(data.message=='error'){
        e.target.querySelector('.status').style.display='none';
        e.target.querySelector('.btn-passenger').classList.remove('disabled');
        msgboxError.firstElementChild.innerText = 'Please fill all field in Passenger Form or contact to admin.';
        msgboxError.style.display='block';
        scrollToTop();
      }
    })
    .catch(error => {
      console.error('Fetch error:', error);
    });
  });
});
</script>

<script>
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // Optional: adds smooth scrolling animation
    });

    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

@if($isGenerating==1)
<script>
document.addEventListener('DOMContentLoaded', function(){
  let btnManage = document.querySelectorAll('.firstbtnblock div');
  btnManage.forEach((btnm)=>btnm.classList.add('disabled'));
  e = document.querySelector('.btn-preview-generate');
  e.firstElementChild.style.display="inline-block";
  setInterval(() => showProgress('/py/log?script=driversdocs', e, 'Drivers new docs were generated.', 'Error please contact to admin.'), 2000);
});
</script>
@endif

@if($isEmailing==1)
<script>
document.addEventListener('DOMContentLoaded', function(){
  let btnManage = document.querySelectorAll('.firstbtnblock div');
  btnManage.forEach((btnm)=>btnm.classList.add('disabled'));
  e = document.querySelector('.btn-preview-email');
  e.firstElementChild.style.display="inline-block";
  setInterval(() => showProgress('/py/log?script=driversemails', e, 'Emails were sent.', 'Error please contact to admin.'), 2000);
});
</script>
@endif

@endsection