@extends('layouts.master')

@section('title', 'Detail Penerimaan — ' . $penerimaan->nomor_penerimaan)

@section('styles')
<style>
    #tblItems { font-size: .83rem; }
    #tblItems thead th { background: #f8f5ff; color: #7c3aed; border: 1px solid #e9d5ff; white-space: nowrap; vertical-align: middle; padding: 7px 10px; }
    #tblItems tbody td { border: 1px solid #f0e8ff; vertical-align: middle; padding: 6px 8px; }
    #tblItems tfoot td { background: #faf5ff; font-weight: 600; border: 1px solid #e9d5ff; padding: 7px 10px; }
    #modalLot thead th { background: #f8f5ff; color: #7c3aed; border: 1px solid #e9d5ff; padding: 6px 10px; font-size: .82rem; }
    #modalLot tbody td { border: 1px solid #f0e8ff; vertical-align: middle; padding: 5px 10px; font-size: .82rem; }
    #modalLot tfoot td { background: #faf5ff; font-weight: 600; border: 1px solid #e9d5ff; padding: 6px 10px; font-size: .82rem; }
</style>
@endsection

@php
    $grouped = $penerimaan->items->groupBy(function ($item) {
        return ($item->purchase_order_item_id ?? 'manual') . '_' . $item->barang_id;
    })->values();
@endphp

