@extends('layouts.app')
@section('title', 'My Page')

@section('content')
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
    <div class="flex items-center gap-4">
        <h2 class="text-xl font-bold text-text-dark flex items-center gap-2">
            My Page
        </h2>
        <div class="px-4 py-1.5 bg-orange-100 border border-orange-200 rounded-full text-orange-800 font-bold text-sm flex items-center gap-2 shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-orange-500">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
            </svg>
            Thẻ hiện có: <span class="text-lg">{{ $user->card }}</span>
        </div>
    </div>
    
    <form action="{{ route('user.dashboard') }}" method="GET" class="flex items-center gap-2">
        <input type="month" name="month" value="{{ $selectedMonth }}" class="form-input !py-1.5 !text-sm w-auto border-border-medium rounded">
        <button type="submit" class="btn-primary !py-1.5 !px-4 text-sm rounded shadow-sm hover:translate-y-[-1px]">Lọc</button>
    </form>
</div>

<div class="bg-white shadow-sm rounded-xl overflow-hidden border border-border-light">
    <div class="px-6 py-4 border-b border-border-light bg-gray-50/50">
        <h3 class="text-lg font-bold text-text-dark">Lịch sử nhận / gửi thẻ (Tháng {{ Carbon\Carbon::parse($selectedMonth)->format('m/Y') }})</h3>
    </div>
    
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-border-light text-sm">
            <thead class="bg-gray-50/80">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Ngày</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Loại giao dịch</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Đối tác</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider">Số lượng</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-border-light">
                @forelse($administrations as $admin_record)
                    @php
                        $isReceiver = $admin_record->msnv == $user->msnv && $admin_record->received > 0;
                    @endphp
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="px-6 py-3 whitespace-nowrap text-text-medium font-medium">{{ Carbon\Carbon::parse($admin_record->date)->format('d/m/Y') }}</td>
                        <td class="px-6 py-3 whitespace-nowrap">
                            @if($isReceiver)
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-green-100 text-green-800">Bạn đã nhận thẻ</span>
                            @else
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full bg-blue-100 text-blue-800">Bạn gửi tặng thẻ</span>
                            @endif
                        </td>
                        <td class="px-6 py-3 whitespace-nowrap font-bold text-text-dark">
                            @if($isReceiver)
                                Nhận từ: <span class="text-primary">{{ $admin_record->sender }}</span>
                            @else
                                Gửi cho: <span class="text-primary">{{ $admin_record->receiver }}</span>
                            @endif
                        </td>
                        <td class="px-6 py-3 whitespace-nowrap font-extrabold text-lg">
                            @if($isReceiver)
                                <span class="text-green-600">+{{ $admin_record->received }}</span>
                            @else
                                <span class="text-blue-600">-{{ $admin_record->sent }}</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-6 py-12 text-center text-text-light font-medium text-base">Bạn chưa có giao dịch gửi/nhận thẻ nào trong tháng này.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection