@section('title', __('Riwayat Stok'))

<x-layouts.app :title="__('Riwayat Stok')">
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show mt-2" id="flashMessage">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show mt-2" id="flashMessage">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif


    <div class="container-fluid py-4">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <x-page-header icon="bx-history" title="Riwayat Stok"
                subtitle="Pantau semua aktivitas keluar masuk oleh pegawai.">
                <!-- Tombol Export Dropdown -->
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle" type="button" id="exportDropdown"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bx bx-download me-1"></i> Export
                    </button>
                    <ul class="dropdown-menu shadow" aria-labelledby="exportDropdown">
                        <li>
                            <a class="dropdown-item d-flex align-items-center" href="#" id="exportExcelLink">
                                <i class="bx bxs-file me-2 text-success"></i> Export Excel
                            </a>

                        </li>
                        <li id="exportWordItem" style="display:none;">
                            <a class="dropdown-item d-flex align-items-center" href="#" id="exportWordLink">
                                <i class="bx bxs-file-doc me-2 text-primary"></i> Export Word
                            </a>
                        </li>
                    </ul>
                </div>
            </x-page-header>
        </div>

        <!-- 🔍 Filter Section -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body">
                <form id="filterForm">
                    <div class="row g-3 align-items-end">
                        <!-- Cari -->
                        <div class="col-md-4">
                            <label class="form-label">Cari</label>
                            <input type="text" name="search" class="form-control"
                                placeholder="Nama pegawai atau barang...">
                        </div>

                        <!-- Jenis Barang -->
                        <div class="col-md-3">
                            <label class="form-label">Jenis Barang</label>
                            <select name="jenis_barang" class="form-select">
                                <option value="">Semua Jenis</option>
                                @foreach ($jenisBarang as $j)
                                    <option value="{{ $j }}">{{ $j }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Pegawai -->
                        <div class="col-md-3">
                            <label class="form-label">Pegawai</label>
                            <select name="pegawai_id" class="form-select">
                                <option value="">Semua Pegawai</option>
                                @foreach ($pegawai as $p)
                                    <option value="{{ $p }}">{{ $p }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Status -->
                        <div class="col-md-2">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="">Semua</option>
                                <option value="Masuk">Masuk</option>
                                <option value="Keluar">Keluar</option>
                            </select>
                        </div>

                        <!-- Periode -->
                        <div class="col-md-3">
                            <label class="form-label">Periode</label>
                            <select name="periode" id="periode" class="form-select">
                                <option value="">Semua Periode</option>
                                <option value="hari">Hari Ini</option>
                                <option value="bulan">Bulan Ini</option>
                                <option value="tahun">Tahun Ini</option>
                                <option value="rentang">Rentang Tanggal</option>
                            </select>
                        </div>

                        <!-- Rentang Tanggal -->
                        <div class="col-md-4" id="rentangTanggal" style="display:none;">
                            <label class="form-label">Rentang Tanggal</label>
                            <div class="d-flex gap-2">
                                <input type="date" name="start_date" class="form-control">
                                <input type="date" name="end_date" class="form-control">
                            </div>
                        </div>

                        <!-- Tombol Reset -->
                        <div class="col-md-2">
                            <a href="{{ route('riwayatstok.index') }}" class="btn btn-outline-secondary w-100">
                                Reset Filter
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-sm border-0"">
            <div class="card shadow-sm">
                <div class="table-responsive card-body p-0" id="riwayatTable">
                    @include('partials.riwayatstok-table', ['riwayat' => $riwayat])
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const form = document.getElementById('filterForm');
            const tableContainer = document.getElementById('riwayatTable');
            const rentangTanggal = document.getElementById('rentangTanggal');
            const exportWordItem = document.getElementById('exportWordItem');
            const exportWordLink = document.getElementById('exportWordLink');
            const pegawaiSelect = form.querySelector('select[name="pegawai_id"]');
            const exportExcelLink = document.getElementById('exportExcelLink');
            const searchInput = form.querySelector('input[name="search"]');
            let typingTimer;

            // ✅ Fungsi: Update tabel via AJAX
            async function updateTable() {
                const params = new URLSearchParams(new FormData(form)).toString();
                const response = await fetch("{{ route('riwayatstok.index') }}?" + params, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                const data = await response.json();
                tableContainer.innerHTML = data.table;

                reinitBootstrapComponents();
            }

            // ✅ Fungsi: Inisialisasi ulang popover Bootstrap
            function reinitBootstrapComponents() {
                // Destroy popover lama
                document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => {
                    const oldPopover = bootstrap.Popover.getInstance(el);
                    if (oldPopover) {
                        oldPopover.dispose();
                    }
                    new bootstrap.Popover(el);
                });
            }

            // ✅ Event Delegation untuk submit form hapus
            document.body.addEventListener('submit', async function(e) {
                if (e.target.classList.contains('form-hapus-riwayat')) {
                    e.preventDefault();

                    const formHapus = e.target;
                    const url = formHapus.action;
                    const modalElement = formHapus.closest('.modal');

                    try {
                        const res = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: new URLSearchParams({
                                '_method': 'DELETE'
                            })
                        });

                        if (res.ok) {
                            // Tutup modal
                            const modal = bootstrap.Modal.getInstance(modalElement);
                            if (modal) {
                                modal.hide();
                            }

                            // Refresh tabel
                            await updateTable();

                            // Tampilkan notifikasi sukses (opsional)
                            showNotification('Data berhasil dihapus', 'success');
                        } else {
                            showNotification('Gagal menghapus data!', 'error');
                        }
                    } catch (error) {
                        console.error('Error:', error);
                        showNotification('Terjadi kesalahan!', 'error');
                    }
                }
            });

            // ✅ Fungsi notifikasi sederhana (opsional)
            function showNotification(message, type) {
                // Buat alert element
                const alertDiv = document.createElement('div');
                alertDiv.className =
                    `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show mt-2`;
                alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

                // Insert sebelum container
                const container = document.querySelector('.container-fluid');
                container.insertBefore(alertDiv, container.firstChild);

                // Auto remove setelah 5 detik
                setTimeout(() => {
                    alertDiv.classList.remove('show');
                    setTimeout(() => alertDiv.remove(), 500);
                }, 5000);
            }

            // ✅ Fungsi: Update link Export Excel
            function updateExportExcelLink() {
                const params = new URLSearchParams(new FormData(form)).toString();
                exportExcelLink.href = "{{ route('riwayatstok.export') }}?" + params;
            }

            // ✅ Fungsi: Update link Export Word
            function updateExportWordLink() {
                const params = new URLSearchParams(new FormData(form)).toString();
                const pegawaiId = pegawaiSelect.value;
                if (pegawaiId) {
                    exportWordItem.style.display = 'block';
                    exportWordLink.href = "{{ route('riwayatstok.exportWord') }}?" + params;
                } else {
                    exportWordItem.style.display = 'none';
                    exportWordLink.href = "#";
                }
            }

            // ✅ Event perubahan Pegawai
            pegawaiSelect.addEventListener('change', function() {
                updateExportWordLink();
                updateExportExcelLink();
                updateTable();
            });

            // ✅ Event perubahan untuk semua filter
            form.querySelectorAll('select, input[type="date"]').forEach(el => {
                el.addEventListener('change', () => {
                    rentangTanggal.style.display =
                        (document.getElementById('periode').value === 'rentang') ? 'block' : 'none';
                    updateTable();
                    updateExportExcelLink();
                    updateExportWordLink();
                });
            });

            // ✅ Auto update saat mengetik di pencarian
            searchInput.addEventListener('keyup', function() {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(() => {
                    updateTable();
                    updateExportExcelLink();
                    updateExportWordLink();
                }, 700);
            });

            // ✅ Event klik pagination via AJAX
            tableContainer.addEventListener('click', function(e) {
                if (e.target.tagName === 'A' && e.target.closest('.pagination')) {
                    e.preventDefault();
                    const url = e.target.getAttribute('href');

                    fetch(url, {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(res => res.json())
                        .then(data => {
                            tableContainer.innerHTML = data.table;
                            reinitBootstrapComponents();
                        })
                        .catch(err => console.error(err));
                }
            });

            // ✅ Jalankan sekali saat halaman pertama kali dimuat
            updateExportExcelLink();
            updateExportWordLink();
            reinitBootstrapComponents();
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const flash = document.getElementById("flashMessage");
            if (flash) {
                setTimeout(() => {
                    // Hilangkan efek fade dengan Bootstrap
                    flash.classList.remove("show");
                    flash.classList.add("fade");
                    // Hapus elemen dari DOM setelah transisi
                    setTimeout(() => flash.remove(), 500);
                }, 5000); // 5000 ms = 5 detik
            }
        });
    </script>
</x-layouts.app>