@extends('layouts.master')

@section('title', 'Detail Penggunaan Barang ' . $pb->nomor)

@section('styles')
<style>
/* ── Activity Timeline ───────────────────────────── */
.timeline-step {
    border-left: 3px solid #e9ecef;
    padding-left: 16px;
    margin-bottom: 14px;
    position: relative;
}
.timeline-step:last-child { margin-bottom: 0; }
.timeline-step::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ced4da;
    box-shadow: none;
}
.timeline-step.tl-created::before,
.timeline-step.tl-validated::before { background:#7c3aed; box-shadow:none; }
.timeline-step.tl-revised::before   { background:#f59e0b; box-shadow:none; }
.timeline-step.tl-cancelled::before { background:#ef4444; box-shadow:none; }

.tl-title-created,
.tl-title-validated { color:#7c3aed; }
.tl-title-revised   { color:#d97706; }
.tl-title-cancelled { color:#dc2626; }
</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">Penggunaan Barang — {{ $pb->nomor }}</p>
            <span class="fs-13 text-muted">Gudang &rarr; Penggunaan Barang &rarr; Detail</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0">
            @if($pb->isDraft())
                <a href="{{ route('gudang.penggunaan-barang.edit', $pb->id) }}" class="btn btn-warning btn-sm px-2 py-1">
                    <i class="bx bx-edit me-1"></i> Edit
                </a>
                <button type="button" class="btn btn-success btn-sm px-2 py-1" onclick="aksiSelesaikan()">
                    <i class="bx bx-check-circle me-1"></i> Validasi
                </button>
                <button type="button" class="btn btn-outline-danger btn-sm px-2 py-1" onclick="aksiHapus()">
                    <i class="bx bx-trash me-1"></i> Hapus Draft
                </button>
            @endif
            @if($pb->isSelesai() && auth('internal')->user()->can('penggunaan_barang.validasi'))
                <button type="button" class="btn btn-outline-warning btn-sm px-2 py-1" onclick="$('#modalBatal').modal('show')">
                    <i class="bx bx-undo me-1"></i> Batalkan
                </button>
            @endif
            @if($pb->isSelesai())
            <button type="button" class="btn btn-primary btn-sm px-2 py-1" id="btnCetakPdf">
                <i class="bx bx-printer me-1"></i> Cetak PDF
            </button>
            @endif
            <a href="{{ route('gudang.penggunaan-barang.index') }}" class="btn btn-secondary btn-sm px-2 py-1">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
        </div>
    </div>

    @if($pb->alasan_batal)
    <div class="alert alert-danger d-flex align-items-start gap-2 mb-3">
        <i class="bx bx-x-circle fs-18 mt-1"></i>
        <div>
            <strong>Pernah Dibatalkan</strong> — alasan: {{ $pb->alasan_batal }}
            <div class="text-muted small">
                Oleh {{ $pb->dibatalkanOleh?->nama }} pada {{ $pb->dibatalkan_at?->format('d-m-Y H:i') }}
            </div>
        </div>
    </div>
    @endif

    <div class="row g-3">
        {{-- Kolom Kiri --}}
        <div class="col-12 col-xl-8">

            {{-- Informasi Penggunaan --}}
            <div class="card custom-card">
                <div class="card-header"><div class="card-title mb-0">Informasi Penggunaan</div></div>
                <div class="card-body">
                    <div class="row g-2 fs-14">
                        <div class="col-5 col-md-3 text-muted">Nomor</div>
                        <div class="col-7 col-md-9 fw-semibold">{{ $pb->nomor }}</div>
                        <div class="col-5 col-md-3 text-muted">Status</div>
                        <div class="col-7 col-md-9">
                            @if($pb->isDraft())
                                <span class="badge bg-secondary">Draft</span>
                            @else
                                <span class="badge bg-success">Tervalidasi</span>
                            @endif
                        </div>
                        <div class="col-5 col-md-3 text-muted">Tgl. Input</div>
                        <div class="col-7 col-md-9">{{ $pb->created_at->format('d-m-Y H:i') }}</div>
                        @if($pb->isSelesai())
                        <div class="col-5 col-md-3 text-muted">Divalidasi Oleh</div>
                        <div class="col-7 col-md-9">
                            {{ $pb->diselesaikanOleh?->nama ?? '—' }}
                            <span class="text-muted small">{{ $pb->diselesaikan_at?->format('d-m-Y H:i') }}</span>
                        </div>
                        @endif
                        <div class="col-5 col-md-3 text-muted">Tgl. Penggunaan</div>
                        <div class="col-7 col-md-9">{{ $pb->tanggal_penggunaan?->format('d-m-Y') ?? '—' }}</div>
                        <div class="col-5 col-md-3 text-muted">Gudang</div>
                        <div class="col-7 col-md-9">{{ $pb->nama_gudang }}</div>
                        <div class="col-5 col-md-3 text-muted">Dibuat Oleh</div>
                        <div class="col-7 col-md-9">{{ $pb->dibuatOleh?->nama ?? '—' }}</div>
                        @if($pb->keterangan)
                        <div class="col-5 col-md-3 text-muted">Keterangan</div>
                        <div class="col-7 col-md-9">{{ $pb->keterangan }}</div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Daftar Barang --}}
            <div class="card custom-card mt-3">
                <div class="card-header">
                    <div class="card-title mb-0">Daftar Barang ({{ $pb->total_item }} item)</div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0" style="font-size:.85rem">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:40px">No</th>
                                    <th>Barang</th>
                                    <th style="width:80px">Ukuran</th>
                                    <th class="text-center" style="width:70px">Satuan</th>
                                    <th class="text-center" style="width:70px">Qty</th>
                                    <th class="text-center" style="width:80px">Kondisi</th>
                                    <th>Stok yang Diambil</th>
                                    <th>Catatan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($pb->items as $i => $item)
                                <tr>
                                    <td class="text-center">{{ $i + 1 }}</td>
                                    <td>
                                        <div class="fw-semibold">{{ $item->nama_barang }}</div>
                                        <div class="text-muted" style="font-size:.78rem">{{ $item->kode_barang }}</div>
                                    </td>
                                    <td>{{ $item->ukuran ?? '—' }}</td>
                                    <td class="text-center">{{ $item->satuan ?? '—' }}</td>
                                    <td class="text-center fw-semibold">{{ $item->qty }}</td>
                                    <td class="text-center">
                                        @if(($item->kondisi ?? 'baik') === 'rusak')
                                            <span class="badge bg-danger">Rusak</span>
                                        @else
                                            <span class="badge bg-success">Baik</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($item->itemStoks->isEmpty())
                                            <span class="text-muted fst-italic small">FEFO otomatis</span>
                                        @else
                                            @foreach($item->itemStoks as $lot)
                                            @php $sn = $lot->no_serial ?? $lot->stok?->no_serial; @endphp
                                            <div class="small mb-1">
                                                <span class="badge bg-light text-dark border">
                                                    @if($sn)SN: {{ $sn }} @endif
                                                    LOT: {{ $lot->no_lot ?: '—' }}
                                                    @if($lot->tanggal_kedaluwarsa) — ED {{ $lot->tanggal_kedaluwarsa->format('d-m-Y') }} @endif
                                                </span>
                                                <span class="ms-1 fw-semibold">× {{ $lot->qty_ambil }}</span>
                                            </div>
                                            @endforeach
                                        @endif
                                    </td>
                                    <td>{{ $item->catatan ?? '—' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Foto Penggunaan --}}
            @if($pb->fotos->isNotEmpty())
            <div class="card custom-card mt-3">
                <div class="card-header">
                    <div class="card-title mb-0"><i class="bx bx-camera me-2 text-primary"></i>Foto Penggunaan</div>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-3">
                        @foreach($pb->fotos as $foto)
                        <div class="text-center">
                            <a href="{{ $foto->url }}" target="_blank">
                                <img src="{{ $foto->url }}" alt="Foto"
                                     style="width:100px;height:100px;object-fit:cover;border-radius:8px;border:1px solid #dee2e6">
                            </a>
                            @if($foto->keterangan)
                            <div class="small text-muted mt-1" style="max-width:100px">{{ $foto->keterangan }}</div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

        </div>{{-- /col kiri --}}

        {{-- Kolom Kanan: Riwayat Aktivitas --}}
        <div class="col-12 col-xl-4">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title mb-0">
                        <i class="bx bx-history me-2 text-primary"></i>Riwayat Aktivitas
                    </div>
                </div>
                <div class="card-body">
                    @if(isset($activities) && $activities->isNotEmpty())
                    @php
                    $fieldLabels = [
                        'status'       => 'Status',
                        'keterangan'   => 'Keterangan',
                        'alasan_batal' => 'Alasan batal',
                    ];
                    $statusLabels = [
                        'draft'   => 'Draft',
                        'selesai' => 'Tervalidasi',
                        'batal'   => 'Dibatalkan',
                    ];
                    @endphp
                    <div class="pt-1">
                        @foreach($activities as $act)
                        @php
                            $rawDesc = $act->description;
                            $props   = $act->properties;

                            if ($rawDesc === 'created')       $desc = 'Draft dibuat';
                            elseif ($rawDesc === 'updated')   $desc = 'Data diperbarui';
                            else                              $desc = $rawDesc;

                            if (str_contains($rawDesc, 'dibuat') || $rawDesc === 'created')
                                $cls = 'created';
                            elseif (str_contains($rawDesc, 'divalidasi') || str_contains($rawDesc, 'selesai'))
                                $cls = 'validated';
                            elseif (str_contains($rawDesc, 'dibatalkan') || str_contains($rawDesc, 'batal'))
                                $cls = 'cancelled';
                            elseif (str_contains($rawDesc, 'direvisi') || $rawDesc === 'updated')
                                $cls = 'revised';
                            else
                                $cls = 'default';

                            $old  = $props->get('old', []);
                            $new  = $props->get('attributes', []);
                            $keys = array_unique(array_merge(array_keys((array)$old), array_keys((array)$new)));
                            $skipKeys = [];
                            if (in_array($rawDesc, ['Penggunaan barang divalidasi','Penggunaan barang dibatalkan','Penggunaan barang direvisi ke draft']))
                                $skipKeys[] = 'status';
                            if ($rawDesc === 'created')
                                $skipKeys = array_merge($skipKeys, ['status','keterangan','alasan_batal']);
                            $keys = array_filter($keys, fn($k) => !in_array($k, $skipKeys));
                        @endphp
                        <div class="timeline-step tl-{{ $cls }}">
                            <div class="fw-semibold small tl-title-{{ $cls }}">{{ $desc }}</div>
                            <div class="text-muted" style="font-size:.78rem">oleh {{ $act->causer?->nama ?? 'Sistem' }}</div>
                            <div class="text-muted" style="font-size:.78rem">{{ $act->created_at->format('d/m/Y H:i') }}</div>
                            @if($props->has('alasan'))
                                <div class="mt-1" style="font-size:.75rem;color:#b45309">
                                    Alasan: {{ $props->get('alasan') }}
                                </div>
                            @endif
                            @if($props->has('extra'))
                                @foreach((array)$props->get('extra') as $line)
                                <div class="mt-1 tl-title-{{ $cls }}" style="font-size:.75rem">{{ $line }}</div>
                                @endforeach
                            @endif
                            @foreach($keys as $key)
                            @php
                                $label  = $fieldLabels[$key] ?? $key;
                                $oldVal = isset($old[$key]) ? ($statusLabels[$old[$key]] ?? $old[$key]) : null;
                                $newVal = isset($new[$key]) ? ($statusLabels[$new[$key]] ?? $new[$key]) : null;
                            @endphp
                            @if($oldVal !== null || $newVal !== null)
                            <div class="mt-1" style="font-size:.75rem">
                                <span class="text-muted">{{ $label }}:</span>
                                @if($oldVal !== null)<span class="text-danger text-decoration-line-through mx-1">{{ $oldVal }}</span>@endif
                                @if($newVal !== null)<span class="text-success">{{ $newVal }}</span>@endif
                            </div>
                            @endif
                            @endforeach
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-muted small fst-italic text-center py-3">Belum ada aktivitas tercatat.</div>
                    @endif
                </div>
            </div>
        </div>{{-- /col kanan --}}
    </div>{{-- /row --}}
</div>

{{-- Modal Batalkan --}}
<div class="modal fade" id="modalBatal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Batalkan Penggunaan Barang</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small">Pembatalan akan me-restore stok yang telah berkurang ke gudang asal.</p>
                <label class="form-label fw-semibold">Alasan Pembatalan <span class="text-danger">*</span></label>
                <textarea id="inputAlasanBatal" class="form-control" rows="3" placeholder="Masukkan alasan..."></textarea>
                <div class="text-danger small mt-1 d-none" id="errAlasanBatal">Alasan wajib diisi.</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-warning btn-sm" onclick="konfirmasiBatal()">
                    <i class="bx bx-undo me-1"></i> Ya, Batalkan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Preview PDF --}}
<div class="modal fade" id="modalPdf" 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-file-blank me-1 text-primary"></i> Preview PDF — {{ $pb->nomor }}
                </h6>
                <div class="d-flex gap-2 ms-auto">
                    <a href="{{ route('gudang.penggunaan-barang.cetak', $pb->id) }}" target="_blank"
                       class="btn btn-primary btn-sm px-2 py-1">
                        <i class="bx bx-download me-1"></i> Unduh / Print
                    </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="pdfFrame" src="" width="100%" height="100%"
                        style="border:none;display:block" loading="lazy"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const BASE_URL = "{{ url('/') }}";
const CSRF     = "{{ csrf_token() }}";
const PGB_ID   = {{ $pb->id }};
const PDF_URL  = "{{ route('gudang.penggunaan-barang.cetak', $pb->id) }}";

@if($pb->isSelesai())
$('#btnCetakPdf').on('click', function () {
    const frame = document.getElementById('pdfFrame');
    if (!frame.src || frame.src === window.location.href) frame.src = PDF_URL;
    $('#modalPdf').modal('show');
});
$('#modalPdf').on('hidden.bs.modal', function () {
    document.getElementById('pdfFrame').src = '';
});
@endif

function aksiSelesaikan() {
    Swal.fire({
        title: 'Validasi Penggunaan Barang?',
        html: 'Stok barang akan dikurangi dari gudang <strong>{{ $pb->nama_gudang }}</strong>.',
        icon: 'question', showCancelButton: true,
        confirmButtonColor: '#198754', cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Validasi', cancelButtonText: 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;
        $.ajax({
            url: `${BASE_URL}/gudang/penggunaan-barang/${PGB_ID}/selesaikan`,
            method: 'POST',
            data: { _token: CSRF },
            success: r => {
                Swal.fire({ icon:'success', title:'Tervalidasi', text:'Stok berhasil dikurangi.', timer:1800, showConfirmButton:false })
                    .then(() => location.reload());
            },
            error: xhr => {
                Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error');
            },
        });
    });
}

function aksiHapus() {
    Swal.fire({
        title: 'Hapus draft ini?', icon: 'warning', showCancelButton: true,
        confirmButtonColor: '#dc3545', cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, Hapus', cancelButtonText: 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;
        $.ajax({
            url: `${BASE_URL}/gudang/penggunaan-barang/${PGB_ID}`,
            method: 'POST',
            data: { _token: CSRF, _method: 'DELETE' },
            success: () => window.location.href = `${BASE_URL}/gudang/penggunaan-barang`,
            error:  xhr => Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error'),
        });
    });
}

function konfirmasiBatal() {
    const alasan = document.getElementById('inputAlasanBatal').value.trim();
    if (!alasan) { document.getElementById('errAlasanBatal').classList.remove('d-none'); return; }
    document.getElementById('errAlasanBatal').classList.add('d-none');

    $.ajax({
        url: `${BASE_URL}/gudang/penggunaan-barang/${PGB_ID}/batalkan`,
        method: 'POST',
        data: { _token: CSRF, alasan },
        success: () => {
            bootstrap.Modal.getInstance(document.getElementById('modalBatal'))?.hide();
            Swal.fire({ icon:'success', title:'Dibatalkan', text:'Stok sudah di-restore.', timer:1800, showConfirmButton:false })
                .then(() => location.reload());
        },
        error: xhr => Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error'),
    });
}
</script>
@endsection