@extends('layouts.admin_layout')

@section('content')
<div class="page-header">
    <h2>Laporan Kerosakan / Kehilangan</h2>
    <a href="/lost/tambah" class="btn">+ Tambah Laporan</a>
</div>

@if(session('success'))
    <div class="alert alert--success">{{ session('success') }}</div>
@endif

<div class="box table-wrap">
    <table class="table-center">
    <tr>
        <th>ID</th>
        <th>NAMA<br>PELAPOR</th>
        <th>NAMA<br>PERALATAN</th>
        <th>KUANTITI</th>
        <th>TARIKH<br>DITERIMA</th>
        <th>JENIS<br>LAPORAN</th>
        <th>PUNCA<br>KEROSAKAN</th>
        <th>CATATAN</th>
        <th>TINDAKAN</th>
    </tr>
    @forelse($lost as $index => $laporan)
    <tr>
        <td>{{ $index + 1 }}</td>
        <td>{{ $laporan->user->name ?? '-' }}</td>
        <td>{{ $laporan->inventori?->nama_barang ?? '-' }}</td>
        <td>{{ $laporan->kuantiti ?? ($laporan->inventori->kuantiti ?? '-') }}</td>
        <td>{{ $laporan->tarikh_lapor }}</td>
        <td>{{ $laporan->butiran }}</td>
        <td>{{ $laporan->butiran === 'kerosakan' ? ($laporan->punca ?? '-') : '-' }}</td>
        <td>
            <select name="penyelesaian" class="input--sm" form="lost-form-{{ $laporan->laporan_id }}">
                <option value="" {{ !$laporan->penyelesaian ? 'selected' : '' }}>-</option>
                <option value="dilupus" {{ $laporan->penyelesaian === 'dilupus' ? 'selected' : '' }}>Dilupus</option>
                <option value="dibaiki" {{ $laporan->penyelesaian === 'dibaiki' ? 'selected' : '' }}>Dibaiki</option>
                <option value="diganti" {{ $laporan->penyelesaian === 'diganti' ? 'selected' : '' }}>Diganti</option>
            </select>
        </td>
        <td>
            <div class="table-actions table-actions--center">
                <form id="lost-form-{{ $laporan->laporan_id }}" action="/lost/status/{{ $laporan->laporan_id }}" method="POST" class="form-inline lost-status-form" style="margin:0;">
                    @csrf
                    <select name="status" class="input--sm">
                        <option value="proses" {{ $laporan->status === 'proses' ? 'selected' : '' }}>Dalam Proses</option>
                        <option value="selesai" {{ $laporan->status === 'selesai' ? 'selected' : '' }}>Selesai</option>
                    </select>
                </form>
                <div class="action-buttons">
                    <button type="submit" class="btn btn--action btn--action-edit" form="lost-form-{{ $laporan->laporan_id }}">Kemaskini</button>
                    <form action="/lost/{{ $laporan->laporan_id }}" method="POST" onsubmit="return confirm('Padam laporan ini?');" style="margin:0;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn--action btn--action-delete">Hapus</button>
                    </form>
                </div>
            </div>
        </td>
    </tr>
    @empty
    <tr>
        <td colspan="9" style="text-align:center;">Tiada laporan.</td>
    </tr>
    @endforelse
    </table>
</div>
<script>
    (function () {
        var forms = document.querySelectorAll('.lost-status-form');
        if (!forms.length) return;
        forms.forEach(function (form) {
            form.addEventListener('submit', function (e) {
                var statusSelect = form.querySelector('select[name="status"]');
                var penyelesaianSelect = document.querySelector(
                    'select[name="penyelesaian"][form="' + form.id + '"]'
                );
                if (!statusSelect || !penyelesaianSelect) return;
                var status = statusSelect.value;
                var penyelesaian = penyelesaianSelect.value;
                if (status === 'proses' && penyelesaian) {
                    e.preventDefault();
                    alert('Tidak sah: Status masih Dalam Proses tetapi catatan sudah dipilih. Sila pilih status Selesai atau kosongkan catatan.');
                }
            });
        });
    })();
</script>
@endsection