@extends('layouts.app')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/inventaris.css') }}">

    <div class="page-wrapper">
        <div class="page-container">

            <!-- FILTER -->
            <div class="card">
                <h2 class="section-title">
                    FILTER DATA INVENTARIS
                </h2>

                <form id="filterForm" method="GET" action="{{ route('inventaris') }}">
                    <div class="filter-row">

                        <!-- Input Kata Kunci (Nama Barang / Nama Ruangan / Kode Inventaris) -->
                        <input type="text" name="keyword" id="keywordInput" class="form-control" 
                            placeholder="Cari Nama Barang / Nama Ruangan..." value="{{ request('keyword') }}" autocomplete="off">

                        <!-- Filter Gedung -->
                        <select name="gedung" id="gedungSelect" class="form-control">
                            <option value="">Semua Gedung</option>
                            @foreach ($gedung as $g)
                                <option value="{{ $g->id_gedung }}" {{ request('gedung') == $g->id_gedung ? 'selected' : '' }}>
                                    {{ $g->nama_gedung }}
                                </option>
                            @endforeach
                        </select>

                        <!-- Filter Ruangan -->
                        <select name="ruangan" id="ruanganSelect" class="form-control">
                            <option value="">Semua Ruangan</option>
                            @foreach ($ruangan as $r)
                                <option value="{{ $r->id_ruangan }}" {{ request('ruangan') == $r->id_ruangan ? 'selected' : '' }}>
                                    {{ $r->nama_ruangan }}
                                </option>
                            @endforeach
                        </select>

                        <!-- Filter Tanggal/Tahun Masuk -->
                        <input type="date" name="tahun" id="tahunInput" class="form-control" value="{{ request('tahun') }}">

                        <!-- Tombol Aksi Export PDF & Excel (Sejajar di sebelah kanan filter) -->
                        <div class="action-row">
                            <a href="{{ route('inventaris.export.pdf', request()->query()) }}" class="btn btn-pdf">
                                <i class="fa-solid fa-file-pdf"></i> PDF
                            </a>
                            <a href="{{ route('inventaris.export.excel', request()->query()) }}" class="btn btn-excel">
                                <i class="fa-solid fa-file-excel"></i> Excel
                            </a>
                        </div>

                    </div>
                </form>
            </div>

            <!-- TABEL -->
            <div class="card">
                <h2 class="section-title">
                    TABEL INVENTARIS
                </h2>

                <div class="table-responsive">
                    <table class="inventaris-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kode Inventaris</th>
                                <th>Gedung</th>
                                <th>Ruangan</th>
                                <th>Tanggal Input Inventaris</th>
                                <th>Total Barang inventaris</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($inventaris as $index => $item)
                                <tr>
                                    <td>{{ $inventaris->firstItem() + $index }}</td>
                                    <td>{{ $item->kode_inventaris }}</td>
                                    <td>{{ $item->gedung->nama_gedung ?? '-' }}</td>
                                    <td>{{ $item->ruangan->nama_ruangan ?? '-' }}</td>
                                    <td>{{ date('d/m/Y', strtotime($item->tanggal_masuk)) }}</td>
                                    <td>{{ $item->detailInventaris->count() }} Barang</td>
                                    <td class="aksi">
                                        <button class="btn-icon btn-detail" title="Detail"
                                            onclick="window.location='{{ route('inventaris.detail', $item->id_inventaris) }}'">
                                            <i class="fa-solid fa-eye"></i>
                                        </button>

                                        <button class="btn-icon btn-check" title="Pemeriksaan"
                                            onclick="window.location='{{ route('inventaris.pemeriksaan', $item->id_inventaris) }}'">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </button>

                                        <button class="btn-icon btn-transfer" title="Pindahkan Barang"
                                            onclick="openPindahModal({{ $item->id_inventaris }})">
                                            <i class="fa-solid fa-right-left"></i>
                                        </button>

                                        <button class="btn-icon btn-qr" title="QR Code"
                                            onclick="openQr({{ $item->id_inventaris }})">
                                            <i class="fa-solid fa-qrcode"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" align="center">Data inventaris belum tersedia</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- PAGINATION -->
                <!-- PAGINATION -->
