@extends('layouts.member')

@section('title', 'Mes Avis')
@section('page-title', 'Mes Avis & Notes')

@section('content')
@php
    $pendingReviews = $productsToReview->count();
    $totalReviews = $myReviews->total();
    $approvedReviews = $myReviews->where('is_approved', true)->count();
    $avgRating = $myReviews->avg('rating') ?? 0;
@endphp

<div class="row g-4 mb-4">
    <div class="col-lg-3 col-md-6">
        <div class="stat-card modern shadow-sm border-0 rounded-3 bg-gradient-primary text-white">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="small mb-1 opacity-75">Produits à noter</p>
                    <h3 class="fw-700 mb-0">{{ $pendingReviews }}</h3>
                </div>
                <div class="stat-icon">
                    <i class="bi bi-star-half fs-1 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card modern shadow-sm border-0 rounded-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted small mb-1">Avis publiés</p>
                    <h3 class="fw-700 mb-0">{{ $totalReviews }}</h3>
                </div>
                <div class="stat-icon">
                    <i class="bi bi-chat-quote fs-1 text-muted opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card modern shadow-sm border-0 rounded-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted small mb-1">Avis approuvés</p>
                    <h3 class="text-success fw-700 mb-0">{{ $approvedReviews }}</h3>
                </div>
                <div class="stat-icon">
                    <i class="bi bi-check-circle fs-1 text-success opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card modern shadow-sm border-0 rounded-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted small mb-1">Note moyenne</p>
                    <h3 class="fw-700 mb-0">
                        {{ number_format($avgRating, 1) }}
                        <small class="text-warning"><i class="bi bi-star-fill"></i></small>
                    </h3>
                </div>
                <div class="stat-icon">
                    <i class="bi bi-stars fs-1 text-warning opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Produits à noter -->
@if($productsToReview->count() > 0)
<div class="card modern shadow-sm border-0 rounded-3 mb-4">
    <div class="card-header bg-gradient-warning text-dark rounded-top-3">
        <h5 class="mb-0"><i class="bi bi-star-half me-2"></i>Produits en attente de notation ({{ $productsToReview->count() }})</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Produit</th>
                        <th>Commande</th>
                        <th>Date d'achat</th>
                        <th>Date de livraison</th>
                        <th class="text-end pe-4">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($productsToReview as $item)
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center gap-3">
                                @if($item->product->main_image)
                                <img src="{{ asset('storage/' . $item->product->main_image) }}" 
                                     alt="{{ $item->product->name }}"
                                     class="rounded-2" 
                                     style="width: 50px; height: 50px; object-fit: cover;">
                                @else
                                <div class="bg-light rounded-2 d-flex align-items-center justify-content-center" 
                                     style="width: 50px; height: 50px;">
                                    <i class="bi bi-image text-muted"></i>
                                </div>
                                @endif
                                <div>
                                    <h6 class="mb-0">{{ Str::limit($item->product->name, 40) }}</h6>
                                    <small class="text-muted">Quantité: {{ $item->quantity }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <a href="{{ route('member.orders.show', $item->order) }}" class="text-primary">
                                #{{ $item->order->id }}
                            </a>
                        </td>
                        <td>{{ $item->ordered_at->format('d/m/Y') }}</td>
                        <td>{{ $item->delivered_at->format('d/m/Y') }}</td>
                        <td class="text-end pe-4">
                            <a href="{{ route('member.reviews.create', $item->product->id) }}" 
                               class="btn btn-sm btn-primary">
                                <i class="bi bi-star me-1"></i> Noter
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

<!-- Mes avis -->
<div class="card modern shadow-sm border-0 rounded-3">
    <div class="card-header bg-white rounded-top-3">
        <h5 class="mb-0"><i class="bi bi-chat-square-text me-2"></i>Mes avis publiés</h5>
    </div>
    <div class="card-body">
        @if($myReviews->count() > 0)
            <div class="row g-4">
                @foreach($myReviews as $review)
                <div class="col-12">
                    <div class="border rounded-3 p-3 {{ $review->is_approved ? '' : 'bg-light' }}">
                        <div class="d-flex justify-content-between flex-wrap gap-3">
                            <div class="d-flex gap-3">
                                @if($review->product && $review->product->main_image)
                                <img src="{{ asset('storage/' . $review->product->main_image) }}" 
                                     alt="{{ $review->product->name ?? 'Produit' }}"
                                     class="rounded-2" 
                                     style="width: 70px; height: 70px; object-fit: cover;">
                                @else
                                <div class="bg-secondary rounded-2 d-flex align-items-center justify-content-center" 
                                     style="width: 70px; height: 70px;">
                                    <i class="bi bi-image text-white"></i>
                                </div>
                                @endif
                                <div>
                                    <h6 class="mb-1">{{ $review->product->name ?? 'Produit supprimé' }}</h6>
                                    <div class="mb-2">
                                        @for($i = 1; $i <= 5; $i++)
                                            <i class="bi bi-star{{ $i <= $review->rating ? '-fill' : '' }} text-warning"></i>
                                        @endfor
                                        <span class="ms-2 text-muted small">{{ $review->rating }}/5</span>
                                    </div>
                                    @if($review->title)
                                    <strong class="d-block mb-1">{{ $review->title }}</strong>
                                    @endif
                                    <p class="text-muted mb-2">{{ $review->comment }}</p>
                                    <div class="d-flex gap-2 align-items-center">
                                        <small class="text-muted">
                                            <i class="bi bi-calendar me-1"></i>
                                            {{ $review->created_at->format('d/m/Y à H:i') }}
                                        </small>
                                        @if($review->is_approved)
                                            <span class="badge bg-success">Approuvé</span>
                                        @else
                                            <span class="badge bg-warning text-dark">En attente de modération</span>
                                        @endif
                                        @if($review->is_verified_purchase)
                                            <span class="badge bg-info">Achat vérifié</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="{{ route('member.reviews.edit', $review->id) }}" 
                                   class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form action="{{ route('member.reviews.destroy', $review->id) }}" 
                                      method="POST" 
                                      onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet avis ?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="mt-4">
                {{ $myReviews->links() }}
            </div>
        @else
            <div class="text-center py-5">
                <i class="bi bi-chat-square-text fs-1 text-muted"></i>
                <p class="text-muted mt-3">Vous n'avez pas encore publié d'avis.</p>
                @if($productsToReview->count() > 0)
                <p class="text-muted">Commencez par noter les produits que vous avez achetés ci-dessus.</p>
                @endif
            </div>
        @endif
    </div>
</div>
@endsection

@push('styles')
<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.bg-gradient-warning {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}
.stat-card {
    padding: 1.25rem;
    transition: transform 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
}
</style>
@endpush
