@extends('layouts.user_layout')

@section('content')

<h2>Lapor Kerosakan / Kehilangan</h2>

<div class="box">
    <form action="/user/lapor" method="POST" class="lapor-form">
        @csrf

        <div class="form-row">
            <label for="inventori_id">Pilih Barang</label>
            <select id="inventori_id" name="inventori_id" required>
                <option value="">-- Pilih Inventori --</option>
                @foreach($inventori as $item)
                <option value="{{ $item->inventori_id }}">{{ $item->nama_barang }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-row">
            <label for="kuantiti">Kuantiti</label>
            <input id="kuantiti" type="number" name="kuantiti" min="1" required>
        </div>

        <div class="form-row">
            <label for="tarikh_lapor">Tarikh Lapor</label>
            <input id="tarikh_lapor" type="date" name="tarikh_lapor" value="{{ now()->format('Y-m-d') }}" readonly>
        </div>

        <div class="form-row">
            <label for="butiran">Butiran</label>
            <select id="butiran" name="butiran" required>
                <option value="">-- Pilih Jenis --</option>
                <option value="kerosakan">Kerosakan</option>
                <option value="kehilangan">Kehilangan</option>
            </select>
        </div>

        <div class="form-row" id="punca-row" style="display:none;">
            <label for="punca">Punca Kerosakan</label>
            <textarea id="punca" name="punca" rows="3" placeholder="Terangkan punca kerosakan"></textarea>
        </div>

        <div class="form-row" id="siri-row" style="display:none;">
            <label>Nombor Siri:</label>
            <div id="siri-wrapper">
                @foreach ($inventori as $item)
                    <div class="siri-group" data-inventori-id="{{ $item->inventori_id }}" style="display:none;">
                        @forelse ($item->siri as $siri)
                            <label style="display:inline-block; margin:0 12px 8px 0;">
                                <input type="checkbox" name="siri_ids[]" value="{{ $siri->inventori_siri_id }}">
                                {{ $siri->nombor_siri }}
                            </label>
                        @empty
                            <div class="muted">Tiada nombor siri baik untuk inventori ini.</div>
                        @endforelse
                    </div>
                @endforeach
            </div>
            <small class="form-hint">Pilih nombor siri sama dengan kuantiti.</small>
            <div id="siri-counter" class="muted">Dipilih: 0</div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn">Hantar</button>
            <button type="reset" class="btn btn--ghost">Reset</button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const butiran = document.getElementById('butiran');
    const puncaRow = document.getElementById('punca-row');
    const puncaField = document.getElementById('punca');
    const inventoriSelect = document.getElementById('inventori_id');
    const kuantitiInput = document.getElementById('kuantiti');
    const siriRow = document.getElementById('siri-row');
    const siriGroups = document.querySelectorAll('.siri-group');
    const siriCounter = document.getElementById('siri-counter');

    function resetSiriSelection() {
        document.querySelectorAll('input[name="siri_ids[]"]').forEach(function (cb) {
            cb.checked = false;
        });
        updateSiriCount();
    }

    function updateSiriCount() {
        const selected = document.querySelectorAll('input[name="siri_ids[]"]:checked').length;
        siriCounter.textContent = 'Dipilih: ' + selected;
    }

    function showSiriGroup() {
        siriGroups.forEach(function (group) {
            group.style.display = 'none';
            group.querySelectorAll('input[name="siri_ids[]"]').forEach(function (cb) {
                cb.disabled = true;
            });
        });
        const selectedId = inventoriSelect.value;
        if (!selectedId) {
            return;
        }
        const activeGroup = document.querySelector('.siri-group[data-inventori-id="' + selectedId + '"]');
        if (activeGroup) {
            activeGroup.style.display = 'block';
            activeGroup.querySelectorAll('input[name="siri_ids[]"]').forEach(function (cb) {
                cb.disabled = false;
            });
        }
    }

    function togglePunca() {
        if (butiran.value === 'kerosakan') {
            puncaRow.style.display = 'flex';
            puncaField.required = true;
            siriRow.style.display = 'block';
        } else if (butiran.value === 'kehilangan') {
            puncaRow.style.display = 'none';
            puncaField.required = false;
            puncaField.value = '';
            siriRow.style.display = 'block';
        } else {
            puncaRow.style.display = 'none';
            puncaField.required = false;
            puncaField.value = '';
            siriRow.style.display = 'none';
            resetSiriSelection();
        }
    }

    document.querySelectorAll('input[name="siri_ids[]"]').forEach(function (cb) {
        cb.addEventListener('change', function (event) {
            const max = parseInt(kuantitiInput.value || '0', 10);
            const selected = document.querySelectorAll('input[name="siri_ids[]"]:checked').length;
            if (max > 0 && selected > max) {
                event.target.checked = false;
                return;
            }
            updateSiriCount();
        });
    });

    kuantitiInput.addEventListener('input', function () {
        const max = parseInt(kuantitiInput.value || '0', 10);
        const checked = document.querySelectorAll('input[name="siri_ids[]"]:checked');
        if (max >= 0 && checked.length > max) {
            checked.forEach(function (cb, index) {
                if (index >= max) {
                    cb.checked = false;
                }
            });
        }
        updateSiriCount();
    });

    inventoriSelect.addEventListener('change', function () {
        resetSiriSelection();
        showSiriGroup();
    });

    butiran.addEventListener('change', togglePunca);
    showSiriGroup();
    togglePunca();
    updateSiriCount();
});
</script>

@endsection