<?php $this->start('body'); ?>

<div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
  <h5 class="mb-0 fw-semibold"><i class="fas fa-th-list me-2 text-muted"></i>Dispatch Board</h5>
  <div class="d-flex gap-2">
    <a href="<?= PROOT; ?>Trips" class="btn btn-sm btn-outline-secondary"><i class="fas fa-list me-1"></i>Trip history</a>
    <a href="<?= PROOT; ?>TripRequests/add" class="btn btn-sm btn-primary"><i class="fas fa-plus me-1"></i>New request</a>
  </div>
</div>

<?= flashHtml(); ?>

<!-- Vue 3 mount point -->
<div id="dispatchBoard" v-cloak>
  <div class="row g-3 dispatch-columns">

    <!-- Column 1: Approved requests awaiting dispatch -->
    <div class="col-lg-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-bottom py-2 d-flex align-items-center justify-content-between">
          <span class="fw-semibold text-uppercase small"><i class="fas fa-inbox me-1 text-primary"></i>Approved <span class="text-muted">· {{ approvedRequests.length }}</span></span>
          <button class="btn btn-sm btn-link p-0" @click="refresh" :disabled="loading" title="Refresh"><i class="fas fa-sync-alt" :class="{ 'fa-spin': loading }"></i></button>
        </div>
        <div class="card-body p-2" style="min-height: 400px;">
          <div v-if="approvedRequests.length === 0" class="text-center text-muted small py-4 fst-italic">Nothing waiting — <a :href="proot + 'TripRequests'">review the queue</a>.</div>
          <div v-for="req in approvedRequests" :key="'r'+req.c0d" class="dispatch-card mb-2 p-2 rounded border bg-white">
            <div class="d-flex justify-content-between align-items-start mb-1">
              <span class="font-monospace small fw-semibold">{{ req.request_no }}</span>
              <span class="badge" :class="priorityClass(req.priority)">{{ req.priority }}</span>
            </div>
            <div class="fw-semibold small mb-1">{{ req.customer_name || 'Internal' }}</div>
            <div class="text-muted small mb-1 text-truncate" :title="req.cargo_description">{{ req.cargo_description || '—' }}</div>
            <div class="small text-muted mb-2" v-if="req.pickup_date">
              <i class="fas fa-calendar fa-xs me-1"></i>{{ req.pickup_date }} {{ req.pickup_time || '' }}
            </div>
            <button class="btn btn-sm btn-primary w-100" @click="openDispatch(req)">
              <i class="fas fa-truck-loading me-1"></i>Dispatch
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Column 2: Dispatched — awaiting driver start -->
    <div class="col-lg-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-bottom py-2">
          <span class="fw-semibold text-uppercase small"><i class="fas fa-hourglass-start me-1 text-info"></i>Dispatched <span class="text-muted">· {{ dispatched.length }}</span></span>
        </div>
        <div class="card-body p-2" style="min-height: 400px;">
          <div v-if="dispatched.length === 0" class="text-center text-muted small py-4 fst-italic">None dispatched.</div>
          <div v-for="t in dispatched" :key="'d'+t.c0d" class="dispatch-card mb-2 p-2 rounded border bg-white">
            <div class="d-flex justify-content-between align-items-start mb-1">
              <a :href="proot + 'Trips/view/' + t.c0d" class="font-monospace small fw-semibold text-decoration-none">{{ t.trip_no }}</a>
            </div>
            <div class="small mb-1"><i class="fas fa-user fa-xs text-muted me-1"></i>{{ t.driver_name }}</div>
            <div class="small mb-1"><i class="fas fa-truck fa-xs text-muted me-1"></i>{{ t.truck_reg }}</div>
            <div class="small text-muted mb-2 text-truncate">{{ t.customer_name || 'Internal' }} · {{ t.cargo_description || '—' }}</div>
            <button class="btn btn-sm btn-info text-white w-100" @click="startTrip(t)">
              <i class="fas fa-play me-1"></i>Driver started
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Column 3: In transit -->
    <div class="col-lg-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-bottom py-2">
          <span class="fw-semibold text-uppercase small"><i class="fas fa-route me-1 text-warning"></i>In Transit <span class="text-muted">· {{ inTransit.length }}</span></span>
        </div>
        <div class="card-body p-2" style="min-height: 400px;">
          <div v-if="inTransit.length === 0" class="text-center text-muted small py-4 fst-italic">No trips in transit.</div>
          <div v-for="t in inTransit" :key="'it'+t.c0d" class="dispatch-card mb-2 p-2 rounded border bg-white">
            <div class="d-flex justify-content-between align-items-start mb-1">
              <a :href="proot + 'Trips/view/' + t.c0d" class="font-monospace small fw-semibold text-decoration-none">{{ t.trip_no }}</a>
            </div>
            <div class="small mb-1"><i class="fas fa-user fa-xs text-muted me-1"></i>{{ t.driver_name }}</div>
            <div class="small mb-1"><i class="fas fa-truck fa-xs text-muted me-1"></i>{{ t.truck_reg }}</div>
            <div class="small text-muted mb-2 text-truncate">{{ t.customer_name || 'Internal' }}</div>
            <div class="small text-muted mb-2" v-if="t.actual_start"><i class="fas fa-clock fa-xs me-1"></i>Started {{ t.actual_start }}</div>
            <button class="btn btn-sm btn-warning w-100" @click="deliverTrip(t)">
              <i class="fas fa-flag-checkered me-1"></i>Mark delivered
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Column 4: Delivered — awaiting close-out -->
    <div class="col-lg-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-bottom py-2">
          <span class="fw-semibold text-uppercase small"><i class="fas fa-check-double me-1 text-success"></i>Delivered <span class="text-muted">· {{ delivered.length }}</span></span>
        </div>
        <div class="card-body p-2" style="min-height: 400px;">
          <div v-if="delivered.length === 0" class="text-center text-muted small py-4 fst-italic">Nothing awaiting close-out.</div>
          <div v-for="t in delivered" :key="'dv'+t.c0d" class="dispatch-card mb-2 p-2 rounded border bg-white">
            <div class="d-flex justify-content-between align-items-start mb-1">
              <a :href="proot + 'Trips/view/' + t.c0d" class="font-monospace small fw-semibold text-decoration-none">{{ t.trip_no }}</a>
            </div>
            <div class="small mb-1"><i class="fas fa-user fa-xs text-muted me-1"></i>{{ t.driver_name }}</div>
            <div class="small mb-1"><i class="fas fa-truck fa-xs text-muted me-1"></i>{{ t.truck_reg }}</div>
            <div class="small text-muted mb-2 text-truncate">{{ t.customer_name || 'Internal' }}</div>
            <div class="small text-muted mb-2" v-if="t.delivered_at"><i class="fas fa-clock fa-xs me-1"></i>Delivered {{ t.delivered_at }}</div>
            <button class="btn btn-sm btn-success w-100" @click="closeTrip(t)">
              <i class="fas fa-check-double me-1"></i>Close &amp; book cost
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
window.__pacificDispatch = {
    proot: '<?= PROOT; ?>',
    csrf:  '<?= csrf_token(); ?>',
    board: <?= json_encode($this->data['board'], JSON_UNESCAPED_UNICODE); ?>,
    drivers: <?= json_encode($this->data['drivers'], JSON_UNESCAPED_UNICODE); ?>,
    trucks:  <?= json_encode($this->data['trucks'], JSON_UNESCAPED_UNICODE); ?>
};
</script>

<style>
[v-cloak] { display: none; }
.dispatch-card { transition: box-shadow .12s ease, transform .12s ease; }
.dispatch-card:hover { box-shadow: 0 4px 12px rgba(38,38,245,.10); transform: translateY(-1px); }
.dispatch-columns .card-body { background: var(--pacific-accent); }
@media (max-width: 991.98px) {
  .dispatch-columns .card-body { min-height: 240px !important; }
}
</style>

<?php $this->end(); ?>
<?php $this->start('section_js'); ?>
<script src="<?= PROOT; ?>js/Olibs/vue.global.prod.js"></script>
<script src="<?= PROOT; ?>js/Projects/dispatch-board.js?v=<?= @filemtime(ROOT . '/js/Projects/dispatch-board.js') ?: '1'; ?>"></script>
<?php $this->end(); ?>
