@extends('layouts.app')

@section('title', 'تسجيل جهاز جديد')

@section('content')
<div class="mb-4">
    <h1 class="page-title">
        <i class="fas fa-plus-circle me-2"></i>
        تسجيل جهاز جديد
    </h1>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">الرئيسية</a></li>
            <li class="breadcrumb-item"><a href="{{ route('devices.index') }}">الأجهزة</a></li>
            <li class="breadcrumb-item active">تسجيل جديد</li>
        </ol>
    </nav>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    معلومات الجهاز
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('devices.store') }}" method="POST">
                    @csrf
                    
                    <!-- Organization, Department, Unit -->
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="organization_id" class="form-label">
                                <i class="fas fa-building text-primary me-1"></i>
                                الهيئة <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('organization_id') is-invalid @enderror" 
                                    id="organization_id" 
                                    name="organization_id" required>
                                <option value="">-- اختر --</option>
                                @foreach($organizations as $org)
                                    <option value="{{ $org->id }}">{{ $org->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="department_id" class="form-label">
                                <i class="fas fa-sitemap text-success me-1"></i>
                                القسم <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('department_id') is-invalid @enderror" 
                                    id="department_id" 
                                    name="department_id" required>
                                <option value="">-- اختر --</option>
                                @foreach($departments as $dept)
                                    <option value="{{ $dept->id }}" data-org="{{ $dept->organization_id }}">
                                        {{ $dept->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="unit_id" class="form-label">
                                <i class="fas fa-layer-group text-info me-1"></i>
                                الشعبة <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('unit_id') is-invalid @enderror" 
                                    id="unit_id" 
                                    name="unit_id" required>
                                <option value="">-- اختر --</option>
                                @foreach($units as $unit)
                                    <option value="{{ $unit->id }}" 
                                            data-dept="{{ $unit->department_id }}"
                                            {{ old('unit_id', $selectedUnitId) == $unit->id ? 'selected' : '' }}>
                                        {{ $unit->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <!-- Name & Type -->
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label for="name" class="form-label">
                                <i class="fas fa-computer text-primary me-1"></i>
                                اسم الجهاز <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   id="name" 
                                   name="name" 
                                   value="{{ old('name') }}"
                                   placeholder="مثال: سيرفر البيانات الرئيسي"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label for="device_type" class="form-label">
                                <i class="fas fa-tag text-primary me-1"></i>
                                نوع الجهاز
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="device_type" 
                                   name="device_type" 
                                   value="{{ old('device_type') }}"
                                   list="device_types"
                                   placeholder="مثال: خادم، طابعة...">
                            <datalist id="device_types">
                                <option value="خادم">
                                <option value="طابعة">
                                <option value="راوتر">
                                <option value="سويتش">
                                <option value="كمبيوتر">
                                <option value="لابتوب">
                            </datalist>
                        </div>
                    </div>
                    
                    <!-- Serial & Status -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="serial_number" class="form-label">
                                <i class="fas fa-hashtag text-primary me-1"></i>
                                الرقم التسلسلي
                            </label>
                            <input type="text" 
                                   class="form-control @error('serial_number') is-invalid @enderror" 
                                   id="serial_number" 
                                   name="serial_number" 
                                   value="{{ old('serial_number') }}"
                                   placeholder="مثال: SRV-001-2024">
                            @error('serial_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">
                                <i class="fas fa-signal text-primary me-1"></i>
                                الحالة <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('status') is-invalid @enderror" 
                                    id="status" 
                                    name="status" required>
                                <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>نشط</option>
                                <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>غير نشط</option>
                                <option value="under_maintenance" {{ old('status') == 'under_maintenance' ? 'selected' : '' }}>تحت الصيانة</option>
                                <option value="out_of_service" {{ old('status') == 'out_of_service' ? 'selected' : '' }}>خارج الخدمة</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- Received Date -->
                    <div class="mb-3">
                        <label for="received_date" class="form-label">
                            <i class="fas fa-calendar text-primary me-1"></i>
                            تاريخ الاستلام
                        </label>
                        <input type="date" 
                               class="form-control" 
                               id="received_date" 
                               name="received_date" 
                               value="{{ old('received_date') }}">
                    </div>
                    
                    <!-- Notes -->
                    <div class="mb-3">
                        <label for="notes" class="form-label">
                            <i class="fas fa-file-alt text-primary me-1"></i>
                            ملاحظات
                        </label>
                        <textarea class="form-control" 
                                  id="notes" 
                                  name="notes" 
                                  rows="4"
                                  placeholder="أدخل ملاحظات إضافية...">{{ old('notes') }}</textarea>
                    </div>
                    
                    <hr>
                    
                    <!-- Buttons -->
                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-save me-2"></i>
                            حفظ الجهاز
                        </button>
                        <a href="{{ route('devices.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times me-2"></i>
                            إلغاء
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Help -->
    <div class="col-md-4">
        <div class="card bg-light">
            <div class="card-header bg-warning text-dark">
                <h6 class="mb-0">
                    <i class="fas fa-question-circle me-2"></i>
                    مساعدة
                </h6>
            </div>
            <div class="card-body small">
                <h6 class="fw-bold">أمثلة:</h6>
                <div class="alert alert-warning small">
                    <strong>سيرفر البيانات</strong>
                    <br>النوع: خادم
                    <br>SN: SRV-001-2024
                    <br>الحالة: نشط
                </div>
                <div class="alert alert-warning small">
                    <strong>طابعة ليزر</strong>
                    <br>النوع: طابعة
                    <br>SN: PRT-001-2024
                    <br>الحالة: نشط
                </div>
            </div>
        </div>
    </div>
</div>
@endsection