@extends('layouts.app')

@section('content')

    <link rel="stylesheet" href="{{ asset('css/arsip-aset.css') }}">

    <div class="page-wrapper">

        <div class="page-container">

            <!-- FILTER FORM -->
            <form id="filterForm" method="GET" action="{{ route('arsip-aset') }}">

                <div class="filter-card">

                    <div class="filter-group search-box">
                        <input type="text" name="keyword" id="keywordInput" value="{{ request('keyword') }}" placeholder="Cari arsip..." autocomplete="off">
                    </div>

                    <div class="filter-group">
                        <input type="date" name="tanggal" id="tanggalInput" value="{{ request('tanggal') }}">
                    </div>

                    <div class="filter-group">
                        <select name="alasan" id="alasanSelect">

                            <option value="">Semua Alasan</option>

                            <option value="Rusak" {{ request('alasan') == 'Rusak' ? 'selected' : '' }}>
                                Rusak
                            </option>

                            <option value="Habis Masa Pakai"
                                {{ request('alasan') == 'Habis Masa Pakai' ? 'selected' : '' }}>
                                Habis Masa Pakai
                            </option>

                        </select>
                    </div>

                </div>

            </form>

            <!-- RINGKASAN -->
            <div class="summary-wrapper">

                <div class="summary-card">

                    <div class="summary-icon rusak">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                    </div>

                    <div>
                        <span>Arsip Barang Rusak</span>
                        <h3>{{ $jumlahRusak }}</h3>
                    </div>

                </div>

                <div class="summary-card">

                    <div class="summary-icon habis">
                        <i class="fa-solid fa-hourglass-end"></i>
                    </div>

                    <div>
                        <span>Arsip Habis Masa Pakai</span>
                        <h3>{{ $jumlahHabis }}</h3>
                    </div>

                </div>

                <div class="summary-card">

                    <div class="summary-icon total">
                        <i class="fa-solid fa-box-archive"></i>
                    </div>

                    <div>
                        <span>Total Arsip</span>
                        <h3>{{ $totalArsip }}</h3>
                    </div>

                </div>

            </div>

            <!-- ACTION (PDF & EXCEL EXPORT) -->
            <div class="action-row">

                <a href="{{ route('arsip-aset.export.pdf', request()->query()) }}" class="btn btn-pdf">
                    <i class="fa-solid fa-file-pdf"></i>
                    PDF
                </a>

                <a href="{{ route('arsip-aset.export.excel', request()->query()) }}" class="btn btn-excel">
                    <i class="fa-solid fa-file-excel"></i>
                    Excel
                </a>

            </div>

            <!-- TABEL -->
            <div class="table-card">

                <div class="table-header">

                    <h3>Daftar Arsip Inventaris</h3>

                    <span class="data-count">
                        Menampilkan
                        {{ $arsip->firstItem() ?? 0 }}
                        -
                        {{ $arsip->lastItem() ?? 0 }}
                        dari
                        {{ $arsip->total() }}
                        data
                    </span>

                </div>

                <div class="table-responsive">

                    <table>

                        <thead>

                            <tr>
                                <th>No</th>
                                <th>Kode Arsip</th>
                                <th>Kode Inventaris</th>
                                <th>Nama Barang</th>
                                <th>Gedung</th>
                                <th>Ruangan</th>
                                <th>Alasan Arsip</th>
                                <th>Tanggal Arsip</th>
                            </tr>

                        </thead>

                        <tbody>

                            @forelse($arsip as $item)

                                <tr>

                                    <td>
                                        {{ $loop->iteration + ($arsip->currentPage() - 1) * $arsip->perPage() }}
                                    </td>

                                    <td>
                                        {{ $item->kode_arsip }}
                                    </td>

                                    <td>
                                        {{ $item->inventaris->kode_inventaris ?? '-' }}
                                    </td>

                                    <td>
                                        @foreach ($item->detailArsip as $detail)
                                            <span class="badge">
                                                {{ $detail->barang->nama_barang ?? '-' }}
                                            </span>
                                        @endforeach
                                    </td>

                                    <td>
                                        {{ $item->inventaris->gedung->nama_gedung ?? '-' }}
                                    </td>

                                    <td>
                                        {{ $item->inventaris->ruangan->nama_ruangan ?? '-' }}
                                    </td>

                                    <td>

                                        @if ($item->alasan_arsip == 'Rusak')
                                            <span class="badge rusak">
                                                Rusak
                                            </span>
                                        @else
                                            <span class="badge habis">
                                                Habis Masa Pakai
                                            </span>
                                        @endif

                                    </td>

                                    <td>
                                        {{ \Carbon\Carbon::parse($item->tanggal_arsip)->translatedFormat('d F Y') }}
                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="8" class="text-center">

                                        Belum ada data arsip

                                    </td>

                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                </div>

                <!-- PAGINATION SIMPEL -->
<div class="pagination-wrapper">
    <div class="pagination-info" id="paginationInfo">
        Menampilkan {{ $arsip->firstItem() ?? 0 }} - {{ $arsip->lastItem() ?? 0 }} dari {{ $arsip->total() }} data
    </div>

    <div class="pagination" id="paginationControls">
        @if ($arsip->onFirstPage())
            <span class="disabled">‹ Prev</span>
        @else
            <a href="{{ $arsip->previousPageUrl() }}" class="page-link" data-url="{{ $arsip->previousPageUrl() }}">‹ Prev</a>
        @endif

        <span class="active">{{ $arsip->currentPage() }}</span>

        @if ($arsip->hasMorePages())
            <a href="{{ $arsip->nextPageUrl() }}" class="page-link" data-url="{{ $arsip->nextPageUrl() }}">Next ›</a>
        @else
            <span class="disabled">Next ›</span>
        @endif
    </div>
</div>

            </div>

        </div>

    </div>

    <!-- SCRIPT LIVE SEARCH (DEBOUNCE) -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('filterForm');
            const keywordInput = document.getElementById('keywordInput');
            const tanggalInput = document.getElementById('tanggalInput');
            const alasanSelect = document.getElementById('alasanSelect');

            let timeout = null;

            // Debounce 500ms untuk input teks keyword
            keywordInput.addEventListener('keyup', function () {
                clearTimeout(timeout);
                timeout = setTimeout(function () {
                    form.submit();
                }, 500);
            });

            // Submit langsung saat tanggal atau select diganti
            tanggalInput.addEventListener('change', () => form.submit());
            alasanSelect.addEventListener('change', () => form.submit());

            // Auto focus di akhir teks agar saat reload kursor tetap berada di posisi semula
            if (keywordInput.value) {
                keywordInput.focus();
                const val = keywordInput.value;
                keywordInput.value = '';
                keywordInput.value = val;
            }
        });
    </script>

    <script src="{{ asset('js/arsip-aset.js') }}"></script>

@endsection