@extends('layouts.master')

@php
    $fromProses   = $fromProses ?? false;
    $pfx          = $fromProses ? 'proses-pengiriman' : 'permintaan-pengeluaran';
    $sjPdfUrl     = route("$pfx.surat-jalan-pdf",     $ppb->id);
    $sjLotPdfUrl  = route("$pfx.surat-jalan-lot-pdf", $ppb->id);
    $ttLotPdfUrl  = route("$pfx.tanda-terima-lot-pdf",$ppb->id);
    $labelUrl     = route("$pfx.cetak-label",         $ppb->id);
    $aktivitasUrl = route("$pfx.cetak-aktivitas",     $ppb->id);
@endphp
@section('title', ($fromProses ? 'Proses Pengiriman' : 'Permintaan Barang') . ' — ' . $ppb->nomor)

@section('styles')
<style>
    /* Histori Timeline */
    .timeline-hist { position:relative; padding-left:26px; }
    .timeline-hist::before { content:''; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:#e9ecef; }
    .th-item { position:relative; margin-bottom:16px; }
    .th-item:last-child { margin-bottom:0; }
    .th-dot { position:absolute; left:-21px; top:3px; width:13px; height:13px; border-radius:50%; border:2px solid #fff; }
    .th-dot.th-dibuat      { background:#6c757d; box-shadow:0 0 0 2px #6c757d44; }
    .th-dot.th-diajukan    { background:#3b82f6; box-shadow:0 0 0 2px #3b82f644; }
    .th-dot.th-diproses    { background:#d97706; box-shadow:0 0 0 2px #d9770644; }
    .th-dot.th-selesai     { background:#16a34a; box-shadow:0 0 0 2px #16a34a44; }
    .th-dot.th-dikembalikan{ background:#dc2626; box-shadow:0 0 0 2px #dc262644; }
    .th-dot.th-ditolak     { background:#9d174d; box-shadow:0 0 0 2px #9d174d44; }
    .th-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
    .th-label.th-dibuat      { color:#6c757d; }
    .th-label.th-diajukan    { color:#3b82f6; }
    .th-label.th-diproses    { color:#d97706; }
    .th-label.th-selesai     { color:#16a34a; }
    .th-label.th-dikembalikan{ color:#dc2626; }
    .th-label.th-ditolak     { color:#9d174d; }
    .th-meta { font-size:.78rem; color:#6c757d; }
    .th-catatan { font-size:.8rem; color:#444; background:#f8f9fa; border-left:3px solid #dee2e6; padding:4px 8px; margin-top:4px; border-radius:0 4px 4px 0; }
    .th-catatan-dikembalikan { border-color:#dc2626; background:#fff5f5; }
    .th-catatan-ditolak      { border-color:#9d174d; background:#fdf2f8; }

    .badge-draft         { background:#e5e7eb; color:#374151; }
    .badge-diajukan      { background:#dbeafe; color:#1d4ed8; }
    .badge-diproses      { background:#fef9c3; color:#854d0e; }
    .badge-selesai       { background:#d1fae5; color:#065f46; }
    .badge-dikembalikan  { background:#fee2e2; color:#991b1b; }
    .badge-ditolak       { background:#fce7f3; color:#9d174d; }
    .tl-dot.rejected     { border-color:#dc2626; background:#dc2626; color:#fff; }
    .timeline-wrap { display:flex; gap:0; margin-bottom:1.2rem; }
    .tl-step { flex:1; text-align:center; position:relative; }
    .tl-step:not(:last-child)::after { content:''; position:absolute; top:14px; right:0; width:100%; height:2px; background:#e5e7eb; z-index:0; }
    .tl-dot { width:28px; height:28px; border-radius:50%; border:2px solid #e5e7eb; background:#fff; display:inline-flex; align-items:center; justify-content:center; position:relative; z-index:1; font-size:.7rem; }
    .tl-dot.active { border-color:#7c3aed; background:#7c3aed; color:#fff; }
    .tl-dot.done   { border-color:#10b981; background:#10b981; color:#fff; }
    .tl-label { font-size:.75rem; color:#6b7280; margin-top:4px; }
    .tl-date  { font-size:.7rem; color:#9ca3af; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">{{ $ppb->nomor }}</p>
            @if($fromProses)
            <span class="fs-13 text-muted">Mutasi Barang &rarr; <a href="{{ url('proses-pengiriman') }}" class="text-muted">Proses Pengiriman</a> &rarr; Detail</span>
            @else
            <span class="fs-13 text-muted">Mutasi Barang &rarr; <a href="{{ url('permintaan-pengeluaran') }}" class="text-muted">Permintaan Barang</a> &rarr; Detail</span>
            @endif
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0">
            @if($ppb->isDraft() || $ppb->isDikembalikan())
            @if(!$fromProses)
            @can('pengiriman_barang.edit')
            <a href="{{ route('permintaan-pengeluaran.edit', $ppb->id) }}" class="btn btn-warning btn-sm">
                <i class="bx bx-edit me-1"></i> Edit
            </a>
            <form method="POST" action="{{ route('permintaan-pengeluaran.ajukan', $ppb->id) }}" id="formAjukan">
                @csrf
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="bx bx-send me-1"></i> Ajukan
                </button>
            </form>
            <form method="POST" action="{{ route('permintaan-pengeluaran.destroy', $ppb->id) }}" id="formHapus">
                @csrf @method('DELETE')
                <button type="button" onclick="konfirmasiHapus()" class="btn btn-danger btn-sm">
                    <i class="bx bx-trash me-1"></i> Hapus
                </button>
            </form>
            @endcan
            @endif
            @elseif($ppb->isDiajukan())
            @can('proses_pengiriman.process')
            <a href="{{ $fromProses ? route('proses-pengiriman.pemenuhan', $ppb->id) : route('permintaan-pengeluaran.pemenuhan', $ppb->id) }}" class="btn btn-warning btn-sm">
                <i class="bx bx-loader-alt me-1"></i> Proses Permintaan
            </a>
            <button type="button" onclick="modalKembalikan()" class="btn btn-outline-danger btn-sm">
                <i class="bx bx-undo me-1"></i> Kembalikan
            </button>
            <button type="button" onclick="modalTolak()" class="btn btn-danger btn-sm">
                <i class="bx bx-x-circle me-1"></i> Tolak
            </button>
            @endcan
            @elseif($ppb->isDiproses())
            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="bx bx-printer me-1"></i> Cetak
                </button>
                <ul class="dropdown-menu">
                    @if($ppb->isPerLot())
                    <li><a class="dropdown-item" href="#" onclick="previewPdfModal('{{ $sjLotPdfUrl }}','Surat Jalan per SN — {{ $ppb->nomor }}');return false;"><i class="bx bx-file-blank me-1"></i> Surat Jalan per SN</a></li>
                    <li><a class="dropdown-item" href="#" onclick="previewPdfModal('{{ $ttLotPdfUrl }}','Tanda Terima — {{ $ppb->nomor }}');return false;"><i class="bx bx-file-blank me-1"></i> Tanda Terima</a></li>
                    @else
                    <li><a class="dropdown-item" href="#" onclick="previewSuratJalan(1);return false;"><i class="bx bx-file-blank me-1"></i> Surat Jalan (dengan harga)</a></li>
                    <li><a class="dropdown-item" href="#" onclick="previewSuratJalan(0);return false;"><i class="bx bx-file-blank me-1"></i> Surat Jalan (tanpa harga)</a></li>
                    @endif
                    <li><a class="dropdown-item" href="{{ $labelUrl }}" target="_blank"><i class="bx bx-purchase-tag me-1"></i> Label</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" onclick="bukaModalAktivitas();return false;"><i class="bx bx-history me-1"></i> Riwayat Aktivitas</a></li>
                </ul>
            </div>
            @can('proses_pengiriman.process')
            <a href="{{ $fromProses ? route('proses-pengiriman.verifikasi', $ppb->id) : route('permintaan-pengeluaran.verifikasi', $ppb->id) }}" class="btn btn-warning btn-sm">
                <i class="bx bx-scan me-1"></i> Verifikasi Barang
            </a>
            <button type="button" onclick="modalRollback()" class="btn btn-outline-warning btn-sm">
                <i class="bx bx-revision me-1"></i> Ubah Pemenuhan
            </button>
            @endcan
            @elseif($ppb->isSelesai() || $ppb->isSelesaiKurangLengkap())
            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="bx bx-printer me-1"></i> Cetak
                </button>
                <ul class="dropdown-menu">
                    @if($ppb->isPerLot())
                    <li><a class="dropdown-item" href="#" onclick="previewPdfModal('{{ $sjLotPdfUrl }}','Surat Jalan per SN — {{ $ppb->nomor }}');return false;"><i class="bx bx-file-blank me-1"></i> Surat Jalan per SN</a></li>
                    <li><a class="dropdown-item" href="#" onclick="previewPdfModal('{{ $ttLotPdfUrl }}','Tanda Terima — {{ $ppb->nomor }}');return false;"><i class="bx bx-file-blank me-1"></i> Tanda Terima</a></li>
                    @else
                    <li><a class="dropdown-item" href="#" onclick="previewSuratJalan(1);return false;"><i class="bx bx-file-blank me-1"></i> Surat Jalan (dengan harga)</a></li>
                    <li><a class="dropdown-item" href="#" onclick="previewSuratJalan(0);return false;"><i class="bx bx-file-blank me-1"></i> Surat Jalan (tanpa harga)</a></li>
                    @endif
                    <li><a class="dropdown-item" href="{{ $labelUrl }}" target="_blank"><i class="bx bx-purchase-tag me-1"></i> Label</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" onclick="bukaModalAktivitas();return false;"><i class="bx bx-history me-1"></i> Riwayat Aktivitas</a></li>
                </ul>
            </div>
            @endif
            @if($fromProses)
            <a href="{{ url('proses-pengiriman') }}" class="btn btn-secondary btn-sm">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
            @else
            <a href="{{ url('permintaan-pengeluaran') }}" class="btn btn-secondary btn-sm">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
            @endif
        </div>
    </div>

    {{-- Alert dikembalikan/ditolak --}}
    @if($ppb->isDikembalikan() || $ppb->isDitolak())
    <div class="alert {{ $ppb->isDitolak() ? 'alert-danger' : 'alert-warning' }} d-flex gap-2 align-items-start mb-3">
        <i class="bx {{ $ppb->isDitolak() ? 'bx-x-circle' : 'bx-undo' }} fs-18 mt-1"></i>
        <div>
            <strong>{{ $ppb->isDitolak() ? 'Permintaan Ditolak' : 'Permintaan Dikembalikan' }}</strong>
            @if($ppb->dikembalikan_at)
            <span class="text-muted ms-2" style="font-size:.82rem">{{ $ppb->dikembalikan_at->format('d-m-Y H:i') }} oleh {{ $ppb->dikembalikanOleh?->nama }}</span>
            @endif
            <div class="mt-1">{{ $ppb->catatan_pengembalian }}</div>
        </div>
    </div>
    @else
    {{-- Timeline Status --}}
    @php
        $steps = [
            ['key'=>'draft',     'label'=>'Draft',      'icon'=>'bx-file-blank', 'at'=>null],
            ['key'=>'diajukan',  'label'=>'Diajukan',   'icon'=>'bx-send',       'at'=>$ppb->diajukan_at],
            ['key'=>'diproses',  'label'=>'Diproses',   'icon'=>'bx-loader-alt', 'at'=>$ppb->diproses_at],
            ['key'=>'verifikasi','label'=>'Verifikasi', 'icon'=>'bx-scan',       'at'=>$ppb->selesai_at],
            ['key'=>'selesai',   'label'=>'Selesai',    'icon'=>'bx-check',      'at'=>$ppb->selesai_at],
        ];
        $statusOrder   = ['draft'=>0,'diajukan'=>1,'diproses'=>2,'verifikasi'=>3,'selesai'=>4];
        $statusToOrder = ['draft'=>0,'diajukan'=>1,'diproses'=>2,'selesai'=>4];
        $curOrder      = $statusToOrder[$ppb->status] ?? 0;
    @endphp
    <div class="card custom-card mb-3">
        <div class="card-body py-3">
            <div class="timeline-wrap">
                @foreach($steps as $s)
                @php
                    $sOrder = $statusOrder[$s['key']];
                    $cls    = $sOrder < $curOrder ? 'done' : ($sOrder === $curOrder ? 'active' : '');
                @endphp
                <div class="tl-step">
                    <div class="tl-dot {{ $cls }}"><i class="bx {{ $s['icon'] }}"></i></div>
                    <div class="tl-label">{{ $s['label'] }}</div>
                    @if($s['at'])
                    <div class="tl-date">{{ $s['at']->format('d-m-Y H:i') }}</div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <div class="row g-3">
        {{-- Info Header --}}
        <div class="col-md-6">
            <div class="card custom-card h-100">
                <div class="card-header"><div class="card-title mb-0">Informasi Permintaan</div></div>
                <div class="card-body">
                    <table class="table table-sm table-borderless mb-0">
                        <tr><td class="text-muted" style="width:140px">Nomor</td><td>: <strong>{{ $ppb->nomor }}</strong></td></tr>
                        <tr><td class="text-muted">Tanggal</td><td>: {{ $ppb->tanggal->translatedFormat('d F Y') }}</td></tr>
                        <tr><td class="text-muted">Faskes / Tujuan</td><td>: {{ $ppb->nama_faskes ?? '<em class="text-muted">—</em>' }}</td></tr>
                        <tr><td class="text-muted">Dibuat Oleh</td><td>: {{ $ppb->dibuatOleh?->nama ?? '—' }}</td></tr>
                        @if($ppb->diprosesOleh)
                        <tr><td class="text-muted">Diproses Oleh</td><td>: {{ $ppb->diprosesOleh->nama }}</td></tr>
                        @endif
                        <tr><td class="text-muted">Status</td>
                            <td>: <span class="badge badge-{{ $ppb->status }}">{{ ucfirst($ppb->status) }}</span></td></tr>
                        @if($ppb->catatan)
                        <tr><td class="text-muted">Catatan</td><td>: {{ $ppb->catatan }}</td></tr>
                        @endif
                    </table>
                </div>
            </div>
        </div>

        {{-- Histori Aktivitas --}}
        <div class="col-md-6">
            <div class="card custom-card h-100">
                <div class="card-header"><div class="card-title mb-0"><i class="bx bx-time-five me-2 text-primary"></i>Histori Aktivitas</div></div>
                @php
                $statusIcon = [
                    'diajukan'    => ['icon'=>'bx-send',       'cls'=>'th-diajukan'],
                    'diproses'    => ['icon'=>'bx-loader-alt', 'cls'=>'th-diproses'],
                    'selesai'     => ['icon'=>'bx-check-circle','cls'=>'th-selesai'],
                    'dikembalikan'=> ['icon'=>'bx-undo',       'cls'=>'th-dikembalikan'],
                    'ditolak'     => ['icon'=>'bx-x-circle',   'cls'=>'th-ditolak'],
                ];
                $statusLabel = [
                    'diajukan'    => 'Diajukan',
                    'diproses'    => 'Diproses',
                    'selesai'     => 'Selesai',
                    'dikembalikan'=> 'Dikembalikan',
                    'ditolak'     => 'Ditolak',
                ];
                @endphp
                <div class="card-body">
                    <div class="timeline-hist">
                        {{-- Dibuat (dari created_at, selalu ada) --}}
                        <div class="th-item">
                            <div class="th-dot th-dibuat"></div>
                            <div class="th-label th-dibuat"><i class="bx bx-file-blank me-1"></i>Dibuat</div>
                            <div class="th-meta">{{ $ppb->dibuatOleh?->nama ?? '—' }} &middot; {{ $ppb->created_at->translatedFormat('d M Y, H:i') }}</div>
                        </div>
                        {{-- Log dinamis --}}
                        @foreach($ppb->logs as $log)
                        @php $s = $statusIcon[$log->status] ?? ['icon'=>'bx-circle','cls'=>'th-dibuat']; @endphp
                        <div class="th-item">
                            <div class="th-dot {{ $s['cls'] }}"></div>
                            <div class="th-label {{ $s['cls'] }}">
                                <i class="bx {{ $s['icon'] }} me-1"></i>{{ $statusLabel[$log->status] ?? ucfirst($log->status) }}
                            </div>
                            <div class="th-meta">{{ $log->olehUser?->nama ?? '—' }} &middot; {{ $log->created_at->translatedFormat('d M Y, H:i') }}</div>
                            @if($log->catatan)
                            @php $cCls = $log->status === 'ditolak' ? 'th-catatan-ditolak' : ($log->status === 'dikembalikan' ? 'th-catatan-dikembalikan' : ''); @endphp
                            <div class="th-catatan {{ $cCls }}">{{ $log->catatan }}</div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabel Items --}}
        <div class="col-12">
            <div class="card custom-card" id="cardDaftarBarang">
                <div class="card-header"><div class="card-title mb-0">Daftar Barang</div></div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0" style="font-size:.875rem">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:40px">No</th>
                                    <th>Kode / Nama Barang</th>
                                    <th style="width:120px">Merek</th>
                                    <th style="width:100px">Ukuran</th>
                                    <th class="text-center" style="width:80px">Qty Diminta</th>
                                    @if($ppb->isSelesai() || $ppb->isSelesaiKurangLengkap() || $ppb->isDiproses())
                                    <th class="text-center" style="width:90px">Qty Dipenuhi</th>
                                    @endif
                                    <th class="text-center" style="width:80px">Satuan</th>
                                    <th>Keterangan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($ppb->items as $no => $item)
                                <tr>
                                    <td class="text-center">{{ $no + 1 }}</td>
                                    <td>
                                        @php
                                            $jenisNie = $item->barang?->jenis_nie ?? $item->barang?->merekBarang?->jenis_nie;
                                            $noNie    = $item->barang?->no_nie    ?? $item->barang?->merekBarang?->no_nie;
                                        @endphp
                                        <strong>{{ $item->nama_barang }}</strong>
                                        @if($item->kode_barang)
                                        <div class="text-muted" style="font-size:.78rem">{{ $item->kode_barang }}</div>
                                        @endif
                                        @if($item->barang->manufaktur)
                                        <div class="text-muted" style="font-size:.78rem">{{ $item->barang->manufaktur }}</div>
                                        @endif
                                        @if($jenisNie || $noNie)
                                        <div class="text-muted fst-italic" style="font-size:.78rem">{{ $jenisNie }}{{ $jenisNie && $noNie ? ' · ' : '' }}{{ $noNie }}</div>
                                        @endif
                                    </td>
                                    <td class="text-muted">{{ $item->barang->merekBarang->nama ?? '—' }}</td>
                                    <td class="text-muted">{{ $item->barang->ukuran ?? '—' }}</td>
                                    <td class="text-center">{{ number_format($item->qty) }}</td>
                                    @if($ppb->isSelesai() || $ppb->isSelesaiKurangLengkap() || $ppb->isDiproses())
                                    <td class="text-center">
                                        @if($item->qty_dipenuhi !== null)
                                            @php
                                                $hasLots   = $item->lots->isNotEmpty();
                                                $qtyShow   = $hasLots ? $item->lots->sum('qty') : $item->qty_dipenuhi;
                                                $lotJson   = $hasLots ? htmlspecialchars(json_encode($item->lots->map(fn($l) => [
                                                    'no_lot'    => $l->stok->no_lot ?? '—',
                                                    'no_serial' => $l->stok->no_serial ?? '—',
                                                    'ed'        => $l->stok->tanggal_kedaluwarsa ? $l->stok->tanggal_kedaluwarsa->format('d-m-Y') : '—',
                                                    'qty'       => $l->qty,
                                                ])->values()->all()), ENT_QUOTES, 'UTF-8') : '';
                                                $style = $qtyShow < $item->qty
                                                    ? 'background:#fef9c3;color:#854d0e'
                                                    : ($qtyShow == $item->qty
                                                        ? 'background:#d1fae5;color:#065f46'
                                                        : 'background:#dbeafe;color:#1d4ed8');
                                            @endphp
                                            @if($hasLots)
                                                <span class="badge" style="{{ $style }}; cursor:pointer; font-size:.82rem"
                                                      onclick="lihatLot(this)"
                                                      data-nama="{{ htmlspecialchars($item->nama_barang, ENT_QUOTES) }}"
                                                      data-lots="{!! $lotJson !!}">
                                                    {{ number_format($qtyShow) }} <i class="bx bx-info-circle"></i>
                                                </span>
                                            @else
                                                <span class="badge" style="{{ $style }}; font-size:.82rem">{{ number_format($qtyShow) }}</span>
                                            @endif
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    @endif
                                    <td class="text-center">{{ $item->satuan }}</td>
                                    <td class="text-muted" style="font-size:.85rem">{{ $item->catatan ?? '' }}</td>
                                </tr>
                                @empty
                                <tr><td colspan="{{ ($ppb->isSelesai() || $ppb->isSelesaiKurangLengkap() || $ppb->isDiproses()) ? 8 : 7 }}" class="text-center text-muted py-3">Tidak ada item.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Foto Pengiriman --}}
        @if($fromProses)
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0"><i class="bx bx-images me-2 text-primary"></i>Foto Pengiriman</div>
                    <span class="badge bg-primary">{{ $ppb->fotos->count() }} foto</span>
                </div>
                <div class="card-body">
                    @if($ppb->fotos->isEmpty())
                    <div class="text-muted small"><i class="bx bx-image-alt me-1"></i>Belum ada foto yang diupload.</div>
                    @else
                    <div class="row g-2">
                        @foreach($ppb->fotos as $foto)
                        <div class="col-6 col-md-3 col-lg-2">
                            <a href="{{ $foto->url }}" target="_blank">
                                <img src="{{ $foto->url }}" alt="Foto {{ $loop->iteration }}"
                                     class="img-fluid rounded border"
                                     style="width:100%;height:120px;object-fit:cover;cursor:pointer">
                            </a>
                            @if($foto->keterangan)
                            <div class="text-muted small mt-1 text-truncate" title="{{ $foto->keterangan }}">{{ $foto->keterangan }}</div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endif

        {{-- Daftar Nomor SJ (hanya mode per lot) --}}
        @if($ppb->isPerLot() && $ppb->suratJalanLots->isNotEmpty())
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0"><i class="bx bx-receipt me-2 text-success"></i>Nomor Surat Jalan per Unit</div>
                    <span class="badge bg-success">{{ $ppb->suratJalanLots->count() }} dokumen</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0" style="font-size:0.85rem">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:40px">#</th>
                                    <th>Nomor SJ</th>
                                    <th>Nama Barang</th>
                                    <th>No. LOT</th>
                                    <th>No. Serial</th>
                                    <th>Tgl. ED</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ppb->suratJalanLots as $i => $sj)
                                <tr>
                                    <td class="text-center text-muted">{{ $i + 1 }}</td>
                                    <td><code>{{ $sj->nomor_sj }}</code></td>
                                    <td>{{ $sj->item?->nama_barang ?? '—' }}</td>
                                    <td>{{ $sj->stok?->no_lot ?? '—' }}</td>
                                    <td>{{ $sj->stok?->no_serial ?? '—' }}</td>
                                    <td>{{ $sj->stok?->tanggal_kedaluwarsa?->format('d/m/Y') ?? '—' }}</td>
                                    <td>
                                        @if($sj->status === 'terkirim')
                                        <span class="badge bg-primary">Terkirim</span>
                                        @elseif($sj->status === 'dipakai')
                                        <span class="badge bg-success">Dipakai</span>
                                        @elseif($sj->status === 'terjual')
                                        <span class="badge bg-info">Terjual</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif

    </div>
</div>

{{-- Modal Detail LOT --}}
<div class="modal fade" id="modalLot" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0" id="modalLotTitle">Detail LOT</h6>
                <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0" style="font-size:.85rem">
                        <thead class="table-light">
                            <tr>
                                <th class="text-center" style="width:40px">No</th>
                                <th>No. LOT</th>
                                <th>No. Serial</th>
                                <th class="text-center">Tgl. ED</th>
                                <th class="text-center" style="width:60px">Qty</th>
                            </tr>
                        </thead>
                        <tbody id="modalLotBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Kembalikan --}}
<div class="modal fade" id="modalKembalikan" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-2 border-warning">
                <h6 class="modal-title mb-0 text-warning"><i class="bx bx-undo me-1"></i> Kembalikan Permintaan</h6>
                <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-2" style="font-size:.875rem">Permintaan akan dikembalikan ke pembuat dengan status <strong>Dikembalikan</strong> dan tidak muncul di daftar proses.</p>
                <label class="form-label fw-semibold small">Catatan Pengembalian <span class="text-danger">*</span></label>
                <textarea id="catatanKembalikan" class="form-control form-control-sm" rows="3" placeholder="Alasan pengembalian..."></textarea>
                <div id="errKembalikan" class="text-danger small mt-1 d-none"></div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-warning btn-sm" onclick="submitKembalikan()">
                    <i class="bx bx-undo me-1"></i> Kembalikan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Rollback Pemenuhan --}}
<div class="modal fade" id="modalRollback" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-2" style="border-color:#f59e0b">
                <h6 class="modal-title mb-0" style="color:#d97706"><i class="bx bx-revision me-1"></i> Ubah Pemenuhan</h6>
                <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning py-2 mb-3" style="font-size:.85rem">
                    <i class="bx bx-info-circle me-1"></i>
                    Status akan dikembalikan ke <strong>Diajukan</strong>. Alokasi lot tetap dipertahankan dan dapat diubah di halaman pemenuhan.
                </div>
                <label class="form-label fw-semibold small">Alasan Perubahan <span class="text-danger">*</span></label>
                <textarea id="alasanRollback" class="form-control form-control-sm" rows="3" placeholder="Contoh: Lot salah pilih, perlu disesuaikan dengan permintaan..."></textarea>
                <div id="errRollback" class="text-danger small mt-1 d-none"></div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm" style="background:#d97706;color:#fff" onclick="submitRollback()">
                    <i class="bx bx-revision me-1"></i> Reset & Ubah Pemenuhan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Tolak --}}
<div class="modal fade" id="modalTolak" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header py-2 border-danger">
                <h6 class="modal-title mb-0 text-danger"><i class="bx bx-x-circle me-1"></i> Tolak Permintaan</h6>
                <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-2" style="font-size:.875rem">Permintaan akan ditolak dengan status <strong>Ditolak</strong> dan tetap tercatat di daftar proses pengiriman.</p>
                <label class="form-label fw-semibold small">Alasan Penolakan <span class="text-danger">*</span></label>
                <textarea id="catatanTolak" class="form-control form-control-sm" rows="3" placeholder="Alasan penolakan..."></textarea>
                <div id="errTolak" class="text-danger small mt-1 d-none"></div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger btn-sm" onclick="submitTolak()">
                    <i class="bx bx-x-circle me-1"></i> Tolak Permintaan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Riwayat Aktivitas --}}
<div class="modal fade" id="modalAktivitas" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:860px">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-semibold mb-0">
                    <i class="bx bx-history me-1 text-primary"></i> Riwayat Aktivitas — {{ $ppb->nomor }}
                </h6>
                <div class="d-flex gap-2 ms-auto">
                    <a href="{{ $aktivitasUrl }}" target="_blank"
                       class="btn btn-outline-primary btn-sm px-2 py-1">
                        <i class="bx bx-link-external me-1"></i> Buka Tab Baru
                    </a>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
            </div>
            <div class="modal-body p-0" style="height:80vh">
                <iframe id="aktivitasFrame" src="" width="100%" height="100%"
                        style="border:none;display:block" loading="lazy"></iframe>
            </div>
        </div>
    </div>
</div>

{{-- ══ Modal Preview Surat Jalan PDF ══ --}}
<div class="modal fade" id="modalSuratJalan" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width:88vw">
        <div class="modal-content" style="height:90vh;display:flex;flex-direction:column">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0" id="modalSuratJalanTitle">
                    <i class="bx bx-file-blank me-2"></i>Surat Jalan — {{ $ppb->nomor }}
                </h6>
                <div class="d-flex gap-2 ms-auto me-2">
                    <a id="btnUnduhSuratJalan" href="#" target="_blank"
                       class="btn btn-success btn-sm">
                        <i class="bx bx-download me-1"></i> Download PDF
                    </a>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="flex:1;overflow:hidden">
                <iframe id="iframeSuratJalan" src=""
                        style="width:100%;height:100%;border:none"></iframe>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
const AKTIVITAS_URL = "{{ $aktivitasUrl }}";

function bukaModalAktivitas() {
    const frame = document.getElementById('aktivitasFrame');
    if (!frame.src || frame.src === window.location.href) frame.src = AKTIVITAS_URL;
    $('#modalAktivitas').modal('show');
}
$('#modalAktivitas').on('hidden.bs.modal', function () {
    document.getElementById('aktivitasFrame').src = '';
});

function lihatLot(el) {
    const namaBarang = el.dataset.nama;
    const lots = JSON.parse(el.dataset.lots);
    document.getElementById('modalLotTitle').textContent = 'Detail LOT — ' + namaBarang;
    const tbody = document.getElementById('modalLotBody');
    tbody.innerHTML = lots.map((l, i) => `
        <tr>
            <td class="text-center">${i + 1}</td>
            <td>${l.no_lot}</td>
            <td>${l.no_serial}</td>
            <td class="text-center">${l.ed}</td>
            <td class="text-center">${l.qty}</td>
        </tr>
    `).join('');
    new bootstrap.Modal(document.getElementById('modalLot')).show();
}

function konfirmasiHapus() {
    Swal.fire({
        title: 'Hapus permintaan ini?',
        text: 'Data yang dihapus tidak dapat dikembalikan.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc2626',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
    }).then(res => { if (res.isConfirmed) document.getElementById('formHapus').submit(); });
}

const BASE_URL   = '{{ url('') }}';
const PPB_ID     = {{ $ppb->id }};
const PPB_PREFIX = '{{ $fromProses ? 'proses-pengiriman' : 'permintaan-pengeluaran' }}';

function modalKembalikan() {
    document.getElementById('catatanKembalikan').value = '';
    document.getElementById('errKembalikan').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('modalKembalikan')).show();
}

function modalTolak() {
    document.getElementById('catatanTolak').value = '';
    document.getElementById('errTolak').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('modalTolak')).show();
}

function submitKembalikan() {
    const catatan = document.getElementById('catatanKembalikan').value.trim();
    const err     = document.getElementById('errKembalikan');
    if (!catatan) { err.textContent = 'Catatan wajib diisi.'; err.classList.remove('d-none'); return; }
    err.classList.add('d-none');
    fetch(`${BASE_URL}/${PPB_PREFIX}/${PPB_ID}/kembalikan`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ catatan_pengembalian: catatan }),
    }).then(r => r.json()).then(d => {
        if (d.success) { Swal.fire({ icon:'success', title:'Berhasil', text: d.message, timer:1800, showConfirmButton:false }).then(() => location.reload()); }
        else Swal.fire({ icon:'error', title:'Gagal', text: d.message });
    });
}

function modalRollback() {
    document.getElementById('alasanRollback').value = '';
    document.getElementById('errRollback').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('modalRollback')).show();
}

function submitRollback() {
    const alasan = document.getElementById('alasanRollback').value.trim();
    const err    = document.getElementById('errRollback');
    if (!alasan) { err.textContent = 'Alasan wajib diisi.'; err.classList.remove('d-none'); return; }
    err.classList.add('d-none');
    fetch(`${BASE_URL}/${PPB_PREFIX}/${PPB_ID}/rollback-pemenuhan`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ alasan }),
    }).then(r => r.json()).then(d => {
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalRollback')).hide();
            Swal.fire({ icon:'success', title:'Berhasil', text: d.message, timer:1800, showConfirmButton:false })
                .then(() => location.href = `${BASE_URL}/${PPB_PREFIX}/${PPB_ID}/pemenuhan`);
        } else {
            Swal.fire({ icon:'error', title:'Gagal', text: d.message ?? 'Terjadi kesalahan.' });
        }
    }).catch(() => Swal.fire({ icon:'error', title:'Gagal', text: 'Terjadi kesalahan jaringan.' }));
}

/* ── PDF Preview Modal (generik) ────────────────────── */
function previewPdfModal(url, title) {
    document.getElementById('iframeSuratJalan').src = url;
    document.getElementById('btnUnduhSuratJalan').href = url;
    document.getElementById('modalSuratJalanTitle').textContent = title;
    new bootstrap.Modal(document.getElementById('modalSuratJalan')).show();
}

function previewSuratJalan(harga) {
    const base = '{{ $sjPdfUrl }}';
    const label = harga ? 'Surat Jalan — {{ $ppb->nomor }}' : 'Surat Jalan — {{ $ppb->nomor }} (tanpa harga)';
    previewPdfModal(base + '?harga=' + harga, label);
}

document.getElementById('modalSuratJalan').addEventListener('hidden.bs.modal', function () {
    document.getElementById('iframeSuratJalan').src = '';
});

function submitTolak() {
    const catatan = document.getElementById('catatanTolak').value.trim();
    const err     = document.getElementById('errTolak');
    if (!catatan) { err.textContent = 'Alasan wajib diisi.'; err.classList.remove('d-none'); return; }
    err.classList.add('d-none');
    fetch(`${BASE_URL}/${PPB_PREFIX}/${PPB_ID}/tolak`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ catatan_pengembalian: catatan }),
    }).then(r => r.json()).then(d => {
        if (d.success) { Swal.fire({ icon:'success', title:'Berhasil', text: d.message, timer:1800, showConfirmButton:false }).then(() => location.reload()); }
        else Swal.fire({ icon:'error', title:'Gagal', text: d.message });
    });
}
</script>
@endsection