<div class="pagination-wrapper">

    <div class="pagination-info">
        Menampilkan {{ $inventaris->firstItem() ?? 0 }} - {{ $inventaris->lastItem() ?? 0 }} dari {{ $inventaris->total() }} data
    </div>

    <div class="pagination">

        {{-- Tombol Previous (Kembali) --}}
        @if ($inventaris->onFirstPage())
            <span class="disabled">‹ Prev</span>
        @else
            <a href="{{ $inventaris->previousPageUrl() }}">‹ Prev</a>
        @endif

        {{-- Indikator Halaman Aktif --}}
        <span class="active">{{ $inventaris->currentPage() }}</span>

        {{-- Tombol Next (Lanjut) --}}
        @if ($inventaris->hasMorePages())
            <a href="{{ $inventaris->nextPageUrl() }}">Next ›</a>
        @else
            <span class="disabled">Next ›</span>
        @endif

    </div>

</div>

            </div>

        </div>
    </div>

    <!-- MODAL PINDAH INVENTARIS -->
    <div id="modalPindah" class="modal-overlay hidden">
        <div class="modal-box">
            <div class="modal-header">
                <h3>Pindahkan Barang Inventaris</h3>
                <button type="button" onclick="closePindahModal()">×</button>
            </div>
            <div class="modal-body">
                <form id="formPindahBarang">
                    <input type="hidden" id="idInventarisAsal">
                    <div class="form-group">
                        <label>Pilih Barang</label>
                        <div id="listBarangPindah"></div>
                    </div>
                    <div class="form-group">
                        <label>Inventaris Tujuan</label>
                        <select id="inventarisTujuan">
                            <option value="">Pilih Inventaris Tujuan</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Tanggal Pindah</label>
                        <input type="date" id="tanggalPindah">
                    </div>
                    <div class="form-group">
                        <label>Keterangan</label>
                        <textarea id="keterangan" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closePindahModal()">Batal</button>
                <button type="button" class="btn btn-primary" onclick="prosesPindah()">Pindahkan</button>
            </div>
        </div>
    </div>

    <!-- MODAL QR -->
    <div id="modalQr" class="modal-overlay hidden">
        <div class="modal-box">
            <div class="modal-header">
                <h3>QR Code Inventaris</h3>
                <button onclick="closeQr()">×</button>
            </div>
            <div class="modal-body" align="center">
                <p id="qrInventarisKode" class="qr-inventaris-kode"></p>
                <div id="qrContainer"></div>
            </div>
            <div class="modal-footer qr-modal-footer">
                <button type="button" class="btn btn-primary" id="btnDownloadQrInventaris" onclick="downloadQrInventaris()">
                    <i class="fa-solid fa-download"></i> Download PNG
                </button>
                <button type="button" class="btn btn-secondary" onclick="closeQr()">Tutup</button>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('filterForm');
        const keywordInput = document.getElementById('keywordInput');
        const gedungSelect = document.getElementById('gedungSelect');
        const ruanganSelect = document.getElementById('ruanganSelect');
        const tahunInput = document.getElementById('tahunInput');

        let timeout = null;

        function submitFormWithDebounce() {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                form.submit();
            }, 500);
        }

        keywordInput.addEventListener('keyup', submitFormWithDebounce);
        tahunInput.addEventListener('change', () => form.submit());

        // 1. KETIKA GEDUNG DIPILIH -> Filter Ruangan
        gedungSelect.addEventListener('change', function () {
            const idGedung = this.value;

            if (idGedung) {
                fetch(`/get-ruangan/${idGedung}`)
                    .then(response => response.json())
                    .then(data => {
                        ruanganSelect.innerHTML = '<option value="">Semua Ruangan</option>';
                        data.forEach(r => {
                            ruanganSelect.innerHTML += `<option value="${r.id_ruangan}">${r.nama_ruangan}</option>`;
                        });
                        form.submit();
                    });
            } else {
                form.submit();
            }
        });

        // 2. KETIKA RUANGAN DIPILIH -> Otomatis Set Gedung
        ruanganSelect.addEventListener('change', function () {
            const idRuangan = this.value;

            if (idRuangan) {
                fetch(`/get-gedung-by-ruangan/${idRuangan}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.id_gedung) {
                            gedungSelect.value = data.id_gedung;
                        }
                        form.submit();
                    });
            } else {
                form.submit();
            }
        });

        // Auto Focus Input Keyword
        if (keywordInput.value) {
            keywordInput.focus();
            const val = keywordInput.value;
            keywordInput.value = '';
            keywordInput.value = val;
        }
    });
</script>

    <script src="{{ asset('js/inventaris.js') }}"></script>
@endsection