@extends('layouts.app')

@section('title', 'Shop Reviews - Vendor')

@section('content')
<div class="row g-4">
    <!-- Left Sidebar: Menu -->
    @include('vendor.partials.sidebar-column')

    <!-- Center: Main Catalog -->
    <div class="col-lg-7">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="fw-bold mb-0">Customer Feedback</h2>
            <div class="d-flex gap-2">
                <a href="{{ route('vendor.dashboard') }}" class="btn btn-light border text-dark shadow-sm">
                    <i class="bi bi-arrow-left me-1"></i> Dashboard
                </a>
            </div>
        </div>

        @forelse($reviews as $review)
        <div class="card shadow-sm border-0 mb-4 hover-lift">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="d-flex align-items-center">
                        <div class="bg-light rounded-circle p-2 me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                            <i class="bi bi-person text-secondary fs-4"></i>
                        </div>
                        <div>
                            <div class="fw-bold text-dark">{{ $review->user->name }}</div>
                            <small class="text-muted">{{ $review->created_at->format('d M, Y') }}</small>
                        </div>
                    </div>
                    <div class="text-warning">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="bi bi-star{{ $i <= $review->rating ? '-fill' : '' }}"></i>
                        @endfor
                    </div>
                </div>

                <div class="mb-3 px-1">
                    <small class="text-primary fw-bold text-uppercase" style="font-size: 0.65rem;">Reviewed Product:</small>
                    <div class="fw-bold small">{{ $review->product->name }}</div>
                </div>

                <p class="text-dark bg-light p-3 rounded-3 mb-4" style="font-style: italic;">
                    "{{ $review->review }}"
                </p>

                @if($review->vendor_reply)
                <div class="bg-primary bg-opacity-10 border-start border-4 border-primary p-3 rounded-3 ms-4">
                    <div class="d-flex justify-content-between mb-2">
                        <small class="fw-bold text-primary">Your Official Response</small>
                        <small class="text-muted">{{ $review->replied_at ? $review->replied_at->format('d M, Y') : '' }}</small>
                    </div>
                    <p class="small mb-0 text-dark">{{ $review->vendor_reply }}</p>
                </div>
                @else
                <div class="ms-4">
                    <button class="btn btn-sm btn-outline-primary px-3" type="button" data-bs-toggle="collapse" data-bs-target="#replyForm{{ $review->id }}">
                        <i class="bi bi-reply-all me-1"></i> Post a Reply
                    </button>
                    <div class="collapse mt-3" id="replyForm{{ $review->id }}">
                        <form action="{{ route('vendor.reviews.reply', $review->id) }}" method="POST">
                            @csrf
                            <textarea name="reply" class="form-control form-control-sm mb-2" rows="3" placeholder="Write your professional response here..." required></textarea>
                            <div class="d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-sm btn-light border" data-bs-toggle="collapse" data-bs-target="#replyForm{{ $review->id }}">Cancel</button>
                                <button type="submit" class="btn btn-sm btn-primary px-4">Post Response</button>
                            </div>
                        </form>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @empty
        <div class="card shadow-sm border-0 py-5 text-center">
            <div class="display-1 text-muted opacity-25 mb-4"><i class="bi bi-chat-heart"></i></div>
            <h4 class="fw-bold">No Reviews Yet</h4>
            <p class="text-muted">Feedback from your customers will appear here.</p>
        </div>
        @endforelse

        <div class="mt-4">
            {{ $reviews->links('pagination::bootstrap-5') }}
        </div>
    </div>
    
    <!-- Right Sidebar: Stats & Activity -->
    <div class="col-lg-3">
        <h5 class="fw-bold mb-3 ps-1">Reputation IQ</h5>
        
        <div class="card border-0 shadow-sm mb-4 bg-dark text-white p-4">
            <div class="text-center mb-3">
                <div class="display-4 fw-bold text-warning mb-0">{{ number_format($stats['avg_rating'], 1) }}</div>
                <div class="text-warning fs-5">
                    @for($i = 1; $i <= 5; $i++)
                        <i class="bi bi-star{{ $i <= round($stats['avg_rating']) ? '-fill' : '' }}"></i>
                    @endfor
                </div>
                <small class="opacity-50">Shop Global Rating</small>
            </div>
            <hr class="opacity-25">
            <div class="d-flex justify-content-between small">
                <span class="opacity-75">Total Verified Reviews</span>
                <span class="fw-bold">{{ $stats['total_reviews'] }}</span>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-0">
                <h6 class="fw-bold mb-0">Response Pulse</h6>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    <div class="list-group-item border-bottom-0 py-3">
                        <div class="d-flex align-items-center">
                             <div class="flex-shrink-0">
                                <span class="bg-primary bg-opacity-10 text-primary p-2 rounded-circle" style="width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;">
                                    <i class="bi bi-chat-quote"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-0 fw-bold" style="font-size: 0.85rem;">Pending Responses</h6>
                                <div class="h5 fw-bold text-primary mb-0">{{ $stats['pending_replies'] }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-0">
                <h6 class="fw-bold mb-0">Recent Trends</h6>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    @foreach($recentActivities as $activity)
                    <div class="list-group-item border-bottom-0 py-3">
                        <div class="d-flex align-items-center">
                             <div class="flex-shrink-0">
                                <span class="bg-light text-primary p-2 rounded-circle" style="width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;">
                                    @if($activity['type'] == 'star') <i class="bi bi-star-fill text-warning"></i>
                                    @elseif($activity['type'] == 'reply') <i class="bi bi-send-check text-success"></i>
                                    @else <i class="bi bi-exclamation-triangle text-danger"></i>
                                    @endif
                                </span>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-0 fw-bold" style="font-size: 0.85rem;">{{ $activity['title'] }}</h6>
                                <small class="text-muted" style="font-size: 0.7rem;"><i class="bi bi-clock me-1"></i>{{ $activity['time'] }}</small>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        
        <div class="alert alert-primary border-0 shadow-sm small">
             <i class="bi bi-lightbulb-fill me-2"></i>
             Replying to reviews within 24 hours increases customer trust by 40%.
        </div>
    </div>
</div>

<style>
    .hover-lift { transition: transform 0.2s ease, shadow 0.2s ease; }
    .hover-lift:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.08)!important; }
</style>
@endsection