@extends('layouts.app')

@section('content')

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

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

            <!-- RINGKASAN -->
            <div class="summary-wrapper">
                <div class="summary-card">
                    <h3>{{ $countHabis }}</h3>
                    <p>Habis Masa Pakai</p>
                </div>

                <div class="summary-card">
                    <h3>{{ $countAkanHabis }}</h3>
                    <p>Akan Habis (&lt; 6 Bulan)</p>
                </div>

                <div class="summary-card">
                    <h3>{{ $totalMonitoring }}</h3>
                    <p>Total Barang Monitoring</p>
                </div>
            </div>

            <!-- FILTER & EXPORT BAR -->
            <div class="filter-export-wrapper">
                <div class="filter-card">
                    <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">Filter Status Masa Pakai</label>
                        <select id="filterStatus" class="form-control-filter">
                            <option value="all" {{ request('status') == 'all' || !request('status') ? 'selected' : '' }}>Semua Barang</option>
                            <option value="akan-habis" {{ request('status') == 'akan-habis' ? 'selected' : '' }}>Akan Habis (&lt; 6 Bulan)</option>
                            <option value="habis" {{ request('status') == 'habis' ? 'selected' : '' }}>Habis Masa Pakai</option>
                        </select>
                    </div>
                </div>

                <!-- TOMBOL DOWNLOAD / EXPORT -->
                <div class="export-buttons">
                    <a href="{{ route('barang.export-pdf', request()->query()) }}" id="btnExportPdf" class="btn-export btn-pdf" target="_blank" title="Download PDF">
                        <i class="fa-solid fa-file-pdf"></i>
                        <span>PDF</span>
                    </a>
                    <a href="{{ route('barang.export-excel', request()->query()) }}" id="btnExportExcel" class="btn-export btn-excel" title="Download Excel">
                        <i class="fa-solid fa-file-excel"></i>
                        <span>Excel</span>
                    </a>
                </div>
            </div>

            <!-- TABEL -->
            <div class="card">
                <div class="card-header-flex">
                    <h2 class="section-title">DAFTAR BARANG MASA PAKAI</h2>
                </div>

                <div class="table-responsive">
                    <table class="table-masa-pakai">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Kode Inventaris</th>
                                <th>Gedung</th>
                                <th>Ruangan</th>
                                <th>Nama Barang</th>
                                <th>Kode Barang</th>
                                <th>Merek</th>
                                <th>Tipe</th>
                                <th>Tanggal Masuk</th>
                                <th>Umur Ekonomis</th>
                                <th>Tanggal Berakhir</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="barangTableBody">
                            @forelse($barang as $index => $item)
                                @php
                                    $totalBulan = $item->barang->umur_ekonomis ?? 0;
                                    $tahun = floor($totalBulan / 12);
                                    $bulan = $totalBulan % 12;
                                @endphp
                                <tr data-status="{{ $item->status_masa_pakai }}">
                                    <td>{{ $barang->firstItem() + $index }}</td>
                                    <td>{{ $item->inventaris->kode_inventaris }}</td>
                                    <td>{{ $item->inventaris->gedung->nama_gedung ?? '-' }}</td>
                                    <td>{{ $item->inventaris->ruangan->nama_ruangan ?? '-' }}</td>
                                    <td>{{ $item->barang->nama_barang }}</td>
                                    <td>{{ $item->barang->kode_barang ?? '-' }}</td>
                                    <td>{{ $item->barang->merek ?? '-' }}</td>
                                    <td>{{ $item->barang->tipe->nama_tipe ?? '-' }}</td>
                                    <td>{{ $item->tanggal_masuk_formatted }}</td>
                                    <td>
                                        @if ($tahun > 0 && $bulan > 0)
                                            {{ $tahun }} Tahun {{ $bulan }} Bulan
                                        @elseif($tahun > 0)
                                            {{ $tahun }} Tahun
                                        @else
                                            {{ $bulan }} Bulan
                                        @endif
                                    </td>
                                    <td>{{ $item->tanggal_berakhir_formatted }}</td>
                                    <td>
                                        @if ($item->status_masa_pakai == 'habis')
                                            <span class="badge-danger">Habis Masa Pakai</span>
                                        @else
                                            <span class="badge-warning">Akan Habis</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($item->status_masa_pakai == 'habis')
                                            <div class="aksi">
                                                <form class="archiveForm" action="{{ route('inventaris.arsipkan', $item->id_detail_inventaris) }}" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="alasan" value="Habis Masa Pakai">
                                                    <button type="button" class="btn-icon btnOpenArchive" title="Arsipkan">
                                                        <i class="fa-solid fa-box-archive"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        @else
                                            <div class="aksi">
                                                <button class="btn-icon" disabled title="Terkunci">
                                                    <i class="fa-solid fa-lock"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="13" class="empty-data" align="center">Tidak ada barang yang habis masa pakai.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

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

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

    <div class="pagination" id="paginationControls">

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

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

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

    </div>

