@extends('admin.layout.content')

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

    {{-- Flash Messages --}}
    @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"></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"></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">Ulasan Produk</h2>
            <p class="text-muted mb-0">Kelola ulasan dari pembeli</p>
        </div>
    </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-reviews" class="form-control search-box-input" placeholder="Cari produk / reviewer...">
            </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="entriesReviewsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <span id="selected-reviews-value">10</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="entriesReviewsDropdown">
                        <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>

        {{-- Desktop Table --}}
        <div class="table-responsive th-desktop-table">
            <table class="table content-data-table mb-0 align-middle">
                <thead>
                    <tr>
                        <th style="width: 60px;">No</th>
                        <th>Produk</th>
                        <th>Reviewer</th>
                        <th>Rating</th>
                        <th>Komentar</th>
                        <th>Tanggal</th>
                        <th class="text-center" style="width: 100px;">Aksi</th>
                    </tr>
                </thead>
                <tbody id="reviews-tbody">
                    @forelse($reviews as $index => $review)
                        @php
                            $productName = $review->product->product_name ?? '-';
                            $reviewerName = $review->user->username ?? 'Anonymous';
                            $rating = $review->rating ?? 0;
                            $comment = $review->comment ?? '-';
                            $date = $review->created_at ? $review->created_at->format('d/m/Y H:i') : '-';
                        @endphp
                        <tr class="reviews-row" data-product="{{ strtolower($productName) }}" data-reviewer="{{ strtolower($reviewerName) }}">
                            <td class="row-index-number">{{ $index + 1 }}</td>
                            <td><span class="fw-semibold">{{ $productName }}</span></td>
                            <td>{{ $reviewerName }}</td>
                            <td>
                                @for($i = 1; $i <= 5; $i++)
                                    @if($i <= $rating)
                                        <span style="color:#f59e0b;font-size:1rem;">&#9733;</span>
                                    @else
                                        <span style="color:#d1d5db;font-size:1rem;">&#9733;</span>
                                    @endif
                                @endfor
                                <span class="text-muted ms-1" style="font-size:0.75rem;">({{ $rating }})</span>
                            </td>
                            <td>
                                <span class="content-item-desc">{{ $comment }}</span>
                            </td>
                            <td>{{ $date }}</td>
                            <td class="text-center">
                                <div class="d-inline-flex gap-1">
                                    <button class="btn-table-action btn-action-view" title="Detail"
                                        data-bs-toggle="modal" data-bs-target="#modalDetailReview"
                                        data-id="{{ $review->getKey() }}">
                                        <span class="material-symbols-outlined">visibility</span>
                                    </button>
                                    <button class="btn-table-action btn-action-delete" title="Hapus"
                                        data-bs-toggle="modal" data-bs-target="#modalDeleteReview"
                                        data-id="{{ $review->getKey() }}"
                                        data-product="{{ $productName }}">
                                        <span class="material-symbols-outlined">delete</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr class="empty-row">
                            <td colspan="7" class="text-center text-muted py-4">Belum ada ulasan.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Mobile Cards --}}
        <div class="th-mobile-cards" id="reviews-cards">
            @forelse($reviews as $index => $review)
                @php
                    $productName = $review->product->product_name ?? '-';
                    $reviewerName = $review->user->username ?? 'Anonymous';
                    $rating = $review->rating ?? 0;
                    $comment = $review->comment ?? '-';
                    $date = $review->created_at ? $review->created_at->format('d/m/Y H:i') : '-';
                @endphp
                <div class="th-tx-card reviews-card" data-product="{{ strtolower($productName) }}" data-reviewer="{{ strtolower($reviewerName) }}">
                    <div class="th-tx-card-header">
                        <div>
                            <div class="th-tx-card-invoice">{{ $productName }}</div>
                            <div class="th-tx-card-date">{{ $reviewerName }} &middot; {{ $date }}</div>
                        </div>
                        <div>
                            @for($i = 1; $i <= 5; $i++)
                                @if($i <= $rating)
                                    <span style="color:#f59e0b;font-size:0.9rem;">&#9733;</span>
                                @else
                                    <span style="color:#d1d5db;font-size:0.9rem;">&#9733;</span>
                                @endif
                            @endfor
                        </div>
                    </div>
                    <div class="th-tx-card-body" style="grid-template-columns: 1fr;">
                        <div>
                            <div class="th-tx-label">Komentar</div>
                            <div class="th-tx-value" style="font-size:0.85rem;white-space:normal;">{{ $comment }}</div>
                        </div>
                    </div>
                    <div class="th-tx-card-footer">
                        <div></div>
                        <div class="th-tx-card-actions">
                            <button class="btn-table-action btn-action-view" title="Detail"
                                data-bs-toggle="modal" data-bs-target="#modalDetailReview"
                                data-id="{{ $review->getKey() }}">
                                <span class="material-symbols-outlined">visibility</span>
                            </button>
                            <button class="btn-table-action btn-action-delete" title="Hapus"
                                data-bs-toggle="modal" data-bs-target="#modalDeleteReview"
                                data-id="{{ $review->getKey() }}"
                                data-product="{{ $productName }}">
                                <span class="material-symbols-outlined">delete</span>
                            </button>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted py-4">Belum ada ulasan.</div>
            @endforelse
        </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" id="reviews-summary"></p>
            <nav class="d-flex align-items-center" id="reviews-pagination"></nav>
        </div>
    </div>
