@extends('layouts.user-dashboard')

@section('title', 'Dashboard')

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-gray-900">Dashboard Anggota</h1>
        <p class="text-sm text-gray-400 mt-1">Selamat datang, {{ auth()->user()->name ?? 'User' }}!</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        {{-- Buku Dipinjam --}}
        <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-primary-100/50 transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center shadow-lg shadow-primary-200">
                    <i class="fas fa-book-reader text-white text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-primary-600 bg-primary-50 px-2 py-1 rounded-full">Aktif</span>
            </div>
            <p class="text-3xl font-black text-gray-900">{{ $buku_dipinjam ?? 0 }}</p>
            <p class="text-xs text-gray-400 font-medium mt-1">Buku Sedang Dipinjam</p>
        </div>

        {{-- Status Keanggotaan --}}
        <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-emerald-100/50 transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-200">
                    <i class="fas fa-id-badge text-white text-lg"></i>
                </div>
                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">Verified</span>
            </div>
            <p class="text-xl font-bold text-gray-900">Aktif</p>
            <p class="text-xs text-gray-400 font-medium mt-1">Status Keanggotaan</p>
        </div>

        {{-- Informasi --}}
        <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-lg hover:shadow-amber-100/50 transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl flex items-center justify-center shadow-lg shadow-amber-200">
                    <i class="fas fa-bell text-white text-lg"></i>
                </div>
            </div>
            <p class="text-xl font-bold text-gray-900">-</p>
            <p class="text-xs text-gray-400 font-medium mt-1">Notifikasi Terbaru</p>
        </div>
    </div>

    {{-- Tabel Riwayat & Tanggungan User --}}
    <div class="mt-10">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-gray-900">Riwayat & Tanggungan Buku</h2>
        </div>
        
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            @if(isset($peminjaman) && $peminjaman->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-gray-50 border-b border-gray-200 text-gray-600 text-sm">
                                <th class="py-4 px-6 font-semibold whitespace-nowrap">Judul Buku</th>
                                <th class="py-4 px-6 font-semibold whitespace-nowrap">Tanggal Pinjam</th>
                                <th class="py-4 px-6 font-semibold whitespace-nowrap">Batas Tanggal</th>
                                <th class="py-4 px-6 font-semibold whitespace-nowrap">Total Denda</th>
                                <th class="py-4 px-6 font-semibold whitespace-nowrap">Status</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-700 text-sm">
                            @foreach($peminjaman as $item)
                                @php
                                    $is_telat = $item->total_denda > 0;
                                @endphp
                                <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors {{ $is_telat && $item->status_peminjaman == 'Dipinjam' ? 'bg-red-50/20' : '' }}">
                                    <td class="py-4 px-6 font-bold text-gray-900 max-w-xs truncate" title="{{ $item->buku->judul ?? '-' }}">
                                        {{ $item->buku->judul ?? 'Buku Tidak Tersedia' }}
                                    </td>
                                    <td class="py-4 px-6">
                                        {{ \Carbon\Carbon::parse($item->tanggal_pinjam)->translatedFormat('d M Y') }}
                                    </td>
                                    <td class="py-4 px-6 font-medium {{ $is_telat && $item->status_peminjaman == 'Dipinjam' ? 'text-red-600' : 'text-gray-700' }}">
                                        {{ \Carbon\Carbon::parse($item->tanggal_kembali)->translatedFormat('d M Y') }}
                                    </td>
                                    <td class="py-4 px-6">
                                        @if($item->total_denda > 0)
                                            <span class="text-red-600 font-bold whitespace-nowrap">
                                                Rp {{ number_format($item->total_denda, 0, ',', '.') }}
                                            </span>
                                        @else
                                            <span class="text-gray-400 font-medium">-</span>
                                        @endif
                                    </td>
                                    <td class="py-4 px-6">
                                        @if($item->status_peminjaman === 'Dipinjam')
                                            @if($is_telat)
                                                <span class="px-3 py-1 bg-red-100 text-red-700 font-bold rounded-full text-xs whitespace-nowrap"><i class="fas fa-exclamation-circle mr-1"></i> Terlambat</span>
                                            @else
                                                <span class="px-3 py-1 bg-yellow-100 text-yellow-700 font-bold rounded-full text-xs whitespace-nowrap">Sedang Dipinjam</span>
                                            @endif
                                        @elseif($item->status_peminjaman === 'Dikembalikan')
                                            <span class="px-3 py-1 bg-green-100 text-green-700 font-bold rounded-full text-xs whitespace-nowrap"><i class="fas fa-check-circle mr-1"></i> Dikembalikan</span>
                                        @else
                                            <span class="px-3 py-1 bg-gray-100 text-gray-700 font-bold rounded-full text-xs whitespace-nowrap">{{ $item->status_peminjaman }}</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="p-10 text-center flex flex-col items-center justify-center bg-gray-50/50">
                    <div class="w-20 h-20 bg-primary-50 text-primary-300 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-book-reader text-3xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-gray-900 mb-1">Peminjaman Kosong</h3>
                    <p class="text-gray-500 font-medium">Anda belum memiliki riwayat peminjaman buku.</p>
                </div>
            @endif
        </div>
    </div>
@endsection