@extends('layouts.app')

@section('title', 'Thanks đã gửi')

@section('content')
<div class="max-w-[1280px] mx-auto w-full pb-10 px-2 lg:px-8">

    <x-hero-banner>
        <h2 class="text-[32px] md:text-[42px] font-extrabold text-[#1a2b49] mb-3">📨 Thanks đã gửi</h2>
        <p class="text-[16px] text-gray-600 mb-6">Các lời cảm ơn bạn đã gửi tới đồng nghiệp.</p>
    </x-hero-banner>
    <div class="flex flex-col md:flex-row md:items-center gap-6 mb-8 mt-6">
        <div class="flex-1 max-w-sm">
            <x-stat-card title="Tổng số thanks gửi trong tháng" value="{{ count($cards ?? []) }}" iconBgClass="bg-blue-50" iconColorClass="text-blue-500">
                <svg class="w-[26px] h-[26px] transform -rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                </svg>
            </x-stat-card>
        </div>

        <form method="GET" class="flex items-center gap-4 bg-white p-3 md:p-4 pr-6 rounded-[24px] shadow-[0_4px_12px_rgba(0,0,0,0.03)] border border-gray-100 transition-all hover:shadow-md">
            <div class="w-12 h-12 rounded-full bg-[#f5f7ff] flex items-center justify-center text-primary">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <div>
                <label for="month" class="block text-xs font-extrabold text-gray-400 uppercase tracking-wider mb-1">Lọc theo tháng</label>
                <input type="month" id="month" name="month" class="block w-full border-0 bg-transparent p-0 text-lg font-bold text-[#1a2b49] focus:ring-0 cursor-pointer" value="{{ request('month', \Carbon\Carbon::now()->format('Y-m')) }}" onchange="this.form.submit()" />
            </div>
        </form>
    </div>


    @if (!empty($cards) && $cards->count())
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($cards as $c)
                <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-gray-100/50 p-6 flex flex-col justify-between hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5">
                    <div class="flex items-start gap-4">
                        @if($c->receiverUser)
                            <x-avatar :user="$c->receiverUser" class="w-12 h-12 rounded-full object-cover border-2 border-blue-100 flex-shrink-0" />
                            <div class="flex-1 min-w-0">
                                <h4 class="font-bold text-[#1a2b49] text-base truncate" title="{{ $c->receiverUser->name }}">{{ $c->receiverUser->name }}</h4>
                                <p class="text-xs font-semibold text-gray-400 mt-0.5">MSNV: {{ $c->receiverUser->msnv }}</p>
                                <p class="text-xs text-gray-500 mt-1 truncate" title="{{ $c->receiverUser->mail }}">{{ $c->receiverUser->mail }}</p>
                            </div>
                        @else
                            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 font-bold flex-shrink-0">
                                {{ strtoupper(substr($c->receiver ?? 'R', 0, 1)) }}
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-bold text-[#1a2b49] text-base truncate">Tới: {{ $c->receiver ?? '---' }}</h4>
                                <p class="text-xs font-semibold text-gray-400 mt-0.5">MSNV: {{ $c->receiver ?? '---' }}</p>
                            </div>
                        @endif
                    </div>
                    <div class="flex justify-between items-center mt-6 pt-4 border-t border-gray-50">
                        <span class="text-gray-400 text-xs font-medium">{{ \Carbon\Carbon::parse($c->date)->format('d/m/Y') }}</span>
                        <span class="px-3 py-1 inline-flex text-xs font-extrabold rounded-full bg-blue-50 text-blue-700 border border-blue-100/80">
                            -{{ $c->sent }} thẻ
                        </span>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <x-empty-state title="Chưa gửi Thanks" description="Bạn chưa gửi bất kỳ Thank Card nào trong tháng đã chọn." icon="hero"/>
    @endif
</div>
@endsection