@extends('admin.layouts.app')

@section('title', 'إضافة مركبة جديدة')

@section('page-title', 'إضافة مركبة جديدة')

@section('content')
<div class="container-fluid">
    <!-- أزرار التنقل -->
    <div class="row mb-4">
        <div class="col-12">
            <a href="{{ route('admin.vehicles') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-right"></i> العودة للمركبات
            </a>
        </div>
    </div>

    <div class="row">
        <!-- نموذج إضافة المركبة -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-plus-circle"></i> معلومات المركبة
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.vehicles.store') }}" enctype="multipart/form-data" id="addVehicleForm">
                        @csrf

                        <div class="row">
                            <!-- رقم اللوحة -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="plate_number" class="form-label">
                                        رقم اللوحة <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="plate_number" id="plate_number"
                                           class="form-control @error('plate_number') is-invalid @enderror"
                                           placeholder="مثال: ABC-123" value="{{ old('plate_number') }}" required>
                                    @error('plate_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- الماركة -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="brand" class="form-label">
                                        الماركة <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="brand" id="brand"
                                           class="form-control @error('brand') is-invalid @enderror"
                                           placeholder="مثال: تويوتا" value="{{ old('brand') }}" required>
                                    @error('brand')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- الموديل -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="model" class="form-label">
                                        الموديل <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="model" id="model"
                                           class="form-control @error('model') is-invalid @enderror"
                                           placeholder="مثال: كامري" value="{{ old('model') }}" required>
                                    @error('model')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- سنة الصنع -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="year" class="form-label">
                                        سنة الصنع <span class="text-danger">*</span>
                                    </label>
                                    <select name="year" id="year"
                                            class="form-select @error('year') is-invalid @enderror" required>
                                        <option value="">اختر السنة</option>
                                        @for($year = date('Y'); $year >= 2000; $year--)
                                            <option value="{{ $year }}" {{ old('year') == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endfor
                                    </select>
                                    @error('year')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- اللون -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="color" class="form-label">
                                        اللون <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="color" id="color"
                                           class="form-control @error('color') is-invalid @enderror"
                                           placeholder="مثال: أبيض" value="{{ old('color') }}" required>
                                    @error('color')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- نوع المركبة -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="vehicle_type" class="form-label">
                                        نوع المركبة <span class="text-danger">*</span>
                                    </label>
                                    <select name="vehicle_type" id="vehicle_type"
                                            class="form-select @error('vehicle_type') is-invalid @enderror" required>
                                        <option value="">اختر النوع</option>
                                        <option value="sedan" {{ old('vehicle_type') == 'sedan' ? 'selected' : '' }}>سيدان</option>
                                        <option value="suv" {{ old('vehicle_type') == 'suv' ? 'selected' : '' }}>SUV</option>
                                        <option value="hatchback" {{ old('vehicle_type') == 'hatchback' ? 'selected' : '' }}>هاتشباك</option>
                                        <option value="pickup" {{ old('vehicle_type') == 'pickup' ? 'selected' : '' }}>بيك أب</option>
                                        <option value="van" {{ old('vehicle_type') == 'van' ? 'selected' : '' }}>فان</option>
                                    </select>
                                    @error('vehicle_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- السائق -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="driver_id" class="form-label">
                                        السائق
                                    </label>
                                    <select name="driver_id" id="driver_id"
                                            class="form-select @error('driver_id') is-invalid @enderror">
                                        <option value="">اختر السائق (اختياري)</option>
                                        @foreach($drivers as $driver)
                                            <option value="{{ $driver->id }}" {{ old('driver_id') == $driver->id ? 'selected' : '' }}>
                                                {{ $driver->name }} - {{ $driver->phone }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('driver_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">يمكن تخصيص السائق لاحقاً</small>
                                </div>
                            </div>

                            <!-- صورة المركبة -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="image" class="form-label">صورة المركبة</label>
                                    <input type="file" name="image" id="image"
                                           class="form-control @error('image') is-invalid @enderror"
                                           accept="image/*">
                                    @error('image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">JPG, PNG, GIF - الحد الأقصى 2MB</small>
                                </div>
                            </div>

                            <!-- الملاحظات -->
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="notes" class="form-label">ملاحظات إضافية</label>
                                    <textarea name="notes" id="notes" rows="3"
                                              class="form-control @error('notes') is-invalid @enderror"
                                              placeholder="أي معلومات إضافية عن المركبة...">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- معاينة الصورة -->
                        <div class="row" id="imagePreview" style="display: none;">
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">معاينة الصورة</label>
                                    <div class="text-center">
                                        <img id="preview" src="" alt="معاينة الصورة"
                                             class="img-fluid rounded" style="max-height: 200px;">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- أزرار الإجراءات -->
                        <div class="row">
                            <div class="col-12">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-secondary" onclick="resetForm()">
                                        <i class="fas fa-undo"></i> إعادة تعيين
                                    </button>
                                    <div>
                                        <a href="{{ route('admin.vehicles') }}" class="btn btn-light me-2">
                                            <i class="fas fa-times"></i> إلغاء
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save"></i> إضافة المركبة
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- معلومات إضافية -->
        <div class="col-md-4">
            <!-- إحصائيات سريعة -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle"></i> معلومات مهمة
                    </h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6 class="alert-heading">تعليمات إضافة المركبة:</h6>
                        <ul class="mb-0">
                            <li>جميع الحقول المطلوبة يجب ملؤها</li>
                            <li>رقم اللوحة يجب أن يكون فريداً</li>
                            <li>يمكن رفع صورة المركبة (اختياري)</li>
                            <li>يمكن تخصيص سائق للمركبة</li>
                            <li>المركبة ستكون نشطة ومتاحة افتراضياً</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- إحصائيات المركبات -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-chart-bar"></i> إحصائيات المركبات
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-primary mb-1">{{ $stats['total'] ?? 0 }}</h4>
                                <small class="text-muted">إجمالي المركبات</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-success mb-1">{{ $stats['available'] ?? 0 }}</h4>
                            <small class="text-muted">متاحة</small>
                        </div>
                    </div>
                    <hr>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-info mb-1">{{ $stats['active'] ?? 0 }}</h4>
                                <small class="text-muted">نشطة</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-warning mb-1">{{ $stats['assigned'] ?? 0 }}</h4>
                            <small class="text-muted">مخصصة لسائق</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- أنواع المركبات -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-car"></i> أنواع المركبات
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <span class="badge bg-primary me-1">سيدان</span>
                        <small class="text-muted">سيارات عائلية</small>
                    </div>
                    <div class="mb-2">
                        <span class="badge bg-success me-1">SUV</span>
                        <small class="text-muted">سيارات رياضية</small>
                    </div>
                    <div class="mb-2">
                        <span class="badge bg-info me-1">هاتشباك</span>
                        <small class="text-muted">سيارات صغيرة</small>
                    </div>
                    <div class="mb-2">
                        <span class="badge bg-warning me-1">بيك أب</span>
                        <small class="text-muted">شاحنات صغيرة</small>
                    </div>
                    <div class="mb-2">
                        <span class="badge bg-secondary me-1">فان</span>
                        <small class="text-muted">سيارات نقل</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// معاينة الصورة
document.getElementById('image').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
            document.getElementById('imagePreview').style.display = 'block';
        }
        reader.readAsDataURL(file);
    } else {
        document.getElementById('imagePreview').style.display = 'none';
    }
});

// إعادة تعيين النموذج
function resetForm() {
    if (confirm('هل أنت متأكد من إعادة تعيين النموذج؟')) {
        document.getElementById('addVehicleForm').reset();
        document.getElementById('imagePreview').style.display = 'none';

        // إعادة تعيين رسائل الخطأ
        const invalidInputs = document.querySelectorAll('.is-invalid');
        invalidInputs.forEach(input => {
            input.classList.remove('is-invalid');
        });

        // إعادة تعيين رسائل الخطأ
        const invalidFeedbacks = document.querySelectorAll('.invalid-feedback');
        invalidFeedbacks.forEach(feedback => {
            feedback.style.display = 'none';
        });
    }
}

// التحقق من صحة النموذج قبل الإرسال
document.getElementById('addVehicleForm').addEventListener('submit', function(e) {
    const requiredFields = ['plate_number', 'brand', 'model', 'year', 'color', 'vehicle_type'];
    let isValid = true;

    requiredFields.forEach(field => {
        const input = document.getElementById(field);
        if (!input.value.trim()) {
            input.classList.add('is-invalid');
            isValid = false;
        } else {
            input.classList.remove('is-invalid');
        }
    });

    if (!isValid) {
        e.preventDefault();
        alert('يرجى ملء جميع الحقول المطلوبة');
    }
});

// تحديث نوع المركبة
document.getElementById('vehicle_type').addEventListener('change', function() {
    const selectedType = this.value;
    const typeInfo = {
        'sedan': 'سيارة عائلية مناسبة للرحلات اليومية',
        'suv': 'سيارة رياضية مناسبة للطرق الوعرة',
        'hatchback': 'سيارة صغيرة مناسبة للمدن',
        'pickup': 'شاحنة صغيرة مناسبة للبضائع',
        'van': 'سيارة نقل مناسبة للمجموعات'
    };

    if (selectedType && typeInfo[selectedType]) {
        // يمكن إضافة معلومات إضافية هنا
        console.log('نوع المركبة المختار:', typeInfo[selectedType]);
    }
});
</script>

<style>
.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.form-label {
    font-weight: 600;
}

.text-danger {
    color: #dc3545 !important;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.border-end {
    border-right: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .border-end {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}
</style>
@endsection