@extends('layouts.master')

@section('title', 'Detail Pemakaian Barang')

@section('styles')
<style>
    .info-label { font-size:.8rem; color:#888; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
    .info-value { font-size:.92rem; color:#222; }
    #tblShowItems thead th { background:#f8f5ff; color:#7c3aed; border:1px solid #e9d5ff; white-space:nowrap; font-size:.83rem; vertical-align:middle; }
    #tblShowItems tbody td { border:1px solid #f0e8ff; font-size:.83rem; vertical-align:middle; }
    #tblShowItems tfoot td { background:#faf5ff; font-weight:600; border:1px solid #e9d5ff; font-size:.85rem; }
    .timeline-step { border-left:3px solid #e9ecef; padding-left:16px; margin-bottom:12px; position:relative; }
    .timeline-step::before { content:''; position:absolute; left:-6px; top:4px; width:10px; height:10px; border-radius:50%; background:#ced4da; }
    .timeline-step.done::before { background: var(--tl-color, #7c3aed); }
    .timeline-step.active::before { background: var(--tl-color, #dc6f00); }
</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">Detail Pemakaian Barang</p>
            <span class="fs-13 text-muted">Penjualan &rarr; Pemakaian Barang &rarr; {{ $kso->nomor_penjualan_kso }}</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0 flex-wrap">
            {{-- Sales: draft --}}
            @if($kso->isDraft())
            @can('pemakaian_barang.validasi')
            <button class="btn btn-success btn-sm" onclick="doValidasi()">
                <i class="bx bx-check-circle me-1"></i> Pemakaian Divalidasi
            </button>
            @endcan
            @can('pemakaian_barang.edit')
            <a href="{{ route('penjualan.pemakaian-barang.edit', $kso->id) }}" class="btn btn-warning btn-sm">
                <i class="bx bx-edit me-1"></i> Edit
            </a>
            @endcan
            @can('pemakaian_barang.delete')
            <button class="btn btn-outline-danger btn-sm" onclick="doHapus()">
                <i class="bx bx-trash me-1"></i> Hapus
            </button>
            @endcan
            @endif

            @if($kso->status === 'divalidasi')
            @can('pemakaian_barang.validasi')
            <button class="btn btn-warning btn-sm" onclick="doRevisi()">
                <i class="bx bx-undo me-1"></i> Revisi ke Draft
            </button>
            @endcan
            @endif

            @if(in_array($kso->status, ['divalidasi','valid','selesai']))
            <button type="button" class="btn btn-primary btn-sm" onclick="bukaModalCetak()">
                <i class="bx bx-printer me-1"></i> Cetak
            </button>
            @endif
            <a href="{{ route('penjualan.pemakaian-barang.index') }}" class="btn btn-secondary btn-sm">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
        </div>
    </div>

    @if($kso->alasan_batal)
    <div class="alert alert-danger mb-3">
        <strong><i class="bx bx-x-circle me-1"></i> Dibatalkan:</strong>
        <span class="text-dark">{{ $kso->alasan_batal }}</span>
        <small class="text-muted ms-2">— oleh {{ $kso->dibatalkanOleh?->nama ?? '?' }} {{ $kso->dibatalkan_at?->locale('id')->diffForHumans() }}</small>
    </div>
    @endif

    @if($kso->alasan_kembali)
    <div class="alert alert-warning mb-3">
        <strong><i class="bx bx-info-circle me-1"></i> Catatan pengembalian:</strong>
        <span class="text-dark">{{ $kso->alasan_kembali }}</span>
    </div>
    @endif

    {{-- Row 1: Info + Riwayat Aktivitas --}}
    <div class="row g-3 mb-3">
        {{-- Info Pemakaian --}}
        <div class="col-md-8">
            <div class="card custom-card h-100">
                <div class="card-header">
                    <div class="card-title mb-0"><i class="bx bx-receipt me-2 text-primary"></i>Informasi Pemakaian Barang</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="info-label">Nomor KSO</div>
                            <div class="info-value fw-bold text-primary">{{ $kso->nomor_penjualan_kso }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="info-label">Status</div>
                            <div>
                                @php $st = match($kso->status) {
                                    'draft_pemakaian'   => ['secondary','Draft Pemakaian'],
                                    'direvisi_ke_draft' => ['warning','Direvisi ke Draft'],
                                    'divalidasi'      => ['primary','Divalidasi'],
                                    'valid'           => ['warning','Upload eFaktur PPN'],
                                    'selesai'         => ['success','Selesai'],
                                    default           => ['secondary','-'],
                                }; @endphp
                                <span class="badge bg-{{ $st[0] }} fs-13">{{ $st[1] }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="info-label">Tgl. Transaksi</div>
                            <div class="info-value">{{ $kso->tanggal_transaksi->format('d/m/Y') }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="info-label">Faskes KSO</div>
                            <div class="info-value fw-semibold">{{ $kso->nama_faskes }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="info-label">Nama Pasien</div>
                            <div class="info-value">{{ $kso->nama_pasien }}
                                @if($kso->jenis_pasien)<span class="badge bg-light text-dark border ms-1">{{ $kso->jenis_pasien }}</span>@endif
                            </div>
                        </div>
                        @if($kso->nama_dokter)
                        <div class="col-md-4">
                            <div class="info-label">Dokter</div>
                            <div class="info-value">{{ $kso->nama_dokter }}</div>
                        </div>
                        @endif
                        @if($kso->no_rm)
                        <div class="col-md-4">
                            <div class="info-label">No. Rekam Medis</div>
                            <div class="info-value">{{ $kso->no_rm }}</div>
                        </div>
                        @endif
                        <div class="col-md-4">
                            <div class="info-label">Tgl. Pemakaian</div>
                            <div class="info-value">{{ $kso->tgl_pemakaian->format('d/m/Y') }}</div>
                        </div>
                        @if($kso->nomor_po)
                        <div class="col-md-4">
                            <div class="info-label">No. PO</div>
                            <div class="info-value">{{ $kso->nomor_po }}</div>
                        </div>
                        @endif
                        @if($kso->tanggal_penjualan)
                        <div class="col-md-4">
                            <div class="info-label">Tgl. Penjualan</div>
                            <div class="info-value">{{ $kso->tanggal_penjualan->format('d/m/Y') }}</div>
                        </div>
                        @endif
                        @if($kso->tanggal_jatuh_tempo)
                        <div class="col-md-4">
                            <div class="info-label">Jatuh Tempo</div>
                            <div class="info-value">{{ $kso->tanggal_jatuh_tempo->format('d/m/Y') }}</div>
                        </div>
                        @endif
                        @if($kso->catatan)
                        <div class="col-12">
                            <div class="info-label">Catatan</div>
                            <div class="info-value">{{ $kso->catatan }}</div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Riwayat Aktivitas --}}
        <div class="col-md-4">
            <div class="card custom-card h-100">
                <div class="card-header py-2">
                    <div class="card-title mb-0 fs-14"><i class="bx bx-history me-1"></i>Riwayat Aktivitas</div>
                </div>
                <div class="card-body py-2">
                    {{-- Aktivitas Pemakaian --}}
                    <div class="text-uppercase fw-semibold mb-2" style="font-size:.7rem;color:#aaa;letter-spacing:.5px">Pemakaian Barang</div>
                    <div class="timeline-step done">
                        <div class="fw-semibold small">Draft dibuat</div>
                        @if($kso->dibuatOleh)
                        <div class="text-muted" style="font-size:.78rem">oleh {{ $kso->dibuatOleh->nama }}</div>
                        @endif
                        <div class="text-muted" style="font-size:.78rem">{{ $kso->created_at->format('d/m/Y H:i') }}</div>
                    </div>

                    @foreach($activities as $act)
                    @php
                        $isRevisi = str_contains($act->description, 'direvisi');
                        $icon     = $isRevisi ? 'active' : 'done';
                        $color    = $isRevisi ? '#dc6f00' : '#7c3aed';
                    @endphp
                    <div class="timeline-step {{ $icon }}" style="--tl-color:{{ $color }}">
                        <div class="fw-semibold small" style="color:{{ $color }}">{{ $act->description }}</div>
                        <div class="text-muted" style="font-size:.78rem">oleh {{ $act->causer?->nama ?? '—' }}</div>
                        <div class="text-muted" style="font-size:.78rem">{{ $act->created_at->format('d/m/Y H:i') }}</div>
                        @if($isRevisi && !empty($act->properties['faktur_terdampak']))
                        <div style="font-size:.75rem;color:#b45309;margin-top:2px">
                            Dilepas dari: {{ implode(', ', $act->properties['faktur_terdampak']) }}
                        </div>
                        @endif
                    </div>
                    @endforeach

                    @if($activities->isEmpty())
                    <div class="text-muted small py-2">Belum ada riwayat aktivitas tercatat.</div>
                    @endif

                    {{-- Aktivitas Faktur Penjualan KSO --}}
                    @if($kso->faktur->isNotEmpty())
                    <hr class="my-2">
                    <div class="text-uppercase fw-semibold mb-2" style="font-size:.7rem;color:#aaa;letter-spacing:.5px">
                        Faktur Penjualan KSO
                        @foreach($kso->faktur as $fkt)
                        <a href="{{ route('penjualan.faktur-kso.show', $fkt->id) }}" class="ms-1 text-primary" style="font-size:.72rem">{{ $fkt->nomor }}</a>{{ !$loop->last ? ',' : '' }}
                        @endforeach
                    </div>

                    @if($fakturActivities->isEmpty())
                    <div class="text-muted small py-1">Belum ada aktivitas faktur tercatat.</div>
                    @else
                    @foreach($fakturActivities as $act)
                    @php
                        $color2 = str_contains($act->description, 'batal') ? '#dc3545' : '#0d6efd';
                    @endphp
                    <div class="timeline-step done" style="--tl-color:{{ $color2 }}">
                        <div class="fw-semibold small" style="color:{{ $color2 }}">{{ $act->description }}</div>
                        <div class="text-muted" style="font-size:.78rem">oleh {{ $act->causer?->nama ?? '—' }}</div>
                        <div class="text-muted" style="font-size:.78rem">{{ $act->created_at->format('d/m/Y H:i') }}</div>
                    </div>
                    @endforeach
                    @endif
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel Barang --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-package me-2 text-primary"></i>Daftar Barang</div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="tblShowItems" class="table mb-0">
                    <thead>
                        <tr>
                            <th class="text-center" style="width:40px">No.</th>
                            <th>Barang</th>
                            <th class="text-center">Satuan</th>
                            <th class="text-center">Qty</th>
                            <th>No. Transaksi</th>
                            <th class="text-end">Harga Jual</th>
                            <th class="text-end">Subtotal</th>
                            <th>Lot (Stok KSO)</th>
                            <th>Surat Kirim</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($kso->items as $i => $item)
                        <tr>
                            <td class="text-center">{{ $i + 1 }}</td>
                            <td>
                                <div class="fw-semibold">{{ $item->nama_barang }}</div>
                                @if($item->barang?->manufaktur)<div class="text-muted small">{{ $item->barang->manufaktur }}</div>@endif
                                @php
                                    $jenisNie = $item->barang?->jenis_nie ?? $item->barang?->merekBarang?->jenis_nie;
                                    $noNie    = $item->barang?->no_nie    ?? $item->barang?->merekBarang?->no_nie;
                                @endphp
                                @if($jenisNie || $noNie)
                                <div class="text-muted small">{{ $jenisNie }}{{ $jenisNie && $noNie ? ' · ' : '' }}{{ $noNie }}</div>
                                @endif
                            </td>
                            <td class="text-center">{{ $item->satuan }}</td>
                            <td class="text-center fw-semibold">{{ $item->qty }}</td>
                            <td>{{ $item->no_transaksi ?: '—' }}</td>
                            <td class="text-end">Rp {{ number_format($item->harga_jual, 0, ',', '.') }}</td>
                            <td class="text-end fw-semibold">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</td>
                            <td>
                                @if($item->itemStoks->isNotEmpty())
                                    @foreach($item->itemStoks as $lot)
                                    <div class="small">
                                        <span class="badge bg-light text-dark border">
                                            {{ $lot->no_lot ?: 'Tanpa lot' }}@if($lot->stok?->no_serial) / SN: {{ $lot->stok->no_serial }}@endif — ED: {{ $lot->tanggal_kedaluwarsa?->format('d/m/Y') ?? '—' }}
                                            — Qty: {{ $lot->qty_ambil }}
                                        </span>
                                    </div>
                                    @endforeach
                                @else
                                <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td>{{ $item->nomor_kirim ?: '—' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="8" class="text-end">Subtotal</td>
                            <td class="text-end">Rp {{ number_format($kso->subtotal, 0, ',', '.') }}</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="8" class="text-end text-muted">DPP (11/12 × Subtotal)</td>
                            <td class="text-end text-muted">Rp {{ number_format($kso->dpp, 0, ',', '.') }}</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="8" class="text-end text-muted">PPN 12%</td>
                            <td class="text-end text-muted">Rp {{ number_format($kso->ppn, 0, ',', '.') }}</td>
                            <td></td>
                        </tr>
                        <tr class="fw-bold fs-15">
                            <td colspan="8" class="text-end">Total Harga</td>
                            <td class="text-end text-primary">Rp {{ number_format($kso->total_harga, 0, ',', '.') }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    {{-- Foto --}}
    <div class="card custom-card mt-3">
        <div class="card-header py-2 d-flex align-items-center justify-content-between">
            <div class="card-title mb-0 fs-14"><i class="bx bx-image me-1"></i>Foto</div>
            <label for="inputFotoUpload" class="btn btn-outline-primary btn-sm px-2 py-1 mb-0" style="cursor:pointer">
                <i class="bx bx-upload me-1"></i><span id="lblUploadFoto">{{ $kso->foto_path ? 'Ganti' : 'Upload' }}</span>
            </label>
            <input type="file" id="inputFotoUpload" accept="image/*" class="d-none" onchange="uploadFoto(this)">
        </div>
        <div class="card-body p-2" id="fotoContainer">
            @if($kso->foto_path)
            <div class="position-relative d-inline-block">
                <img id="fotoPreview" src="{{ Storage::url($kso->foto_path) }}" class="img-fluid rounded" style="max-height:280px;object-fit:cover">
                <button type="button" onclick="hapusFoto()" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 px-1 py-0" title="Hapus foto"><i class="bx bx-x"></i></button>
            </div>
            @else
            <div id="fotoEmpty" class="text-center text-muted py-4 fs-13">
                <i class="bx bx-image fs-2 d-block mb-1"></i>Belum ada foto
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Modal Cetak PDF --}}
<div class="modal fade" id="modalCetakPdf" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content" style="height:90vh">
            <div class="modal-header py-2">
                <h6 class="modal-title"><i class="bx bx-printer me-1"></i>Cetak Pemakaian Barang</h6>
                <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="cetakFrame" src="" style="width:100%;height:100%;border:none"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const BASE_URL      = "{{ url('/') }}";
const CSRF          = "{{ csrf_token() }}";
const KSO_ID        = {{ $kso->id }};
const URL_CETAK     = '{{ route("penjualan.pemakaian-barang.cetak", $kso->id) }}';
const URL_FOTO      = '{{ route("penjualan.pemakaian-barang.upload-foto", $kso->id) }}';
const URL_HAPUS_FOTO= '{{ route("penjualan.pemakaian-barang.hapus-foto", $kso->id) }}';

function bukaModalCetak() {
    const frame = document.getElementById('cetakFrame');
    if (!frame.src || frame.src === 'about:blank' || frame.src === window.location.href) frame.src = URL_CETAK;
    new bootstrap.Modal(document.getElementById('modalCetakPdf')).show();
}
document.getElementById('modalCetakPdf').addEventListener('hidden.bs.modal', function () {
    document.getElementById('cetakFrame').src = 'about:blank';
});

function doValidasi() {
    Swal.fire({ title:'Validasi Pemakaian?', text:'Stok KSO akan dikurangi sesuai daftar barang.',
        icon:'question', showCancelButton:true, confirmButtonColor:'#198754',
        confirmButtonText:'Ya, Validasi', cancelButtonText:'Batal' })
    .then(r => { if (!r.isConfirmed) return; doPost(`${BASE_URL}/pemakaian-barang/${KSO_ID}/validasi`); });
}

function doRevisi() {
    Swal.fire({ title:'Revisi Pemakaian?',
        text:'Status akan kembali ke Draft dan stok KSO dikembalikan. Jika pemakaian ini sudah ada di Faktur KSO draft, pemakaian akan dilepas otomatis dan total faktur diperbarui.',
        icon:'warning', showCancelButton:true, confirmButtonColor:'#f59e0b',
        confirmButtonText:'Ya, Revisi', cancelButtonText:'Batal' })
    .then(r => {
        if (!r.isConfirmed) return;
        $.ajax({
            url: `${BASE_URL}/pemakaian-barang/${KSO_ID}/revisi`,
            method: 'POST',
            data: { _token: CSRF },
            success: res => {
                let html = 'Pemakaian berhasil dikembalikan ke Draft dan stok KSO dikembalikan.';
                if (res.faktur_terdampak && res.faktur_terdampak.length) {
                    const links = res.faktur_terdampak.map(f =>
                        `<a href="${BASE_URL}/faktur-penjualan-kso/${f.id}" class="fw-semibold">${f.nomor}</a>`
                    ).join(', ');
                    html += `<br><br><i class="bx bx-info-circle text-warning"></i> Pemakaian dilepas dari Faktur: ${links}. Tambahkan kembali setelah pemakaian divalidasi ulang.`;
                }
                Swal.fire({ icon:'success', title:'Berhasil', html, confirmButtonText:'OK' })
                    .then(() => location.reload());
            },
            error: xhr => Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error'),
        });
    });
}

function uploadFoto(input) {
    if (!input.files[0]) return;
    const fd = new FormData();
    fd.append('foto', input.files[0]);
    fd.append('_token', CSRF);
    $.ajax({ url: URL_FOTO, method: 'POST', data: fd, processData: false, contentType: false,
        success: r => {
            const c = document.getElementById('fotoContainer');
            c.innerHTML = `<div class="position-relative">
                <img id="fotoPreview" src="${r.url}" class="img-fluid rounded" style="width:100%;object-fit:cover;max-height:220px">
                <button type="button" onclick="hapusFoto()" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 px-1 py-0" title="Hapus foto"><i class="bx bx-x"></i></button>
            </div>`;
            document.getElementById('lblUploadFoto').textContent = 'Ganti';
        },
        error: () => Swal.fire('Gagal', 'Upload foto gagal.', 'error'),
    });
    input.value = '';
}
function hapusFoto() {
    Swal.fire({ title:'Hapus foto?', icon:'question', showCancelButton:true,
        confirmButtonColor:'#dc3545', confirmButtonText:'Ya, Hapus', cancelButtonText:'Batal' })
    .then(r => {
        if (!r.isConfirmed) return;
        $.ajax({ url: URL_HAPUS_FOTO, method: 'POST', data: { _token: CSRF, _method: 'DELETE' },
            success: () => {
                document.getElementById('fotoContainer').innerHTML =
                    `<div id="fotoEmpty" class="text-center text-muted py-4 fs-13"><i class="bx bx-image fs-2 d-block mb-1"></i>Belum ada foto</div>`;
                document.getElementById('lblUploadFoto').textContent = 'Upload';
            },
            error: () => Swal.fire('Gagal', 'Gagal menghapus foto.', 'error'),
        });
    });
}

function doHapus() {
    Swal.fire({ title:'Hapus Draft?', text:'Data ini akan dihapus permanen.',
        icon:'warning', showCancelButton:true, confirmButtonColor:'#dc3545',
        confirmButtonText:'Ya, Hapus', cancelButtonText:'Batal' })
    .then(r => {
        if (!r.isConfirmed) return;
        $.ajax({ url:`${BASE_URL}/pemakaian-barang/${KSO_ID}`, method:'POST',
            data:{ _token:CSRF, _method:'DELETE' },
            success: () => window.location.href = BASE_URL + '/pemakaian-barang',
            error:   () => Swal.fire('Gagal','Tidak dapat menghapus.','error') });
    });
}

function doPost(url, extraData = {}) {
    $.ajax({
        url, method: 'POST',
        data: { _token: CSRF, ...extraData },
        success: r => {
            if (r.success) {
                Swal.fire({ icon:'success', title:'Berhasil', timer:1500, showConfirmButton:false })
                    .then(() => location.reload());
            }
        },
        error: xhr => Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error'),
    });
}
</script>
@endsection