@extends('layouts.master')

@section('title', 'Riwayat Stok — ' . ($stok->barang?->nama ?? ''))

@section('styles')
<style>
/* ── Layout ── */
.rs-wrap { max-width: 860px; position: relative; }

/* ── Info header barang ── */
.rs-barang-card {
    background: var(--custom-white);
    border: 1.5px solid var(--default-border);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 28px;
}
.rs-barang-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.rs-barang-meta  { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .82rem; color: var(--text-muted); }
.rs-serial-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff8e6; border: 1.5px solid #f0a500; color: #b47800;
    border-radius: 6px; padding: 4px 12px; font-family: monospace;
    font-size: .88em; font-weight: 700; margin-top: 10px;
}
[data-bs-theme="dark"] .rs-serial-badge { background: #2a1e00; border-color: #e0a020; color: #e0a020; }

/* ── Gudang block ── */
.rs-gudang-block {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--default-border);
    margin-bottom: 16px;
}
.rs-gudang-block.pusat { border-color: #1B4F8A; }
.rs-gudang-block.kso   { border-color: #1D8A6E; }
.rs-gudang-block.other { border-color: #6D3FA0; }
[data-bs-theme="dark"] .rs-gudang-block.pusat { border-color: #4A8FD4; }
[data-bs-theme="dark"] .rs-gudang-block.kso   { border-color: #2CC49A; }
[data-bs-theme="dark"] .rs-gudang-block.other { border-color: #A87DE0; }

/* highlight saat di-scroll ke sini */
.rs-gudang-block.rs-highlight {
    animation: rs-pulse 1.4s ease;
}
@keyframes rs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(240,165,0,.6); }
    50%  { box-shadow: 0 0 0 8px rgba(240,165,0,.1); }
    100% { box-shadow: 0 0 0 0 rgba(240,165,0,0); }
}

.rs-gudang-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    font-weight: 700; font-size: .88rem;
    letter-spacing: .02em;
    border-bottom: 1.5px solid;
}
.rs-gudang-header.pusat  { background: #e8f0fa; color: #1B4F8A; border-color: #1B4F8A; }
.rs-gudang-header.kso    { background: #e2f6f0; color: #1D8A6E; border-color: #1D8A6E; }
.rs-gudang-header.other  { background: #f3f0fa; color: #6D3FA0; border-color: #6D3FA0; }
[data-bs-theme="dark"] .rs-gudang-header.pusat { background: #0e2040; border-color: #4A8FD4; color: #4A8FD4; }
[data-bs-theme="dark"] .rs-gudang-header.kso   { background: #092a20; border-color: #2CC49A; color: #2CC49A; }
[data-bs-theme="dark"] .rs-gudang-header.other { background: #200e38; border-color: #A87DE0; color: #A87DE0; }

.rs-gudang-header .badge-qty {
    margin-left: auto; font-size: .75rem; font-weight: 600;
    background: rgba(0,0,0,.07); color: inherit;
    padding: 2px 8px; border-radius: 20px;
}

.rs-timeline { overflow: hidden; }

/* ── Timeline entries ── */
.rs-entry {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--default-border);
    position: relative;
}
.rs-entry:last-child { border-bottom: none; }

.rs-entry-line {
    width: 3px;
    flex-shrink: 0;
}
.rs-entry-line.masuk  { background: #1a9e50; }
.rs-entry-line.keluar { background: #dc3545; }
.rs-entry-line.netral { background: #6c757d; }

.rs-entry-body {
    padding: 14px 16px;
    flex: 1;
    min-width: 0;
}
.rs-entry-top {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; margin-bottom: 5px;
}
.rs-entry-date { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.rs-jenis-badge {
    font-size: .72rem; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; text-transform: capitalize; white-space: nowrap;
}
.rs-jenis-badge.masuk  { background: #d4f4e2; color: #1a9e50; }
.rs-jenis-badge.keluar { background: #fde8ea; color: #dc3545; }
[data-bs-theme="dark"] .rs-jenis-badge.masuk  { background: #0a2a18; color: #3dd578; }
[data-bs-theme="dark"] .rs-jenis-badge.keluar { background: #2d0a0e; color: #f06070; }

.rs-ref-badge {
    font-size: .72rem; font-family: monospace; font-weight: 600;
    padding: 2px 8px; border-radius: 20px;
    background: var(--light); color: var(--text-muted);
    border: 1px solid var(--default-border);
    white-space: nowrap;
}
.rs-ref-badge.ppb { background: #fff3d0; color: #b47800; border-color: #f0a500; }
[data-bs-theme="dark"] .rs-ref-badge.ppb { background: #2a1e00; color: #e0a020; border-color: #b07800; }

/* PPB badge yang punya link ke KSO block */
.rs-ref-badge.ppb.rs-linked {
    cursor: pointer;
    text-decoration: none;
}
.rs-ref-badge.ppb.rs-linked:hover {
    background: #f0a500;
    color: #fff;
    border-color: #d4900a;
}

.rs-entry-detail {
    display: flex; gap: 24px; flex-wrap: wrap;
    font-size: .8rem;
}
.rs-qty-group { display: flex; gap: 16px; }
.rs-qty-item  { display: flex; flex-direction: column; gap: 1px; }
.rs-qty-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.rs-qty-val   { font-weight: 700; font-size: .88rem; }
.rs-qty-val.up   { color: #1a9e50; }
.rs-qty-val.down { color: #dc3545; }
.rs-qty-val.saldo{ color: var(--default-text-color); }

.rs-keterangan { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }

/* ── Faktur info ── */
.rs-faktur-row {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--default-border);
    font-size: .78rem;
}
.rs-faktur-label { color: var(--text-muted); flex-shrink: 0; }
.rs-faktur-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 20px; font-weight: 600; font-size: .72rem;
}
.rs-faktur-badge.belum  { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.rs-faktur-badge.draft  { background: #e2e3e5; color: #383d41; border: 1px solid #c6c8ca; }
.rs-faktur-badge.proses { background: #cce5ff; color: #004085; border: 1px solid #b8daff; }
.rs-faktur-badge.selesai{ background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
[data-bs-theme="dark"] .rs-faktur-badge.belum   { background: #332900; color: #ffd54f; border-color: #664d00; }
[data-bs-theme="dark"] .rs-faktur-badge.draft   { background: #2a2a2a; color: #aaa;    border-color: #444; }
[data-bs-theme="dark"] .rs-faktur-badge.proses  { background: #001b33; color: #7ec8e3; border-color: #003366; }
[data-bs-theme="dark"] .rs-faktur-badge.selesai { background: #0d2b14; color: #66bb6a; border-color: #1a5c22; }
.rs-faktur-nomor {
    font-family: monospace; font-size: .78rem; font-weight: 600;
    color: var(--default-text-color);
}

/* ── Empty state ── */
.rs-empty {
    padding: 40px 24px; text-align: center; color: var(--text-muted);
    font-size: .88rem;
}

/* ── SVG connector overlay ── */
#rs-svg-connectors {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}
</style>
@endsection

@section('content')
<div class="container-fluid">

    {{-- Breadcrumb --}}
    <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">Riwayat Stok</p>
            <span class="fs-13 text-muted">
                Gudang &rarr;
                <a href="{{ route('gudang.riwayat-stok.index') }}" class="text-muted">Riwayat Stok</a>
                &rarr; Detail
            </span>
        </div>
        <a href="{{ route('gudang.riwayat-stok.index') }}" class="btn btn-outline-secondary btn-sm px-3 py-1 mt-2 mt-md-0">
            <i class="bx bx-arrow-back me-1"></i>Kembali
        </a>
    </div>

    <div class="rs-wrap" id="rsWrap">

        {{-- SVG overlay untuk garis hubungan --}}
        <svg id="rs-svg-connectors" height="0" aria-hidden="true"></svg>

        {{-- Info Barang --}}
        <div class="rs-barang-card">
            <div class="rs-barang-title">{{ $stok->barang?->nama ?? '—' }}</div>
            <div class="rs-barang-meta">
                @if($stok->barang?->merekBarang)
                    <span><i class="bx bx-tag me-1"></i>{{ $stok->barang->merekBarang->nama ?? '' }}</span>
                @endif
                @if($stok->satuan)
                    <span><i class="bx bx-package me-1"></i>{{ $stok->satuan }}</span>
                @endif
                @if($stok->no_lot)
                    <span><i class="bx bx-barcode me-1"></i>LOT: <strong>{{ $stok->no_lot }}</strong></span>
                @endif
                @if($stok->tanggal_kedaluwarsa)
                    <span><i class="bx bx-calendar me-1"></i>ED: <strong>{{ $stok->tanggal_kedaluwarsa->format('d/m/Y') }}</strong></span>
                @endif
            </div>
            @if($stok->no_serial)
                <div class="rs-serial-badge">
                    <i class="bx bx-qr-scan"></i>
                    No. Serial: {{ $stok->no_serial }}
                </div>
            @endif
        </div>

        {{-- Info lintas gudang --}}
        @php $uniqueGudangCount = $orderedSiblings->pluck('gudang_id')->unique()->count(); @endphp
        @if($uniqueGudangCount > 1)
        <div class="alert alert-warning d-flex align-items-center gap-2 py-2 px-3 mb-3" style="font-size:.82rem">
            <i class="bx bx-transfer-alt fs-5"></i>
            Stok ini melewati <strong>{{ $uniqueGudangCount }} gudang</strong> — ditampilkan sebagai satu perjalanan berdasarkan No. Serial.
        </div>
        @endif

        @php $shownBridges = []; @endphp

        @foreach($orderedSiblings as $idx => $sib)
            @php
                $entries      = $ksGrouped->get($sib->id, collect());
                $headerClass  = $idx === 0 ? 'pusat' : 'kso';
                $runningSaldo = 0;
            @endphp

            <div class="rs-gudang-block {{ $headerClass }}" id="stok-{{ $sib->id }}">
                <div class="rs-gudang-header {{ $headerClass }}">
                    <i class="bx {{ $idx === 0 ? 'bx-building-house' : 'bx-hospital' }} me-1"></i>
                    {{ $sib->gudang?->nama ?? '—' }}
                    <span class="badge-qty">Qty saat ini: {{ number_format($sib->qty) }} {{ $sib->satuan }}</span>
                </div>

                <div class="rs-timeline">
                    @forelse($entries as $entry)
                        @php
                            $runningSaldo += $entry->qty_masuk - $entry->qty_keluar;
                            $lineClass  = $entry->qty_masuk > 0 ? 'masuk' : 'keluar';
                            $refType    = $entry->referensi_type;
                            $refId      = $entry->referensi_id;
                            $isPpb      = $refType === 'permintaan_pengeluaran';
                            $refLabel   = match($refType) {
                                'penerimaan_barang'      => 'Penerimaan',
                                'permintaan_pengeluaran' => $ppbMap->get($refId, 'PPB #'.$refId),
                                'penjualan_kso'          => 'Pemakaian KSO',
                                'penggunaan_barang'      => 'Penggunaan',
                                'penjualan'              => 'Penjualan',
                                default                  => $refType,
                            };
                            $jenisLabel = match($entry->jenis) {
                                'masuk'  => 'Masuk',
                                'keluar' => 'Keluar',
                                default  => ucfirst($entry->jenis),
                            };

                            // Cek faktur untuk entry pemakaian KSO
                            $fakturInfo = null;
                            if ($refType === 'penjualan_kso') {
                                $fakturInfo = $fakturMap->get($refId);
                            }

                            // Cek apakah entry PPB keluar ini punya bridge ke gudang KSO
                            $bridgeTargetId = null;
                            if ($isPpb && $entry->qty_keluar > 0) {
                                foreach ($bridges as $bRefId => $b) {
                                    if ($bRefId == $refId && $b['from'] === (int)$sib->id) {
                                        $bridgeTargetId = $b['to'];
                                        break;
                                    }
                                }
                            }
                        @endphp
                        <div class="rs-entry" id="entry-{{ $sib->id }}-{{ $entry->id }}">
                            <div class="rs-entry-line {{ $lineClass }}"></div>
                            <div class="rs-entry-body">
                                <div class="rs-entry-top">
                                    <span class="rs-entry-date">
                                        <i class="bx bx-calendar-alt me-1"></i>
                                        {{ $entry->tanggal->format('d/m/Y') }}
                                    </span>
                                    <span class="rs-jenis-badge {{ $lineClass }}">{{ $jenisLabel }}</span>
                                    <span
                                        class="rs-ref-badge {{ $isPpb ? 'ppb' : '' }} {{ $bridgeTargetId ? 'rs-linked' : '' }}"
                                        @if($bridgeTargetId)
                                            data-bridge-from="entry-{{ $sib->id }}-{{ $entry->id }}"
                                            data-bridge-to="stok-{{ $bridgeTargetId }}"
                                            title="Klik untuk lihat Gudang KSO tujuan"
                                        @endif
                                    >
                                        @if($isPpb)<i class="bx bx-transfer me-1"></i>@endif
                                        {{ $refLabel }}
                                        @if($bridgeTargetId)<i class="bx bx-link-external ms-1" style="font-size:.8em"></i>@endif
                                    </span>
                                </div>
                                <div class="rs-entry-detail">
                                    <div class="rs-qty-group">
                                        @if($entry->qty_masuk > 0)
                                        <div class="rs-qty-item">
                                            <span class="rs-qty-label">Masuk</span>
                                            <span class="rs-qty-val up">+{{ number_format($entry->qty_masuk) }}</span>
                                        </div>
                                        @endif
                                        @if($entry->qty_keluar > 0)
                                        <div class="rs-qty-item">
                                            <span class="rs-qty-label">Keluar</span>
                                            <span class="rs-qty-val down">-{{ number_format($entry->qty_keluar) }}</span>
                                        </div>
                                        @endif
                                        <div class="rs-qty-item">
                                            <span class="rs-qty-label">Saldo</span>
                                            <span class="rs-qty-val saldo">{{ number_format($runningSaldo) }}</span>
                                        </div>
                                    </div>
                                    @if($entry->keterangan)
                                    <div class="rs-keterangan">
                                        <i class="bx bx-note me-1"></i>{{ $entry->keterangan }}
                                    </div>
                                    @endif

                                    @if($refType === 'penjualan_kso')
                                    <div class="rs-faktur-row">
                                        <span class="rs-faktur-label"><i class="bx bx-receipt me-1"></i>Faktur:</span>
                                        @if($fakturInfo)
                                            @php
                                                $fStatus = $fakturInfo->status;
                                                $fClass  = match($fStatus) {
                                                    'draft'                    => 'draft',
                                                    'disetujui','upload_ppn'   => 'proses',
                                                    'cetak_dokumen','selesai'  => 'selesai',
                                                    default                    => 'proses',
                                                };
                                                $fLabel = match($fStatus) {
                                                    'draft'          => 'Draft',
                                                    'disetujui'      => 'Disetujui',
                                                    'upload_ppn'     => 'Upload PPN',
                                                    'cetak_dokumen'  => 'Cetak Dokumen',
                                                    'selesai'        => 'Selesai',
                                                    default          => ucfirst($fStatus),
                                                };
                                            @endphp
                                            <span class="rs-faktur-badge {{ $fClass }}">
                                                <i class="bx {{ $fClass === 'selesai' ? 'bx-check-circle' : 'bx-time' }}"></i>
                                                {{ $fLabel }}
                                            </span>
                                            <a href="{{ route('penjualan.faktur-kso.show', $fakturInfo->faktur_id) }}"
                                               class="rs-faktur-nomor" target="_blank">
                                                {{ $fakturInfo->nomor }}
                                                <i class="bx bx-link-external ms-1" style="font-size:.75em"></i>
                                            </a>
                                        @else
                                            <span class="rs-faktur-badge belum">
                                                <i class="bx bx-time-five"></i>
                                                Belum difakturkan
                                            </span>
                                        @endif
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="rs-empty">
                            <i class="bx bx-history" style="font-size:1.8rem;display:block;margin-bottom:6px"></i>
                            Belum ada riwayat mutasi untuk gudang ini.
                        </div>
                    @endforelse
                </div>
            </div>

        @endforeach

    </div>{{-- /rs-wrap --}}
</div>
@endsection

@section('scripts')
<script>
(function () {
    const svg = document.getElementById('rs-svg-connectors');
    const wrap = document.getElementById('rsWrap');

    // Warna connector
    const LINE_COLOR   = '#f0a500';
    const LINE_OPACITY = '0.7';
    const OFFSET_X     = 24; // seberapa jauh keluar ke kanan dari block

    function getRelRect(el) {
        const er = el.getBoundingClientRect();
        const wr = wrap.getBoundingClientRect();
        return {
            top:    er.top    - wr.top  + wrap.scrollTop,
            left:   er.left   - wr.left,
            right:  er.right  - wr.left,
            bottom: er.bottom - wr.top  + wrap.scrollTop,
            width:  er.width,
            height: er.height,
        };
    }

    function drawConnectors() {
        svg.innerHTML = '';
        svg.setAttribute('height', wrap.scrollHeight);

        const badges = document.querySelectorAll('[data-bridge-to]');
        if (!badges.length) return;

        // Stagger offset per pasangan agar garis tidak tumpang tindih persis
        let offsetIndex = 0;

        badges.forEach(badge => {
            const targetId = badge.getAttribute('data-bridge-to');
            const targetEl = document.getElementById(targetId);
            if (!targetEl) return;

            const fr = getRelRect(badge);
            const tr = getRelRect(targetEl);

            const xOut  = Math.max(fr.right, tr.right) + OFFSET_X + offsetIndex * 12;
            const y1    = fr.top  + fr.height / 2;  // tengah badge
            const y2    = tr.top  + 22;              // sedikit dalam header target

            // Titik awal di tengah kanan badge
            const startX = fr.right + 4;

            // Path L-shape: badge → kanan → turun → masuk dari kanan ke border target
            const d = `M ${startX} ${y1} H ${xOut} V ${y2} H ${tr.right + 2}`;

            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path.setAttribute('d', d);
            path.setAttribute('stroke', LINE_COLOR);
            path.setAttribute('stroke-width', '1.8');
            path.setAttribute('stroke-dasharray', '6 3');
            path.setAttribute('stroke-opacity', LINE_OPACITY);
            path.setAttribute('fill', 'none');
            path.setAttribute('stroke-linecap', 'round');
            path.setAttribute('stroke-linejoin', 'round');
            svg.appendChild(path);

            // Titik pangkal — lingkaran di ujung kanan badge
            const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            dot.setAttribute('cx', startX);
            dot.setAttribute('cy', y1);
            dot.setAttribute('r', '4');
            dot.setAttribute('fill', LINE_COLOR);
            dot.setAttribute('opacity', LINE_OPACITY);
            svg.appendChild(dot);

            // Arrowhead di titik masuk ke target block (mengarah ke kiri)
            const ax = tr.right + 2;
            const ay = y2;
            const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
            arrow.setAttribute('points', `${ax},${ay} ${ax+10},${ay-5} ${ax+10},${ay+5}`);
            arrow.setAttribute('fill', LINE_COLOR);
            arrow.setAttribute('opacity', LINE_OPACITY);
            svg.appendChild(arrow);

            offsetIndex++;
        });
    }

    // Klik badge → scroll ke target + highlight
    document.querySelectorAll('[data-bridge-to]').forEach(badge => {
        badge.addEventListener('click', function () {
            const targetId = this.getAttribute('data-bridge-to');
            const target   = document.getElementById(targetId);
            if (!target) return;

            target.scrollIntoView({ behavior: 'smooth', block: 'center' });

            // Highlight sementara
            target.classList.remove('rs-highlight');
            void target.offsetWidth; // reflow untuk restart animasi
            target.classList.add('rs-highlight');
            setTimeout(() => target.classList.remove('rs-highlight'), 1500);
        });
    });

    // Gambar setelah halaman render + resize
    window.addEventListener('load',   drawConnectors);
    window.addEventListener('resize', drawConnectors);
    // Juga gambar setelah DOMContentLoaded + delay kecil untuk layout selesai
    document.addEventListener('DOMContentLoaded', () => setTimeout(drawConnectors, 100));
    setTimeout(drawConnectors, 300);
})();
</script>
@endsection