@extends('layouts.app')

@section('title', 'Pemeriksaan & Pemeliharaan Aset')

@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>Pemeriksaan Aset</p>
            <h1 class="pkbm-dashboard__title">Pemeriksaan & Pemeliharaan Aset</h1>
            <p class="pkbm-dashboard__subtitle">Lakukan pemeriksaan fisik berkala untuk memantau kondisi dan kelayakan 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 pemeriksaan.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <!-- Tab Seleksi: Status Aset vs Riwayat Pemeriksaan -->
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="flex items-center gap-2">
            <a href="{{ route('pkbm.inventaris.pemeriksaan', ['tab' => 'aset', 'q' => $q]) }}" @class([
                'sp-btn-secondary',
                'border-blue-300 bg-blue-50 text-blue-700 shadow-sm' => $tab === 'aset',
            ])>
                <i class="bi bi-list-check" aria-hidden="true"></i>Daftar Aset & Status Fisik
            </a>
            <a href="{{ route('pkbm.inventaris.pemeriksaan', ['tab' => 'riwayat', 'q' => $q]) }}" @class([
                'sp-btn-secondary',
                'border-blue-300 bg-blue-50 text-blue-700 shadow-sm' => $tab === 'riwayat',
            ])>
                <i class="bi bi-clock-history" aria-hidden="true"></i>Riwayat Log Pemeriksaan
            </a>
        </div>

        <button type="button" data-open-create-inspection class="sp-btn-primary">
            <i class="bi bi-plus-lg" aria-hidden="true"></i>Catat Hasil Pemeriksaan
        </button>
    </div>

    <!-- Filter Pencarian -->
    <section class="sp-card p-4">
        <form method="GET" class="flex flex-wrap items-end gap-3">
            <input type="hidden" name="tab" value="{{ $tab }}">
            <label class="sp-form-label mb-0">Pencarian
                <input type="text" name="q" value="{{ $q }}" placeholder="{{ $tab === 'aset' ? 'Nama, kode, atau merek aset...' : 'Nama aset, kondisi, atau catatan...' }}" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </label>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-funnel" aria-hidden="true"></i>Cari</button>
            @if ($q)
                <a href="{{ route('pkbm.inventaris.pemeriksaan', ['tab' => $tab]) }}" class="sp-btn-secondary">Reset</a>
            @endif
        </form>
    </section>

    @if ($tab === 'aset')
        <!-- Tabel Daftar Aset & Status Terakhir -->
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Status Pemeriksaan Fisik Aset</h2>
                <p class="mt-1 text-xs text-slate-500">Urutan teratas memprioritaskan aset yang paling lama belum diperiksa.</p>
            </div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-[65rem]">
                    <thead>
                        <tr>
                            <th class="w-14 text-center">No.</th>
                            <th>Kode & Nama Barang</th>
                            <th>Merek</th>
                            <th class="text-center">Jumlah Unit</th>
                            <th class="text-center">Kondisi Terkini</th>
                            <th class="text-center">Pemeriksaan Terakhir</th>
                            <th class="text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($assets as $asset)
                            <tr>
                                <td class="text-center">{{ $assets->firstItem() + $loop->index }}</td>
                                <td>
                                    @if ($asset->kode_barang)
                                        <span class="block font-mono text-xs font-semibold text-blue-700">{{ $asset->kode_barang }}</span>
                                    @endif
                                    <span class="font-semibold text-slate-800">{{ $asset->nama_barang }}</span>
                                </td>
                                <td>{{ $asset->merek ?: '—' }}</td>
                                <td class="text-center font-medium">{{ $asset->jumlah }} {{ $asset->satuan ?: 'Unit' }}</td>
                                <td class="text-center">
                                    @if ($asset->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 ($asset->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">
                                    {{ $asset->tgl_periksa_terakhir ? \Carbon\Carbon::parse($asset->tgl_periksa_terakhir)->format('d/m/Y') : 'Belum pernah diperiksa' }}
                                </td>
                                <td class="text-right">
                                    <button type="button" class="sp-btn-primary px-3 py-1 text-xs"
                                        data-inspect-asset
                                        data-id="{{ $asset->id_barang }}"
                                        data-nama="{{ $asset->nama_barang }}"
                                        data-kondisi="{{ $asset->kondisi }}">
                                        <i class="bi bi-shield-check" aria-hidden="true"></i>Update Pemeriksaan
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="py-8 text-center text-sm text-slate-500">
                                    Tidak ada data aset yang ditemukan.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($assets->hasPages())
                <div class="p-4">{{ $assets->links() }}</div>
            @endif
        </section>
    @else
        <!-- Tabel Riwayat Log Pemeriksaan -->
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Riwayat Log Pemeriksaan Aset</h2>
                <p class="mt-1 text-xs text-slate-500">Catatan riwayat hasil pemeriksaan berkala dan catatan pemeliharaan aset.</p>
            </div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-[65rem]">
                    <thead>
                        <tr>
                            <th class="w-14 text-center">No.</th>
                            <th>Tanggal Periksa</th>
                            <th>Barang / Aset</th>
                            <th class="text-center">Kondisi Waktu Itu</th>
                            <th>Catatan Hasil Pemeriksaan</th>
                            <th class="text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($logs as $log)
                            <tr>
                                <td class="text-center">{{ $logs->firstItem() + $loop->index }}</td>
                                <td class="font-medium text-slate-800">
                                    {{ \Carbon\Carbon::parse($log->tgl_periksa)->format('d/m/Y') }}
                                </td>
                                <td>
                                    @if ($log->kode_barang)
                                        <span class="block font-mono text-xs text-blue-700">{{ $log->kode_barang }}</span>
                                    @endif
                                    <span class="font-semibold text-slate-800">{{ $log->nama_barang }}</span>
                                    @if ($log->merek)
                                        <span class="text-xs text-slate-500">({{ $log->merek }})</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if ($log->kondisi_saat_itu === '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 ($log->kondisi_saat_itu === '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-slate-700">
                                    {{ $log->catatan ?: '—' }}
                                </td>
                                <td class="text-right">
                                    <div class="flex justify-end gap-1.5">
                                        <button type="button" class="sp-btn-secondary px-2.5 py-1 text-xs"
                                            data-edit-log
                                            data-id="{{ $log->id_log }}"
                                            data-kondisi="{{ $log->kondisi_saat_itu }}"
                                            data-catatan="{{ $log->catatan }}"
                                            data-tgl="{{ $log->tgl_periksa }}"
                                            data-action="{{ route('pkbm.inventaris.pemeriksaan.update', $log->id_log) }}">
                                            <i class="bi bi-pencil-square" aria-hidden="true"></i>Edit Catatan
                                        </button>
                                        <form method="POST" action="{{ route('pkbm.inventaris.pemeriksaan.destroy', $log->id_log) }}" class="inline" onsubmit="return confirm('Hapus catatan pemeriksaan ini?');">
                                            @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 catatan">
                                                <i class="bi bi-trash" aria-hidden="true"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="py-8 text-center text-sm text-slate-500">
                                    Belum ada catatan log riwayat pemeriksaan aset.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($logs->hasPages())
                <div class="p-4">{{ $logs->links() }}</div>
            @endif
        </section>
    @endif
</div>

<!-- Modal Catat Pemeriksaan Baru -->
<dialog id="modal-create-inspection" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-inspection-title">
    <form method="POST" action="{{ route('pkbm.inventaris.pemeriksaan.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-shield-check"></i></span>
                <div>
                    <h2 id="modal-inspection-title" class="sp-section-title">Catat Hasil Pemeriksaan Aset</h2>
                    <p class="mt-1 text-xs text-slate-500">Pilih aset dan perbarui kondisi fisiknya saat ini.</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 class="sm:col-span-2">
                <label for="inspect-id-barang" class="sp-form-label">Pilih Aset Barang Modal</label>
                <select id="inspect-id-barang" name="id_barang" required class="sp-form-control px-3 py-2 text-sm">
                    <option value="">Pilih barang modal...</option>
                    @foreach ($allAssets as $ast)
                        <option value="{{ $ast->id_barang }}" data-kondisi="{{ $ast->kondisi }}">
                            {{ $ast->kode_barang ? "[{$ast->kode_barang}] " : '' }}{{ $ast->nama_barang }} (Kondisi sebelumnya: {{ $ast->kondisi }})
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="inspect-tgl" class="sp-form-label">Tanggal Pemeriksaan</label>
                <input id="inspect-tgl" name="tgl_periksa" type="date" value="{{ now()->toDateString() }}" required class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="inspect-kondisi" class="sp-form-label">Kondisi Hasil Pemeriksaan</label>
                <select id="inspect-kondisi" name="kondisi_baru" 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 class="sm:col-span-2">
                <label for="inspect-catatan" class="sp-form-label">Catatan Hasil Pemeriksaan / Tindak Lanjut</label>
                <textarea id="inspect-catatan" name="catatan" rows="3" placeholder="Contoh: Kondisi layar normal, keyboard berfungsi dengan baik / Perlu ganti kabel power..." class="sp-form-control px-3 py-2 text-sm"></textarea>
            </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 Pemeriksaan</button>
        </div>
    </form>
</dialog>

<!-- Modal Edit Log Pemeriksaan -->
<dialog id="modal-edit-log" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-edit-log-title">
    <form id="form-edit-log" 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-log-title" class="sp-section-title">Edit Catatan Pemeriksaan</h2>
                    <p class="mt-1 text-xs text-slate-500">Koreksi tanggal, kondisi, atau deskripsi hasil pemeriksaan 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-log-tgl" class="sp-form-label">Tanggal Pemeriksaan</label>
                <input id="edit-log-tgl" name="tgl_periksa" type="date" class="sp-form-control px-3 py-2 text-sm">
            </div>
            <div>
                <label for="edit-log-kondisi" class="sp-form-label">Kondisi Tercatat</label>
                <select id="edit-log-kondisi" name="kondisi_edit" 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 class="sm:col-span-2">
                <label for="edit-log-catatan" class="sp-form-label">Catatan Hasil Pemeriksaan</label>
                <textarea id="edit-log-catatan" name="catatan_edit" rows="3" class="sp-form-control px-3 py-2 text-sm"></textarea>
            </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-inspection');
    const editLogModal = document.getElementById('modal-edit-log');
    const editLogForm = document.getElementById('form-edit-log');
    const assetSelect = document.getElementById('inspect-id-barang');
    const conditionSelect = document.getElementById('inspect-kondisi');

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

    document.querySelectorAll('[data-inspect-asset]').forEach((btn) => {
        btn.addEventListener('click', () => {
            if (assetSelect) assetSelect.value = btn.dataset.id || '';
            if (conditionSelect) conditionSelect.value = btn.dataset.kondisi || 'Baik';
            createModal?.showModal();
        });
    });

    assetSelect?.addEventListener('change', () => {
        const selected = assetSelect.options[assetSelect.selectedIndex];
        if (selected?.dataset?.kondisi && conditionSelect) {
            conditionSelect.value = selected.dataset.kondisi;
        }
    });

    document.querySelectorAll('[data-edit-log]').forEach((btn) => {
        btn.addEventListener('click', () => {
            editLogForm.action = btn.dataset.action;
            document.getElementById('edit-log-tgl').value = btn.dataset.tgl || '';
            document.getElementById('edit-log-kondisi').value = btn.dataset.kondisi || 'Baik';
            document.getElementById('edit-log-catatan').value = btn.dataset.catatan || '';
            editLogModal?.showModal();
        });
    });

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

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