</div>

{{-- MODAL DETAIL REVIEW --}}
<div class="modal fade modal-modern" id="modalDetailReview" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header 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 shadow-sm" style="width: 52px; height: 52px;">
                        <span class="material-symbols-outlined" style="font-size: 28px; color: #10b981;">rate_review</span>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold mb-0" style="font-size: 1.35rem; color: #1f2937;">Detail Ulasan</h5>
                        <small class="text-muted">Informasi lengkap ulasan pembeli</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4" id="modalDetailReviewContent">
                <div class="text-center py-4">
                    <div class="spinner-border text-success" style="width: 3rem; height: 3rem;"></div>
                    <p class="mt-2 text-muted">Memuat detail ulasan...</p>
                </div>
            </div>
            <div class="modal-footer border-0 p-3">
                <button type="button" class="btn btn-modern-secondary px-4" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL HAPUS REVIEW --}}
<div class="modal fade modal-modern" id="modalDeleteReview" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="formDeleteReview" 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;">
                        <span class="material-symbols-outlined" style="font-size: 28px;">delete_forever</span>
                    </div>
                    <h5 class="fw-bold mb-2">Hapus Ulasan?</h5>
                    <p class="text-secondary small">Ulasan berikut akan dihapus permanen:</p>
                    <div class="mt-3 p-2 rounded-3 font-monospace fw-bold text-danger bg-light" id="deleteReviewInfo"></div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0 justify-content-center gap-2">
                    <button type="button" class="btn btn-modern-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger" style="background-color: #ef4444;">Ya, Hapus</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Helper format rupiah
function formatRupiah(val) {
    try {
        return new Intl.NumberFormat('id-ID').format(Number(val) || 0);
    } catch (e) {
        return (Number(val) || 0).toString();
    }
}

// Auto close flash alerts
document.querySelectorAll('.flash-alert').forEach(alert => {
    setTimeout(() => { bootstrap.Alert.getOrCreateInstance(alert)?.close(); }, 5000);
});