@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">{{ $penerimaan->nomor_penerimaan }}</p>
            <span class="fs-13 text-muted">Gudang &rarr; <a href="{{ route('gudang.penerimaan.index') }}">Penerimaan Barang</a> &rarr; Detail</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0">
            @if($penerimaan->isDraft() ? auth('internal')->user()->can('penerimaan.edit') : auth('internal')->user()->can('penerimaan.validasi'))
            <a href="{{ route('gudang.penerimaan.edit', $penerimaan->id) }}" class="btn btn-warning btn-sm px-2 py-1">
                <i class="bx bx-edit me-1"></i> {{ $penerimaan->isDraft() ? 'Edit' : 'Koreksi Data' }}
            </a>
            @endif
            @if($penerimaan->isDraft())
                @can('penerimaan.validasi')
                <button type="button" class="btn btn-success btn-sm px-2 py-1" id="btnSelesaikan">
                    <i class="bx bx-check-circle me-1"></i> Validasi
                </button>
                @endcan
                @can('penerimaan.delete')
                <button type="button" class="btn btn-outline-danger btn-sm px-2 py-1" id="btnHapus">
                    <i class="bx bx-trash me-1"></i> Hapus
                </button>
                @endcan
            @endif
            @if($penerimaan->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.penerimaan.index') }}" class="btn btn-outline-secondary btn-sm px-2 py-1">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
        </div>
    </div>

    <div class="row g-3">
        {{-- Info Header --}}
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header"><div class="card-title mb-0"><i class="bx bx-receipt me-2 text-primary"></i>Informasi Penerimaan</div></div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-6 col-md-3">
                            <div class="text-muted fs-12">No. Penerimaan</div>
                            <div class="fw-semibold">{{ $penerimaan->nomor_penerimaan }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted fs-12">Tanggal Terima</div>
                            <div class="fw-semibold">{{ $penerimaan->tanggal_terima->format('d-m-Y') }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted fs-12">No. PO</div>
                            <div class="fw-semibold">
                                @if($penerimaan->purchaseOrder)
                                    <a href="{{ route('pengadaan.po.show', $penerimaan->purchase_order_id) }}">{{ $penerimaan->purchaseOrder->nomor_po }}</a>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted fs-12">Status</div>
                            <div>
                                @if($penerimaan->isDraft())
                                    <span class="badge bg-secondary">Draft</span>
                                @else
                                    <span class="badge bg-success">Tervalidasi</span>
                                @endif
                            </div>
                        </div>
                        @if($penerimaan->catatan)
                        <div class="col-12">
                            <div class="text-muted fs-12">Catatan</div>
                            <div>{{ $penerimaan->catatan }}</div>
                        </div>
                        @endif
                        @if($penerimaan->isSelesai())
                        <div class="col-6 col-md-3">
                            <div class="text-muted fs-12">Divalidasi Oleh</div>
                            <div>{{ $penerimaan->diselesaikanOleh->nama ?? '—' }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted fs-12">Divalidasi Pada</div>
                            <div>{{ $penerimaan->diselesaikan_at?->format('d-m-Y H:i') ?? '—' }}</div>
                        </div>
                        @endif
                        <div class="col-6 col-md-3">
                            <div class="text-muted fs-12">Dibuat Oleh</div>
                            <div>{{ $penerimaan->dibuatOleh->nama ?? '—' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Foto Global --}}
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header"><div class="card-title mb-0"><i class="bx bx-images me-2 text-primary"></i>Foto Penerimaan</div></div>
                <div class="card-body">
                    @if($penerimaan->fotos->isNotEmpty())
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($penerimaan->fotos as $foto)
                        <a href="{{ $foto->url }}" target="_blank">
                            <img src="{{ $foto->url }}" style="width:60px;height:60px;object-fit:cover;border-radius:6px;border:1px solid #e9ecef;cursor:pointer;">
                        </a>
                        @endforeach
                    </div>
                    @else
                    <p class="text-muted mb-0 fs-13"><i class="bx bx-image-alt me-1"></i>Tidak ada foto.</p>
                    @endif
                </div>
            </div>
        </div>

        {{-- Tabel Item --}}
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="card-title mb-0"><i class="bx bx-package me-2 text-primary"></i>Daftar Barang</div>
                    <span class="badge bg-primary-transparent fs-12">
                        {{ $grouped->count() }} jenis &middot; {{ number_format($penerimaan->items->sum('qty_diterima')) }} pcs total
                    </span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="tblItems" class="table mb-0" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="text-center" 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:90px">Qty Pesan</th>
                                    <th class="text-center" style="width:90px">Qty Terima</th>
                                    <th class="text-center" style="width:90px">Kondisi</th>
                                    <th class="text-center" style="width:80px">Detail LOT</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($grouped as $no => $lots)
                                @php
                                    $first    = $lots->first();
                                    $totalQty = $lots->sum('qty_diterima');
                                    $hasRusak = $lots->contains(fn($l) => $l->kondisi === 'rusak');
                                @endphp
                                <tr>
                                    <td class="text-center text-muted">{{ $no + 1 }}</td>
                                    <td>
                                        <div class="fw-semibold">{{ $first->nama_barang }}</div>
                                        @if($first->kode_barang)
                                        <div class="text-muted" style="font-size:.78rem">{{ $first->kode_barang }}</div>
                                        @endif
                                    </td>
                                    <td class="text-muted">{{ $first->merek_barang ?: '—' }}</td>
                                    <td class="text-muted">{{ $first->ukuran ?: '—' }}</td>
                                    <td class="text-center">{{ $first->qty_pesan ?: '—' }}</td>
                                    <td class="text-center fw-semibold text-primary">{{ number_format($totalQty) }}</td>
                                    <td class="text-center">
                                        @if($hasRusak)
                                            <span class="badge bg-danger-transparent text-danger">Ada Rusak</span>
                                        @else
                                            <span class="badge bg-success-transparent text-success">Baik</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-primary px-2 py-1 btn-detail-lot"
                                            data-idx="{{ $no }}"
                                            title="Lihat Detail LOT">
                                            <i class="bx bx-layer"></i> {{ $lots->count() }}
                                        </button>
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="8" class="text-center text-muted py-4">Tidak ada item.</td></tr>
                                @endforelse
                            </tbody>
                            @if($grouped->isNotEmpty())
                            <tfoot>
                                <tr>
                                    <td colspan="5" class="text-end">Total Qty Diterima</td>
                                    <td class="text-center">{{ number_format($penerimaan->items->sum('qty_diterima')) }}</td>
                                    <td colspan="2"></td>
                                </tr>
                            </tfoot>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {{-- Riwayat Aktivitas --}}
        <div class="col-12">
            <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 p-0">
                    @if($riwayat->isEmpty())
                    <p class="text-muted fs-13 mb-0 p-3"><i class="bx bx-info-circle me-1"></i>Belum ada riwayat.</p>
                    @else
                    <ul class="list-group list-group-flush">
                        @foreach($riwayat as $log)
                        <li class="list-group-item px-3 py-2">
                            <div class="d-flex align-items-start gap-2">
                                <div class="flex-shrink-0 mt-1">
                                    @php
                                        $icon = match(true) {
                                            str_starts_with($log->description, 'Dibuat')    => 'bx-plus-circle text-primary',
                                            str_starts_with($log->description, 'Divalidasi') => 'bx-check-circle text-success',
                                            str_starts_with($log->description, 'Dihapus')   => 'bx-trash text-danger',
                                            str_starts_with($log->description, 'Dikoreksi') => 'bx-edit text-warning',
                                            default                                          => 'bx-edit-alt text-secondary',
                                        };
                                    @endphp
                                    <i class="bx {{ $icon }} fs-16"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold fs-13">{{ $log->description }}</div>
                                    <div class="text-muted fs-12">
                                        {{ $log->causer?->nama ?? 'Sistem' }}
                                        &middot; {{ $log->created_at->format('d-m-Y H:i') }}
                                    </div>
                                    @if($log->properties->has('perubahan') && count($log->properties['perubahan']))
                                    <ul class="mb-0 mt-1 ps-3" style="font-size:.79rem;color:#555">
                                        @foreach($log->properties['perubahan'] as $p)
                                        <li>{{ $p }}</li>
                                        @endforeach
                                    </ul>
                                    @endif
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                </div>
            </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-danger"></i> Preview PDF — {{ $penerimaan->nomor_penerimaan }}
                </h6>
                <div class="d-flex gap-2 ms-auto">
                    <a href="{{ route('gudang.penerimaan.cetak', $penerimaan->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>

{{-- Modal Detail LOT --}}
<div class="modal fade" id="modalLot" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <div>
                    <h6 class="modal-title fw-semibold mb-0" id="modalLotTitle"></h6>
                    <small class="text-muted" id="modalLotSub"></small>
                </div>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table mb-0" id="modalLot">
                        <thead>
                            <tr>
                                <th style="width:36px">#</th>
                                <th>No. LOT</th>
                                <th>No. Serial</th>
                                <th>Tgl. Kedaluwarsa</th>
                                <th class="text-center" style="width:70px">Qty</th>
                                <th class="text-center" style="width:90px">Kondisi</th>
                            </tr>
                        </thead>
                        <tbody id="modalLotBody"></tbody>
                        <tfoot id="modalLotFoot"></tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

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

$('#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 = '';
});

@php
$lotDataJs = $grouped->map(function ($lots) {
    return [
        'nama'     => $lots->first()->nama_barang,
        'kode'     => $lots->first()->kode_barang,
        'qtyPesan' => $lots->first()->qty_pesan,
        'total'    => $lots->sum('qty_diterima'),
        'lots'     => $lots->map(fn($l) => [
            'no_lot'   => $l->no_lot,
            'no_serial'=> $l->no_serial,
            'exp'      => $l->tanggal_kedaluwarsa?->format('d-m-Y'),
            'qty'      => $l->qty_diterima,
            'kondisi'  => $l->kondisi ?? 'baik',
        ])->values(),
    ];
})->values();
@endphp
const lotDataView = {!! json_encode($lotDataJs) !!};

$(document).on('click', '.btn-detail-lot', function () {
    const idx  = $(this).data('idx');
    const d    = lotDataView[idx];
    if (!d) return;

    $('#modalLotTitle').text(d.kode + ' — ' + d.nama);
    $('#modalLotSub').text(
        d.qtyPesan > 0
            ? `Qty PO: ${d.qtyPesan} pcs  |  Total Diterima: ${d.total} pcs`
            : `Total Diterima: ${d.total} pcs`
    );

    let rows = '';
    d.lots.forEach(function (lot, i) {
        const kondisi = lot.kondisi === 'rusak'
            ? '<span class="badge bg-danger-transparent text-danger">Rusak</span>'
            : '<span class="badge bg-success-transparent text-success">Baik</span>';
        rows += `<tr>
            <td class="text-center text-muted">${i + 1}</td>
            <td>${lot.no_lot || '—'}</td>
            <td>${lot.no_serial || '—'}</td>
            <td>${lot.exp || '—'}</td>
            <td class="text-center fw-semibold">${lot.qty}</td>
            <td class="text-center">${kondisi}</td>
        </tr>`;
    });
    $('#modalLotBody').html(rows);
    $('#modalLotFoot').html(`<tr>
        <td colspan="4" class="text-end">Total</td>
        <td class="text-center">${d.total}</td>
        <td></td>
    </tr>`);

    new bootstrap.Modal(document.getElementById('modalLot')).show();
});

$('#btnSelesaikan').on('click', function () {
    Swal.fire({
        title: 'Validasi penerimaan ini?',
        text: 'Stok akan otomatis diperbarui dan dokumen tidak bisa diedit lagi.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#10b981',
        confirmButtonText: 'Ya, Validasi',
        cancelButtonText: 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;
        $('#btnSelesaikan').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memproses...');
        $.ajax({
            url: BASE_URL + '/gudang/penerimaan-barang/{{ $penerimaan->id }}/selesaikan',
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function () { location.reload(); },
            error: function (xhr) {
                $('#btnSelesaikan').prop('disabled', false).html('<i class="bx bx-check-circle me-1"></i> Validasi');
                Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message || 'Gagal memvalidasi.' });
            }
        });
    });
});

$('#btnHapus').on('click', function () {
    Swal.fire({
        title: 'Hapus dokumen ini?',
        text: 'Data yang dihapus tidak dapat dikembalikan.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc2626',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;
        $.ajax({
            url: BASE_URL + '/gudang/penerimaan-barang/{{ $penerimaan->id }}',
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function () { window.location.href = BASE_URL + '/gudang/penerimaan-barang'; },
            error: function (xhr) { Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message || 'Gagal menghapus.' }); }
        });
    });
});
</script>
@endsection