@extends('layouts.manager_ga')

@section('content')
<div class="mb-4">
    <h2 class="fw-bold mb-2">📋 Riwayat Persetujuan Manager GA</h2>
    <p class="text-muted mb-0">Berikut daftar semua pengajuan kendaraan yang sudah <strong>disetujui</strong> atau <strong>ditolak</strong>.</p>
</div>

@php
    // Ambil nilai request
    $search = request('search');
    $entries = request('entries', 10); // default 10 per halaman

    // Filter data
    $filtered = $riwayat->filter(function ($item) use ($search) {
        if (!$search) return true;

        return str_contains(strtolower($item->user->name), strtolower($search))
            || ($item->vehicle && str_contains(strtolower($item->vehicle->jenis), strtolower($search)))
            || ($item->vehicle && str_contains(strtolower($item->vehicle->plat), strtolower($search)));
    });

    // Manual pagination
    $page = request('page', 1);
    $offset = ($page - 1) * $entries;
    $pagedItems = $filtered->slice($offset, $entries);
    $totalPages = ceil($filtered->count() / $entries);
@endphp

{{-- 🔽 Dropdown Tampilkan Entries + Search --}}
<div class="card shadow-sm p-4 mb-4 border-0" style="border-radius: 14px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);">
    <form method="GET" class="row g-3 align-items-end">
        {{-- Dropdown Entries --}}
        <div class="col-md-3">
            <label class="form-label fw-semibold mb-2">Tampilkan</label>
            <select name="entries" class="form-select shadow-sm" onchange="this.form.submit()" style="border-radius: 10px; border: 1px solid #e0e0e0;">
                <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>

        {{-- Search Box --}}
        <div class="col-md-6 offset-md-3">
            <label class="form-label fw-semibold mb-2">Pencarian</label>
            <div class="input-group shadow-sm" style="border-radius: 10px; overflow: hidden;">
                <span class="input-group-text bg-white border-end-0" style="border-radius: 10px 0 0 10px;">
                    <i class="fas fa-search text-muted"></i>
                </span>
                <input type="text"
                    name="search"
                    value="{{ request('search') }}"
                    class="form-control border-start-0 border-end-0"
                    placeholder="Cari nama karyawan, kendaraan, atau plat..."
                    style="border-radius: 0;">
                <button class="btn btn-primary px-4" style="border-radius: 0 10px 10px 0;">
                    <i class="fas fa-search me-1"></i>Cari
                </button>
            </div>
        </div>
    </form>

    {{-- Info Jumlah Data --}}
    <div class="mt-4 pt-3 border-top">
        <span class="badge bg-primary p-2 px-3 fw-normal" style="border-radius: 20px; font-size: 0.85rem;">
            <i class="fas fa-chart-bar me-1"></i>
            Menampilkan <b>{{ $filtered->count() }}</b> dari total <b>{{ $riwayat->count() }}</b> data
        </span>
        
        @if(request('search'))
        <a href="{{ url()->current() }}" class="btn btn-outline-secondary btn-sm ms-2" style="border-radius: 20px;">
            <i class="fas fa-times me-1"></i>Reset
        </a>
        @endif
    </div>
</div>