// ========== PAGINATION RENDERER ==========
function renderPagination(container, totalPages, currentPage, onPageChange) {
    if (!container) return;
    container.innerHTML = '';

    const prev = document.createElement('a');
    prev.href = '#';
    prev.className = 'content-page-link ' + (currentPage === 1 ? 'disabled' : '');
    prev.innerHTML = '<span class="material-symbols-outlined">chevron_left</span>';
    prev.addEventListener('click', (e) => { e.preventDefault(); if (currentPage > 1) onPageChange(currentPage - 1); });
    container.appendChild(prev);

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

    const next = document.createElement('a');
    next.href = '#';
    next.className = 'content-page-link ' + (currentPage === totalPages ? 'disabled' : '');
    next.innerHTML = '<span class="material-symbols-outlined">chevron_right</span>';
    next.addEventListener('click', (e) => { e.preventDefault(); if (currentPage < totalPages) onPageChange(currentPage + 1); });
    container.appendChild(next);
}

// ========== REVIEWS FILTER & PAGINATION ==========
const reviewsRows = Array.from(document.querySelectorAll('#reviews-tbody .reviews-row'));
const reviewsCards = Array.from(document.querySelectorAll('#reviews-cards .reviews-card'));
const searchReviews = document.getElementById('search-reviews');
const reviewsSelectedSpan = document.getElementById('selected-reviews-value');
const reviewsSummary = document.getElementById('reviews-summary');
const reviewsPaginationNav = document.getElementById('reviews-pagination');
let reviewsLimit = parseInt(reviewsSelectedSpan.innerText) || 10;
let reviewsPage = 1;

function applyReviewsFilters() {
    const query = searchReviews.value.toLowerCase().trim();
    const allItems = [...reviewsRows, ...reviewsCards];
    return allItems.filter(item => {
        const product = (item.getAttribute('data-product') || '').toLowerCase();
        const reviewer = (item.getAttribute('data-reviewer') || '').toLowerCase();
        return product.includes(query) || reviewer.includes(query);
    });
}

function updateReviewsPagination() {
    const matched = applyReviewsFilters();
    const totalMatch = matched.length;
    const totalPages = Math.ceil(totalMatch / reviewsLimit) || 1;
    if (reviewsPage > totalPages) reviewsPage = totalPages;
    const start = (reviewsPage - 1) * reviewsLimit;
    const end = start + reviewsLimit;

    reviewsRows.forEach(row => row.style.display = 'none');
    reviewsCards.forEach(card => card.style.display = 'none');

    matched.forEach((item, idx) => {
        if (idx >= start && idx < end) {
            item.style.display = '';
            const noCell = item.querySelector('.row-index-number');
            if (noCell) noCell.innerText = idx + 1;
        } else {
            item.style.display = 'none';
        }
    });

    if (totalMatch === 0) {
        reviewsSummary.innerText = 'Menampilkan 0 data';
    } else {
        reviewsSummary.innerText = 'Menampilkan ' + (start + 1) + ' sampai ' + Math.min(end, totalMatch) + ' dari ' + totalMatch + ' entri';
    }

    renderPagination(reviewsPaginationNav, totalPages, reviewsPage, (newPage) => { reviewsPage = newPage; updateReviewsPagination(); });
}

if (searchReviews) searchReviews.addEventListener('input', () => { reviewsPage = 1; updateReviewsPagination(); });

document.querySelectorAll('#entriesReviewsDropdown').forEach(dropdown => {
    const menu = dropdown.nextElementSibling;
    if (menu) {
        menu.querySelectorAll('.dropdown-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const val = this.getAttribute('data-value');
                reviewsLimit = parseInt(val) || 10;
                reviewsPage = 1;
                reviewsSelectedSpan.innerText = val;
                menu.querySelectorAll('.dropdown-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                updateReviewsPagination();
            });
        });
    }
});

updateReviewsPagination();

// ========== MODAL DETAIL REVIEW (AJAX) ==========
const modalDetailReview = document.getElementById('modalDetailReview');
const modalDetailReviewContent = document.getElementById('modalDetailReviewContent');

