@extends('layouts.app')

@section('title', 'Inventaris Barang Modal')

@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>Barang Modal</p>
            <h1 class="pkbm-dashboard__title">Inventaris Barang Modal</h1>
            <p class="pkbm-dashboard__subtitle">Kelola aset tetap, peralatan pembelajaran, dan sarana prasarana PKBM.</p>
        </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 aset.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <!-- Kartu Statistik -->
    <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 bg-blue-100 text-xl text-blue-700">
                <i class="bi bi-box-seam" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Total Jenis Aset</span>
                <span class="text-2xl font-bold text-slate-800">{{ number_format($totalAset, 0, ',', '.') }}</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-layers" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Total Unit / Fisik</span>
                <span class="text-2xl font-bold text-slate-800">{{ number_format($totalUnit, 0, ',', '.') }}</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-emerald-100 text-xl text-emerald-700">
                <i class="bi bi-check-circle" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Kondisi Baik</span>
                <span class="text-2xl font-bold text-emerald-700">{{ number_format($totalBaik, 0, ',', '.') }}</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-exclamation-triangle" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Perlu Perbaikan / Rusak</span>
                <span class="text-2xl font-bold text-rose-700">{{ number_format($totalRusak, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>

    <!-- Filter & Aksi Tambah -->
    <section class="sp-card p-4">
        <form method="GET" class="flex flex-wrap items-end justify-between gap-3">
            <div class="flex flex-wrap items-end gap-3">
                <label class="sp-form-label mb-0">Pencarian
                    <input type="text" name="q" value="{{ $q }}" placeholder="Nama, kode, atau merek..." class="sp-form-control mt-1 px-3 py-2 text-sm">
                </label>
                <label class="sp-form-label mb-0">Kondisi
                    <select name="kondisi" class="sp-form-control mt-1 px-3 py-2 text-sm">
                        <option value="">Semua kondisi</option>
                        <option value="Baik" @selected($kondisi === 'Baik')>Baik</option>
                        <option value="Rusak Ringan" @selected($kondisi === 'Rusak Ringan')>Rusak Ringan</option>
                        <option value="Rusak Berat" @selected($kondisi === 'Rusak Berat')>Rusak Berat</option>
                    </select>
                </label>
                <label class="sp-form-label mb-0">Tahun Anggaran
                    <select name="tahun" class="sp-form-control mt-1 px-3 py-2 text-sm">
                        <option value="">Semua tahun</option>
                        @foreach ($years as $y)
                            <option value="{{ $y }}" @selected($tahun === (string) $y)>{{ $y }}</option>
                        @endforeach
                    </select>
                </label>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-funnel" aria-hidden="true"></i>Filter</button>
                @if ($q || $kondisi || $tahun)
                    <a href="{{ route('pkbm.inventaris.barang-modal') }}" class="sp-btn-secondary">Reset</a>
                @endif
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('pkbm.inventaris.barang-modal.label', ['tahun' => $tahun]) }}" target="_blank" rel="noopener" class="sp-btn-secondary">
                    <i class="bi bi-qr-code" aria-hidden="true"></i>Cetak Label
                </a>
                <a href="{{ route('pkbm.inventaris.barang-modal.print', ['kondisi' => $kondisi, 'tahun' => $tahun]) }}" target="_blank" rel="noopener" class="sp-btn-secondary">
                    <i class="bi bi-printer" aria-hidden="true"></i>Cetak Laporan
                </a>
                <button type="button" data-open-create class="sp-btn-primary">
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah Aset
                </button>
            </div>
        </form>
    </section>

    <!-- Tabel Daftar Aset -->
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Daftar Aset Barang Modal</h2>
            <p class="mt-1 text-xs text-slate-500">Seluruh sarana dan prasarana terdaftar dalam buku inventaris lembaga.</p>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[76rem]">
                <thead>
                    <tr>
                        <th class="w-14 text-center">No.</th>
                        <th>Kode & Nama Barang</th>
                        <th>Merek / Tipe</th>
                        <th class="text-center">Tgl Beli</th>
                        <th class="text-center">Jumlah</th>
                        <th>Sumber Dana & Tahun</th>
                        <th class="text-center">Kondisi</th>
                        <th class="text-center">Periksa Terakhir</th>
                        <th class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($records as $record)
                        <tr>
                            <td class="text-center">{{ $records->firstItem() + $loop->index }}</td>
                            <td>
                                @if ($record->kode_barang)
                                    <span class="block font-mono text-xs font-semibold text-blue-700">{{ $record->kode_barang }}</span>
                                @endif
                                <span class="font-semibold text-slate-800">{{ $record->nama_barang }}</span>
                            </td>
                            <td>{{ $record->merek ?: '—' }}</td>
                            <td class="text-center">
                                {{ $record->tgl_beli ? \Carbon\Carbon::parse($record->tgl_beli)->format('d/m/Y') : '—' }}
                            </td>
                            <td class="text-center font-semibold">
                                {{ $record->jumlah }} {{ $record->satuan ?: 'Unit' }}
                            </td>
                            <td>
                                <span class="block text-slate-700">{{ $record->sumber_dana ?: '—' }}</span>
                                <span class="text-xs text-slate-500">Tahun: {{ $record->tahun_anggaran ?: '—' }}</span>
                            </td>
                            <td class="text-center">
                                @if ($record->kondisi === 'Baik')
                                    <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-check-circle-fill" aria-hidden="true"></i>Baik
                                    </span>
                                @elseif ($record->kondisi === 'Rusak Ringan')
                                    <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-700">
                                        <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>Rusak Ringan
                                    </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-x-circle-fill" aria-hidden="true"></i>Rusak Berat
                                    </span>
                                @endif
                            </td>
                            <td class="text-center text-xs text-slate-600">
                                {{ $record->tgl_periksa_terakhir ? \Carbon\Carbon::parse($record->tgl_periksa_terakhir)->format('d/m/Y') : '—' }}
                            </td>
                            <td class="text-right">
                                <div class="flex flex-wrap justify-end gap-1.5">
                                    <form method="POST" action="{{ route('pkbm.inventaris.barang-modal.periksa', $record->id_barang) }}" class="inline">
                                        @csrf
                                        <button type="submit" class="sp-btn-secondary px-2.5 py-1 text-xs" title="Tandai diperiksa hari ini">
                                            <i class="bi bi-shield-check" aria-hidden="true"></i>Periksa
                                        </button>
                                    </form>
                                    <a href="{{ route('pkbm.inventaris.barang-modal.label', ['id' => $record->id_barang]) }}" target="_blank" rel="noopener" class="sp-btn-secondary px-2.5 py-1 text-xs" title="Cetak label">
                                        <i class="bi bi-qr-code" aria-hidden="true"></i>
                                    </a>
                                    <button type="button" class="sp-btn-secondary px-2.5 py-1 text-xs"
                                        data-edit-item
                                        data-id="{{ $record->id_barang }}"
                                        data-kode="{{ $record->kode_barang }}"
                                        data-nama="{{ $record->nama_barang }}"
                                        data-merek="{{ $record->merek }}"
                                        data-tgl="{{ $record->tgl_beli }}"
                                        data-jumlah="{{ $record->jumlah }}"
                                        data-satuan="{{ $record->satuan }}"
                                        data-tahun="{{ $record->tahun_anggaran }}"
                                        data-sumber="{{ $record->sumber_dana }}"
                                        data-kondisi="{{ $record->kondisi }}"
                                        data-action="{{ route('pkbm.inventaris.barang-modal.update', $record->id_barang) }}">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>Edit
                                    </button>
                                    <form method="POST" action="{{ route('pkbm.inventaris.barang-modal.destroy', $record->id_barang) }}" class="inline" onsubmit="return confirm('Yakin ingin menghapus aset \'{{ $record->nama_barang }}\'? Riwayat pemeriksaan terkait juga akan dihapus.');">
                                        @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="Hapus aset">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="py-8 text-center text-sm text-slate-500">
                                Tidak ada data aset barang modal yang sesuai filter.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($records->hasPages())
            <div class="p-4">{{ $records->links() }}</div>
        @endif
    </section>
</div>

<!-- Modal Tambah Aset Modal -->
<dialog id="modal-create-asset" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-create-title">
    <form method="POST" action="{{ route('pkbm.inventaris.barang-modal.store') }}">
        @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-plus-circle"></i></span>
                <div>
                    <h2 id="modal-create-title" class="sp-section-title">Tambah Aset Barang Modal</h2>
                    <p class="mt-1 text-xs text-slate-500">Masukkan detail aset tetap atau inventaris baru lembaga.</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="create-kode" class="sp-form-label">Kode Barang <span class="font-normal text-slate-400">(opsional)</span></label>
                <input id="create-kode" name="kode_barang" type="text" maxlength="50" placeholder="Contoh: BM-PA-01-2025" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="create-nama" class="sp-form-label">Nama Barang / Aset</label>
                <input id="create-nama" name="nama_barang" type="text" maxlength="255" required placeholder="Contoh: Laptop Core i3" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="create-merek" class="sp-form-label">Merek / Tipe</label>
                <input id="create-merek" name="merek" type="text" maxlength="100" placeholder="Contoh: ADVAN / Maspion" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="create-tgl" class="sp-form-label">Tanggal Pembelian</label>
                <input id="create-tgl" name="tgl_beli" type="date" value="{{ now()->toDateString() }}" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="create-jumlah" class="sp-form-label">Jumlah Unit</label>
                <input id="create-jumlah" name="jumlah" type="number" min="1" value="1" required class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="create-satuan" class="sp-form-label">Satuan</label>
                <input id="create-satuan" name="satuan" type="text" maxlength="50" value="Unit" placeholder="Unit, Buah, Set, dll" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="create-tahun" class="sp-form-label">Tahun Anggaran</label>
                <input id="create-tahun" name="tahun_anggaran" type="text" maxlength="10" value="{{ now()->year }}" placeholder="2025" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="create-sumber" class="sp-form-label">Sumber Dana</label>
                <input id="create-sumber" name="sumber_dana" type="text" maxlength="100" placeholder="Contoh: BOSP Kesetaraan / Lembaga" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div class="sm:col-span-2">
                <label for="create-kondisi" class="sp-form-label">Kondisi Aset</label>
                <select id="create-kondisi" name="kondisi" required class="sp-form-control px-3 py-2 text-sm">
                    <option value="Baik">Baik</option>
                    <option value="Rusak Ringan">Rusak Ringan</option>
                    <option value="Rusak Berat">Rusak Berat</option>
                </select>
            </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-save" aria-hidden="true"></i>Simpan Aset</button>
        </div>
    </form>
</dialog>

<!-- Modal Edit Aset Modal -->
<dialog id="modal-edit-asset" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-edit-title">
    <form id="form-edit-asset" method="POST">
        @csrf
        @method('PUT')
        <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-pencil-square"></i></span>
                <div>
                    <h2 id="modal-edit-title" class="sp-section-title">Edit Aset Barang Modal</h2>
                    <p class="mt-1 text-xs text-slate-500">Perbarui spesifikasi atau data inventaris aset.</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="edit-kode" class="sp-form-label">Kode Barang <span class="font-normal text-slate-400">(opsional)</span></label>
                <input id="edit-kode" name="kode_barang" type="text" maxlength="50" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="edit-nama" class="sp-form-label">Nama Barang / Aset</label>
                <input id="edit-nama" name="nama_barang" type="text" maxlength="255" required class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="edit-merek" class="sp-form-label">Merek / Tipe</label>
                <input id="edit-merek" name="merek" type="text" maxlength="100" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="edit-tgl" class="sp-form-label">Tanggal Pembelian</label>
                <input id="edit-tgl" name="tgl_beli" type="date" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="edit-jumlah" class="sp-form-label">Jumlah Unit</label>
                <input id="edit-jumlah" name="jumlah" type="number" min="1" required class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="edit-satuan" class="sp-form-label">Satuan</label>
                <input id="edit-satuan" name="satuan" type="text" maxlength="50" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="edit-tahun" class="sp-form-label">Tahun Anggaran</label>
                <input id="edit-tahun" name="tahun_anggaran" type="text" maxlength="10" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="edit-sumber" class="sp-form-label">Sumber Dana</label>
                <input id="edit-sumber" name="sumber_dana" type="text" maxlength="100" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div class="sm:col-span-2">
                <label for="edit-kondisi" class="sp-form-label">Kondisi Aset</label>
                <select id="edit-kondisi" name="kondisi" required class="sp-form-control px-3 py-2 text-sm">
                    <option value="Baik">Baik</option>
                    <option value="Rusak Ringan">Rusak Ringan</option>
                    <option value="Rusak Berat">Rusak Berat</option>
                </select>
            </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-save" aria-hidden="true"></i>Simpan Perubahan</button>
        </div>
    </form>
</dialog>

@push('scripts')
<script>
(() => {
    const createModal = document.getElementById('modal-create-asset');
    const editModal = document.getElementById('modal-edit-asset');
    const editForm = document.getElementById('form-edit-asset');

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

    document.querySelectorAll('[data-edit-item]').forEach((btn) => {
        btn.addEventListener('click', () => {
            editForm.action = btn.dataset.action;
            document.getElementById('edit-kode').value = btn.dataset.kode || '';
            document.getElementById('edit-nama').value = btn.dataset.nama || '';
            document.getElementById('edit-merek').value = btn.dataset.merek || '';
            document.getElementById('edit-tgl').value = btn.dataset.tgl || '';
            document.getElementById('edit-jumlah').value = btn.dataset.jumlah || '1';
            document.getElementById('edit-satuan').value = btn.dataset.satuan || 'Unit';
            document.getElementById('edit-tahun').value = btn.dataset.tahun || '';
            document.getElementById('edit-sumber').value = btn.dataset.sumber || '';
            document.getElementById('edit-kondisi').value = btn.dataset.kondisi || 'Baik';
            editModal?.showModal();
        });
    });

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

    [createModal, editModal].forEach((dialog) => {
        dialog?.addEventListener('click', (event) => {
            if (event.target === dialog) dialog.close();
        });
    });
})();
</script>
@endpush
@endsection