@extends('layouts.app')

@section('title', 'Riwayat & Pemakaian Stok — ' . $item->nama_barang)

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb">
                <span>Manajemen Inventaris</span>
                <i class="bi bi-chevron-right" aria-hidden="true"></i>
                <a href="{{ route('pkbm.inventaris.barang-habis-pakai') }}">Barang Habis Pakai</a>
                <i class="bi bi-chevron-right" aria-hidden="true"></i>
                Detail &amp; Riwayat Pemakaian
            </p>
            <h1 class="pkbm-dashboard__title">{{ $item->nama_barang }}</h1>
            <p class="pkbm-dashboard__subtitle">Pantau mutasi masuk/keluar dan catat pemakaian barang operasional secara tertib.</p>
        </div>
        <div class="flex shrink-0 items-start gap-2">
            <a href="{{ route('pkbm.inventaris.barang-habis-pakai') }}" class="sp-btn-secondary">
                <i class="bi bi-arrow-left" aria-hidden="true"></i>Kembali
            </a>
            <button type="button" data-open-create class="sp-btn-primary" @disabled($item->stok_saat_ini <= 0)>
                <i class="bi bi-box-arrow-right" aria-hidden="true"></i>Catat Pemakaian
            </button>
        </div>
    </header>

    @include('pkbm.inventaris.partials.navigation', ['menus' => $availableMenus])

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
            <span>{{ session('status') }}</span>
        </div>
    @endif

    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Terjadi kesalahan pada data pemakaian.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    {{-- Stat Cards --}}
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl {{ $item->stok_saat_ini > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }} text-xl">
                <i class="bi bi-stack" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Sisa Stok Berjalan</span>
                <span class="text-2xl font-bold {{ $item->stok_saat_ini > 0 ? 'text-emerald-700' : 'text-rose-700' }}">
                    {{ number_format($item->stok_saat_ini, 0, ',', '.') }}
                    <span class="text-sm font-normal text-slate-500">{{ $item->satuan }}</span>
                </span>
            </div>
        </div>
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-blue-100 text-xl text-blue-700">
                <i class="bi bi-arrow-down-left" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Total Masuk</span>
                <span class="text-2xl font-bold text-slate-800">
                    +{{ number_format($totalMasuk, 0, ',', '.') }}
                    <span class="text-sm font-normal text-slate-500">{{ $item->satuan }}</span>
                </span>
            </div>
        </div>
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-rose-100 text-xl text-rose-700">
                <i class="bi bi-arrow-up-right" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Total Terpakai</span>
                <span class="text-2xl font-bold text-slate-800">
                    -{{ number_format($totalKeluar, 0, ',', '.') }}
                    <span class="text-sm font-normal text-slate-500">{{ $item->satuan }}</span>
                </span>
            </div>
        </div>
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-indigo-100 text-xl text-indigo-700">
                <i class="bi bi-calendar3" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Pembelian Terakhir</span>
                <span class="text-sm font-bold text-slate-800">
                    {{ $item->tgl_beli ? \Carbon\Carbon::parse($item->tgl_beli)->format('d/m/Y') : '—' }}
                </span>
                <span class="block text-xs text-slate-500">{{ $item->sumber_dana ?: 'Sumber dana tidak dicatat' }}</span>
            </div>
        </div>
    </div>

    @if ($item->stok_saat_ini <= 0)
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
            <span>Stok habis! Silakan tambah stok baru melalui halaman <a href="{{ route('pkbm.inventaris.barang-habis-pakai') }}" class="font-semibold underline">Barang Habis Pakai</a>.</span>
        </div>
    @endif

    {{-- Tabel Riwayat Mutasi --}}
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex items-center justify-between">
            <div>
                <h2 class="sp-section-title"><i class="bi bi-clock-history me-2 text-blue-600"></i>Riwayat Mutasi Stok</h2>
                <p class="mt-1 text-xs text-slate-500">Seluruh catatan stok masuk dan pengeluaran barang ini secara kronologis.</p>
            </div>
            <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ $logs->count() }} Transaksi</span>
        </div>

        <div class="overflow-x-auto">
            <table class="sp-table min-w-[52rem]">
                <thead>
                    <tr>
                        <th class="w-14 text-center">No.</th>
                        <th>Tanggal</th>
                        <th class="text-center">Jenis Mutasi</th>
                        <th class="text-center">Jumlah</th>
                        <th>Keterangan / Penerima</th>
                        <th class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($logs as $log)
                        <tr>
                            <td class="text-center">{{ $loop->iteration }}</td>
                            <td>{{ \Carbon\Carbon::parse($log->tgl)->format('d/m/Y') }}</td>
                            <td class="text-center">
                                @if ($log->tipe === 'masuk')
                                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">
                                        <i class="bi bi-arrow-down-left" aria-hidden="true"></i>Stok Masuk
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 rounded-full bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-700">
                                        <i class="bi bi-arrow-up-right" aria-hidden="true"></i>Pemakaian
                                    </span>
                                @endif
                            </td>
                            <td class="text-center font-bold {{ $log->tipe === 'masuk' ? 'text-emerald-700' : 'text-rose-700' }}">
                                {{ $log->tipe === 'masuk' ? '+' : '-' }}{{ number_format($log->jumlah, 0, ',', '.') }} {{ $item->satuan }}
                            </td>
                            <td class="text-slate-700">
                                {{ $log->keterangan ?: '—' }}
                            </td>
                            <td class="text-right">
                                <form method="POST" action="{{ route('pkbm.inventaris.barang-habis-pakai.log.destroy', ['id' => $item->id_stok, 'logId' => $log->id_log]) }}" class="inline" onsubmit="return confirm('Hapus catatan mutasi ini? Stok master akan disesuaikan kembali secara otomatis.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="sp-btn-secondary px-2.5 py-1 text-xs text-rose-600 hover:border-rose-200 hover:bg-rose-50" title="Batalkan & hapus log mutasi">
                                        <i class="bi bi-trash" aria-hidden="true"></i>Batalkan
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-sm text-slate-500">
                                Belum ada riwayat mutasi stok untuk barang ini.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>

