@extends('layouts.app')

@section('content')

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

    <div class="page-wrapper">

        <div class="page-container">

            <!-- INFORMASI -->
            <div class="rusak-info-card">
                <div class="rusak-info-grid">
                    <div class="rusak-info-item">
                        <span>Total Barang Rusak</span>
                        <strong>{{ $jumlahRingan + $jumlahBerat }} Barang</strong>
                    </div>
                    <div class="rusak-info-item">
                        <span>Total Rusak Ringan</span>
                        <strong>{{ $jumlahRingan }} Barang</strong>
                    </div>
                    <div class="rusak-info-item">
                        <span>Total Rusak Berat</span>
                        <strong>{{ $jumlahBerat }} Barang</strong>
                    </div>
                </div>
            </div>

            <!-- FILTER & EXPORT BUTTONS -->
            <div class="rusak-filter-card">
                <div class="filter-wrapper">
                    <div class="filter-grid">
                        <div class="filter-group">
                            <label for="searchKeyword">Cari Barang / Kode</label>
                            <input type="text" id="searchKeyword" class="form-control-filter"
                                placeholder="Ketik nama atau kode barang..." value="{{ request('keyword') }}">
                        </div>

                        <div class="filter-group">
                            <label for="filterStatus">Status Kerusakan</label>
                            <select id="filterStatus" class="form-control-filter">
                                <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>Semua Barang Rusak</option>
                                <option value="ringan" {{ request('status') == 'ringan' ? 'selected' : '' }}>Rusak Ringan</option>
                                <option value="berat" {{ request('status') == 'berat' ? 'selected' : '' }}>Rusak Berat</option>
                            </select>
                        </div>
                    </div>

                    <!-- TOMBOL EXPORT PDF & EXCEL -->
                    <div class="export-actions">
                        <a href="{{ route('inventaris.barang-rusak.export-pdf', request()->query()) }}" id="btnExportPdf" class="btn-export btn-pdf">
                            <i class="fa-solid fa-file-pdf"></i>
                            <span>PDF</span>
                        </a>
                        <a href="{{ route('inventaris.barang-rusak.export-excel', request()->query()) }}" id="btnExportExcel" class="btn-export btn-excel">
                            <i class="fa-solid fa-file-excel"></i>
                            <span>Excel</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- LIST BARANG -->
            <div class="card">
                <h2 class="section-title">DAFTAR BARANG RUSAK</h2>

                <div class="table-responsive">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama Barang</th>
                                <th>Kode</th>
                                <th>Merek</th>
                                <th>Tipe</th>
                                <th>Inventaris</th>
                                <th>Gedung</th>
                                <th>Ruangan</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="barangTableBody">
                            @forelse($barangRusak as $index => $item)
                                <tr class="barang-row" data-status="{{ $item->kondisi == 'Rusak Ringan' ? 'ringan' : 'berat' }}">
                                    <td>{{ $barangRusak->firstItem() + $index }}</td>
                                    <td class="col-nama">{{ $item->barang->nama_barang }}</td>
                                    <td class="col-kode">{{ $item->barang->kode_barang }}</td>
                                    <td>{{ $item->barang->merek }}</td>
                                    <td>{{ $item->barang->tipe->nama_tipe ?? '-' }}</td>
                                    <td>{{ $item->inventaris->kode_inventaris }}</td>
                                    <td>{{ $item->inventaris->gedung->nama_gedung ?? '-' }}</td>
                                    <td>{{ $item->inventaris->ruangan->nama_ruangan ?? '-' }}</td>
                                    <td>
                                        @if ($item->kondisi == 'Rusak Ringan')
                                            <span class="badge-ringan">Rusak Ringan</span>
                                        @else
                                            <span class="badge-berat">Rusak Berat</span>
                                        @endif
                                    </td>
                                    <td>
                                        <form class="archiveForm" action="{{ route('inventaris.arsipkan', $item->id_detail_inventaris) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="alasan" value="Rusak">
                                            <button type="button" class="btn-arsip btnOpenArchive">
                                                <i class="fa-solid fa-box-archive"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr id="emptyRow">
                                    <td colspan="10" align="center">Tidak ada barang rusak</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

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

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

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

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

    <!-- MODAL CONFIRMATION -->
    <div class="modal-confirm" id="archiveModal">
        <div class="modal-confirm-box">
            <div class="confirm-icon">
                <i class="fa-solid fa-box-archive"></i>
            </div>
            <h3>Arsipkan Barang?</h3>
            <p>
                Barang akan dipindahkan ke <strong>Arsip Aset</strong> dan tidak lagi berada pada inventaris aktif.
            </p>
            <div class="confirm-action">
                <button class="btn-cancel" id="cancelArchive">Batal</button>
                <button class="btn-danger" id="confirmArchive">Ya, Arsipkan</button>
            </div>
        </div>
    </div>

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

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const filterStatus = document.getElementById('filterStatus');
        const searchKeyword = document.getElementById('searchKeyword');
        const tableBody = document.getElementById('barangTableBody');
        const btnExportPdf = document.getElementById('btnExportPdf');
        const btnExportExcel = document.getElementById('btnExportExcel');
        const paginationInfo = document.getElementById('paginationInfo');
        const paginationControls = document.getElementById('paginationControls');
        let debounceTimer;

        const baseUrlPdf = "{{ route('inventaris.barang-rusak.export-pdf') }}";
        const baseUrlExcel = "{{ route('inventaris.barang-rusak.export-excel') }}";

        function updateExportLinks(params) {
            if (btnExportPdf) btnExportPdf.href = `${baseUrlPdf}?${params.toString()}`;
            if (btnExportExcel) btnExportExcel.href = `${baseUrlExcel}?${params.toString()}`;
        }

        function fetchFilteredData(targetUrl = null) {
            const status = filterStatus ? filterStatus.value : 'all';
            const keyword = searchKeyword ? searchKeyword.value : '';

            tableBody.style.opacity = '0.5';

            let fetchUrl = targetUrl;
            if (!fetchUrl) {
                const params = new URLSearchParams({ status: status, keyword: keyword });
                fetchUrl = `{{ route('inventaris.barang-rusak') }}?${params.toString()}`;
                updateExportLinks(params);
            }

            fetch(fetchUrl, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(response => response.json())
            .then(res => {
                renderTable(res.data, res.first_item);
                renderPagination(res);
                tableBody.style.opacity = '1';
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                tableBody.style.opacity = '1';
            });
        }

        function renderTable(data, firstItem) {
            if (!data || data.length === 0) {
                tableBody.innerHTML = `
                    <tr id="emptyRow">
                        <td colspan="10" align="center">Tidak ada barang rusak ditemukan</td>
                    </tr>
                `;
                return;
            }

            let html = '';
            data.forEach((item, index) => {
                const isRingan = item.kondisi === 'Rusak Ringan';
                const badge = isRingan ?
                    '<span class="badge-ringan">Rusak Ringan</span>' :
                    '<span class="badge-berat">Rusak Berat</span>';

                const routeArsip = `{{ url('inventaris/arsipkan') }}/${item.id_detail_inventaris}`;

                html += `
                    <tr class="barang-row">
                        <td>${firstItem + index}</td>
                        <td class="col-nama">${item.barang ? item.barang.nama_barang : '-'}</td>
                        <td class="col-kode">${item.barang ? item.barang.kode_barang : '-'}</td>
                        <td>${item.barang ? (item.barang.merek || '-') : '-'}</td>
                        <td>${item.barang && item.barang.tipe ? item.barang.tipe.nama_tipe : '-'}</td>
                        <td>${item.inventaris ? item.inventaris.kode_inventaris : '-'}</td>
                        <td>${item.inventaris && item.inventaris.gedung ? item.inventaris.gedung.nama_gedung : '-'}</td>
                        <td>${item.inventaris && item.inventaris.ruangan ? item.inventaris.ruangan.nama_ruangan : '-'}</td>
                        <td>${badge}</td>
                        <td>
                            <form class="archiveForm" action="${routeArsip}" method="POST">
                                @csrf
                                <input type="hidden" name="alasan" value="Rusak">
                                <button type="button" class="btn-arsip btnOpenArchive">
                                    <i class="fa-solid fa-box-archive"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                `;
            });

            tableBody.innerHTML = html;
        }

        function renderPagination(res) {
            paginationInfo.innerHTML = `Menampilkan ${res.first_item} - ${res.last_item} dari ${res.total} data`;

            let prevBtn = res.has_prev ? 
                `<a href="${res.prev_url}" class="page-link" data-url="${res.prev_url}">‹ Prev</a>` : 
                `<span class="disabled">‹ Prev</span>`;

            let nextBtn = res.has_next ? 
                `<a href="${res.next_url}" class="page-link" data-url="${res.next_url}">Next ›</a>` : 
                `<span class="disabled">Next ›</span>`;

            paginationControls.innerHTML = `
                ${prevBtn}
                <span class="active">${res.current}</span>
                ${nextBtn}
            `;
        }

        // Handler klik tombol pagination AJAX
        paginationControls.addEventListener('click', function(e) {
            if (e.target.classList.contains('page-link')) {
                e.preventDefault();
                const url = e.target.getAttribute('data-url');
                if (url) fetchFilteredData(url);
            }
        });

        if (filterStatus) {
            filterStatus.addEventListener('change', () => fetchFilteredData());
        }

        if (searchKeyword) {
            searchKeyword.addEventListener('input', function() {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    fetchFilteredData();
                }, 300);
            });
        }
    });
    </script>

@endsection