{{-- 📄 Tabel Data --}}
<div class="card shadow-sm border-0" style="border-radius: 14px; overflow: hidden;">
    <div class="card-header bg-primary text-white fw-bold py-3" style="border-radius: 14px 14px 0 0;">
        <div class="d-flex align-items-center">
            <i class="fas fa-history me-2"></i>
            <span>Riwayat Persetujuan</span>
            <span class="badge bg-light text-primary ms-2" style="font-size: 0.75rem;">
                {{ $filtered->count() }} data
            </span>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
                <tr>
                    <th class="text-center py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">No</th>
                    <th class="py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">Nama Karyawan</th>
                    <th class="py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">Keterangan</th>
                    <th class="py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">Kendaraan</th>
                    <th class="py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">Supir</th>
                    <th class="text-center py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">Tanggal Pinjam</th>
                    <th class="text-center py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">Tanggal Kembali</th>
                    <th class="text-center py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">Status</th>
                    <th class="text-center py-3 fw-semibold" style="border-bottom: 2px solid #dee2e6;">Tanggal Persetujuan</th>
                </tr>
            </thead>

            <tbody>
                @forelse($pagedItems as $data)
                <tr class="position-relative" style="transition: all 0.2s ease; cursor: pointer;" 
                    onmouseover="this.style.backgroundColor='#f8f9fa'" 
                    onmouseout="this.style.backgroundColor=''">
                    
                    <td class="text-center fw-bold text-primary py-3" style="font-size: 1.1rem;">
                        {{ $loop->iteration + $offset }}
                    </td>

                    <td class="py-3">
                        <div class="d-flex align-items-center">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center me-3" 
                                 style="width: 36px; height: 36px;">
                                <i class="fas fa-user text-white" style="font-size: 0.9rem;"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">{{ $data->user->name ?? 'N/A' }}</div>
                                <small class="text-muted">{{ $data->user->email ?? '' }}</small>
                            </div>
                        </div>
                    </td>

                    <td class="py-3">
                        <span class="text-truncate d-inline-block" style="max-width: 200px;" title="{{ $data->keterangan ?? '-' }}">
                            {{ $data->keterangan ?? '-' }}
                        </span>
                    </td>

                    <td class="py-3">
                        @if($data->vehicle)
                            <div class="d-flex align-items-center">
                                <div class="bg-success rounded-circle d-flex align-items-center justify-content-center me-3" 
                                     style="width: 36px; height: 36px;">
                                    <i class="fas fa-car text-white" style="font-size: 0.9rem;"></i>
                                </div>
                                <div>
                                    <span class="fw-semibold d-block">{{ $data->vehicle->jenis ?? '-' }}</span>
                                    <span class="text-muted small">
                                        {{ $data->vehicle->plat ?? '-' }} • {{ $data->vehicle->warna ?? '' }}
                                    </span>
                                </div>
                            </div>
                        @else
                            <div class="text-muted">
                                <i class="fas fa-times-circle me-1"></i>Belum dipilih
                            </div>
                        @endif
                    </td>

                    <td class="py-3">
                        @if($data->driver)
                            <div class="d-flex align-items-center">
                                <div class="bg-info rounded-circle d-flex align-items-center justify-content-center me-3" 
                                     style="width: 36px; height: 36px;">
                                    <i class="fas fa-id-card-alt text-white" style="font-size: 0.9rem;"></i>
                                </div>
                                <div>
                                    <span class="fw-semibold">{{ $data->driver->name }}</span>
                                    <br>
                                    <span class="text-muted small">Supir</span>
                                </div>
                            </div>
                        @else
                            <div class="text-muted">
                                <i class="fas fa-user-slash me-1"></i>Belum ditugaskan
                            </div>
                        @endif
                    </td>

                    <td class="text-center py-3">
                        <span class="badge bg-light text-dark p-2" style="border-radius: 8px;">
                            <i class="fas fa-calendar-alt me-1"></i>
                            {{ $data->tanggal_pinjam }}
                        </span>
                    </td>
                    
                    <td class="text-center py-3">
                        <span class="badge bg-light text-dark p-2" style="border-radius: 8px;">
                            <i class="fas fa-calendar-check me-1"></i>
                            {{ $data->tanggal_kembali ?? '-' }}
                        </span>
                    </td>

                    <td class="text-center py-3">
                        @if($data->status == 'approved')
                            <span class="badge bg-success px-3 py-2" style="border-radius: 20px; font-size: 0.85rem;">
                                <i class="fas fa-check-circle me-1"></i>Disetujui
                            </span>
                        @else
                            <span class="badge bg-danger px-3 py-2" style="border-radius: 20px; font-size: 0.85rem;">
                                <i class="fas fa-times-circle me-1"></i>Ditolak
                            </span>
                        @endif
                    </td>

                    <td class="text-center py-3">
                        <div class="text-muted small">
                            <div><i class="fas fa-clock me-1"></i> {{ $data->updated_at->format('H:i') }}</div>
                            <div>{{ $data->updated_at->format('d M Y') }}</div>
                        </div>
                    </td>
                </tr>

                @empty
                <tr>
                    <td colspan="9" class="text-center text-muted py-5">
                        <div class="py-4">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Tidak ada data ditemukan</h5>
                            <p class="text-muted mb-0">Silakan coba dengan kata kunci pencarian yang berbeda</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- 📌 FOOTER + PAGINATION --}}
    <div class="card-footer d-flex justify-content-between align-items-center py-3" style="background: #f8f9fa;">
        <small class="text-muted">
            <i class="fas fa-info-circle me-1"></i>
            Menampilkan 
            <strong>{{ $offset + 1 }}</strong> –
            <strong>{{ $offset + $pagedItems->count() }}</strong>
            dari <strong>{{ $filtered->count() }}</strong> data
        </small>

        @if($totalPages > 1)
        <div>
            <ul class="pagination mb-0">
                {{-- Previous Button --}}
                <li class="page-item {{ $page == 1 ? 'disabled' : '' }}">
                    <a class="page-link" 
                       href="?page={{ $page - 1 }}&search={{ request('search') }}&entries={{ $entries }}"
                       style="border-radius: 8px; margin-right: 4px;">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                </li>
                
                {{-- Page Numbers --}}
                @for($i = 1; $i <= $totalPages; $i++)
                    <li class="page-item {{ $i == $page ? 'active' : '' }}">
                        <a class="page-link"
                           style="border-radius: 8px; margin: 0 2px;"
                           href="?page={{ $i }}&search={{ request('search') }}&entries={{ $entries }}">
                            {{ $i }}
                        </a>
                    </li>
                @endfor
                
                {{-- Next Button --}}
                <li class="page-item {{ $page == $totalPages ? 'disabled' : '' }}">
                    <a class="page-link" 
                       href="?page={{ $page + 1 }}&search={{ request('search') }}&entries={{ $entries }}"
                       style="border-radius: 8px; margin-left: 4px;">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </li>
            </ul>
        </div>
        @endif
    </div>
</div>

{{-- BACK BUTTON --}}
<div class="mt-4 text-end">
    <a href="{{ route('manager.dashboard') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-1"></i> Kembali ke Dashboard
    </a>
</div>

<style>
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}

.table tbody tr {
    transition: all 0.2s ease;
}

.badge {
    transition: all 0.2s ease;
}

.badge:hover {
    transform: scale(1.05);
}

.page-link {
    transition: all 0.2s ease;
}

.page-item.active .page-link {
    font-weight: 600;
}

.form-select:focus, .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.1);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add smooth animations to table rows
    const tableRows = document.querySelectorAll('tbody tr');
    tableRows.forEach(row => {
        row.addEventListener('click', function() {
            // Add your click action here if needed
            console.log('Row clicked:', this);
        });
    });
    
    // Add loading state ONLY to search button (to avoid logout issues)
    const searchButton = document.querySelector('form[method="GET"] button[type="submit"]');
    if (searchButton) {
        searchButton.addEventListener('click', function() {
            if (this.disabled) return;
            
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Loading...';
            this.disabled = true;
            
            // Allow form to submit normally
            setTimeout(() => {
                this.innerHTML = originalText;
                this.disabled = false;
            }, 3000); // Extended timeout for safety
        });
    }
});
</script>

<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

@endsection