@extends('admin.admin_dashboard')

@section('admin')
<<<<<<< HEAD

<div class="page-content">
    <!-- Breadcrumb & Heading -->
    <div class="d-flex flex-row align-items-center justify-content-between mb-4 p-3 bg-light rounded shadow-sm">
        <div class="d-flex align-items-center">
            <i class="bx bx-box fs-3 text-brown me-2"></i>
            <h4 class="mb-0">All Batch Reports</h4>
        </div>
        <div>
            @if (Auth::user()->can('grn.add'))
                <a href="{{ route('add.grn.store') }}" class="btn btn-brown px-4 d-none d-sm-inline">+ Add GRN</a>
                <a href="#" class="btn btn-brown d-inline d-sm-none rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="bx bx-plus"></i>
                </a>
            @endif

            @if (Auth::user()->can('grn.import'))
                <a href="{{ route('import.grn') }}" class="btn btn-brown px-4 d-none d-sm-inline">Import GRN</a>
                <a href="#" class="btn btn-brown d-inline d-sm-none rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="bx bx-plus"></i>
                </a>
            @endif
        </div>
    </div>

    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-body">
            <div class="table-responsive">
                <table id="batchReportsTable" class="table table-striped table-bordered w-100">
                    <thead class="bg-brown text-white">
                        <tr>
                            <th>S/N</th>
                            <th>Farmer Number</th>
                            <th>Name</th>
                            <th>FAQ</th>
                            <th>Moisture</th>
                            <th>Date Processed</th>
                            <th>Voucher No.</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $totalFAQ = 0; @endphp
                        @foreach ($batchReports as $key => $report)
                            @php $totalFAQ += $report->faq; @endphp
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $report->farmer_number }}</td>
                                <td>{{ $report->farmer_fname . ' ' . $report->farmer_lname }}</td>
                                <td>{{ $report->faq }}</td>
                                <td>{{ $report->moisture_content }}%</td>
                                <td>{{ $report->date_processed }}</td>
                                <td>{{ $report->id }}</td>
                                <td>
                                    <div class="dropdown">
                                        <a href="#" class="dropdown-toggle text-secondary fs-5" data-bs-toggle="dropdown">
                                            <i class="bx bx-dots-vertical-rounded"></i>
                                        </a>
                                        <ul class="dropdown-menu">
                                            @can('payment_voucher.generate')
                                                <li>
                                                    <a class="dropdown-item text-success" href="{{ route('generate.payment.voucher', $report->id) }}">
                                                        <i class='bx bx-receipt me-1'></i> Full Payment Voucher
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item text-secondary" href="{{ route('generate.graded.voucher', $report->id) }}">
                                                        <i class='bx bx-file me-1'></i> Graded Payment Voucher
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item text-primary" href="{{ route('generate.processing.voucher', $report->id) }}">
                                                        <i class='bx bx-cog me-1'></i> Processing Fee Only 
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item text-warning" href="{{ route('generate.faq.voucher', $report->id) }}">
                                                        <i class='bx bx-coffee me-1'></i> FAQ Coffee Voucher
                                                    </a>
                                                </li>
                                            @endcan

                                            @can('grn.edit')
                                                <li>
                                                    <a class="dropdown-item text-info" href="{{ route('edit.grn.form', $report->id) }}">
                                                        <i class='bx bx-edit-alt me-1'></i> Edit
                                                    </a>
                                                </li>
                                            @endcan

                                            @can('grn.print')
                                                <li>
                                                    <a class="dropdown-item text-info" href="{{ route('grn.preview', $report->id) }}" target="_blank">
                                                        <i class='bx bx-printer me-1'></i> Print
                                                    </a>
                                                </li>
                                            @endcan

                                            @can('grn.delete')
                                                <li>
                                                    <a href="#" class="dropdown-item text-danger btn-delete-grn" data-grn-id="{{ $report->id }}">
                                                        <i class='bx bx-trash me-1'></i> Delete
                                                    </a>
                                                </li>
                                            @endcan
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="table-light fw-bold">
                        <tr>
                            <td colspan="3" class="text-end">Total FAQ:</td>
                            <td>{{ number_format($totalFAQ, 2) }}</td>
                            <td colspan="4"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Custom styles --}}
<style>
    .text-brown {
        color: #6f4f37;
    }

    .bg-brown {
        background-color: #6f4f37;
    }

    .btn-brown {
        background-color: #6f4f37;
        color: white;
    }
</style>

