@extends('admin.layout.content')

@section('content')
    <div class="content-manager-container px-3 py-4">

        {{-- Notifikasi Flash Message --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <strong class="d-block mb-1">Periksa kembali isian Anda:</strong>
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div
            class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
            <div>
                <h2 class="content-manager-title h3 mb-1">Manajemen Media Sosial</h2>
                <p class="text-muted mb-0">Kelola tautan media sosial yang ditampilkan di website (Instagram, Facebook, TikTok, dll.).</p>
            </div>
            <button class="btn-add-content d-inline-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal"
                data-bs-target="#modalCreate">
                <span class="material-symbols-outlined">add</span>
                Tambah Media Sosial
            </button>
        </div>

        <div class="content-manager-card">
            <div
                class="content-filter-bar d-flex flex-column flex-sm-row-reverse justify-content-between align-items-stretch align-items-sm-center gap-3">
                <div class="search-box-wrapper">
                    <span class="material-symbols-outlined">search</span>
                    <input type="text" id="search-input" class="form-control search-box-input"
                        placeholder="Cari platform, URL...">
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small text-nowrap">Tampilkan:</span>
                    <div class="dropdown show-entries-wrapper position-relative">
                        <button
                            class="btn dropdown-toggle dropdown-toggle-select d-flex align-items-center justify-content-between"
                            type="button" id="entriesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <span id="selected-entry-value">10</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="entriesDropdown">
                            <li><a class="dropdown-item active" href="#" data-value="10">10</a></li>
                            <li><a class="dropdown-item" href="#" data-value="25">25</a></li>
                            <li><a class="dropdown-item" href="#" data-value="50">50</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table id="social-table" class="table content-data-table mb-0 align-middle">
                    <thead>
                        <tr>
                            <th style="width: 60px;">No</th>
                            <th>Nama Platform</th>
                            <th style="min-width: 200px;">Ikon (Class & Logo)</th>
                            <th>URL Profil</th>
                            <th style="width: 100px;">Status</th>
                            <th class="text-center" style="width: 140px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($socialMedias as $index => $social)
                            <tr class="social-row">
                                <td class="row-index-number" data-origin-index="{{ $index + 1 }}">{{ $index + 1 }}</td>
                                <td>
                                    <span class="content-item-name fw-semibold">{{ $social->platform_name }}</span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        {{-- Logo visual --}}
                                        <div class="icon-preview-box text-center" style="width: 44px;">
                                            <i class="{{ $social->icon_class }}" style="font-size: 28px;"></i>
                                        </div>
                                        {{-- Nama class --}}
                                        <div>
                                            <code class="small d-block">{{ $social->icon_class }}</code>
                                            <small class="text-muted" style="font-size: 0.7rem;">kelas ikon</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href="{{ $social->profile_url }}" target="_blank" class="text-truncate d-inline-block" style="max-width: 200px;">
                                        {{ Str::limit($social->profile_url, 40) }}
                                    </a>
                                </td>
                                <td>
                                    @if($social->is_active)
                                        <span class="badge bg-success">Aktif</span>
                                    @else
                                        <span class="badge bg-secondary">Tidak Aktif</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="d-inline-flex gap-1">
                                        {{-- Tombol Detail --}}
                                        <button class="btn-table-action btn-action-view" title="Detail"
                                            data-bs-toggle="modal" data-bs-target="#modalShow"
                                            data-platform="{{ $social->platform_name }}"
                                            data-icon="{{ $social->icon_class }}"
                                            data-url="{{ $social->profile_url }}"
                                            data-active="{{ $social->is_active ? 'Aktif' : 'Tidak Aktif' }}">
                                            <span class="material-symbols-outlined">visibility</span>
                                        </button>
                                        {{-- Tombol Edit --}}
                                        <button class="btn-table-action btn-action-edit" title="Edit"
                                            data-bs-toggle="modal" data-bs-target="#modalEdit"
                                            data-id="{{ $social->social_media_id }}"
                                            data-platform="{{ $social->platform_name }}"
                                            data-icon="{{ $social->icon_class }}"
                                            data-url="{{ $social->profile_url }}"
                                            data-active="{{ $social->is_active ? 1 : 0 }}">
                                            <span class="material-symbols-outlined">edit</span>
                                        </button>
                                        {{-- Tombol Hapus --}}
                                        <button class="btn-table-action btn-action-delete" title="Hapus"
                                            data-bs-toggle="modal" data-bs-target="#modalDelete"
                                            data-id="{{ $social->social_media_id }}"
                                            data-platform="{{ $social->platform_name }}">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="empty-row">
                                <td colspan="6" class="text-center text-muted py-4">Belum ada tautan media sosial.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div
                class="content-pagination-bar d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
                <p class="pagination-summary"></p>
                <nav class="d-flex align-items-center"></nav>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL TAMBAH (CREATE) ==================== --}}
    <div class="modal fade modal-modern" id="modalCreate" data-bs-backdrop="static" tabindex="-1"
        aria-labelledby="modalCreateLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 500px;">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('admin.social-media.store') }}" method="POST">
                    @csrf
                    <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light text-success-dark flex-shrink-0">
                                <span class="material-symbols-outlined" style="font-size: 22px; color: #10b981;">share</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalCreateLabel"
                                    style="font-size: 1.1rem;">Tambah Media Sosial</h5>
                                <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Isi data tautan media sosial baru</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">NAMA PLATFORM <span class="text-danger">*</span></label>
                            <input type="text" name="platform_name" class="form-control form-modern-input w-100"
                                value="{{ old('platform_name') }}" required placeholder="Contoh: Instagram, Facebook, TikTok">
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">KELAS IKON <span class="text-danger">*</span></label>
                            <input type="text" name="icon_class" class="form-control form-modern-input w-100"
                                value="{{ old('icon_class') }}" required placeholder="Contoh: fab fa-instagram, bi bi-facebook">
                            <small class="text-muted">Gunakan kelas dari Font Awesome atau Bootstrap Icons.</small>
                            <div class="mt-2 p-2 bg-light rounded" id="create-icon-preview-area" style="min-height: 60px;">
                                <span class="text-muted">Pratinjau ikon akan muncul di sini</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">URL PROFIL <span class="text-danger">*</span></label>
                            <input type="url" name="profile_url" class="form-control form-modern-input w-100"
                                value="{{ old('profile_url') }}" required placeholder="https://instagram.com/username">
                        </div>
                        <div class="mb-0">
                            <div class="form-check form-switch">
                                <input type="checkbox" name="is_active" class="form-check-input" id="createActive" value="1" {{ old('is_active') ? 'checked' : '' }}>
                                <label class="form-check-label" for="createActive">Tampilkan sebagai aktif (ditampilkan di website)</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL DETAIL (SHOW) ==================== --}}
    <div class="modal fade modal-modern" id="modalShow" tabindex="-1" aria-labelledby="modalShowLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 500px;">
            <div class="modal-content border-0 shadow">
                <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                            <span class="material-symbols-outlined" style="font-size: 22px; color: #10b981;">preview</span>
                        </div>
                        <div>
                            <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalShowLabel"
                                style="font-size: 1.1rem;">Detail Media Sosial</h5>
                            <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Informasi lengkap tautan</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="d-flex flex-column gap-3 py-1">
                        <div class="p-3 rounded-3" style="background-color: #f8fafc;">
                            <span class="d-block text-secondary fw-semibold small mb-1">NAMA PLATFORM</span>
                            <span id="show-platform" class="fw-bold text-slate-800 fs-5"></span>
                        </div>
                        <div class="p-3 rounded-3" style="background-color: #f8fafc;">
                            <span class="d-block text-secondary fw-semibold small mb-1">IKON</span>
                            <div class="d-flex align-items-center gap-4 mt-2">
                                <div style="width: 50px; height: 50px; background: #e9ecef; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i id="show-icon-logo" style="font-size: 32px;"></i>
                                </div>
                                <div>
                                    <code id="show-icon-class" class="fs-6 bg-white p-2 rounded border"></code>
                                </div>
                            </div>
                        </div>
                        <div class="p-3 rounded-3" style="background-color: #f8fafc;">
                            <span class="d-block text-secondary fw-semibold small mb-1">URL PROFIL</span>
                            <span id="show-url" class="text-slate-800"></span>
                        </div>
                        <div class="p-3 rounded-3" style="background-color: #f8fafc;">
                            <span class="d-block text-secondary fw-semibold small mb-1">STATUS</span>
                            <span id="show-status" class="badge"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 p-4">
                    <button type="button" class="btn btn-modern-secondary w-100" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL EDIT (UPDATE) ==================== --}}
    <div class="modal fade modal-modern" id="modalEdit" data-bs-backdrop="static" tabindex="-1"
        aria-labelledby="modalEditLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 500px;">
            <div class="modal-content border-0 shadow">
                <form id="form-edit" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                                <span class="material-symbols-outlined" style="font-size: 22px; color: #10b981;">edit_square</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalEditLabel"
                                    style="font-size: 1.1rem;">Perbarui Media Sosial</h5>
                                <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Edit data tautan terpilih</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">NAMA PLATFORM <span class="text-danger">*</span></label>
                            <input type="text" name="platform_name" id="edit-platform" class="form-control form-modern-input w-100" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">KELAS IKON <span class="text-danger">*</span></label>
                            <input type="text" name="icon_class" id="edit-icon" class="form-control form-modern-input w-100" required>
                            <div class="mt-2 p-2 bg-light rounded" id="edit-icon-preview-area" style="min-height: 60px;">
                                <span class="text-muted">Pratinjau ikon akan muncul di sini</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">URL PROFIL <span class="text-danger">*</span></label>
                            <input type="url" name="profile_url" id="edit-url" class="form-control form-modern-input w-100" required>
                        </div>
                        <div class="mb-0">
                            <div class="form-check form-switch">
                                <input type="checkbox" name="is_active" class="form-check-input" id="editActive" value="1">
                                <label class="form-check-label" for="editActive">Aktif (ditampilkan di website)</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL HAPUS (DELETE) ==================== --}}
    <div class="modal fade modal-modern" id="modalDelete" tabindex="-1" aria-labelledby="modalDeleteLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-3" style="max-width: 400px;">
            <div class="modal-content border-0 shadow">
                <form id="form-delete" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body text-center p-4 pt-5">
                        <div class="icon-circle-wrapper bg-danger-subtle text-danger mx-auto mb-3"
                            style="width: 56px; height: 56px; background-color: #fef2f2;">
                            <span class="material-symbols-outlined" style="font-size: 28px; color: #ef4444;">delete_forever</span>
                        </div>
                        <h5 class="fw-bold text-slate-800 mb-2">Hapus Media Sosial?</h5>
                        <p class="text-secondary mb-0 small">Tindakan ini tidak dapat dibatalkan. Anda akan menghapus:</p>
                        <div class="mt-3 p-2 rounded-3 fw-bold text-danger bg-light" id="delete-platform"
                            style="background-color: #fff5f5 !important; border: 1px dashed #fca5a5;"></div>
                    </div>
                    <div class="modal-footer bg-white border-0 d-flex gap-2 p-4 pt-0 justify-content-center">
                        <button type="button" class="btn btn-modern-secondary px-4 m-0 w-50" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger px-4 m-0 w-50" style="background-color: #ef4444; border: none;">Ya, Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        .icon-preview-box i {
            transition: all 0.2s;
        }
        .btn-action-mark-read, .btn-action-mark-unread {
            background: none;
            border: none;
            padding: 6px;
            border-radius: 8px;
            transition: all 0.2s;
            color: #6c757d;
        }
        .btn-action-mark-read:hover {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        .btn-action-mark-unread:hover {
            background-color: #fff3e0;
            color: #ed6c02;
        }
        #create-icon-preview-area i, #edit-icon-preview-area i {
            font-size: 28px;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Auto dismiss alert
            const alerts = document.querySelectorAll('.flash-alert');
            alerts.forEach(alert => {
                setTimeout(() => {
                    const bsAlert = bootstrap.Alert.getOrCreateInstance(alert);
                    if (bsAlert) bsAlert.close();
                }, 5000);
            });

            // ---------- Preview ikon di modal CREATE ----------
            const createIconInput = document.querySelector('#modalCreate input[name="icon_class"]');
            const createPreviewArea = document.getElementById('create-icon-preview-area');
            if (createIconInput && createPreviewArea) {
                function updateCreatePreview() {
                    let iconClass = createIconInput.value.trim();
                    if (iconClass) {
                        createPreviewArea.innerHTML = `<i class="${iconClass}" style="font-size: 28px;"></i> <span class="ms-2 text-muted">Pratinjau ikon</span>`;
                    } else {
                        createPreviewArea.innerHTML = '<span class="text-muted">Pratinjau ikon akan muncul di sini</span>';
                    }
                }
                createIconInput.addEventListener('input', updateCreatePreview);
            }

            // ---------- Preview ikon di modal EDIT ----------
            const editIconInput = document.getElementById('edit-icon');
            const editPreviewArea = document.getElementById('edit-icon-preview-area');
            if (editIconInput && editPreviewArea) {
                function updateEditPreview() {
                    let iconClass = editIconInput.value.trim();
                    if (iconClass) {
                        editPreviewArea.innerHTML = `<i class="${iconClass}" style="font-size: 28px;"></i> <span class="ms-2 text-muted">Pratinjau ikon</span>`;
                    } else {
                        editPreviewArea.innerHTML = '<span class="text-muted">Pratinjau ikon akan muncul di sini</span>';
                    }
                }
                editIconInput.addEventListener('input', updateEditPreview);
            }

            // Binding modal detail dengan tampilan icon class + logo
            const modalShow = document.getElementById('modalShow');
            if (modalShow) {
                modalShow.addEventListener('show.bs.modal', function(event) {
                    const btn = event.relatedTarget;
                    const platform = btn.getAttribute('data-platform');
                    const iconClass = btn.getAttribute('data-icon');
                    const url = btn.getAttribute('data-url');
                    const status = btn.getAttribute('data-active');

                    document.getElementById('show-platform').textContent = platform;
                    document.getElementById('show-icon-class').textContent = iconClass;
                    const iconLogo = document.getElementById('show-icon-logo');
                    if (iconLogo) {
                        iconLogo.className = iconClass;
                        iconLogo.style.fontSize = '32px';
                    }
                    const urlSpan = document.getElementById('show-url');
                    if (url && url !== '-') {
                        urlSpan.innerHTML = `<a href="${url}" target="_blank" class="text-decoration-none">${url}</a>`;
                    } else {
                        urlSpan.textContent = '-';
                    }
                    const statusSpan = document.getElementById('show-status');
                    statusSpan.textContent = status;
                    statusSpan.className = `badge ${status === 'Aktif' ? 'bg-success' : 'bg-secondary'}`;
                });
            }

            // Binding modal edit untuk mengisi preview ikon saat modal dibuka
            const modalEdit = document.getElementById('modalEdit');
            if (modalEdit) {
                modalEdit.addEventListener('show.bs.modal', function(event) {
                    const btn = event.relatedTarget;
                    const id = btn.getAttribute('data-id');
                    const platform = btn.getAttribute('data-platform');
                    const iconClass = btn.getAttribute('data-icon');
                    const url = btn.getAttribute('data-url');
                    const isActive = btn.getAttribute('data-active') === '1';

                    document.getElementById('edit-platform').value = platform;
                    document.getElementById('edit-icon').value = iconClass;
                    document.getElementById('edit-url').value = url;
                    document.getElementById('editActive').checked = isActive;

                    // Update preview area
                    const editPreview = document.getElementById('edit-icon-preview-area');
                    if (editPreview && iconClass) {
                        editPreview.innerHTML = `<i class="${iconClass}" style="font-size: 28px;"></i> <span class="ms-2 text-muted">Pratinjau ikon</span>`;
                    } else if (editPreview) {
                        editPreview.innerHTML = '<span class="text-muted">Pratinjau ikon akan muncul di sini</span>';
                    }

                    document.getElementById('form-edit').action = `/admin/social-media/{{ session('admin_route_code') }}/${id}`;
                });
            }

            // Binding modal delete
            const modalDelete = document.getElementById('modalDelete');
            if (modalDelete) {
                modalDelete.addEventListener('show.bs.modal', function(event) {
                    const btn = event.relatedTarget;
                    const id = btn.getAttribute('data-id');
                    document.getElementById('delete-platform').textContent = btn.getAttribute('data-platform');
                    document.getElementById('form-delete').action = `/admin/social-media/{{ session('admin_route_code') }}/${id}`;
                });
            }

            // ==================== CLIENT-SIDE FILTER & PAGINATION ====================
            const searchInput = document.getElementById('search-input');
            const dropdownItems = document.querySelectorAll('.dropdown-menu-entries .dropdown-item');
            const selectedEntryValue = document.getElementById('selected-entry-value');
            const paginationSummary = document.querySelector('.pagination-summary');
            const paginationContainer = document.querySelector('.content-pagination-bar nav');

            let currentLimit = parseInt(selectedEntryValue.textContent) || 10;
            let currentPage = 1;

            function applyFilters() {
                const rows = document.querySelectorAll('.social-row');
                const query = searchInput.value.toLowerCase().trim();

                let matchedRows = [];
                rows.forEach(row => {
                    const platform = row.cells[1]?.textContent.toLowerCase() || '';
                    const iconText = row.cells[2]?.textContent.toLowerCase() || '';
                    const url = row.cells[3]?.textContent.toLowerCase() || '';
                    const isMatch = platform.includes(query) || iconText.includes(query) || url.includes(query);
                    if (isMatch) matchedRows.push(row);
                    else row.style.display = 'none';
                });

                const totalMatch = matchedRows.length;
                const totalPages = Math.ceil(totalMatch / currentLimit) || 1;
                if (currentPage > totalPages) currentPage = totalPages;

                const startIdx = (currentPage - 1) * currentLimit;
                const endIdx = startIdx + currentLimit;

                matchedRows.forEach((row, idx) => {
                    if (idx >= startIdx && idx < endIdx) {
                        row.style.display = '';
                        const indexCell = row.querySelector('.row-index-number');
                        if (indexCell) indexCell.textContent = idx + 1;
                    } else {
                        row.style.display = 'none';
                    }
                });

                if (paginationSummary) {
                    if (totalMatch === 0) {
                        paginationSummary.textContent = "Menampilkan 0 data";
                        const emptyRow = document.querySelector('.empty-row');
                        if (emptyRow) emptyRow.style.display = '';
                    } else {
                        const emptyRow = document.querySelector('.empty-row');
                        if (emptyRow) emptyRow.style.display = 'none';
                        const fromPos = startIdx + 1;
                        const toPos = Math.min(endIdx, totalMatch);
                        paginationSummary.textContent = `Menampilkan ${fromPos} sampai ${toPos} dari ${totalMatch} entri`;
                    }
                }
                renderPagination(totalPages);
            }

            function renderPagination(totalPages) {
                if (!paginationContainer) return;
                paginationContainer.innerHTML = '';

                const prev = document.createElement('a');
                prev.href = '#';
                prev.className = `content-page-link ${currentPage === 1 ? 'disabled' : ''}`;
                prev.innerHTML = '<span class="material-symbols-outlined" style="font-size: 18px;">chevron_left</span>';
                prev.addEventListener('click', (e) => {
                    e.preventDefault();
                    if (currentPage > 1) {
                        currentPage--;
                        applyFilters();
                    }
                });
                paginationContainer.appendChild(prev);

                for (let i = 1; i <= totalPages; i++) {
                    const pageLink = document.createElement('a');
                    pageLink.href = '#';
                    pageLink.className = `content-page-link ${currentPage === i ? 'active' : ''}`;
                    pageLink.textContent = i;
                    pageLink.addEventListener('click', (e) => {
                        e.preventDefault();
                        currentPage = i;
                        applyFilters();
                    });
                    paginationContainer.appendChild(pageLink);
                }

                const next = document.createElement('a');
                next.href = '#';
                next.className = `content-page-link ${currentPage === totalPages ? 'disabled' : ''}`;
                next.innerHTML = '<span class="material-symbols-outlined" style="font-size: 18px;">chevron_right</span>';
                next.addEventListener('click', (e) => {
                    e.preventDefault();
                    if (currentPage < totalPages) {
                        currentPage++;
                        applyFilters();
                    }
                });
                paginationContainer.appendChild(next);
            }

            if (searchInput) searchInput.addEventListener('input', () => {
                currentPage = 1;
                applyFilters();
            });
            dropdownItems.forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    dropdownItems.forEach(i => i.classList.remove('active'));
                    item.classList.add('active');
                    currentLimit = parseInt(item.getAttribute('data-value'));
                    selectedEntryValue.textContent = currentLimit;
                    currentPage = 1;
                    applyFilters();
                });
            });
            applyFilters();
        });
    </script>
@endsection