@extends('layouts.ga')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold mb-0 gradient-text">📄 Daftar Pengajuan Peminjaman dari Karyawan</h2>
        <div class="badge bg-primary-subtle text-primary p-2">
            Total: {{ count($pengajuan) }} Pengajuan
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <div>{{ session('success') }}</div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @elseif(session('error'))
        <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <div>{{ session('error') }}</div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card shadow-lg border-0 rounded-3 overflow-hidden">
        <div class="card-header bg-gradient-primary text-white py-3">
            <h5 class="card-title mb-0 fw-semibold">
                <i class="fas fa-list-check me-2"></i>Daftar Pengajuan
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-dark">
                        <tr class="text-center">
                            <th class="py-3">No</th>
                            <th class="py-3">Nama Karyawan</th>
                            <th class="py-3">Jenis Kendaraan Diajukan</th>
                            <th class="py-3">Tanggal Pinjam</th>
                            <th class="py-3">Tanggal Kembali</th>
                            <th class="py-3">Pilih Kendaraan & Supir</th>
                            <th class="py-3">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pengajuan as $data)
                            <tr class="text-center transition-row">
                                <td class="fw-semibold">{{ $loop->iteration }}</td>
                                <td>
                                    <div class="d-flex align-items-center justify-content-center">
                                        <div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2">
                                            <i class="fas fa-user text-primary"></i>
                                        </div>
                                        <span>{{ $data->user?->name ?? '-' }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-secondary bg-opacity-25 text-dark">{{ $data->vehicle?->jenis ?? '-' }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-info bg-opacity-10 text-info">{{ $data->tanggal_pinjam }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-warning bg-opacity-10 text-warning">{{ $data->tanggal_kembali }}</span>
                                </td>
                                <td>
                                    <form method="POST" action="{{ route('ga.approve', $data->id) }}" class="approval-form" id="form-{{ $data->id }}">
                                        @csrf

                                        <!-- Pilih Kendaraan -->
                                        <div class="mb-3">
                                            <label class="form-label small fw-semibold mb-1">Pilih Kendaraan</label>
                                            <select class="form-select form-select-sm shadow-sm vehicle-select" name="vehicle_id" required data-form-id="{{ $data->id }}">
                                                <option value="">-- Pilih Kendaraan --</option>
                                                @foreach($vehicles as $v)
                                                    @php
                                                        $isUsed = \App\Models\LoanRequest::where('vehicle_id', $v->id)
                                                            ->whereDate('tanggal_pinjam', $data->tanggal_pinjam)
                                                            ->whereIn('status', ['pending_ga', 'pending_manager', 'approved'])
                                                            ->exists();
                                                    @endphp
                                                    <option value="{{ $v->id }}" {{ $isUsed ? 'disabled' : '' }} class="{{ $isUsed ? 'text-danger' : '' }}">
                                                        {{ $v->jenis }} - {{ $v->plat }}
                                                        @if($isUsed) (🚫 Terpakai) @endif
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <!-- Pilih Supir -->
                                        <div class="mb-3">
                                            <label class="form-label small fw-semibold mb-1">Pilih Supir</label>
                                            <select class="form-select form-select-sm shadow-sm driver-select" name="driver_id" required data-form-id="{{ $data->id }}">
                                                <option value="">-- Pilih Supir --</option>
                                                @foreach($supir as $s)
                                                    @php
                                                        $isBusy = \App\Models\LoanRequest::where('driver_id', $s->id)
                                                            ->whereDate('tanggal_pinjam', $data->tanggal_pinjam)
                                                            ->whereIn('status', ['pending_ga', 'pending_manager', 'approved'])
                                                            ->exists();
                                                    @endphp
                                                    <option value="{{ $s->id }}" {{ $isBusy ? 'disabled' : '' }} class="{{ $isBusy ? 'text-danger' : '' }}">
                                                        {{ $s->name }}
                                                        @if($isBusy) (🚫 Jadwal Penuh) @endif
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </form>
                                </td>
                                <td>
                                    <div class="d-flex flex-column gap-2">
                                        <!-- Tombol Teruskan ke Manager -->
                                        <button type="submit" form="form-{{ $data->id }}" class="btn btn-success btn-sm fw-semibold py-2">
                                            <i class="fas fa-paper-plane me-1"></i> Teruskan ke Manager
                                        </button>

                                        <!-- Tombol Tolak -->
                                        <form method="POST" action="{{ route('ga.reject', $data->id) }}" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-outline-danger btn-sm fw-semibold py-2 w-100" onclick="return confirm('Yakin ingin menolak pengajuan ini?')">
                                                <i class="fas fa-times me-1"></i> Tolak
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-4">
                                    <div class="empty-state">
                                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                        <p class="text-muted mb-0">Belum ada pengajuan dari karyawan.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
.gradient-text {
    background: linear-gradient(135deg, #3a8ffe 0%, #6c5ce7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #3a8ffe 0%, #6c5ce7 100%) !important;
}

.transition-row {
    transition: all 0.2s ease;
}

.transition-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    background-color: #f8f9fa;
}

.avatar-sm {
    width: 32px;
    height: 32px;
}

.empty-state {
    padding: 2rem 0;
}

.approval-form {
    padding: 10px;
    border-radius: 8px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.approval-form:hover {
    background-color: #e9ecef;
}

.form-select:focus, .btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(58, 143, 254, 0.25) !important;
    border-color: #3a8ffe !important;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 0.5rem;
}

.card {
    border: none;
}

.shadow-lg {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

/* Styling untuk form yang sudah lengkap */
.form-complete .vehicle-select,
.form-complete .driver-select {
    border-color: #198754 !important;
    background-color: #f8fff9;
}

/* Styling untuk form yang belum lengkap */
.form-incomplete .vehicle-select,
.form-incomplete .driver-select {
    border-color: #ffc107 !important;
    background-color: #fffef0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const tanggalInput = document.querySelector('input[name="start_date"]');
    const vehicleSelect = document.querySelector('select[name="vehicle_id"]');
    const driverSelect = document.querySelector('select[name="driver_id"]');

    // Fungsi untuk mengecek kelengkapan form
    function checkFormCompletion() {
        document.querySelectorAll('.approval-form').forEach(form => {
            const formId = form.id;
            const vehicleSelect = form.querySelector('.vehicle-select');
            const driverSelect = form.querySelector('.driver-select');
            const row = form.closest('tr');
            
            if (vehicleSelect.value && driverSelect.value) {
                row.classList.add('form-complete');
                row.classList.remove('form-incomplete');
            } else {
                row.classList.add('form-incomplete');
                row.classList.remove('form-complete');
            }
        });
    }

    // Event listener untuk perubahan pada dropdown
    document.querySelectorAll('.vehicle-select, .driver-select').forEach(select => {
        select.addEventListener('change', checkFormCompletion);
    });

    // Inisialisasi status form saat halaman dimuat
    checkFormCompletion();

    if (tanggalInput) {
        tanggalInput.addEventListener('change', function () {
            const tanggal = this.value;

            fetch(`/ga/available-options?tanggal=${tanggal}`)
                .then(response => response.json())
                .then(data => {
                    // Reset dulu
                    vehicleSelect.innerHTML = '<option value="">-- Pilih Kendaraan --</option>';
                    driverSelect.innerHTML = '<option value="">-- Pilih Supir --</option>';

                    // Tambahkan kendaraan tersedia
                    data.vehicles.forEach(vehicle => {
                        const opt = document.createElement('option');
                        opt.value = vehicle.id;
                        opt.textContent = `${vehicle.nama_kendaraan} - ${vehicle.plat_nomor}`;
                        vehicleSelect.appendChild(opt);
                    });

                    // Tambahkan supir tersedia
                    data.drivers.forEach(driver => {
                        const opt = document.createElement('option');
                        opt.value = driver.id;
                        opt.textContent = driver.name;
                        driverSelect.appendChild(opt);
                    });

                    // Periksa ulang kelengkapan form setelah data diupdate
                    checkFormCompletion();
                })
                .catch(err => console.error(err));
        });
    }
});
</script>
@endsection