@extends('base')

@push('styles')
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<style>
  #send-api { font-family:'Roboto',sans-serif; font-size:14px; margin-top:1rem; }
  .component-header { font-weight:700; border-bottom:2px solid #eee; padding-bottom:.5rem; margin-bottom:1rem; }
</style>
@endpush

@section('main')
<div id='send-api' class='container-fluid'>
  <div class='row g-3'>
    <div class='col-md-5 p-3 bg-light'>
    <h5 class='component-header'><a href="/">Home</a></h5>
      <h5 class='component-header'>Dashboard</h5>
      @include("send-api.dashboard")
    </div>
    <div class='col-md-7 p-3 bg-white border'>
      <h5 class='component-header'>Jobs</h5>
      @include('send-api.jobs-table')

      <h5 class='component-header mt-4'>Jobs Queue <span id='queue-job-id'></span></h5>
      @include('send-api.jobs-queue')
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
window.jobs_page   = 1;
window.queue_page  = 1;
window.selected_job = null;

window.SP_poll = function() {
  $.getJSON('/send-api/poll', {
    jobs_page: window.jobs_page,
    selected_job: window.selected_job,
    queue_page: window.queue_page
  })
  .done(res => {
    window.SP_render_jobs(res.jobs);
    $('#queue-job-id').text(res.queue.job_id);
    window.SP_render_queue(res.queue);
  })
  .fail(err => console.error('Poll error:', err));
};

$(function(){ SP_poll(); setInterval(SP_poll, 3000); });
</script>
@endpush