@extends('layouts.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 General Affair (GA)</h2>
                    <p class="text-muted mb-0">
                        Selamat datang, <strong class="text-primary">{{ Auth::user()->name }}</strong> 👋<br>
                        Berikut ringkasan aktivitas pengajuan kendaraan.
                    </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;">{{ $pending_count }}</h4>
                            <p class="text-muted mb-0">Menunggu Proses GA</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-paper-plane fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h4 class="fw-bold mb-1 display-6" style="color: #198754;">{{ $manager_count }}</h4>
                            <p class="text-muted mb-0">Diteruskan ke Manager GA</p>
                            <small style="color: #198754;">
                                <i class="fas fa-check me-1"></i>
                                Menunggu persetujuan
                            </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 oleh GA</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">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 / Aksi</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">
                                            <div class="fw-semibold">{{ $req->tanggal_pinjam }}</div>
                                            <small class="text-muted">Pinjam</small>
                                        </td>
                                        <td class="py-3">
                                            @if($req->tanggal_kembali)
                                                <div class="fw-semibold">{{ $req->tanggal_kembali }}</div>
                                                <small class="text-muted">Kembali</small>
                                            @else
                                                <div class="fw-semibold text-muted">-</div>
                                                <small class="text-muted">Belum diisi</small>
                                            @endif
                                        </td>
                                        <td class="pe-4 py-3 text-center">
                                            @if($req->status == 'pending_ga')
                                                <!-- Form Pilih Kendaraan & Supir -->
                                                <form action="{{ route('ga.assignVehicleAndDriver', $req->id) }}" method="POST" 
                                                      class="d-flex justify-content-center align-items-center gap-2 flex-wrap">
                                                    @csrf
                                                    <select name="vehicle_id" class="form-select form-select-sm" style="width: 180px;" required>
                                                        <option value="">-- Pilih Kendaraan --</option>
                                                        @foreach($vehicles as $v)
                                                            <option value="{{ $v->id }}">{{ $v->jenis }} - {{ $v->plat }}</option>
                                                        @endforeach
                                                    </select>
                                                    <select name="driver_id" class="form-select form-select-sm" style="width: 150px;" required>
                                                        <option value="">-- Pilih Supir --</option>
                                                        @foreach($supir as $s)
                                                            <option value="{{ $s->id }}">{{ $s->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <button type="submit" class="btn btn-success btn-sm px-3">
                                                        <i class="fas fa-paper-plane me-1"></i>Teruskan
                                                    </button>
                                                </form>
                                            @elseif($req->status == 'pending_manager')
                                                <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-paper-plane me-1"></i>Diteruskan ke Manager
                                                </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="6" 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>
                    <a href="{{ route('ga.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;
    }

    /* Form styling */
    .form-select-sm {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
    }

    @media (max-width: 768px) {
        .form-select-sm {
            width: 100% !important;
            margin-bottom: 0.5rem;
        }
        
        form.flex-wrap {
            flex-direction: column;
        }
        
        form.flex-wrap .btn {
            width: 100%;
        }
        
        /* Responsive table adjustments */
        .table-responsive {
            font-size: 0.875rem;
        }
    }
</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)';
            });
        });

        // Enhance form interactions
        const forms = document.querySelectorAll('form');
        forms.forEach(form => {
            const button = form.querySelector('button[type="submit"]');
            const selects = form.querySelectorAll('select');
            
            // Add change event to selects
            selects.forEach(select => {
                select.addEventListener('change', function() {
                    const allSelected = Array.from(selects).every(s => s.value !== '');
                    if (allSelected) {
                        button.disabled = false;
                        button.classList.remove('btn-secondary');
                        button.classList.add('btn-success');
                    } else {
                        button.disabled = true;
                        button.classList.remove('btn-success');
                        button.classList.add('btn-secondary');
                    }
                });
            });
            
            // Initialize button state
            const allSelected = Array.from(selects).every(s => s.value !== '');
            if (!allSelected) {
                button.disabled = true;
                button.classList.remove('btn-success');
                button.classList.add('btn-secondary');
            }
        });
    });
</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