@extends('layouts.manager_ga')

@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">🏢 Dashboard Manager GA</h2>
                    <p class="text-muted mb-0">
                        Selamat datang, <strong class="text-primary">{{ Auth::user()->name }}</strong> 👋<br>
                        Berikut ringkasan status pengajuan kendaraan yang diteruskan oleh GA.
                    </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-4 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;">{{ $waiting_count }}</h4>
                            <p class="text-muted mb-0">Menunggu Persetujuan</p>
                            <small style="color: #ffc107;">
                                <i class="fas fa-trending-up me-1"></i>
                                Perlu tindakan segera
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-4 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-check-circle fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #198754;">{{ $approved_count }}</h4>
                            <p class="text-muted mb-0">Disetujui</p>
                            <small style="color: #198754;">
                                <i class="fas fa-check me-1"></i>
                                Pengajuan aktif
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-4 col-md-6">
            <div class="card border-0 shadow-sm h-100 hover-lift" style="border-left: 4px solid #dc3545;">
                <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(220, 53, 69, 0.15); color: #dc3545;">
                                <i class="fas fa-times-circle fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #dc3545;">{{ $rejected_count }}</h4>
                            <p class="text-muted mb-0">Ditolak</p>
                            <small style="color: #dc3545;">
                                <i class="fas fa-ban me-1"></i>
                                Pengajuan ditolak
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent 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-list-ul text-primary me-2"></i>
                                Pengajuan Terbaru
                            </h5>
                            <p class="text-muted mb-0">5 pengajuan kendaraan terbaru yang memerlukan perhatian</p>
                        </div>
                        <div class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">
                            Total: {{ $recent_requests->count() }}
                        </div>
                    </div>
                </div>
                
                <div class="card-body p-0">
                    <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 Karyawan</th>
                                    <th class="py-3 fw-semibold text-muted border-0">Keterangan</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($recent_requests as $req)
                                    <tr class="border-bottom">
                                        <td class="ps-4 py-3 fw-semibold text-muted">{{ $loop->iteration }}</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">{{ $req->user->name }}</div>
                                                    <small class="text-muted">{{ $req->user->email ?? '' }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="py-3">
                                            <span class="text-truncate d-inline-block" style="max-width: 200px;" 
                                                  title="{{ $req->keterangan ?? '-' }}">
                                                {{ $req->keterangan ?? '-' }}
                                            </span>
                                        </td>
                                        <td class="py-3">
                                            @if($req->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">{{ $req->vehicle->jenis }}</div>
                                                        <small class="text-muted">{{ $req->vehicle->plat }}</small>
                                                    </div>
                                                </div>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="py-3">
                                            @if($req->driver)
                                                <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">{{ $req->driver->name }}</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">{{ $req->tanggal_pinjam }}</div>
                                            <small class="text-muted">Pinjam</small>
                                        </td>
                                        <td class="py-3">
                                            <div class="fw-semibold">{{ $req->tanggal_kembali ?? '-' }}</div>
                                            <small class="text-muted">Kembali</small>
                                        </td>
                                        <td class="pe-4 py-3 text-center">
                                            @if($req->status == 'pending_manager')
                                                <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
                                                </span>
                                            @elseif($req->status == '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>
                                            @elseif($req->status == '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>
                                            @else
                                                <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-check-double me-1"></i>Selesai
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" 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 pengajuan terbaru</h5>
                                                <p class="text-muted mb-0">Tidak ada data pengajuan yang dapat ditampilkan saat ini</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        Terakhir diperbarui: {{ now()->format('H:i') }}
                    </small>
                </div>
                <div>
                    <a href="{{ route('manager.pengajuan') }}" class="btn btn-primary px-4 py-2">
                        <i class="fas fa-list me-2"></i>Lihat Semua Pengajuan
                    </a>
                </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;
    }
    
    .text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Custom border colors for cards */
    .card:nth-child(1) {
        border-left-color: #ffc107 !important;
    }
    
    .card:nth-child(2) {
        border-left-color: #198754 !important;
    }
    
    .card:nth-child(3) {
        border-left-color: #dc3545 !important;
    }
</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