{{-- JavaScript --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Delete functionality
        document.querySelectorAll('.btn-delete-grn').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                const grnId = this.dataset.grnId;

                Swal.fire({
=======
@php
    $summary = $summary ?? [];
    $deskStates = $deskStates ?? [];
    $totalFAQ = collect($batchReports ?? [])->sum(fn ($r) => (float) ($r->faq ?? 0));
    $desk1Available = $deskStates[1]['available'] ?? true;
    $desk2Available = $deskStates[2]['available'] ?? true;
    $canManageDesk = $canManageDesk ?? (auth()->user()?->can('payment_voucher.generate') ?? false);
@endphp

<div class="page-content chm-batch-reports-page">
  <div class="container-fluid">

    <x-chm.page-header
      title="Payment Desk Queue"
      subtitle="Call farmers by voucher number — voice announces voucher number and which desk to visit."
      icon="bx bx-megaphone"
    >
      <x-slot:breadcrumb>
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
        <li class="breadcrumb-item">Hope Coffee</li>
        <li class="breadcrumb-item active" aria-current="page">Batch reports</li>
      </x-slot:breadcrumb>
      <x-slot:actions>
        <span class="badge batch-live-badge me-2">
          <span class="batch-live-dot"></span> Live
        </span>
        @can('grn.add')
          <a href="{{ route('add.grn.form') }}" class="btn btn-primary btn-sm">
            <i class="bx bx-plus-circle me-1"></i> Add GRN
          </a>
        @endcan
      </x-slot:actions>
    </x-chm.page-header>

    @unless($canManageDesk)
      <div class="alert alert-info border-0 shadow-sm mb-4" role="status">
        <i class="bx bx-info-circle me-1"></i>
        You can view the payment desk queue. Assigning farmers to desks and processing vouchers requires payment voucher permission.
      </div>
    @endunless

    {{-- Summary KPIs --}}
    <div class="row g-3 mb-4" id="batch-summary-cards">
      @foreach([
        ['waiting_count', 'Waiting', 'farmers in queue', 'bx-time-five', 'batch-kpi--amber'],
        ['at_desks', 'At desks', 'being served now', 'bx-desktop', 'batch-kpi--blue'],
        ['waiting_faq_kg', 'FAQ in queue', 'kg awaiting payment', 'bx-package', 'batch-kpi--coffee'],
        ['today_faq_kg', "Today's FAQ", 'kg recorded today', 'bx-calendar-check', 'batch-kpi--green'],
      ] as [$key, $label, $sub, $icon, $kpiClass])
        <div class="col-6 col-lg-3">
          <div class="card chm-card border-0 shadow-sm h-100 batch-kpi-card">
            <div class="card-body d-flex align-items-center gap-3">
              <div class="batch-kpi-icon {{ $kpiClass }}">
                <i class="bx {{ $icon }}"></i>
              </div>
              <div>
                <div class="text-muted small text-uppercase fw-semibold">{{ $label }}</div>
                <div class="chm-stat-value" data-batch-stat="{{ $key }}">
                  {{ is_float($summary[$key] ?? 0) || str_contains($key, 'faq') ? number_format($summary[$key] ?? 0, 0) : ($summary[$key] ?? 0) }}
                </div>
                <div class="small text-muted">{{ $sub }}</div>
              </div>
            </div>
          </div>
        </div>
      @endforeach
    </div>

    {{-- Desk display board --}}
    <div class="batch-display-board mb-4">
      <div class="d-flex align-items-center justify-content-between mb-3 px-1">
        <div>
          <h5 class="mb-0 fw-bold"><i class="bx bx-broadcast me-1"></i> Now serving</h5>
          @if($canManageDesk)
            <p class="small text-muted mb-0">Mark <strong>Done</strong> on a desk before calling the next farmer there</p>
          @else
            <p class="small text-muted mb-0">Desk assignment is limited to staff who can process payment vouchers</p>
          @endif
        </div>
      </div>

      <div class="row g-3">
        @foreach([1, 2] as $deskNum)
          @php
            $desk = $deskStates[$deskNum] ?? ['empty' => true, 'desk_number' => $deskNum];
            $isActive = !($desk['empty'] ?? true);
            $deskTone = $deskNum === 1 ? 'batch-desk-panel--one' : 'batch-desk-panel--two';
          @endphp
          <div class="col-md-6">
            <div class="card chm-card border-0 shadow-sm batch-desk-panel {{ $deskTone }} {{ $isActive ? 'batch-desk-panel--active' : 'batch-desk-panel--idle' }}"
                 data-desk-panel="{{ $deskNum }}">
              <div class="card-body p-0">
              <div class="batch-desk-panel__header">
                <div class="batch-desk-number" aria-label="Desk {{ $deskNum }}">{{ $deskNum }}</div>
                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="batch-desk-title">Desk {{ $deskNum }}</div>
                    @if($isActive)
                      <span class="badge batch-desk-busy-badge">In progress</span>
                    @else
                      <span class="badge batch-desk-open-badge">Open</span>
                    @endif
                  </div>
                  <div class="small batch-desk-status text-muted">
                    @if($isActive)
                      Called {{ $desk['called_at'] ?? '' }} · {{ $desk['called_by_name'] ?? 'Staff' }}
                    @else
                      @if($canManageDesk)
                        Available — call next farmer here
                      @else
                        Open — awaiting payment desk staff
                      @endif
                    @endif
                  </div>
                </div>
                @if($canManageDesk && $isActive)
                      <button type="button" class="btn btn-sm batch-desk-clear batch-desk-clear-btn" data-desk="{{ $deskNum }}">
                    <i class="bx bx-check-circle me-1"></i> Done
                  </button>
                @endif
              </div>

              <div class="batch-desk-panel__body batch-desk-token-wrap text-center">
                @if($isActive)
                  <div class="batch-desk-now-serving">Now serving</div>
                  <div class="batch-desk-token" data-desk-token="{{ $deskNum }}">#{{ $desk['grn_id'] }}</div>
                  <div class="batch-desk-destination">
                    <i class="bx bx-right-arrow-circle me-1"></i> Proceed to <strong>Desk {{ $deskNum }}</strong>
                  </div>
                  <div class="batch-desk-farmer">{{ $desk['farmer_name'] ?? '' }}</div>
                  <div class="batch-desk-meta">{{ $desk['farmer_number'] ?? '' }} · {{ $desk['faq'] ?? 0 }} kg FAQ · {{ $desk['moisture_content'] ?? '—' }}% MC</div>
                  <div class="batch-desk-spoken mt-3">{{ $desk['announcement'] ?? '' }}</div>
                  <div class="d-flex flex-wrap justify-content-center gap-2 mt-3">
                    @if($canManageDesk)
                      <button type="button" class="btn btn-sm batch-desk-speak-btn batch-desk-speak" data-announcement="{{ e($desk['announcement'] ?? '') }}">
                        <i class="bx bx-volume-full me-1"></i> Repeat call
                      </button>
                    @endif
                    @can('payment_voucher.generate')
                      <a href="{{ route('generate.payment.voucher', $desk['grn_id']) }}"
                         class="btn btn-sm batch-voucher-btn">
                        <i class="bx bx-receipt me-1"></i> Payment voucher
                      </a>
                    @endcan
                  </div>
                @else
                  <div class="batch-desk-token batch-desk-token--empty">—</div>
                  <p class="batch-desk-idle-text text-muted mb-0">No farmer at this desk</p>
                  @if($canManageDesk)
                    <p class="small text-muted mb-0 mt-1">Use <strong>Desk {{ $deskNum }}</strong> in the queue below</p>
                  @endif
                @endif
              </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>

    {{-- Waiting queue --}}
    <div class="card chm-card border-0 shadow-sm">
      <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0 d-flex flex-wrap align-items-end justify-content-between gap-2">
        <div>
          <x-chm.section-title icon="bx bx-list-ul" title="Waiting queue" class="mb-0" />
          <p class="small text-muted mb-0 mt-1">
            @if($canManageDesk)
              First in, first out — click a desk to call the farmer
            @else
              View-only queue — desk assignment requires payment voucher permission
            @endif
          </p>
        </div>
        @if($batchReports->isNotEmpty())
          <span class="badge bg-light text-muted border">
            {{ $batchReports->count() }} waiting · {{ number_format($totalFAQ, 0) }} kg FAQ
          </span>
        @endif
      </div>
      <div class="card-body px-4 pb-4">
        <div class="table-responsive">
          <table id="batchReportsTable" class="table table-hover align-middle w-100 mb-0">
            <thead class="table-light">
              <tr>
                <th style="width:3rem">#</th>
                <th>Voucher</th>
                <th>Farmer</th>
                <th>FAQ</th>
                <th>MC</th>
                <th>Recorded</th>
                <th class="text-end">Send to desk</th>
                <th style="width:3rem"></th>
              </tr>
            </thead>
            <tbody id="batch-queue-body">
              @forelse ($batchReports as $key => $report)
                <tr data-grn-id="{{ $report->id }}">
                  <td><span class="batch-queue-pos">{{ $key + 1 }}</span></td>
                  <td>
                    <span class="batch-token-badge">#{{ $report->id }}</span>
                    <div class="batch-token-preview small text-muted mt-1">{{ $report->token_spoken }}</div>
                  </td>
                  <td>
                    <div class="fw-semibold">{{ $report->farmer_name }}</div>
                    <div class="small text-muted">{{ $report->farmer_number }}</div>
                  </td>
                  <td>{{ number_format((float) $report->faq, 1) }} kg</td>
                  <td>{{ $report->moisture_content }}%</td>
                  <td class="small text-muted text-nowrap">{{ $report->date_processed }}</td>
                  <td class="text-end">
                    @if($canManageDesk)
                      <div class="d-flex justify-content-end gap-2 flex-wrap">
                        <button type="button" class="btn btn-sm batch-call-desk batch-call-desk--1"
                                data-grn-id="{{ $report->id }}" data-desk="1"
                                data-announcement="{{ e($report->announcement_desk_1) }}"
                                title="{{ $desk1Available ? $report->announcement_desk_1 : 'Desk 1 is busy — mark Done first' }}"
                                @disabled(!$desk1Available)>
                          <i class="bx bx-desktop me-1"></i> Desk 1
                        </button>
                        <button type="button" class="btn btn-sm batch-call-desk batch-call-desk--2"
                                data-grn-id="{{ $report->id }}" data-desk="2"
                                data-announcement="{{ e($report->announcement_desk_2) }}"
                                title="{{ $desk2Available ? $report->announcement_desk_2 : 'Desk 2 is busy — mark Done first' }}"
                                @disabled(!$desk2Available)>
                          <i class="bx bx-desktop me-1"></i> Desk 2
                        </button>
                      </div>
                    @else
                      <span class="small text-muted">—</span>
                    @endif
                  </td>
                  <td>
                    <div class="dropdown">
                      <button class="btn btn-sm btn-light" data-bs-toggle="dropdown" aria-label="More actions">
                        <i class="bx bx-dots-vertical-rounded"></i>
                      </button>
                      <ul class="dropdown-menu dropdown-menu-end">
                        @can('grn.edit')
                          <li><a class="dropdown-item" href="{{ route('edit.grn.form', $report->id) }}"><i class="bx bx-edit-alt me-1"></i> Edit GRN</a></li>
                        @endcan
                        @can('grn.print')
                          <li><a class="dropdown-item" href="{{ route('grn.preview', $report->id) }}" target="_blank"><i class="bx bx-printer me-1"></i> Print GRN</a></li>
                        @endcan
                        @can('grn.delete')
                          <li><hr class="dropdown-divider"></li>
                          <li><a href="#" class="dropdown-item text-danger btn-delete-grn" data-grn-id="{{ $report->id }}"><i class="bx bx-trash me-1"></i> Delete</a></li>
                        @endcan
                      </ul>
                    </div>
                  </td>
                </tr>
              @empty
                <tr id="batch-queue-empty">
                  <td colspan="8" class="text-center py-5">
                    <div class="batch-queue-clear-state">
                      <i class="bx bx-check-circle"></i>
                      <p class="fw-semibold mb-1">Queue is clear</p>
                      <p class="small text-muted mb-0">No farmers waiting for payment right now.</p>
                    </div>
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection

@push('styles')
<style>
.chm-batch-reports-page {
    --batch-blue: #1e3a5f;
    --batch-blue-soft: rgba(30, 58, 95, 0.08);
    --batch-coffee: #6f4f37;
    --batch-coffee-soft: rgba(111, 79, 55, 0.08);
    --batch-green: #059669;
    --batch-amber: #d97706;
}
.chm-batch-reports-page .batch-live-badge {
    font-size: 0.75rem; font-weight: 600;
    background: rgba(5, 150, 105, 0.1); color: var(--batch-green); border: 1px solid rgba(5, 150, 105, 0.25);
}
.chm-batch-reports-page .batch-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--batch-green); margin-right: 4px;
    animation: batchPulse 2s infinite;
}
@keyframes batchPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes batchAlertFlash {
    0%, 100% { box-shadow: none; transform: scale(1); }
    25%, 75% { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35); transform: scale(1.04); }
}
.chm-batch-reports-page .batch-alert-flash {
    animation: batchAlertFlash 0.55s ease-in-out 3;
    background: rgba(217, 119, 6, 0.18) !important;
    color: #92400e !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
}
.chm-batch-reports-page .batch-kpi-card { border-top: 3px solid transparent; }
.chm-batch-reports-page .batch-kpi-card:has(.batch-kpi--amber) { border-top-color: var(--batch-amber); }
.chm-batch-reports-page .batch-kpi-card:has(.batch-kpi--blue) { border-top-color: var(--batch-blue); }
.chm-batch-reports-page .batch-kpi-card:has(.batch-kpi--coffee) { border-top-color: var(--batch-coffee); }
.chm-batch-reports-page .batch-kpi-card:has(.batch-kpi--green) { border-top-color: var(--batch-green); }
.chm-batch-reports-page .batch-kpi-icon {
    width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.chm-batch-reports-page .batch-kpi--amber { background: rgba(217, 119, 6, 0.12); color: var(--batch-amber); }
.chm-batch-reports-page .batch-kpi--blue { background: var(--batch-blue-soft); color: var(--batch-blue); }
.chm-batch-reports-page .batch-kpi--coffee { background: var(--batch-coffee-soft); color: var(--batch-coffee); }
.chm-batch-reports-page .batch-kpi--green { background: rgba(5, 150, 105, 0.12); color: var(--batch-green); }
.chm-batch-reports-page .batch-display-board {
    background: linear-gradient(180deg, var(--batch-blue-soft) 0%, transparent 70%);
    border-radius: 1rem; padding: 0.5rem 0.25rem 0;
}
.chm-batch-reports-page .batch-desk-panel { overflow: hidden; transition: box-shadow 0.2s ease; }
.chm-batch-reports-page .batch-desk-panel--one { border-left: 4px solid var(--batch-blue) !important; }
.chm-batch-reports-page .batch-desk-panel--two { border-left: 4px solid var(--batch-coffee) !important; }
.chm-batch-reports-page .batch-desk-panel--one.batch-desk-panel--active { background: linear-gradient(135deg, #fff 0%, var(--batch-blue-soft) 100%); }
.chm-batch-reports-page .batch-desk-panel--two.batch-desk-panel--active { background: linear-gradient(135deg, #fff 0%, var(--batch-coffee-soft) 100%); }
.chm-batch-reports-page .batch-desk-panel--active { box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08) !important; }
.chm-batch-reports-page .batch-desk-panel__header {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--chm-border, #e9ecef);
}
.chm-batch-reports-page .batch-desk-panel--one .batch-desk-number {
    background: var(--batch-blue-soft); color: var(--batch-blue); border: 1px solid rgba(30, 58, 95, 0.15);
}
.chm-batch-reports-page .batch-desk-panel--two .batch-desk-number {
    background: var(--batch-coffee-soft); color: var(--batch-coffee); border: 1px solid rgba(111, 79, 55, 0.15);
}
.chm-batch-reports-page .batch-desk-number {
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 700; flex-shrink: 0;
}
.chm-batch-reports-page .batch-desk-title { font-size: 1.1rem; font-weight: 600; }
.chm-batch-reports-page .batch-desk-busy-badge { background: rgba(217, 119, 6, 0.15); color: #b45309; font-weight: 600; }
.chm-batch-reports-page .batch-desk-open-badge { background: rgba(5, 150, 105, 0.12); color: var(--batch-green); font-weight: 600; }
.chm-batch-reports-page .batch-desk-panel__body { padding: 1.25rem 1.25rem 1.5rem; }
.chm-batch-reports-page .batch-desk-now-serving {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 600; color: var(--chm-muted, #6c757d); margin-bottom: 0.5rem;
}
.chm-batch-reports-page .batch-desk-panel--one .batch-desk-token { color: var(--batch-blue); }
.chm-batch-reports-page .batch-desk-panel--two .batch-desk-token { color: var(--batch-coffee); }
.chm-batch-reports-page .batch-desk-token {
    font-size: 2.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
}
.chm-batch-reports-page .batch-desk-token--empty { font-size: 2rem; color: var(--chm-muted, #adb5bd); font-weight: 400; }
.chm-batch-reports-page .batch-desk-destination {
    display: inline-flex; align-items: center; margin-top: 0.75rem;
    padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500;
}
.chm-batch-reports-page .batch-desk-panel--one .batch-desk-destination { background: var(--batch-blue-soft); color: var(--batch-blue); }
.chm-batch-reports-page .batch-desk-panel--two .batch-desk-destination { background: var(--batch-coffee-soft); color: var(--batch-coffee); }
.chm-batch-reports-page .batch-desk-farmer { font-size: 1.05rem; font-weight: 600; margin-top: 0.85rem; }
.chm-batch-reports-page .batch-desk-meta { font-size: 0.85rem; color: var(--chm-muted, #6c757d); margin-top: 0.25rem; }
.chm-batch-reports-page .batch-desk-spoken {
    font-size: 0.875rem; color: var(--chm-muted, #6c757d); font-style: italic;
    max-width: 28rem; margin-left: auto; margin-right: auto; line-height: 1.45;
}
.chm-batch-reports-page .batch-desk-panel.batch-desk-flash { animation: batchDeskFlash 1s ease; }
@keyframes batchDeskFlash {
    0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
    50% { box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.12); }
}
.chm-batch-reports-page .batch-desk-clear-btn {
    background: #fff; border: 1px solid var(--chm-border, #dee2e6); color: var(--batch-green); font-weight: 600;
}
.chm-batch-reports-page .batch-desk-speak-btn {
    background: var(--batch-blue); border-color: var(--batch-blue); color: #fff;
}
.chm-batch-reports-page .batch-desk-panel--two .batch-desk-speak-btn {
    background: var(--batch-coffee); border-color: var(--batch-coffee);
}
.chm-batch-reports-page .batch-voucher-btn {
    background: #fff; border: 1px solid var(--chm-border, #dee2e6); color: var(--chm-text, #212529);
}
.chm-batch-reports-page .batch-queue-pos {
    display: inline-flex; width: 1.75rem; height: 1.75rem;
    align-items: center; justify-content: center; border-radius: 50%;
    background: var(--batch-blue-soft); color: var(--batch-blue); font-weight: 700; font-size: 0.8rem;
}
.chm-batch-reports-page .batch-token-badge {
    display: inline-block; padding: 0.2rem 0.55rem; border-radius: 0.375rem;
    background: var(--batch-blue-soft); color: var(--batch-blue);
    border: 1px solid rgba(30, 58, 95, 0.12); font-weight: 700; font-size: 0.95rem;
}
.chm-batch-reports-page .batch-call-desk--1 {
    background: var(--batch-blue); border-color: var(--batch-blue); color: #fff;
}
.chm-batch-reports-page .batch-call-desk--1:hover:not(:disabled) { background: #163049; border-color: #163049; color: #fff; }
.chm-batch-reports-page .batch-call-desk--2 {
    background: var(--batch-coffee); border-color: var(--batch-coffee); color: #fff;
}
.chm-batch-reports-page .batch-call-desk--2:hover:not(:disabled) { background: #5a3f2c; border-color: #5a3f2c; color: #fff; }
.chm-batch-reports-page .batch-call-desk:disabled { opacity: 0.45; cursor: not-allowed; }
.chm-batch-reports-page .batch-queue-clear-state i {
    font-size: 2.5rem; color: var(--batch-green); display: block; margin-bottom: 0.5rem;
}
</style>
@endpush

@push('scripts')
<script>
(function () {
    'use strict';

    const liveUrl = @json(route('all.batch.reports.live'));
    const callUrl = @json(route('all.batch.reports.desk.call'));
    const clearUrl = @json(route('all.batch.reports.desk.clear'));
    const csrf = @json(csrf_token());
    const canGenerateVoucher = @json(auth()->user()?->can('payment_voucher.generate') ?? false);
    const canManageDesk = @json($canManageDesk);
    const voucherUrlTemplate = @json(route('generate.payment.voucher', ['id' => '__ID__']));

    let table = null;

    function escapeAttr(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;');
    }

    function speak(text) {
        if (window.ChmSpeaker) {
            window.ChmSpeaker.prime();
            if (window.ChmSpeaker.speak(text)) {
                return;
            }
        }

        var message = String(text || '').trim();
        if (!message || !window.speechSynthesis) {
            if (window.ChmNotify) {
                window.ChmNotify.warning('Speaker unavailable', 'Could not announce: ' + (message || 'empty message'));
            }
            return;
        }

        try {
            if (window.speechSynthesis.speaking) {
                window.speechSynthesis.cancel();
            }
            window.speechSynthesis.getVoices();
            var utter = new SpeechSynthesisUtterance(message);
            utter.rate = 0.88;
            utter.pitch = 1.05;
            utter.lang = 'en-GB';
            window.speechSynthesis.speak(utter);
        } catch (err) {
            if (window.ChmNotify) {
                window.ChmNotify.warning('Speaker unavailable', 'Could not announce: ' + message);
            }
        }
    }

    function notify(icon, title, text) {
        if (window.ChmNotify && window.ChmNotify.fire) {
            return window.ChmNotify.fire({ icon: icon, title: title, text: text });
        }
        if (window.Swal) {
            return Swal.fire({ icon: icon, title: title, text: text, confirmButtonColor: '#1e3a5f' });
        }
        alert(title + (text ? ': ' + text : ''));
        return Promise.resolve();
    }

    function postJson(url, body) {
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify(body),
        }).then(function (res) {
            return res.json().then(function (data) {
                if (!res.ok) throw new Error(data.message || 'Request failed');
                return data;
            });
        });
    }

    function updateSummary(summary) {
        if (!summary) return;
        Object.keys(summary).forEach(function (key) {
            const el = document.querySelector('[data-batch-stat="' + key + '"]');
            if (el) {
                el.textContent = typeof summary[key] === 'number'
                    ? Number(summary[key]).toLocaleString(undefined, { maximumFractionDigits: 0 })
                    : summary[key];
            }
        });
    }

    function syncDeskButtons(summary) {
        if (!summary) return;
        [1, 2].forEach(function (desk) {
            const available = summary['desk_' + desk + '_available'];
            document.querySelectorAll('.batch-call-desk--' + desk).forEach(function (btn) {
                btn.disabled = !available;
                btn.title = available
                    ? (btn.getAttribute('data-announcement') || '')
                    : 'Desk ' + desk + ' is busy — mark Done first';
            });
        });
    }

    function updateHeaderBadge(panel, desk, isActive) {
        const titleRow = panel.querySelector('.d-flex.align-items-center.gap-2');
        if (!titleRow) return;
        let badge = titleRow.querySelector('.badge');
        if (!badge) {
            badge = document.createElement('span');
            titleRow.appendChild(badge);
        }
        badge.className = 'badge ' + (isActive ? 'batch-desk-busy-badge' : 'batch-desk-open-badge');
        badge.textContent = isActive ? 'In progress' : 'Open';
    }

    function deskPanelHtml(deskNum, desk) {
        if (desk.empty) {
            return '<div class="batch-desk-token batch-desk-token--empty">—</div>' +
                '<p class="batch-desk-idle-text text-muted mb-0">No farmer at this desk</p>' +
                '<p class="small text-muted mb-0 mt-1">Use <strong>Desk ' + deskNum + '</strong> in the queue below</p>';
        }

        const voucherBtn = canGenerateVoucher
            ? '<a href="' + voucherUrlTemplate.replace('__ID__', desk.grn_id) + '" class="btn btn-sm batch-voucher-btn">' +
              '<i class="bx bx-receipt me-1"></i> Payment voucher</a>'
            : '';

        const speakBtn = canManageDesk
            ? '<button type="button" class="btn btn-sm batch-desk-speak-btn batch-desk-speak" data-announcement="' + escapeAttr(desk.announcement || '') + '">' +
              '<i class="bx bx-volume-full me-1"></i> Repeat call</button>'
            : '';

        return '<div class="batch-desk-now-serving">Now serving</div>' +
            '<div class="batch-desk-token" data-desk-token="' + deskNum + '">#' + desk.grn_id + '</div>' +
            '<div class="batch-desk-destination"><i class="bx bx-right-arrow-circle me-1"></i> Proceed to <strong>Desk ' + deskNum + '</strong></div>' +
            '<div class="batch-desk-farmer">' + (desk.farmer_name || '') + '</div>' +
            '<div class="batch-desk-meta">' + (desk.farmer_number || '') + ' · ' + (desk.faq || 0) + ' kg FAQ · ' + (desk.moisture_content || '—') + '% MC</div>' +
            '<div class="batch-desk-spoken mt-3">' + (desk.announcement || '') + '</div>' +
            '<div class="d-flex flex-wrap justify-content-center gap-2 mt-3">' +
            speakBtn + voucherBtn + '</div>';
    }

    function renderDeskPanel(deskNum, desk) {
        const panel = document.querySelector('[data-desk-panel="' + deskNum + '"]');
        if (!panel) return;

        panel.classList.toggle('batch-desk-panel--active', !desk.empty);
        panel.classList.toggle('batch-desk-panel--idle', desk.empty);
        updateHeaderBadge(panel, deskNum, !desk.empty);

        const status = panel.querySelector('.batch-desk-status');
        const header = panel.querySelector('.batch-desk-panel__header');
        let clearBtn = panel.querySelector('.batch-desk-clear');

        if (status) {
            status.textContent = desk.empty
                ? 'Available — call next farmer here'
                : 'Called ' + (desk.called_at || '') + ' · ' + (desk.called_by_name || 'Staff');
        }

        if (desk.empty && clearBtn) clearBtn.remove();
        if (canManageDesk && !desk.empty && !clearBtn && header) {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-sm batch-desk-clear batch-desk-clear-btn';
            btn.dataset.desk = deskNum;
            btn.innerHTML = '<i class="bx bx-check-circle me-1"></i> Done';
            header.appendChild(btn);
        }

        const wrap = panel.querySelector('.batch-desk-token-wrap');
        if (wrap) wrap.innerHTML = deskPanelHtml(deskNum, desk);
    }

    function applyLiveData(data) {
        updateSummary(data.summary);
        syncDeskButtons(data.summary);
        if (data.desks) {
            [1, 2].forEach(function (d) {
                if (data.desks[d]) renderDeskPanel(d, data.desks[d]);
            });
        }
        if (data.alert && window.ChmGrnAlerts && !window.ChmGrnAlerts.isBuzzSuppressed()) {
            window.ChmGrnAlerts.handleAlert(data.alert);
        }
    }

    function refreshLive() {
        fetch(liveUrl, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (res) { return res.json(); })
            .then(applyLiveData)
            .catch(function () {});
    }

    function callToDesk(desk, grnId, announcement, alreadySpoken) {
        const btn = document.querySelector('.batch-call-desk[data-desk="' + desk + '"]');
        if (btn && btn.disabled) {
            return Promise.reject(new Error('Desk ' + desk + ' is busy. Mark Done before calling another farmer.'));
        }

        const callText = announcement || (btn && btn.getAttribute('data-announcement')) || '';
        if (!alreadySpoken && callText) {
            speak(callText);
        }

        return postJson(callUrl, { desk: desk, grn_id: grnId }).then(function (data) {
            applyLiveData(data);
            const panel = document.querySelector('[data-desk-panel="' + desk + '"]');
            if (panel) {
                panel.classList.add('batch-desk-flash');
                setTimeout(function () { panel.classList.remove('batch-desk-flash'); }, 1200);
            }
            const row = document.querySelector('tr[data-grn-id="' + grnId + '"]');
            if (row) row.remove();
            if (table) table.draw(false);
        });
    }

    document.addEventListener('click', function (e) {
        const callBtn = e.target.closest('.batch-call-desk');
        if (callBtn) {
            e.preventDefault();
            if (!canManageDesk) {
                notify('info', 'Permission required', 'Only staff who can process payment vouchers may assign farmers to desks.');
                return;
            }
            if (callBtn.disabled) {
                notify('info', 'Desk busy', 'Mark Done on this desk before calling another farmer.');
                return;
            }
            const announcement = callBtn.getAttribute('data-announcement') || '';
            if (announcement) {
                speak(announcement);
            }
            callToDesk(
                parseInt(callBtn.dataset.desk, 10),
                parseInt(callBtn.getAttribute('data-grn-id'), 10),
                announcement,
                true
            ).catch(function (err) {
                notify('error', 'Could not call', err.message);
            });
            return;
        }

        const speakBtn = e.target.closest('.batch-desk-speak');
        if (speakBtn) {
            e.preventDefault();
            speak(speakBtn.getAttribute('data-announcement') || speakBtn.dataset.announcement || '');
            return;
        }

        const clearBtn = e.target.closest('.batch-desk-clear');
        if (clearBtn) {
            if (!canManageDesk) {
                notify('info', 'Permission required', 'Only staff who can process payment vouchers may clear desks.');
                return;
            }
            postJson(clearUrl, { desk: parseInt(clearBtn.dataset.desk, 10) })
                .then(function (data) {
                    applyLiveData(data);
                    location.reload();
                })
                .catch(function (err) {
                    notify('error', 'Error', err.message);
                });
        }

        const deleteBtn = e.target.closest('.btn-delete-grn');
        if (deleteBtn) {
            e.preventDefault();
            const grnId = deleteBtn.dataset.grnId;
            var confirmDelete = window.ChmNotify && window.ChmNotify.confirm
                ? window.ChmNotify.confirm({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    confirmButtonText: 'Yes, delete it',
                })
                : (window.Swal ? Swal.fire({
>>>>>>> origin/main
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
<<<<<<< HEAD
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch("{{ route('delete.grn') }}", {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                            },
                            body: JSON.stringify({ grn_id: grnId })
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.status === 'success') {
                                Swal.fire('Deleted!', data.message, 'success').then(() => location.reload());
                            } else {
                                Swal.fire('Error', data.message, 'error');
                            }
                        })
                        .catch(() => Swal.fire('Error', 'Failed to delete GRN.', 'error'));
                    }
                });
            });
        });

        // Initialize DataTable with search enabled, but no length dropdown
        $('#batchReportsTable').DataTable({
            paging: false,
            searching: true,
            info: true,
            lengthChange: false
        });
    });
</script>

{{-- Include DataTables JS (if not globally available) --}}
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
@endsection
=======
                    confirmButtonText: 'Yes, delete it',
                }) : Promise.resolve({ isConfirmed: window.confirm('Delete this GRN?') }));

            confirmDelete.then(function (result) {
                if (!result || !result.isConfirmed) return;
                fetch(@json(route('delete.grn')), {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ grn_id: grnId })
                })
                .then(function (res) { return res.json(); })
                .then(function (data) {
                    if (data.status === 'success') {
                        notify('success', 'Deleted', data.message).then(function () { location.reload(); });
                    } else {
                        notify('error', 'Error', data.message);
                    }
                })
                .catch(function () { notify('error', 'Error', 'Failed to delete GRN.'); });
            });
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        if (window.jQuery && jQuery.fn.DataTable && document.getElementById('batchReportsTable')) {
            table = jQuery('#batchReportsTable').DataTable({
                paging: false,
                searching: true,
                info: true,
                lengthChange: false,
                order: [[0, 'asc']],
            });
        }
        syncDeskButtons(@json($summary));
        refreshLive();
        setInterval(refreshLive, 8000);
    });
})();
</script>
@endpush
>>>>>>> origin/main