@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h2 class="fw-bold mb-2">👋 Selamat Datang, {{ Auth::user()->name }}</h2>
                    <p class="text-muted mb-0">
                        Dashboard administrasi sistem peminjaman kendaraan PT Astra International
                    </p>
                </div>
                <div class="text-end">
                    <div class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill">
                        <i class="fas fa-calendar-alt me-2"></i>
                        {{ now()->translatedFormat('l, d F Y') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row g-4 mb-5">
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #0d6efd;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="icon-circle" style="background: rgba(13, 110, 253, 0.15); color: #0d6efd;">
                                <i class="fas fa-users fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #0d6efd;">{{ $totalUsers }}</h4>
                            <p class="text-muted mb-0">Total Pengguna</p>
                            <small style="color: #0d6efd;">
                                <i class="fas fa-user-plus me-1"></i>
                                Semua pengguna sistem
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #198754;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="icon-circle" style="background: rgba(25, 135, 84, 0.15); color: #198754;">
                                <i class="fas fa-car fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #198754;">{{ $totalVehicles }}</h4>
                            <p class="text-muted mb-0">Data Kendaraan</p>
                            <small style="color: #198754;">
                                <i class="fas fa-database me-1"></i>
                                Kendaraan tersedia
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #0dcaf0;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="icon-circle" style="background: rgba(13, 202, 240, 0.15); color: #0dcaf0;">
                                <i class="fas fa-file-alt fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #0dcaf0;">{{ $totalLoanRequests }}</h4>
                            <p class="text-muted mb-0">Total Peminjaman</p>
                            <small style="color: #0dcaf0;">
                                <i class="fas fa-chart-bar me-1"></i>
                                Semua pengajuan
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #ffc107;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="icon-circle" style="background: rgba(255, 193, 7, 0.15); color: #ffc107;">
                                <i class="fas fa-clock fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #ffc107;">{{ $menungguGA + $menungguManager }}</h4>
                            <p class="text-muted mb-0">Menunggu Persetujuan</p>
                            <small style="color: #ffc107;">
                                <i class="fas fa-hourglass-half me-1"></i>
                                Perlu tindakan
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Stats Row -->
    <div class="row g-4 mb-5">
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #6c757d;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="icon-circle" style="background: rgba(108, 117, 125, 0.15); color: #6c757d;">
                                <i class="fas fa-check-circle fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #6c757d;">{{ $disetujui }}</h4>
                            <p class="text-muted mb-0">Disetujui</p>
                            <small style="color: #6c757d;">
                                <i class="fas fa-check me-1"></i>
                                Pengajuan aktif
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #20c997;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="icon-circle" style="background: rgba(32, 201, 151, 0.15); color: #20c997;">
                                <i class="fas fa-user-tie fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #20c997;">{{ $totalManagers ?? 0 }}</h4>
                            <p class="text-muted mb-0">Manager GA</p>
                            <small style="color: #20c997;">
                                <i class="fas fa-users-cog me-1"></i>
                                Pengelola persetujuan
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #fd7e14;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="icon-circle" style="background: rgba(253, 126, 20, 0.15); color: #fd7e14;">
                                <i class="fas fa-truck fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #fd7e14;">{{ $totalDrivers ?? 0 }}</h4>
                            <p class="text-muted mb-0">Supir</p>
                            <small style="color: #fd7e14;">
                                <i class="fas fa-road me-1"></i>
                                Pengemudi aktif
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #6f42c1;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="icon-circle" style="background: rgba(111, 66, 193, 0.15); color: #6f42c1;">
                                <i class="fas fa-chart-line fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #6f42c1;">{{ $completedLoans ?? 0 }}</h4>
                            <p class="text-muted mb-0">Selesai</p>
                            <small style="color: #6f42c1;">
                                <i class="fas fa-flag-checkered me-1"></i>
                                Peminjaman selesai
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Loan Requests Section -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-transparent border-bottom-0 py-4">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <h5 class="card-title mb-1 fw-bold">
                                <i class="fas fa-history text-primary me-2"></i>
                                Riwayat Peminjaman Terbaru
                            </h5>
                            <p class="text-muted mb-0">Monitoring aktivitas peminjaman kendaraan terbaru</p>
                        </div>
                        <div class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">
                            Total: {{ $loanRequests->total() }}
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- 🔍 Filter dan Jumlah Data -->
                    <form method="GET" class="row g-3 align-items-end mb-4">
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Tampilkan</label>
                            <select name="entries" class="form-select" onchange="this.form.submit()">
                                <option value="5" {{ $entries == 5 ? 'selected' : '' }}>5 entri</option>
                                <option value="10" {{ $entries == 10 ? 'selected' : '' }}>10 entri</option>
                                <option value="25" {{ $entries == 25 ? 'selected' : '' }}>25 entri</option>
                                <option value="50" {{ $entries == 50 ? 'selected' : '' }}>50 entri</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 offset-md-3">
                            <label class="form-label fw-semibold">Pencarian</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" name="search" value="{{ $search }}" 
                                       class="form-control" placeholder="Cari nama peminjam atau kendaraan...">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search me-1"></i>Cari
                                </button>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-4 py-3 fw-semibold text-muted border-0">No</th>
                                    <th class="py-3 fw-semibold text-muted border-0">Nama Peminjam</th>
                                    <th class="py-3 fw-semibold text-muted border-0">Kendaraan</th>
                                    <th class="py-3 fw-semibold text-muted border-0">Supir</th>
                                    <th class="py-3 fw-semibold text-muted border-0">Tanggal Pinjam</th>
                                    <th class="py-3 fw-semibold text-muted border-0">Tanggal Kembali</th>
                                    <th class="pe-4 py-3 fw-semibold text-muted border-0 text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($loanRequests as $item)
                                    <tr class="border-bottom">
                                        <td class="ps-4 py-3 fw-semibold text-muted">
                                            {{ $loop->iteration + ($loanRequests->currentPage() - 1) * $loanRequests->perPage() }}
                                        </td>
                                        <td class="py-3">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-circle bg-primary bg-opacity-10 text-primary me-3">
                                                    <i class="fas fa-user fa-sm"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-semibold">{{ $item->user->name ?? '-' }}</div>
                                                    <small class="text-muted">Peminjam</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="py-3">
                                            @if($item->vehicle)
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle bg-success bg-opacity-10 text-success me-3">
                                                        <i class="fas fa-car fa-sm"></i>
                                                    </div>
                                                    <div>
                                                        <div class="fw-semibold">{{ $item->vehicle->jenis }}</div>
                                                        <small class="text-muted">{{ $item->vehicle->plat }}</small>
                                                    </div>
                                                </div>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="py-3">
                                            @if(in_array($item->status, ['assigned_to_supir','approved','in_progress','completed']))
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle bg-info bg-opacity-10 text-info me-3">
                                                        <i class="fas fa-id-card fa-sm"></i>
                                                    </div>
                                                    <div>
                                                        <div class="fw-semibold">{{ $item->driver->name ?? 'Belum ada' }}</div>
                                                        <small class="text-muted">Supir</small>
                                                    </div>
                                                </div>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="py-3">
                                            <div class="fw-semibold">{{ $item->tanggal_pinjam }}</div>
                                            <small class="text-muted">Pinjam</small>
                                        </td>
                                        <td class="py-3">
                                            <div class="fw-semibold">{{ $item->tanggal_kembali ?? '-' }}</div>
                                            <small class="text-muted">Kembali</small>
                                        </td>
                                        <td class="pe-4 py-3 text-center">
                                            @switch($item->status)
                                                @case('pending_ga')
                                                    <span class="badge px-3 py-2 rounded-pill fw-semibold" 
                                                          style="background: rgba(255, 193, 7, 0.2); color: #856404; border: 1px solid rgba(255, 193, 7, 0.3);">
                                                        <i class="fas fa-clock me-1"></i>Menunggu GA
                                                    </span>
                                                    @break
                                                @case('pending_manager')
                                                    <span class="badge px-3 py-2 rounded-pill fw-semibold" 
                                                          style="background: rgba(13, 202, 240, 0.2); color: #055160; border: 1px solid rgba(13, 202, 240, 0.3);">
                                                        <i class="fas fa-user-tie me-1"></i>Menunggu Manager
                                                    </span>
                                                    @break
                                                @case('approved')
                                                    <span class="badge px-3 py-2 rounded-pill fw-semibold" 
                                                          style="background: rgba(25, 135, 84, 0.2); color: #0f5132; border: 1px solid rgba(25, 135, 84, 0.3);">
                                                        <i class="fas fa-check me-1"></i>Disetujui
                                                    </span>
                                                    @break
                                                @case('rejected')
                                                    <span class="badge px-3 py-2 rounded-pill fw-semibold" 
                                                          style="background: rgba(220, 53, 69, 0.2); color: #721c24; border: 1px solid rgba(220, 53, 69, 0.3);">
                                                        <i class="fas fa-times me-1"></i>Ditolak
                                                    </span>
                                                    @break
                                                @default
                                                    <span class="badge px-3 py-2 rounded-pill fw-semibold" 
                                                          style="background: rgba(108, 117, 125, 0.2); color: #383d41; border: 1px solid rgba(108, 117, 125, 0.3);">
                                                        <i class="fas fa-question me-1"></i>{{ ucfirst($item->status) }}
                                                    </span>
                                            @endswitch
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-5">
                                            <div class="py-4">
                                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                                <h5 class="text-muted">Belum ada data peminjaman</h5>
                                                <p class="text-muted mb-0">Tidak ada data yang dapat ditampilkan saat ini</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- 📄 Pagination Info -->
                    <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
                        <div>
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                Menampilkan <strong>{{ $loanRequests->firstItem() }}</strong> –
                                <strong>{{ $loanRequests->lastItem() }}</strong> dari
                                <strong>{{ $loanRequests->total() }}</strong> data
                            </small>
                        </div>
                        <div>
                            {{ $loanRequests->onEachSide(1)->links('pagination::bootstrap-5') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .hover-lift {
        transition: all 0.3s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
    
    .icon-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
    
    .avatar-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
    }
    
    .card {
        border-radius: 12px;
        transition: all 0.3s ease;
    }
    
    .table th {
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .badge {
        font-weight: 500;
        font-size: 0.75rem;
    }
    
    .display-6 {
        font-size: 2.5rem;
        font-weight: 700;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add animation to cards on load
        const cards = document.querySelectorAll('.card');
        cards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
            card.classList.add('animate__animated', 'animate__fadeInUp');
        });
        
        // Add hover effects to table rows
        const tableRows = document.querySelectorAll('tbody tr');
        tableRows.forEach(row => {
            row.addEventListener('mouseenter', function() {
                this.style.backgroundColor = 'rgba(0, 102, 204, 0.02)';
                this.style.transform = 'translateX(5px)';
                this.style.transition = 'all 0.2s ease';
            });
            
            row.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '';
                this.style.transform = 'translateX(0)';
            });
        });
    });
</script>

<!-- Add Animate.css for animations -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
@endsection