@extends('admin.layout')

@section('title', 'إدارة المركبات')
@section('page-title', 'إدارة المركبات')

@section('content')
    <div style="display: flex; justify-content: between; align-items: center; margin-bottom: 2rem;">
        <div>
            <h2 class="elegant-text" style="color: var(--primary-gold); margin: 0;">أسطول المركبات</h2>
            <p class="modern-text" style="opacity: 0.8; margin-top: 0.5rem;">إدارة مخزون المركبات وحالتها</p>
        </div>
        <a href="#" class="btn btn-primary modern-text">
            <i class="fas fa-plus"></i>
            إضافة مركبة
        </a>
    </div>

    <div class="card">
        @if($vehicles->count() > 0)
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="modern-text">المركبة</th>
                            <th class="modern-text">الفئة</th>
                            <th class="modern-text">الحالة</th>
                            <th class="modern-text">السعر اليومي</th>
                            <th class="modern-text">الحجوزات</th>
                            <th class="modern-text">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($vehicles as $vehicle)
                            <tr>
                                <td>
                                    <div style="display: flex; align-items: center; gap: 1rem;">
                                        <div
                                            style="width: 60px; height: 40px; background: linear-gradient(45deg, #333, #555); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                            @if($vehicle->primaryImage)
                                                <img src="{{ $vehicle->primaryImage->url }}" alt="{{ $vehicle->name }}"
                                                    style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
                                            @else
                                                <i class="fas fa-car" style="color: var(--primary-gold);"></i>
                                            @endif
                                        </div>
                                        <div>
                                            <div style="font-weight: 600; color: var(--primary-gold);">{{ $vehicle->name }}</div>
                                            <div style="font-size: 0.8rem; opacity: 0.7;">{{ $vehicle->year }} •
                                                {{ $vehicle->color }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span style="color: var(--primary-gold);">{{ $vehicle->category->name }}</span>
                                </td>
                                <td>
                                    <form method="POST" action="{{ route('admin.vehicle.status', $vehicle) }}"
                                        style="display: inline;">
                                        @csrf
                                        @method('PATCH')
                                        <select name="status" onchange="this.form.submit()" class="badge 
                                                        @if($vehicle->status === 'available') badge-success
                                                        @elseif($vehicle->status === 'rented') badge-warning
                                                        @elseif($vehicle->status === 'maintenance') badge-danger
                                                        @elseif($vehicle->status === 'inactive') badge-secondary
                                                        @endif"
                                            style="background: none; border: none; color: inherit; cursor: pointer;">
                                            <option value="available" {{ $vehicle->status === 'available' ? 'selected' : '' }}>
                                                Available</option>
                                            <option value="rented" {{ $vehicle->status === 'rented' ? 'selected' : '' }}>Rented
                                            </option>
                                            <option value="maintenance" {{ $vehicle->status === 'maintenance' ? 'selected' : '' }}>
                                                Maintenance</option>
                                            <option value="inactive" {{ $vehicle->status === 'inactive' ? 'selected' : '' }}>Inactive
                                            </option>
                                        </select>
                                    </form>
                                </td>
                                <td>
                                    <strong
                                        style="color: var(--primary-gold);">${{ number_format($vehicle->daily_rate, 0) }}</strong>
                                    <div style="font-size: 0.8rem; opacity: 0.7;">per day</div>
                                </td>
                                <td>
                                    <span style="color: var(--primary-gold);">{{ $vehicle->bookings->count() }}</span>
                                    <div style="font-size: 0.8rem; opacity: 0.7;">total bookings</div>
                                </td>
                                <td>
                                    <div style="display: flex; gap: 0.5rem;">
                                        <a href="{{ route('vehicles.show', $vehicle) }}" class="btn btn-secondary"
                                            style="padding: 0.3rem 0.8rem; font-size: 0.8rem;">
                                            <i class="fas fa-eye"></i>
                                            {{ __('View') }}
                                        </a>
                                        <a href="#" class="btn btn-primary" style="padding: 0.3rem 0.8rem; font-size: 0.8rem;">
                                            <i class="fas fa-edit"></i>
                                            {{ __('Edit') }}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if($vehicles->hasPages())
                <div style="margin-top: 2rem; text-align: center;">
                    {{ $vehicles->links() }}
                </div>
            @endif
        @else
            <div style="text-align: center; padding: 4rem; opacity: 0.7;">
                <i class="fas fa-car" style="font-size: 4rem; margin-bottom: 2rem; color: var(--primary-gold);"></i>
                <h3 style="color: var(--primary-gold); margin-bottom: 1rem;">{{ __('No Vehicles Found') }}</h3>
                <p style="margin-bottom: 2rem;">{{ __('Start by adding your first vehicle to the fleet.') }}</p>
                <a href="#" class="btn btn-primary">
                    <i class="fas fa-plus"></i>
                    {{ __('Add Vehicle') }}
                </a>
            </div>
        @endif
    </div>

    <!-- Vehicle Statistics -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem;">
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-car"></i>
            </div>
            <div class="stat-value">{{ $vehicles->total() }}</div>
            <div class="stat-label">{{ __('Total Vehicles') }}</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-value">{{ $vehicles->where('status', 'available')->count() }}</div>
            <div class="stat-label">{{ __('Available') }}</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-value">{{ $vehicles->where('status', 'rented')->count() }}</div>
            <div class="stat-label">{{ __('Currently Rented') }}</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-tools"></i>
            </div>
            <div class="stat-value">{{ $vehicles->where('status', 'maintenance')->count() }}</div>
            <div class="stat-label">{{ __('In Maintenance') }}</div>
        </div>
    </div>

    @push('styles')
        <style>
            .table select {
                background: transparent;
                border: none;
                color: inherit;
                cursor: pointer;
                font-size: inherit;
                font-weight: inherit;
                text-transform: inherit;
            }

            .table select option {
                background: var(--primary-dark);
                color: var(--text-light);
            }

            @media (max-width: 768px) {
                .vehicle-actions {
                    flex-direction: column !important;
                    gap: 0.3rem !important;
                }

                .vehicle-info {
                    flex-direction: column !important;
                    align-items: flex-start !important;
                }
            }
        </style>
    @endpush
@endsection