@extends('admin.layout')
@section('title', 'Quản lý Đánh giá')

@section('content')
<div class="topbar">
    <div class="topbar-greeting">
        <h1>Quản lý Đánh giá khách hàng</h1>
        <p>Danh sách các đánh giá từ người dùng trên trang chủ</p>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>Danh sách Đánh giá</h3>
    </div>
    
    <div class="card-body" style="padding: 0;">
        <div style="overflow-x: auto;">
            <table class="ad-table">
                <thead>
                    <tr>
                        <th width="50">ID</th>
                        <th>User</th>
                        <th>Nội dung</th>
                        <th>Đánh giá</th>
                        <th>Hình ảnh</th>
                        <th>Ngày tạo</th>
                        <th>Trạng thái</th>
                        <th style="text-align: right;">Thao tác</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($reviews as $review)
                    <tr>
                        <td>#{{ $review->id }}</td>
                        <td>
                            <div style="font-weight: 700; color: var(--text);">{{ $review->username }}</div>
                            <div style="font-size: 11px; color: var(--text-muted);">UID: {{ $review->user_id }}</div>
                        </td>
                        <td>
                            <div style="max-width: 300px; white-space: pre-wrap; font-size: 12px; line-height: 1.4;">{{ $review->content }}</div>
                        </td>
                        <td>
                            <div style="color: #fbbf24; font-size: 12px;">
                                @for($i = 0; $i < $review->rating; $i++)
                                    <i class="fas fa-star"></i>
                                @endfor
                            </div>
                        </td>
                        <td>
                            @if($review->image)
                                <a href="/storage/{{ $review->image }}" target="_blank">
                                    <img src="/storage/{{ $review->image }}" alt="Review Image" style="height: 40px; border-radius: 4px; object-fit: cover;">
                                </a>
                            @else
                                <span style="font-size: 11px; color: var(--text-muted);">Không có</span>
                            @endif
                        </td>
                        <td>{{ \Carbon\Carbon::parse($review->created_at)->format('d/m/Y H:i') }}</td>
                        <td>
                            <form action="{{ route('admin.reviews.toggle', $review->id) }}" method="POST" style="margin:0;">
                                @csrf @method('PUT')
                                @if($review->is_active)
                                    <button type="submit" title="Nhấn để ẩn" style="border:none; padding: 4px 10px; background: #f0fdf4; color: #166534; border-radius: 20px; font-size: 10px; font-weight: 800; cursor: pointer; transition: all 0.2s;" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">HIỂN THỊ</button>
                                @else
                                    <button type="submit" title="Nhấn để hiện" style="border:none; padding: 4px 10px; background: #fef2f2; color: #991b1b; border-radius: 20px; font-size: 10px; font-weight: 800; cursor: pointer; transition: all 0.2s;" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">ĐÃ ẨN</button>
                                @endif
                            </form>
                        </td>
                        <td style="text-align: right;">
                            <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                <button type="button" class="btn btn-sm" style="background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe;" onclick="editReview({{ json_encode($review) }})">
                                    <i class="fas fa-edit"></i> Sửa
                                </button>
                                <form action="{{ route('admin.reviews.delete', $review->id) }}" method="POST" style="margin:0;" onsubmit="return confirm('Bạn có chắc chắn muốn xóa đánh giá này vĩnh viễn không?');">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm" style="background: #fef2f2; color: #ef4444; border: 1px solid #fecaca;">
                                        <i class="fas fa-trash"></i> Xóa
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" style="text-align: center; padding: 40px 20px; color: var(--text-muted);">
                            <i class="fas fa-star" style="font-size: 32px; color: #e5e7eb; margin-bottom: 12px; display: block;"></i>
                            Chưa có đánh giá nào từ khách hàng
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Chỉnh sửa Đánh giá -->
<div id="reviewModal" style="display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center;">
    <div style="position:absolute; inset:0; background:rgba(0,0,0,0.5);" onclick="closeReviewModal()"></div>
    <div style="position:relative; background:var(--card); width:100%; max-width:500px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.2); max-height:90vh; display:flex; flex-direction:column; overflow:hidden;">
        
        <div style="padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #fafafa;">
            <h2 style="font-size: 18px; font-weight: 800; color: var(--text); margin: 0;">Chỉnh sửa Đánh giá</h2>
            <button type="button" onclick="closeReviewModal()" style="background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer;">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <form id="reviewForm" method="POST" style="overflow-y:auto; padding:24px;">
            @csrf @method('PUT')
            
            <div style="margin-bottom: 20px;">
                <label style="display:block; font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase;">Số sao (1-5)</label>
                <input type="number" name="rating" id="f_rating" class="ad-input" min="1" max="5" required style="width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;">
            </div>

            <div style="margin-bottom: 20px;">
                <label style="display:block; font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase;">Nội dung</label>
                <textarea name="content" id="f_content" class="ad-input" rows="4" required style="width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; resize: vertical;"></textarea>
            </div>

            <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px;">
                <button type="button" onclick="closeReviewModal()" class="btn" style="background: #f1f5f9; color: #475569;">Hủy bỏ</button>
                <button type="submit" class="btn" style="background: var(--accent); color: white;">LƯU THAY ĐỔI</button>
            </div>
        </form>
    </div>
</div>

<script>
    function editReview(review) {
        document.getElementById('reviewForm').action = "/admin/reviews/" + review.id;
        document.getElementById('f_rating').value = review.rating;
        document.getElementById('f_content').value = review.content;
        
        document.getElementById('reviewModal').style.display = 'flex';
    }

    function closeReviewModal() {
        document.getElementById('reviewModal').style.display = 'none';
    }
</script>
@endsection