{{-- Modal Catat Pemakaian --}}
<dialog id="modal-catat-pakai" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-pakai-title">
    <form method="POST" action="{{ route('pkbm.inventaris.barang-habis-pakai.pemakaian.store', $item->id_stok) }}">
        @csrf
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-box-arrow-right"></i></span>
                <div>
                    <h2 id="modal-pakai-title" class="sp-section-title">Catat Pemakaian Stok</h2>
                    <p class="mt-1 text-xs text-slate-500">
                        Stok <strong>{{ $item->nama_barang }}</strong> akan berkurang otomatis.
                        Sisa saat ini: <strong class="text-emerald-700">{{ $item->stok_saat_ini }} {{ $item->satuan }}</strong>.
                    </p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>

        <div class="grid gap-4 p-5 sm:grid-cols-2">
            <div>
                <label for="jumlah-pakai" class="sp-form-label">Jumlah Pemakaian (Maks: {{ $item->stok_saat_ini }})</label>
                <div class="relative mt-1">
                    <input id="jumlah-pakai" name="jumlah_pakai" type="number" min="1" max="{{ max(1, (int) $item->stok_saat_ini) }}" value="{{ old('jumlah_pakai', 1) }}" required class="sp-form-control px-3 py-2 pr-16 text-sm">
                    <span class="absolute inset-y-0 right-3 flex items-center text-xs font-semibold text-slate-400">{{ $item->satuan }}</span>
                </div>
            </div>
            <div>
                <label for="tgl-pakai" class="sp-form-label">Tanggal Pemakaian</label>
                <input id="tgl-pakai" name="tgl_pakai" type="date" value="{{ old('tgl_pakai', now()->toDateString()) }}" required class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>
            <div>
                <label for="penerima" class="sp-form-label">Nama Penerima / Pemakai</label>
                <input id="penerima" name="penerima" type="text" maxlength="100" value="{{ old('penerima') }}" required placeholder="Contoh: Bu Siti (Guru) / Petugas TU" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>
            <div>
                <label for="keperluan" class="sp-form-label">Keperluan / Keterangan <span class="font-normal text-slate-400">(opsional)</span></label>
                <input id="keperluan" name="keperluan" type="text" maxlength="255" value="{{ old('keperluan') }}" placeholder="Contoh: Ujian Paket C / Rapat Tutor" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>
        </div>

        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check-lg" aria-hidden="true"></i>Keluarkan Stok</button>
        </div>
    </form>
</dialog>

@push('scripts')
<script>
(() => {
    const modal = document.getElementById('modal-catat-pakai');

    document.querySelector('[data-open-create]')?.addEventListener('click', () => {
        modal?.showModal();
    });

    document.querySelectorAll('[data-close-dialog]').forEach((btn) => {
        btn.addEventListener('click', () => {
            btn.closest('dialog')?.close();
        });
    });

    modal?.addEventListener('click', (event) => {
        if (event.target === modal) modal.close();
    });
})();
</script>
@endpush
@endsection