thankcard-system/resources/views/user/dashboard.blade.php

@extends('layouts.app')

@section('title', 'Trang chủ')

@section('content')
<div class="max-w-[1280px] mx-auto w-full pb-10 px-2 lg:px-8">
    
    <!-- Welcome Section -->
    <div class="mb-6 pl-1">
        <h1 class="text-[28px] font-extrabold text-[#1a2b49] flex items-center gap-2 mb-1.5 tracking-tight">
            Hey {{ Auth::check() ? (Auth::user()->name ?? 'Minh Anh') : 'Minh Anh' }}! <span class="text-2xl animate-bounce">👋</span>
        </h1>
        <p class="text-gray-500 font-medium text-[14px]">Cảm ơn bạn đã góp phần tạo nên một tập thể tuyệt vời!</p>
    </div>

    <!-- Row 1: Hero -->
    <div class="mb-6">
        <x-hero-banner />
    </div>

    <!-- Row 2: Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <x-stat-card 
            title="Thanks đã nhận" 
            value="128" 
            iconBgClass="bg-purple-50"
            iconColorClass="text-purple-500">
            <svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
        </x-stat-card>

        <x-stat-card 
            title="Thanks đã gửi" 
            value="82" 
            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>


        <x-stat-card 
            title="Thứ hạng" 
            value="#5" 
            iconBgClass="bg-green-50"
            iconColorClass="text-green-500">
            <svg class="w-[26px] h-[26px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
        </x-stat-card>
    </div>

    <!-- Row 3: Thanks Grid & Ranking -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-12 items-start">
        
        <!-- LEFT COLUMN: Thanks & Tip (Left 2/3) -->
        <div class="col-span-1 lg:col-span-2 flex flex-col flex-1 h-full gap-6">
            
            <!-- Recent Thanks Card -->
            <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 flex flex-col">
                <div class="flex items-center justify-between mb-4 pl-1 pr-1">
                    <h3 class="text-[17px] font-extrabold text-[#1a2b49]">Thanks gần đây</h3>
                    <a href="{{ route('user.received') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1">
                <x-thank-card 
                    title="GREAT JOB!" 
                    message="Cảm ơn bạn đã luôn nhiệt tình giúp đỡ và đồng hành cùng mọi người. Chúc bạn một ngày làm việc thật vui vẻ và tràn đầy năng lượng!"
                    :isLiked="false"
                    bgClass="bg-gradient-to-br from-[#FFFDF7] to-[#FFF5DD]"
                    titleColorClass="text-[#FFB800]"
                    textColorClass="text-[#4B5563]"
                />
                
                <x-thank-card 
                    title="YOU ROCK!" 
                    message="Sự cống hiến và tinh thần làm việc trách nhiệm của bạn luôn là nguồn cảm hứng lớn. Cảm ơn vì những nỗ lực không ngừng nghỉ của bạn!"
                    :isLiked="true"
                    bgClass="bg-gradient-to-br from-[#FCFAFF] to-[#F5F0FF]"
                    titleColorClass="text-[#8B5CF6]"
                    textColorClass="text-[#4B5563]"
                />
                
                <x-thank-card 
                    title="THANK YOU!" 
                    message="Rất vui và may mắn khi được làm việc cùng một người đồng nghiệp tuyệt vời. Cảm ơn bạn vì tất cả những đóng góp tích cực cho tập thể!"
                    :isLiked="false"
                    bgClass="bg-gradient-to-br from-[#FBFEFF] to-[#EDF8FF]"
                    titleColorClass="text-[#4DA6FF]"
                    textColorClass="text-[#4B5563]"
                />
            </div>
            
        </div>
        
        <!-- Info Tip Card -->
        <div class="w-full">
            <x-info-card />
        </div>
        
        <!-- Ranking (Right 1/3) -->
        <div class="col-span-1 flex flex-col w-full flex-1 h-full">
            
            <!-- Ranking Card -->
            <div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] p-6 flex flex-col h-full">
                <div class="flex items-center justify-between mb-3 pl-1 pr-1">
                    <h3 class="text-[17px] font-extrabold text-[#1a2b49]">Bảng xếp hạng</h3>
                    <a href="{{ route('user.ranking') }}" class="text-[13px] font-bold text-[#3462f7] hover:text-blue-800">Xem tất cả</a>
                </div>
                
                <!-- Tabs Toggle -->
                <div class="inline-flex bg-[#F5F7FB] rounded-xl p-1 mb-4 w-fit space-x-2">
                    <button id="tab-received" onclick="switchRankingTab('received')" class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all bg-white shadow-[0_2px_4px_rgba(0,0,0,0.04)] text-[#3462f7] font-bold text-[14px]">
                        <svg class="w-[18px] h-[18px]" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.5 4h-11c-1.38 0-2.5 1.12-2.5 2.5V8c0 2.21 1.79 4 4 4h.34c1.17 2.19 3.52 3.56 6.16 3.56s4.99-1.37 6.16-3.56h.34c2.21 0 4-1.79 4-4v-1.5c0-1.38-1.12-2.5-2.5-2.5zm-11 6c-.55 0-1-.45-1-1V6.5c0-.28.22-.5.5-.5h2v4H6.5zm11 0h-2v-4h2c.28 0 .5.22.5.5V9c0 .55-.45 1-1 1zM11 16h2v4h-2v-4zm-2 4h6v2H9v-2z"/>
                            <path fill="#ffffff" d="M12 11.5L10 7h4z"/>
                        </svg>
                        TOP Nhận
                    </button>
                    <button id="tab-sent" onclick="switchRankingTab('sent')" class="flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 font-bold text-[14px]">
                        <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M22 2L11 13"></path>
                            <path d="M22 2L15 22L11 13L2 9L22 2Z"></path>
                        </svg>
                        TOP Gửi
                    </button>
                </div>

                <!-- Tab Content: Received -->
                <div id="ranking-received" class="flex-1 flex flex-col mb-2">
                    <x-ranking-item rank="1" name="Lê Quỳnh Chi" team="Marketing Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Chi&backgroundColor=fef3c7" score="95" unit="thẻ" />
                    <x-ranking-item rank="2" name="Trần Hoàng Nam" team="Dev Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Nam&backgroundColor=e2e8f0" score="82" unit="thẻ" />
                    <x-ranking-item rank="3" name="Phạm Đức Huy" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Huy&backgroundColor=e2e8f0" score="67" unit="thẻ" />
                    
                    <div class="my-3 border-t border-dashed border-gray-100 mx-2"></div>
                    
                    <x-ranking-item rank="5" name="{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed={{ Auth::id() ?? 'MinhAnh' }}&backgroundColor=bfdbfe" score="45" unit="thẻ" :isCurrent="true" />
                </div>

                <!-- Tab Content: Sent -->
                <div id="ranking-sent" class="flex-1 flex flex-col mb-2 hidden">
                    <x-ranking-item rank="1" name="Nguyễn Văn Lâm" team="HR Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Lam&backgroundColor=fef3c7" score="88" unit="thẻ" />
                    <x-ranking-item rank="2" name="Phạm Thu Thủy" team="Admin Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Thuy&backgroundColor=e2e8f0" score="75" unit="thẻ" />
                    <x-ranking-item rank="3" name="Lê Quỳnh Chi" team="Marketing Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed=Chi&backgroundColor=e2e8f0" score="64" unit="thẻ" />
                    
                    <div class="my-3 border-t border-dashed border-gray-100 mx-2"></div>
                    
                    <x-ranking-item rank="12" name="{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}" team="Product Team" avatar="https://api.dicebear.com/7.x/notionists/svg?seed={{ Auth::id() ?? 'MinhAnh' }}&backgroundColor=bfdbfe" score="18" unit="thẻ" :isCurrent="true" />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function switchRankingTab(tab) {
        const receivedTab = document.getElementById('tab-received');
        const sentTab = document.getElementById('tab-sent');
        const receivedContent = document.getElementById('ranking-received');
        const sentContent = document.getElementById('ranking-sent');

        const activeClass = 'flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all bg-white shadow-[0_2px_4px_rgba(0,0,0,0.04)] text-[#3462f7] font-bold text-[14px]';
        const inactiveClass = 'flex items-center justify-center gap-2 w-[120px] py-2 rounded-[10px] transition-all text-[#64748b] hover:text-gray-800 font-bold text-[14px]';

        if (tab === 'received') {
            receivedTab.className = activeClass;
            sentTab.className = inactiveClass;
            receivedContent.classList.remove('hidden');
            sentContent.classList.add('hidden');
        } else {
            sentTab.className = activeClass;
            receivedTab.className = inactiveClass;
            sentContent.classList.remove('hidden');
            receivedContent.classList.add('hidden');
        }
    }
</script>
@endpush