</div>

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

    <!-- MODAL ARSIP -->
    <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 ini telah <strong>habis masa pakai</strong>.<br><br>
                Barang akan dipindahkan ke <strong>Arsip Aset</strong> dan tidak dapat digunakan kembali.
            </p>
            <div class="confirm-action">
                <button type="button" class="btn-cancel" id="cancelArchive">Batal</button>
                <button type="button" class="btn-danger" id="confirmArchive">Ya, Arsipkan</button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script src="{{ asset('js/barang-habis-masa-pakai.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;

    // URL Route Utama Laravel
    const routeUrl = "{{ route('inventaris.barang-habis-masa-pakai') }}";
    
    // URL dasar Export (jika tombol export ada)
    const baseUrlPdf = btnExportPdf ? btnExportPdf.getAttribute('href').split('?')[0] : '';
    const baseUrlExcel = btnExportExcel ? btnExportExcel.getAttribute('href').split('?')[0] : '';

    // Function Update Link Export sesuai Filter & Search
    function updateExportLinks(params) {
        if (btnExportPdf && baseUrlPdf) {
            btnExportPdf.href = `${baseUrlPdf}?${params.toString()}`;
        }
        if (btnExportExcel && baseUrlExcel) {
            btnExportExcel.href = `${baseUrlExcel}?${params.toString()}`;
        }
    }

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

        // Feedback visual saat loading
        if (tableBody) tableBody.style.opacity = '0.5';

        let fetchUrl = targetUrl;
        if (!fetchUrl) {
            const params = new URLSearchParams({ status: status, keyword: keyword });
            fetchUrl = `${routeUrl}?${params.toString()}`;
            updateExportLinks(params);
        }

        fetch(fetchUrl, {
            headers: { 
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(res => {
            renderTable(res.data, res.first_item);
            renderPagination(res);
            if (tableBody) tableBody.style.opacity = '1';
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            if (tableBody) tableBody.style.opacity = '1';
        });
    }

    // Function Render Baris Tabel
    function renderTable(data, firstItem) {
        if (!tableBody) return;

        if (!data || data.length === 0) {
            tableBody.innerHTML = `
                <tr>
                    <td colspan="13" class="empty-data" align="center">Tidak ada barang yang habis masa pakai.</td>
                </tr>
            `;
            return;
        }

        let html = '';
        data.forEach((item, index) => {
            const totalBulan = item.barang ? (item.barang.umur_ekonomis || 0) : 0;
            const tahun = Math.floor(totalBulan / 12);
            const bulan = totalBulan % 12;

            let umurText = '';
            if (tahun > 0 && bulan > 0) umurText = `${tahun} Tahun ${bulan} Bulan`;
            else if (tahun > 0) umurText = `${tahun} Tahun`;
            else umurText = `${bulan} Bulan`;

            const isHabis = item.status_masa_pakai === 'habis';
            const badge = isHabis ?
                '<span class="badge-danger">Habis Masa Pakai</span>' :
                '<span class="badge-warning">Akan Habis</span>';

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

            const aksiHtml = isHabis ? `
                <div class="aksi">
                    <form class="archiveForm" action="${routeArsip}" method="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="alasan" value="Habis Masa Pakai">
                        <button type="button" class="btn-icon btnOpenArchive" title="Arsipkan">
                            <i class="fa-solid fa-box-archive"></i>
                        </button>
                    </form>
                </div>
            ` : `
                <div class="aksi">
                    <button class="btn-icon" disabled title="Terkunci">
                        <i class="fa-solid fa-lock"></i>
                    </button>
                </div>
            `;

            html += `
                <tr data-status="${item.status_masa_pakai}">
                    <td>${firstItem + index}</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>${item.barang ? item.barang.nama_barang : '-'}</td>
                    <td>${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.tanggal_masuk_formatted || '-'}</td>
                    <td>${umurText}</td>
                    <td>${item.tanggal_berakhir_formatted || '-'}</td>
                    <td>${badge}</td>
                    <td>${aksiHtml}</td>
                </tr>
            `;
        });

        tableBody.innerHTML = html;
    }

    // Function Render Pagination Link
    // Function Render Pagination Link (Simpel: Prev - Page - Next)
function renderPagination(res) {
    if (paginationInfo) {
        paginationInfo.innerHTML = `Menampilkan ${res.first_item} - ${res.last_item} dari ${res.total} data`;
    }

    if (!paginationControls) return;

    let paginationHtml = '';

    // 1. Tombol Previous (Kembali)
    if (res.has_prev) {
        paginationHtml += `<a href="${res.prev_url}" class="page-link" data-url="${res.prev_url}">‹ Prev</a>`;
    } else {
        paginationHtml += `<span class="disabled">‹ Prev</span>`;
    }

    // 2. Indikator Halaman Aktif Saja
    paginationHtml += `<span class="active">${res.current}</span>`;

    // 3. Tombol Next (Lanjut)
    if (res.has_next) {
        paginationHtml += `<a href="${res.next_url}" class="page-link" data-url="${res.next_url}">Next ›</a>`;
    } else {
        paginationHtml += `<span class="disabled">Next ›</span>`;
    }

    paginationControls.innerHTML = paginationHtml;
}

    // Event Listener Click Pagination
    if (paginationControls) {
        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);
            }
        });
    }

    // Event Listener Filter Dropdown
    if (filterStatus) {
        filterStatus.addEventListener('change', function () {
            fetchFilteredData();
        });
    }

    // Event Listener Search Input (dengan Debounce 300ms)
    if (searchKeyword) {
        searchKeyword.addEventListener('input', function () {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                fetchFilteredData();
            }, 300);
        });
    }
});
    </script>
@endpush