@extends('layouts.app')

@section('title', __('app.menu.vehicles'))

@section('content')
<div class="row mb-4">
    <div class="col">
        <h1 class="h3 mb-0">{{ __('app.menu.vehicles') }}</h1>
        <p class="text-muted">إدارة أسطول المركبات</p>
    </div>
    <div class="col-auto">
        @can('create vehicles')
        <a href="{{ route('vehicles.create') }}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>{{ __('app.add') }} مركبة
        </a>
        @endcan
    </div>
</div>

<!-- Filters Card -->
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('vehicles.index') }}" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">{{ __('app.search') }}</label>
                <input type="text" class="form-control" name="search" value="{{ request('search') }}" 
                       placeholder="رقم اللوحة، العلامة، الموديل...">
            </div>
            <div class="col-md-2">
                <label class="form-label">{{ __('app.status') }}</label>
                <select class="form-select" name="status">
                    <option value="">الكل</option>
                    <option value="available" {{ request('status') === 'available' ? 'selected' : '' }}>
                        {{ __('app.vehicle_status.available') }}
                    </option>
                    <option value="rented" {{ request('status') === 'rented' ? 'selected' : '' }}>
                        {{ __('app.vehicle_status.rented') }}
                    </option>
                    <option value="maintenance" {{ request('status') === 'maintenance' ? 'selected' : '' }}>
                        {{ __('app.vehicle_status.maintenance') }}
                    </option>
                    <option value="out_of_service" {{ request('status') === 'out_of_service' ? 'selected' : '' }}>
                        {{ __('app.vehicle_status.out_of_service') }}
                    </option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">الفئة</label>
                <select class="form-select" name="category_id">
                    <option value="">جميع الفئات</option>
                    @foreach($categories as $category)
                    <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                    @endforeach
                </select>
            </div>
            @if(auth()->user()->hasRole('manager') && $branches->count() > 0)
            <div class="col-md-2">
                <label class="form-label">الفرع</label>
                <select class="form-select" name="branch_id">
                    <option value="">جميع الفروع</option>
                    @foreach($branches as $branch)
                    <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>
                        {{ $branch->name }}
                    </option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="col-md-3">
                <label class="form-label">&nbsp;</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-outline-primary">
                        <i class="fas fa-search"></i> {{ __('app.search') }}
                    </button>
                    <a href="{{ route('vehicles.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times"></i> مسح
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Quick Stats -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body text-center">
                <h4 class="mb-1">{{ $vehicles->total() }}</h4>
                <p class="mb-0">إجمالي المركبات</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body text-center">
                <h4 class="mb-1">
                    {{ $vehicles->where('status', 'available')->count() }}
                </h4>
                <p class="mb-0">متاحة</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body text-center">
                <h4 class="mb-1">
                    {{ $vehicles->where('status', 'rented')->count() }}
                </h4>
                <p class="mb-0">مؤجرة</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body text-center">
                <h4 class="mb-1">
                    {{ $vehicles->where('status', 'maintenance')->count() }}
                </h4>
                <p class="mb-0">قيد الصيانة</p>
            </div>
        </div>
    </div>
</div>