modalDetailReview.addEventListener('show.bs.modal', function(event) {
    const button = event.relatedTarget;
    if (!button) return;
    const id = button.getAttribute('data-id');

    modalDetailReviewContent.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-success" style="width: 3rem; height: 3rem;"></div><p class="mt-2 text-muted">Memuat detail ulasan...</p></div>';

    fetch('/admin/reviews/{{ session('admin_route_code') }}/' + id)
        .then(response => {
            if (!response.ok) throw new Error('Gagal memuat data');
            return response.json();
        })
        .then(data => {
            let html = '';

            // Rating stars
            let stars = '';
            for (let i = 1; i <= 5; i++) {
                stars += i <= data.rating
                    ? '<span style="color:#f59e0b;font-size:1.3rem;">&#9733;</span>'
                    : '<span style="color:#d1d5db;font-size:1.3rem;">&#9733;</span>';
            }

            html += '<div class="mb-4">';
            html += '<div class="th-detail-section-title">Informasi Ulasan</div>';
            html += '<div class="th-detail-info-grid">';
            html += '<div class="th-detail-info-item"><div class="th-detail-label">Produk</div><div class="th-detail-value">' + (data.product?.product_name || '-') + '</div></div>';
            html += '<div class="th-detail-info-item"><div class="th-detail-label">Reviewer</div><div class="th-detail-value">' + (data.user?.username || 'Anonymous') + '</div></div>';
            html += '<div class="th-detail-info-item"><div class="th-detail-label">Tanggal</div><div class="th-detail-value">' + (data.created_at || '-') + '</div></div>';
            html += '<div class="th-detail-info-item"><div class="th-detail-label">Rating</div><div class="th-detail-value">' + stars + ' <span class="text-muted">(' + data.rating + '/5)</span></div></div>';
            html += '</div></div>';

            // Komentar
            html += '<div class="mb-3">';
            html += '<div class="th-detail-section-title">Komentar</div>';
            html += '<div style="background:#f9fafb;border-radius:8px;padding:14px;font-size:0.9rem;color:#1f2937;line-height:1.6;">' + (data.comment || '<em class="text-muted">Tidak ada komentar</em>') + '</div>';
            html += '</div>';

            // Media
            if (data.media && data.media.length > 0) {
                html += '<div class="mb-3">';
                html += '<div class="th-detail-section-title">Media</div>';
                html += '<div class="d-flex flex-wrap gap-2">';
                data.media.forEach(m => {
                    const fileUrl = m.file_url;
                    if (m.media_type === 'photo') {
                        html += '<a href="' + fileUrl + '" target="_blank"><img src="' + fileUrl + '" alt="Review Media" style="max-width:150px;max-height:150px;border-radius:8px;object-fit:cover;border:1px solid #e5e7eb;"></a>';
                    } else if (m.media_type === 'video') {
                        html += '<video src="' + fileUrl + '" controls style="max-width:200px;max-height:150px;border-radius:8px;"></video>';
                    } else {
                        html += '<a href="' + fileUrl + '" target="_blank" class="btn btn-sm btn-modern-secondary"><span class="material-symbols-outlined align-middle me-1" style="font-size:16px;">attach_file</span>File</a>';
                    }
                });
                html += '</div></div>';
            }

            modalDetailReviewContent.innerHTML = html;
        })
        .catch(err => {
            modalDetailReviewContent.innerHTML = '<div class="text-center text-danger py-4"><i class="material-symbols-outlined" style="font-size:48px;">error</i><p class="mt-2">Gagal memuat detail ulasan.</p></div>';
        });
});

// ========== MODAL DELETE REVIEW ==========
const modalDeleteReview = document.getElementById('modalDeleteReview');
const formDeleteReview = document.getElementById('formDeleteReview');
const deleteReviewInfo = document.getElementById('deleteReviewInfo');

modalDeleteReview.addEventListener('show.bs.modal', function(event) {
    const button = event.relatedTarget;
    if (!button) return;
    const id = button.getAttribute('data-id');
    const product = button.getAttribute('data-product');

    deleteReviewInfo.innerText = product || ('ID: ' + id);
    formDeleteReview.action = '/admin/reviews/{{ session('admin_route_code') }}/' + id;
});
</script>
@endsection