@extends('layouts.layoutadmin')
@section('title', 'Manajemen Feedback - Admin')

@section('content')
    <style>
        body {
            background: #f4f4f4;
        }

        .admin-dashboard {
            display: flex;
            min-height: 100vh;
            background: #f4f4f4;
        }

        .sidebar {
            width: 260px;
            background: #23272b;
            color: #fff;
            display: flex;
            flex-direction: column;
            padding: 24px 0 0 0;
            border-right: 1px solid #e5e7eb;
        }

        .sidebar .sidebar-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 24px 24px 24px;
            font-size: 1.1rem;
            font-weight: 700;
        }

        .sidebar .sidebar-header i {
            font-size: 1.6rem;
            color: #22c1b6;
        }

        .sidebar .sidebar-header span {
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
        }

        .sidebar-nav {
            flex: 1;
            padding: 0 0 0 0;
        }

        .sidebar-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-nav li {
            margin-bottom: 4px;
        }

        .sidebar-nav a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 28px;
            color: #bfc5c9;
            text-decoration: none;
            border-radius: 8px 0 0 8px;
            font-size: 1rem;
            transition: background 0.2s, color 0.2s;
        }

        .sidebar-nav a.active,
        .sidebar-nav a:hover {
            background: #22c1b6;
            color: #fff;
        }

        .sidebar-footer {
            padding: 18px 24px;
            border-top: 1px solid #333;
            background: #23272b;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.98rem;
        }

        .sidebar-footer .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #444;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .sidebar-footer .user-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .sidebar-footer .user-info span {
            color: #fff;
            font-weight: 600;
            font-size: 1rem;
        }

        .sidebar-footer .user-info small {
            color: #bfc5c9;
            font-size: 0.95rem;
        }


        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #f4f4f4;
        }

        .main-header {
            background: #fff;
            padding: 24px 32px 16px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e5e7eb;
        }

        /* Keep admin header/navbar white regardless of site dark/light mode */
        body.dark-mode .admin-dashboard .main-header,
        .admin-dashboard .main-header {
            background: #ffffff !important;
            color: #222 !important;
            border-bottom: 1px solid #e5e7eb !important;
        }

        /* Ensure header child elements keep their intended colors in dark mode */
        body.dark-mode .admin-dashboard .main-header .title,
        body.dark-mode .admin-dashboard .main-header .subtitle,
        body.dark-mode .admin-dashboard .main-header .header-actions,
        body.dark-mode .admin-dashboard .main-header .header-actions * {
            color: inherit !important;
            background: transparent !important;
        }

        .main-header .title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #222;
        }

        .main-header .subtitle {
            color: #6b7280;
            font-size: 1.05rem;
            margin-top: 2px;
        }

        .main-content {
            flex: 1;
            padding: 32px;
            overflow-y: auto;
        }
    </style>

    <div class="admin-dashboard">
        @include('admin.components.sidebar')
        <main class="main">
            <div class="main-header">
                <div>
                    <div class="title">
                        <i class="fas fa-comments me-2"></i>Manajemen Feedback
                    </div>
                    <div class="subtitle">Kelola feedback dari pengguna</div>
                </div>
                <div class="header-actions">
                    <button class="btn btn-light btn-sm" onclick="refreshData()">
                        <i class="fas fa-sync-alt me-1"></i>Refresh
                    </button>
                    <button class="btn btn-info btn-sm" onclick="exportToPDF()">
                        <i class="fas fa-file-pdf me-1"></i>Export PDF
                    </button>
                </div>
            </div>
            <div class="main-content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="card shadow-lg border-0 rounded-3">
                                <div
                                    class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center py-3">
                                    <div>
                                        <h4 class="mb-0 fw-bold">
                                            <i class="fas fa-comments me-2"></i>Manajemen Feedback
                                        </h4>
                                        <p class="mb-0 mt-1 opacity-75">Kelola feedback dari pengguna</p>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-light btn-sm" onclick="refreshData()">
                                            <i class="fas fa-sync-alt me-1"></i>Refresh
                                        </button>
                                        <button class="btn btn-info btn-sm" onclick="exportToPDF()">
                                            <i class="fas fa-file-pdf me-1"></i>Export PDF
                                        </button>
                                    </div>
                                </div>

                                <div class="card-body p-4">
                                    <!-- Stats Cards -->
                                    <div class="row mb-4">
                                        <div class="col-md-4 mb-3">
                                            <div class="card bg-gradient-primary text-white border-0">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <h6 class="text-white opacity-75 mb-1">Total Feedback</h6>
                                                            <h2 class="mb-0 fw-bold" id="totalFeedback">0</h2>
                                                        </div>
                                                        <div class="bg-white bg-opacity-25 rounded-circle p-3">
                                                            <i class="fas fa-comments fa-2x"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="card bg-gradient-success text-white border-0">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <h6 class="text-white opacity-75 mb-1">Hari Ini</h6>
                                                            <h2 class="mb-0 fw-bold" id="todayFeedback">0</h2>
                                                        </div>
                                                        <div class="display-4 opacity-50">
                                                            <i class="fas fa-calendar-day"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="card bg-gradient-info text-white border-0">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <h6 class="text-white opacity-75 mb-1">Bulan Ini</h6>
                                                            <h2 class="mb-0 fw-bold" id="monthFeedback">0</h2>
                                                        </div>
                                                        <div class="display-4 opacity-50">
                                                            <i class="fas fa-calendar-alt"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Search and Filter -->
                                    <div class="row mb-4">
                                        <div class="col-md-6 mb-3">
                                            <div class="input-group">
                                                <span class="input-group-text bg-white border-end-0">
                                                    <i class="fas fa-search text-muted"></i>
                                                </span>
                                                <input type="text" id="searchInput"
                                                    class="form-control border-start-0 ps-0"
                                                    placeholder="Cari berdasarkan nama, email, atau substansi...">
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <select id="sortBy" class="form-select">
                                                <option value="createdAt-desc">Terbaru</option>
                                                <option value="createdAt-asc">Terlama</option>
                                                <option value="name-asc">Nama (A-Z)</option>
                                                <option value="name-desc">Nama (Z-A)</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <select id="itemsPerPage" class="form-select">
                                                <option value="10">10 per halaman</option>
                                                <option value="25">25 per halaman</option>
                                                <option value="50">50 per halaman</option>
                                                <option value="100">100 per halaman</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Loading State -->
                                    <div id="loadingState" class="text-center py-5 d-none">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                        <p class="mt-3 text-muted">Memuat data feedback...</p>
                                    </div>

                                    <!-- Empty State -->
                                    <div id="emptyState" class="text-center py-5 d-none">
                                        <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
                                        <h5 class="text-muted">Belum ada feedback</h5>
                                        <p class="text-muted">Feedback dari pengguna akan muncul di sini</p>
                                    </div>

                                    <!-- Feedback Table -->
                                    <div id="tableContainer" class="table-responsive">
                                        <table class="table table-hover align-middle">
                                            <thead class="table-light">
                                                <tr>
                                                    <th width="5%">No</th>
                                                    <th width="15%">Nama</th>
                                                    <th width="20%">Email</th>
                                                    <th width="35%">Substansi</th>
                                                    <th width="15%">Tanggal</th>
                                                    <th width="10%" class="text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody id="feedbackTableBody">
                                                <!-- Data will be loaded here -->
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Pagination -->
                                    <div id="paginationContainer"
                                        class="d-flex justify-content-between align-items-center mt-4 d-none">
                                        <div class="text-muted" id="paginationInfo">
                                            Menampilkan 0 dari 0 data
                                        </div>
                                        <nav>
                                            <ul class="pagination mb-0" id="paginationList">
                                                <!-- Pagination will be generated here -->
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- View Detail Modal -->
                <div class="modal fade" id="viewModal" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header bg-gradient-primary text-white">
                                <h5 class="modal-title">
                                    <i class="fas fa-eye me-2"></i>Detail Feedback
                                </h5>
                                <button type="button" class="btn-close btn-close-white"
                                    data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold text-muted small">Nama</label>
                                        <p class="form-control-plaintext border-bottom pb-2" id="viewName">-</p>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold text-muted small">Email</label>
                                        <p class="form-control-plaintext border-bottom pb-2" id="viewEmail">-</p>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label class="form-label fw-bold text-muted small">Substansi Feedback</label>
                                        <div class="card bg-light border-0">
                                            <div class="card-body">
                                                <p class="mb-0" id="viewSubstance" style="white-space: pre-wrap;">-</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold text-muted small">Tanggal Submit</label>
                                        <p class="form-control-plaintext" id="viewCreatedAt">-</p>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold text-muted small">Terakhir Update</label>
                                        <p class="form-control-plaintext" id="viewUpdatedAt">-</p>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    <i class="fas fa-times me-1"></i>Tutup
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Edit Modal -->
                <div class="modal fade" id="editModal" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header bg-gradient-warning text-white">
                                <h5 class="modal-title">
                                    <i class="fas fa-edit me-2"></i>Edit Feedback
                                </h5>
                                <button type="button" class="btn-close btn-close-white"
                                    data-bs-dismiss="modal"></button>
                            </div>
                            <form id="editForm">
                                <div class="modal-body">
                                    <input type="hidden" id="editId">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="editName" class="form-label">Nama <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="editName" required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="editEmail" class="form-label">Email <span
                                                    class="text-danger">*</span></label>
                                            <input type="email" class="form-control" id="editEmail" required>
                                        </div>
                                        <div class="col-12 mb-3">
                                            <label for="editSubstance" class="form-label">Substansi Feedback <span
                                                    class="text-danger">*</span></label>
                                            <textarea class="form-control" id="editSubstance" rows="6" required></textarea>
                                            <div class="form-text">Maksimal 1000 karakter</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                        <i class="fas fa-times me-1"></i>Batal
                                    </button>
                                    <button type="submit" class="btn btn-warning text-white">
                                        <i class="fas fa-save me-1"></i>Simpan Perubahan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <style>
                    .bg-gradient-primary {
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    }

                    .bg-gradient-success {
                        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
                    }

                    .bg-gradient-info {
                        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                    }

                    .bg-gradient-warning {
                        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
                    }

                    .table-hover tbody tr:hover {
                        background-color: rgba(102, 126, 234, 0.05);
                        cursor: pointer;
                    }

                    .btn-action {
                        width: 32px;
                        height: 32px;
                        padding: 0;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 8px;
                        transition: all 0.3s ease;
                    }

                    .btn-action:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                    }

                    .badge-date {
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: white;
                        padding: 0.5rem 1rem;
                        border-radius: 20px;
                        font-weight: 500;
                    }

                    .card {
                        transition: all 0.3s ease;
                    }

                    .card:hover {
                        transform: translateY(-5px);
                    }

                    .input-group-text {
                        border-right: 0;
                    }

                    .form-control:focus {
                        border-color: #667eea;
                        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
                    }

                    .page-link {
                        color: #667eea;
                    }

                    .page-link:hover {
                        color: #764ba2;
                        background-color: rgba(102, 126, 234, 0.1);
                    }

                    .page-item.active .page-link {
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        border-color: #667eea;
                    }

                    .truncate-text {
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                </style>

                <!-- jsPDF for PDF Export -->
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>

                <script>
                    let feedbackData = [];
                    let filteredData = [];
                    let currentPage = 1;
                    let itemsPerPage = 10;
                    const API_BASE_URL = '{{ env('BASE_URL') }}/api/admin/feedback';

                    // Get auth token from session/localStorage
                    function getAuthToken() {
                        // Try different possible token storage keys
                        let token = localStorage.getItem('accessToken') ||
                            localStorage.getItem('token') ||
                            sessionStorage.getItem('token') ||
                            sessionStorage.getItem('accessToken');

                        return token;
                    }

                    // Initialize
                    document.addEventListener('DOMContentLoaded', function() {
                        console.log('Feedback page loaded');
                        console.log('Token:', getAuthToken());
                        loadFeedbackData();
                        setupEventListeners();
                    });

                    // Setup event listeners
                    function setupEventListeners() {
                        document.getElementById('searchInput').addEventListener('input', debounce(handleSearch, 300));
                        document.getElementById('sortBy').addEventListener('change', handleSort);
                        document.getElementById('itemsPerPage').addEventListener('change', handleItemsPerPageChange);
                        document.getElementById('editForm').addEventListener('submit', handleEditSubmit);
                    }

                    // Load feedback data
                    async function loadFeedbackData() {
                        showLoading();

                        try {
                            const token = getAuthToken();

                            if (!token) {
                                hideLoading();
                                showError('Token tidak ditemukan. Silakan login ulang.');
                                setTimeout(() => {
                                    window.location.href = '/login';
                                }, 2000);
                                return;
                            }

                            const response = await fetch(API_BASE_URL, {
                                headers: {
                                    'Authorization': `Bearer ${token}`,
                                    'Content-Type': 'application/json'
                                }
                            });

                            if (!response.ok) {
                                if (response.status === 401) {
                                    hideLoading();
                                    showError('Sesi Anda telah berakhir. Silakan login ulang.');
                                    setTimeout(() => {
                                        window.location.href = '/login';
                                    }, 2000);
                                    return;
                                }
                                throw new Error('Failed to fetch feedback data');
                            }

                            const result = await response.json();
                            console.log('API Response:', result);

                            // Handle different response structures
                            if (Array.isArray(result)) {
                                feedbackData = result;
                            } else if (result.data && Array.isArray(result.data)) {
                                feedbackData = result.data;
                            } else if (result.feedbacks && Array.isArray(result.feedbacks)) {
                                feedbackData = result.feedbacks;
                            } else {
                                feedbackData = [];
                            }

                            console.log('Feedback Data:', feedbackData);
                            filteredData = [...feedbackData];

                            updateStats();
                            renderTable();
                            hideLoading();

                            if (feedbackData.length === 0) {
                                showEmptyState();
                            }
                        } catch (error) {
                            console.error('Error loading feedback:', error);
                            hideLoading();
                            showError('Gagal memuat data feedback. Silakan refresh halaman.');
                        }
                    }

                    // Update statistics
                    function updateStats() {
                        const total = feedbackData.length;
                        const today = new Date().toDateString();
                        const thisMonth = new Date().getMonth();
                        const thisYear = new Date().getFullYear();

                        const todayCount = feedbackData.filter(f => {
                            const feedbackDate = new Date(f.createdAt);
                            return feedbackDate.toDateString() === today;
                        }).length;

                        const monthCount = feedbackData.filter(f => {
                            const feedbackDate = new Date(f.createdAt);
                            return feedbackDate.getMonth() === thisMonth && feedbackDate.getFullYear() === thisYear;
                        }).length;

                        document.getElementById('totalFeedback').textContent = total;
                        document.getElementById('todayFeedback').textContent = todayCount;
                        document.getElementById('monthFeedback').textContent = monthCount;
                    }

                    // Render table
                    function renderTable() {
                        const tbody = document.getElementById('feedbackTableBody');
                        tbody.innerHTML = '';

                        const startIndex = (currentPage - 1) * itemsPerPage;
                        const endIndex = startIndex + itemsPerPage;
                        const paginatedData = filteredData.slice(startIndex, endIndex);

                        if (paginatedData.length === 0 && filteredData.length > 0) {
                            currentPage = 1;
                            renderTable();
                            return;
                        }

                        paginatedData.forEach((feedback, index) => {
                            const row = document.createElement('tr');
                            row.innerHTML = `
            <td>${startIndex + index + 1}</td>
            <td>
                <div class="d-flex align-items-center">
                    <div class="avatar-sm bg-gradient-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 40px; height: 40px;">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>
                        <div class="fw-bold">${escapeHtml(feedback.name)}</div>
                    </div>
                </div>
            </td>
            <td>
                <i class="fas fa-envelope text-muted me-2"></i>
                ${escapeHtml(feedback.email)}
            </td>
            <td>
                <div class="truncate-text" title="${escapeHtml(feedback.substance)}">
                    ${escapeHtml(feedback.substance)}
                </div>
            </td>
            <td>
                <span class="badge badge-date">
                    <i class="far fa-calendar me-1"></i>
                    ${formatDate(feedback.createdAt)}
                </span>
            </td>
            <td class="text-center">
                <div class="btn-group" role="group">
                    <button class="btn btn-info btn-sm btn-action" onclick="viewFeedback(${feedback.id})" title="Lihat Detail">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button class="btn btn-warning btn-sm btn-action" onclick="editFeedback(${feedback.id})" title="Edit">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-danger btn-sm btn-action" onclick="deleteFeedback(${feedback.id})" title="Hapus">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        `;
                            tbody.appendChild(row);
                        });

                        renderPagination();
                    }

                    // Render pagination
                    function renderPagination() {
                        const totalPages = Math.ceil(filteredData.length / itemsPerPage);
                        const paginationList = document.getElementById('paginationList');
                        const paginationInfo = document.getElementById('paginationInfo');
                        const paginationContainer = document.getElementById('paginationContainer');

                        if (totalPages <= 1) {
                            paginationContainer.classList.add('d-none');
                            return;
                        }

                        paginationContainer.classList.remove('d-none');

                        const startIndex = (currentPage - 1) * itemsPerPage + 1;
                        const endIndex = Math.min(currentPage * itemsPerPage, filteredData.length);
                        paginationInfo.textContent = `Menampilkan ${startIndex}-${endIndex} dari ${filteredData.length} data`;

                        paginationList.innerHTML = '';

                        // Previous button
                        const prevLi = document.createElement('li');
                        prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
                        prevLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage - 1}); return false;">
        <i class="fas fa-chevron-left"></i>
    </a>`;
                        paginationList.appendChild(prevLi);

                        // Page numbers
                        let startPage = Math.max(1, currentPage - 2);
                        let endPage = Math.min(totalPages, currentPage + 2);

                        if (startPage > 1) {
                            const li = document.createElement('li');
                            li.className = 'page-item';
                            li.innerHTML = `<a class="page-link" href="#" onclick="changePage(1); return false;">1</a>`;
                            paginationList.appendChild(li);

                            if (startPage > 2) {
                                const dots = document.createElement('li');
                                dots.className = 'page-item disabled';
                                dots.innerHTML = `<span class="page-link">...</span>`;
                                paginationList.appendChild(dots);
                            }
                        }

                        for (let i = startPage; i <= endPage; i++) {
                            const li = document.createElement('li');
                            li.className = `page-item ${i === currentPage ? 'active' : ''}`;
                            li.innerHTML = `<a class="page-link" href="#" onclick="changePage(${i}); return false;">${i}</a>`;
                            paginationList.appendChild(li);
                        }

                        if (endPage < totalPages) {
                            if (endPage < totalPages - 1) {
                                const dots = document.createElement('li');
                                dots.className = 'page-item disabled';
                                dots.innerHTML = `<span class="page-link">...</span>`;
                                paginationList.appendChild(dots);
                            }

                            const li = document.createElement('li');
                            li.className = 'page-item';
                            li.innerHTML =
                                `<a class="page-link" href="#" onclick="changePage(${totalPages}); return false;">${totalPages}</a>`;
                            paginationList.appendChild(li);
                        }

                        // Next button
                        const nextLi = document.createElement('li');
                        nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
                        nextLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage + 1}); return false;">
        <i class="fas fa-chevron-right"></i>
    </a>`;
                        paginationList.appendChild(nextLi);
                    }

                    // Change page
                    function changePage(page) {
                        const totalPages = Math.ceil(filteredData.length / itemsPerPage);
                        if (page < 1 || page > totalPages) return;
                        currentPage = page;
                        renderTable();
                    }

                    // Handle search
                    function handleSearch(e) {
                        const searchTerm = e.target.value.toLowerCase();
                        filteredData = feedbackData.filter(feedback =>
                            feedback.name.toLowerCase().includes(searchTerm) ||
                            feedback.email.toLowerCase().includes(searchTerm) ||
                            feedback.substance.toLowerCase().includes(searchTerm)
                        );
                        currentPage = 1;
                        renderTable();
                    }

                    // Handle sort
                    function handleSort(e) {
                        const [field, order] = e.target.value.split('-');

                        filteredData.sort((a, b) => {
                            let aValue = a[field];
                            let bValue = b[field];

                            if (field === 'createdAt') {
                                aValue = new Date(aValue);
                                bValue = new Date(bValue);
                            }

                            if (order === 'asc') {
                                return aValue > bValue ? 1 : -1;
                            } else {
                                return aValue < bValue ? 1 : -1;
                            }
                        });

                        renderTable();
                    }

                    // Handle items per page change
                    function handleItemsPerPageChange(e) {
                        itemsPerPage = parseInt(e.target.value);
                        currentPage = 1;
                        renderTable();
                    }

                    // View feedback
                    async function viewFeedback(id) {
                        try {
                            const token = getAuthToken();
                            const response = await fetch(`${API_BASE_URL}/${id}`, {
                                headers: {
                                    'Authorization': `Bearer ${token}`,
                                    'Content-Type': 'application/json'
                                }
                            });

                            if (!response.ok) throw new Error('Failed to fetch feedback');

                            const result = await response.json();
                            console.log('View Feedback Response:', result);
                            const feedback = result.data || result;

                            document.getElementById('viewName').textContent = feedback.name;
                            document.getElementById('viewEmail').textContent = feedback.email;
                            document.getElementById('viewSubstance').textContent = feedback.substance;
                            document.getElementById('viewCreatedAt').textContent = formatDateTime(feedback.createdAt);
                            document.getElementById('viewUpdatedAt').textContent = formatDateTime(feedback.updatedAt);

                            const modal = new bootstrap.Modal(document.getElementById('viewModal'));
                            modal.show();
                        } catch (error) {
                            console.error('Error viewing feedback:', error);
                            showError('Gagal memuat detail feedback');
                        }
                    }

                    // Edit feedback
                    async function editFeedback(id) {
                        try {
                            const token = getAuthToken();
                            const response = await fetch(`${API_BASE_URL}/${id}`, {
                                headers: {
                                    'Authorization': `Bearer ${token}`,
                                    'Content-Type': 'application/json'
                                }
                            });

                            if (!response.ok) throw new Error('Failed to fetch feedback');

                            const result = await response.json();
                            console.log('Edit Feedback Response:', result);
                            const feedback = result.data || result;

                            document.getElementById('editId').value = feedback.id;
                            document.getElementById('editName').value = feedback.name;
                            document.getElementById('editEmail').value = feedback.email;
                            document.getElementById('editSubstance').value = feedback.substance;

                            const modal = new bootstrap.Modal(document.getElementById('editModal'));
                            modal.show();
                        } catch (error) {
                            console.error('Error loading feedback for edit:', error);
                            showError('Gagal memuat data feedback');
                        }
                    }

                    // Handle edit submit
                    async function handleEditSubmit(e) {
                        e.preventDefault();

                        const id = document.getElementById('editId').value;
                        const data = {
                            name: document.getElementById('editName').value,
                            email: document.getElementById('editEmail').value,
                            substance: document.getElementById('editSubstance').value
                        };

                        try {
                            const token = getAuthToken();
                            const response = await fetch(`${API_BASE_URL}/${id}`, {
                                method: 'PUT',
                                headers: {
                                    'Authorization': `Bearer ${token}`,
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify(data)
                            });

                            if (!response.ok) throw new Error('Failed to update feedback');

                            const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
                            modal.hide();

                            showSuccess('Feedback berhasil diperbarui');
                            loadFeedbackData();
                        } catch (error) {
                            console.error('Error updating feedback:', error);
                            showError('Gagal memperbarui feedback');
                        }
                    }

                    // Delete feedback
                    async function deleteFeedback(id) {
                        const result = await Swal.fire({
                            title: 'Konfirmasi Hapus',
                            text: 'Apakah Anda yakin ingin menghapus feedback ini?',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Ya, Hapus!',
                            cancelButtonText: 'Batal'
                        });

                        if (result.isConfirmed) {
                            try {
                                const token = getAuthToken();
                                const response = await fetch(`${API_BASE_URL}/${id}`, {
                                    method: 'DELETE',
                                    headers: {
                                        'Authorization': `Bearer ${token}`,
                                        'Content-Type': 'application/json'
                                    }
                                });

                                if (!response.ok) throw new Error('Failed to delete feedback');

                                showSuccess('Feedback berhasil dihapus');
                                loadFeedbackData();
                            } catch (error) {
                                console.error('Error deleting feedback:', error);
                                showError('Gagal menghapus feedback');
                            }
                        }
                    }

                    // Refresh data
                    function refreshData() {
                        // Export to PDF
                        async function exportToPDF() {
                            try {
                                // Show loading
                                Swal.fire({
                                    title: 'Membuat PDF...',
                                    text: 'Mohon tunggu sebentar',
                                    allowOutsideClick: false,
                                    didOpen: () => {
                                        Swal.showLoading();
                                    }
                                });

                                // Wait a bit for jsPDF to be ready
                                await new Promise(resolve => setTimeout(resolve, 100));

                                const {
                                    jsPDF
                                } = window.jspdf;
                                const doc = new jsPDF('l', 'mm', 'a4'); // Landscape orientation

                                // Get current date for filename
                                const now = new Date();
                                const dateStr = now.toLocaleDateString('id-ID', {
                                    day: '2-digit',
                                    month: '2-digit',
                                    year: 'numeric'
                                }).replace(/\//g, '-');
                                const timeStr = now.toLocaleTimeString('id-ID', {
                                    hour: '2-digit',
                                    minute: '2-digit'
                                }).replace(/:/g, '.');

                                // Add header
                                doc.setFontSize(18);
                                doc.setFont(undefined, 'bold');
                                doc.text('Laporan Data Feedback Pengguna', 14, 15);

                                // Add generation date
                                doc.setFontSize(10);
                                doc.setFont(undefined, 'normal');
                                doc.text(`Digenerate pada: ${now.toLocaleDateString('id-ID', { 
            weekday: 'long', 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        })}`, 14, 22);

                                // Add line separator
                                doc.setLineWidth(0.5);
                                doc.line(14, 26, 283, 26);

                                // Summary Statistics Section
                                doc.setFontSize(12);
                                doc.setFont(undefined, 'bold');
                                doc.text('Ringkasan Statistik', 14, 34);

                                const total = feedbackData.length;
                                const today = new Date().toDateString();
                                const thisMonth = new Date().getMonth();
                                const thisYear = new Date().getFullYear();

                                const todayCount = feedbackData.filter(f => {
                                    const feedbackDate = new Date(f.createdAt);
                                    return feedbackDate.toDateString() === today;
                                }).length;

                                const monthCount = feedbackData.filter(f => {
                                    const feedbackDate = new Date(f.createdAt);
                                    return feedbackDate.getMonth() === thisMonth && feedbackDate.getFullYear() === thisYear;
                                }).length;

                                const summaryData = [
                                    ['Total Feedback', total.toString()],
                                    ['Feedback Hari Ini', todayCount.toString()],
                                    ['Feedback Bulan Ini', monthCount.toString()]
                                ];

                                doc.autoTable({
                                    startY: 38,
                                    head: [
                                        ['Metrik', 'Jumlah']
                                    ],
                                    body: summaryData,
                                    theme: 'striped',
                                    headStyles: {
                                        fillColor: [102, 126, 234],
                                        textColor: [255, 255, 255],
                                        fontStyle: 'bold',
                                        fontSize: 10
                                    },
                                    bodyStyles: {
                                        fontSize: 9
                                    },
                                    columnStyles: {
                                        0: {
                                            cellWidth: 80,
                                            fontStyle: 'bold'
                                        },
                                        1: {
                                            cellWidth: 'auto',
                                            halign: 'center',
                                            fontStyle: 'bold'
                                        }
                                    },
                                    margin: {
                                        left: 14,
                                        right: 14
                                    }
                                });

                                // Feedback Data Table
                                let finalY = doc.lastAutoTable.finalY + 10;

                                doc.setFontSize(12);
                                doc.setFont(undefined, 'bold');
                                doc.text('Data Feedback Lengkap', 14, finalY);

                                // Prepare feedback data for table
                                const tableData = feedbackData.map((item, index) => [
                                    (index + 1).toString(),
                                    item.name,
                                    item.email,
                                    item.substance.length > 100 ? item.substance.substring(0, 100) + '...' : item.substance,
                                    formatDate(item.createdAt)
                                ]);

                                doc.autoTable({
                                    startY: finalY + 4,
                                    head: [
                                        ['No', 'Nama', 'Email', 'Substansi Feedback', 'Tanggal']
                                    ],
                                    body: tableData,
                                    theme: 'striped',
                                    headStyles: {
                                        fillColor: [102, 126, 234],
                                        textColor: [255, 255, 255],
                                        fontStyle: 'bold',
                                        fontSize: 9
                                    },
                                    bodyStyles: {
                                        fontSize: 8
                                    },
                                    columnStyles: {
                                        0: {
                                            cellWidth: 10,
                                            halign: 'center'
                                        },
                                        1: {
                                            cellWidth: 40
                                        },
                                        2: {
                                            cellWidth: 50
                                        },
                                        3: {
                                            cellWidth: 130
                                        },
                                        4: {
                                            cellWidth: 35,
                                            halign: 'center'
                                        }
                                    },
                                    margin: {
                                        left: 14,
                                        right: 14
                                    },
                                    styles: {
                                        overflow: 'linebreak',
                                        cellPadding: 3
                                    }
                                });

                                // Add footer to all pages
                                const pageCount = doc.internal.getNumberOfPages();
                                for (let i = 1; i <= pageCount; i++) {
                                    doc.setPage(i);
                                    doc.setFontSize(8);
                                    doc.setFont(undefined, 'normal');
                                    doc.setTextColor(150);
                                    doc.text(
                                        `Halaman ${i} dari ${pageCount}`,
                                        doc.internal.pageSize.width / 2,
                                        doc.internal.pageSize.height - 10, {
                                            align: 'center'
                                        }
                                    );
                                    doc.text(
                                        '© ' + new Date().getFullYear() + ' - Sistem Manajemen Feedback',
                                        14,
                                        doc.internal.pageSize.height - 10
                                    );
                                }

                                // Save PDF
                                doc.save(`Laporan_Feedback_${dateStr}_${timeStr}.pdf`);

                                // Show success message
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil!',
                                    text: 'PDF berhasil diexport',
                                    timer: 2000,
                                    showConfirmButton: false
                                });

                            } catch (error) {
                                console.error('Error exporting PDF:', error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: 'Gagal mengekspor PDF. Silakan coba lagi.'
                                });
                            }
                        }...rows.map(row => row.map(cell => `"${cell}"`).join(','))
                    ];

                    return csvRows.join('\n');
                    }

                    // Utility functions
                    function showLoading() {
                        document.getElementById('loadingState').classList.remove('d-none');
                        document.getElementById('tableContainer').classList.add('d-none');
                        document.getElementById('emptyState').classList.add('d-none');
                    }

                    function hideLoading() {
                        document.getElementById('loadingState').classList.add('d-none');
                        document.getElementById('tableContainer').classList.remove('d-none');
                    }

                    function showEmptyState() {
                        document.getElementById('emptyState').classList.remove('d-none');
                        document.getElementById('tableContainer').classList.add('d-none');
                    }

                    function showSuccess(message) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }

                    function showError(message) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: message
                        });
                    }

                    function formatDate(dateString) {
                        const options = {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric'
                        };
                        return new Date(dateString).toLocaleDateString('id-ID', options);
                    }

                    function formatDateTime(dateString) {
                        const options = {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                        };
                        return new Date(dateString).toLocaleDateString('id-ID', options);
                    }

                    function escapeHtml(text) {
                        const map = {
                            '&': '&amp;',
                            '<': '&lt;',
                            '>': '&gt;',
                            '"': '&quot;',
                            "'": '&#039;'
                        };
                        return text.replace(/[&<>"']/g, m => map[m]);
                    }

                    function debounce(func, wait) {
                        let timeout;
                        return function executedFunction(...args) {
                            const later = () => {
                                clearTimeout(timeout);
                                func(...args);
                            };
                            clearTimeout(timeout);
                            timeout = setTimeout(later, wait);
                        };
                    }
                </script>
            </div>
    </div>
    </main>
    </div>
@endsection