<!-- Vehicles Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">قائمة المركبات</h5>
        <div class="d-flex gap-2">
            @can('view maintenance')
            <a href="{{ route('vehicles.maintenance-due') }}" class="btn btn-sm btn-outline-warning">
                <i class="fas fa-tools"></i> صيانة مطلوبة
            </a>
            @endcan
            <a href="{{ route('vehicles.expiring-insurance') }}" class="btn btn-sm btn-outline-info">
                <i class="fas fa-calendar-times"></i> تأمين منتهي
            </a>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>الصورة</th>
                        <th>تفاصيل المركبة</th>
                        <th>رقم اللوحة</th>
                        <th>الفئة</th>
                        <th>الحالة</th>
                        <th>السعر اليومي</th>
                        <th>الفرع</th>
                        <th>آخر صيانة</th>
                        <th>{{ __('app.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($vehicles as $vehicle)
                    <tr>
                        <td>
                            @if($vehicle->images && count($vehicle->images) > 0)
                            <img src="{{ asset('storage/' . $vehicle->images[0]) }}" 
                                 class="rounded" style="width: 60px; height: 45px; object-fit: cover;"
                                 alt="{{ $vehicle->full_name }}">
                            @else
                            <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                 style="width: 60px; height: 45px;">
                                <i class="fas fa-car text-muted"></i>
                            </div>
                            @endif
                        </td>
                        <td>
                            <div>
                                <strong>{{ $vehicle->brand }} {{ $vehicle->model }}</strong>
                                <small class="d-block text-muted">
                                    {{ $vehicle->year }} • {{ $vehicle->color }} • {{ $vehicle->seats }} مقاعد
                                </small>
                                <small class="d-block text-muted">
                                    {{ __('app.fuel_types.' . $vehicle->fuel_type) }} • 
                                    {{ __('app.transmission_types.' . $vehicle->transmission) }}
                                </small>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-dark">{{ $vehicle->license_plate }}</span>
                        </td>
                        <td>{{ $vehicle->category->name }}</td>
                        <td>
                            <span class="badge bg-{{ $vehicle->status === 'available' ? 'success' : ($vehicle->status === 'rented' ? 'warning' : ($vehicle->status === 'maintenance' ? 'info' : 'danger')) }}">
                                {{ __('app.vehicle_status.' . $vehicle->status) }}
                            </span>
                        </td>
                        <td>
                            <strong>{{ number_format($vehicle->daily_rate, 0) }} ريال</strong>
                            <small class="d-block text-muted">
                                أسبوعي: {{ number_format($vehicle->weekly_rate, 0) }}
                            </small>
                        </td>
                        <td>{{ $vehicle->branch->name }}</td>
                        <td>
                            @if($vehicle->last_maintenance)
                            <small>{{ $vehicle->last_maintenance->diffForHumans() }}</small>
                            @else
                            <small class="text-muted">لا توجد</small>
                            @endif
                            
                            @if($vehicle->isMaintenanceDue())
                            <br><span class="badge bg-warning text-dark">صيانة مطلوبة</span>
                            @endif
                        </td>
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                    {{ __('app.actions') }}
                                </button>
                                <ul class="dropdown-menu">
                                    @can('view vehicles')
                                    <li>
                                        <a class="dropdown-item" href="{{ route('vehicles.show', $vehicle) }}">
                                            <i class="fas fa-eye me-2"></i>{{ __('app.view') }}
                                        </a>
                                    </li>
                                    @endcan
                                    
                                    @can('edit vehicles')
                                    <li>
                                        <a class="dropdown-item" href="{{ route('vehicles.edit', $vehicle) }}">
                                            <i class="fas fa-edit me-2"></i>{{ __('app.edit') }}
                                        </a>
                                    </li>
                                    @endcan
                                    
                                    @can('create rentals')
                                    @if($vehicle->status === 'available')
                                    <li>
                                        <a class="dropdown-item" href="{{ route('rentals.create', ['vehicle_id' => $vehicle->id]) }}">
                                            <i class="fas fa-handshake me-2"></i>تأجير
                                        </a>
                                    </li>
                                    @endif
                                    @endcan
                                    
                                    @can('create maintenance')
                                    <li>
                                        <a class="dropdown-item" href="{{ route('maintenance.create-for-vehicle', $vehicle) }}">
                                            <i class="fas fa-tools me-2"></i>جدولة صيانة
                                        </a>
                                    </li>
                                    @endcan
                                    
                                    @can('manage vehicle status')
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <button class="dropdown-item" onclick="updateVehicleStatus({{ $vehicle->id }}, 'available')">
                                            <i class="fas fa-check-circle me-2 text-success"></i>متاحة
                                        </button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item" onclick="updateVehicleStatus({{ $vehicle->id }}, 'maintenance')">
                                            <i class="fas fa-tools me-2 text-info"></i>صيانة
                                        </button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item" onclick="updateVehicleStatus({{ $vehicle->id }}, 'out_of_service')">
                                            <i class="fas fa-times-circle me-2 text-danger"></i>خارج الخدمة
                                        </button>
                                    </li>
                                    @endcan
                                    
                                    @can('delete vehicles')
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <button class="dropdown-item text-danger" onclick="deleteVehicle({{ $vehicle->id }})">
                                            <i class="fas fa-trash me-2"></i>{{ __('app.delete') }}
                                        </button>
                                    </li>
                                    @endcan
                                </ul>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-4">
                            <i class="fas fa-car fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">لا توجد مركبات</h5>
                            <p class="text-muted">{{ __('app.no_data') }}</p>
                            @can('create vehicles')
                            <a href="{{ route('vehicles.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>إضافة أول مركبة
                            </a>
                            @endcan
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    @if($vehicles->hasPages())
    <div class="card-footer">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                عرض {{ $vehicles->firstItem() }} إلى {{ $vehicles->lastItem() }} 
                من {{ $vehicles->total() }} مركبة
            </div>
            <div>
                {{ $vehicles->links() }}
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">تأكيد الحذف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>هل أنت متأكد من حذف هذه المركبة؟ هذا الإجراء لا يمكن التراجع عنه.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('app.cancel') }}</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">{{ __('app.delete') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function updateVehicleStatus(vehicleId, status) {
    if (confirm('هل أنت متأكد من تغيير حالة المركبة؟')) {
        $.post(`/vehicles/${vehicleId}/status`, {
            status: status,
            _token: '{{ csrf_token() }}'
        })
        .done(function(response) {
            location.reload();
        })
        .fail(function(xhr) {
            alert('حدث خطأ: ' + (xhr.responseJSON?.error || 'خطأ غير معروف'));
        });
    }
}

function deleteVehicle(vehicleId) {
    $('#deleteForm').attr('action', `/vehicles/${vehicleId}`);
    $('#deleteModal').modal('show');
}
</script>
@endpush