@extends('layouts.master')
@section('title') Supplier Surveys @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Procurement @endslot
@slot('title') Supplier Satisfaction Insights @endslot
@endcomponent

{{-- KPI cards --}}
<div class="row">
    @php
        $cards = [
            ['l' => 'Satisfaction', 'v' => $stats['satisfaction'].'%', 'i' => 'ri-emotion-happy-line', 'b' => 'success'],
            ['l' => 'Avg Rating', 'v' => number_format($stats['avg_rating'],1).' / 5', 'i' => 'ri-star-line', 'b' => 'warning'],
            ['l' => 'Responses', 'v' => $stats['completed'].' / '.$stats['total'], 'i' => 'ri-survey-line', 'b' => 'info'],
            ['l' => 'Response Rate', 'v' => $stats['response_rate'].'%', 'i' => 'ri-pie-chart-line', 'b' => 'primary'],
        ];
    @endphp
    @foreach($cards as $c)
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <p class="text-uppercase fw-medium text-muted mb-3">{{ $c['l'] }}</p>
                <div class="d-flex align-items-end justify-content-between">
                    <h4 class="fs-22 fw-semibold mb-0">{{ $c['v'] }}</h4>
                    <div class="avatar-sm"><span class="avatar-title bg-{{ $c['b'] }}-subtle rounded fs-3"><i class="{{ $c['i'] }} text-{{ $c['b'] }}"></i></span></div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="row">
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header"><h5 class="card-title mb-0">Sentiment</h5></div>
            <div class="card-body text-center">
                <div class="d-flex justify-content-around align-items-center">
                    <div>
                        <div style="font-size:46px">👍</div>
                        <h4 class="text-success mb-0">{{ $stats['thumbs_up'] }}</h4>
                        <small class="text-muted">Thumbs Up</small>
                    </div>
                    <div>
                        <div style="font-size:46px">👎</div>
                        <h4 class="text-danger mb-0">{{ $stats['thumbs_down'] }}</h4>
                        <small class="text-muted">Thumbs Down</small>
                    </div>
                </div>
                @php $totalSent = $stats['thumbs_up'] + $stats['thumbs_down']; @endphp
                <div class="progress mt-3" style="height:10px">
                    <div class="progress-bar bg-success" style="width: {{ $totalSent ? round($stats['thumbs_up']/$totalSent*100) : 0 }}%"></div>
                    <div class="progress-bar bg-danger" style="width: {{ $totalSent ? round($stats['thumbs_down']/$totalSent*100) : 0 }}%"></div>
                </div>
                <small class="text-muted d-block mt-2">{{ $stats['pending'] }} survey(s) awaiting response</small>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h5 class="card-title mb-0">Star Distribution</h5></div>
            <div class="card-body">
                @for($r=5;$r>=1;$r--)
                @php $rc = $ratingBreakdown[$r] ?? 0; $pct = $stats['completed'] ? round($rc/$stats['completed']*100) : 0; @endphp
                <div class="d-flex align-items-center mb-2">
                    <span class="text-nowrap me-2" style="width:48px">{{ $r }} <i class="ri-star-fill text-warning"></i></span>
                    <div class="progress flex-grow-1" style="height:8px"><div class="progress-bar bg-warning" style="width:{{ $pct }}%"></div></div>
                    <span class="ms-2 text-muted" style="width:36px">{{ $rc }}</span>
                </div>
                @endfor
            </div>
        </div>
    </div>

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header"><h5 class="card-title mb-0">Recent Responses</h5></div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr><th>Supplier</th><th>Requisition</th><th class="text-center">Sentiment</th><th class="text-center">Rating</th><th>Comment</th><th>Date</th></tr>
                        </thead>
                        <tbody>
                            @forelse($recent as $s)
                            <tr>
                                <td class="fw-medium">{{ $s->supplier?->name }}</td>
                                <td>{{ $s->requisition?->reference_no ?? '—' }}</td>
                                <td class="text-center" style="font-size:20px">{{ $s->sentiment === 'up' ? '👍' : '👎' }}</td>
                                <td class="text-center text-warning text-nowrap">@for($i=1;$i<=5;$i++){{ $i <= $s->rating ? '★' : '☆' }}@endfor</td>
                                <td>{{ \Illuminate\Support\Str::limit($s->comment, 50) ?: '—' }}</td>
                                <td>{{ optional($s->submitted_at)->format('d M Y') }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center text-muted py-4">No completed surveys yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection