@extends('layouts.admin')

@section('content')
    <div class="admin-vehicle-container">
        <!-- Header Section -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center">
                <div class="header-icon">
                    <i class="fas fa-car"></i>
                </div>
                <div>
                    <h2 class="mb-0">Data Kendaraan</h2>
                    <p class="text-muted mb-0">Manajemen data kendaraan perusahaan</p>
                </div>
            </div>
            <a href="{{ route('admin.dashboard') }}" class="btn btn-back">
                <i class="fas fa-arrow-left me-2"></i>Kembali ke Dashboard
            </a>
        </div>

        {{-- Pesan sukses --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Form Tambah Kendaraan --}}
        <div class="card form-card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-plus-circle me-2"></i>Tambah Data Kendaraan
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.vehicles.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Jenis Kendaraan</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-car-side"></i></span>
                                <input type="text" name="jenis" class="form-control" placeholder="Toyota Avanza" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Plat Nomor</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                                <input type="text" name="plat" class="form-control" placeholder="B 1234 ABC" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Warna</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-palette"></i></span>
                                <input type="text" name="warna" class="form-control" placeholder="Hitam" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Stok</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-layer-group"></i></span>
                                <input type="number" name="stock" class="form-control" placeholder="0" min="0" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Foto Kendaraan</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-camera"></i></span>
                                <input type="file" name="foto" class="form-control">
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <button class="btn btn-primary btn-add">
                                <i class="fas fa-plus me-2"></i>Tambah Kendaraan
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Daftar Kendaraan --}}
<div class="card data-card">
    <div class="card-header blue-header">
        <h5 class="card-title mb-0">
            <i class="fas fa-car me-2"></i>Daftar Kendaraan
        </h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th class="text-center">No</th>
                        <th>Jenis</th>
                        <th>Plat</th>
                        <th>Warna</th>
                        <th class="text-center">Stok</th>
                        <th class="text-center">Foto</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($vehicles as $vehicle)
                        <tr>
                            <td class="text-center">
                                <div class="serial-number">{{ $loop->iteration }}</div>
                            </td>
                            <td>
                                <div class="vehicle-info">
                                    <div class="vehicle-name">
                                        <i class="fas fa-car-side text-primary me-2"></i>{{ $vehicle->jenis }}
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="plate-number">
                                    <i class="fas fa-id-card text-success me-2"></i>{{ $vehicle->plat }}
                                </span>
                            </td>
                            <td>
                                <span class="color-indicator">{{ $vehicle->warna }}</span>
                            </td>
                            <td class="text-center">
                                <span class="stock-count">{{ $vehicle->stock }}</span>
                            </td>
                            <td class="text-center">
                                @if($vehicle->foto)
                                    <div class="photo-placeholder">
                                        <img src="{{ asset('storage/'.$vehicle->foto) }}" 
                                             class="vehicle-photo" 
                                             alt="{{ $vehicle->jenis }}">
                                    </div>
                                @else
                                    <span class="no-photo">-</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-4">
                                <div class="empty-state">
                                    <i class="fas fa-car text-muted mb-2"></i>
                                    <p class="text-muted mb-0">Belum ada data kendaraan</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
.data-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: white;
    overflow: hidden;
}

.blue-header {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.blue-header .card-title {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.blue-header i {
    color: white;
}

.table {
    margin-bottom: 0;
}

.table th {
    background: #eeefefff;
    color: black;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 1rem 1.5rem;
    border: none;
    text-transform: none;
    letter-spacing: normal;
}

.table td {
    padding: 1rem 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #e3f2fd;
    color: #333;
    background: white;
}

.table tbody tr:hover {
    background-color: #f0f8ff;
    transform: none;
}

.serial-number {
    background: #3498db;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    margin: 0 auto;
}

.vehicle-info {
    display: flex;
    flex-direction: column;
}

.vehicle-name {
    font-weight: 500;
    color: #2c3e50;
}

.vehicle-name i {
    width: 16px;
}

.plate-number {
    background: #e3f2fd;
    color: #1976d2;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border: 1px solid #bbdefb;
    display: inline-flex;
    align-items: center;
}

.plate-number i {
    width: 16px;
}

.color-indicator {
    color: #2c3e50;
    font-size: 0.9rem;
    font-weight: 500;
}

.stock-count {
    background: #3498db;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 40px;
    display: inline-block;
}

.photo-placeholder {
    display: inline-block;
    background: #e3f2fd;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #bbdefb;
}

.vehicle-photo {
    width: 70px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
}

.no-photo {
    color: #90a4ae;
    font-style: italic;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.empty-state {
    padding: 2rem;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #b0bec5;
}

/* Responsive */
@media (max-width: 768px) {
    .blue-header {
        padding: 0.75rem 1rem;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
    }
    
    .vehicle-photo {
        width: 60px;
        height: 40px;
    }
    
    .plate-number {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .vehicle-name i,
    .plate-number i {
        width: 14px;
        font-size: 0.8rem;
    }
}
</style>

    <script>
        // Initialize Bootstrap tooltips
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        });
    </script>
@endsection