@extends('layouts.app')

@section('title', 'تعديل المادة')

@section('content')
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="page-title">
                <i class="fas fa-edit 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('items.index') }}">المواد</a></li>
                    <li class="breadcrumb-item active">تعديل</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="{{ route('items.show', $item) }}" class="btn btn-info me-2">
                <i class="fas fa-eye me-2"></i>
                عرض
            </a>
            <a href="{{ route('items.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-right me-2"></i>
                العودة
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-warning text-white">
                <h5 class="mb-0">
                    <i class="fas fa-edit me-2"></i>
                    تعديل معلومات المادة: {{ $item->name }}
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('items.update', $item) }}" method="POST">
                    @csrf
                    @method('PUT')
                    
                    <!-- Organization -->
                    <div class="mb-3">
                        <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
                                onchange="loadDepartments()">
                            <option value="">-- اختر الهيئة --</option>
                            @foreach($organizations as $org)
                                <option value="{{ $org->id }}" 
                                        {{ old('organization_id', $item->organization_id) == $org->id ? 'selected' : '' }}>
                                    {{ $org->name }} ({{ $org->code }})
                                </option>
                            @endforeach
                        </select>
                        @error('organization_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Department -->
                    <div class="mb-3">
                        <label for="department_id" class="form-label">
                            <i class="fas fa-sitemap text-primary me-1"></i>
                            القسم
                            <small class="text-muted">(اختياري)</small>
                        </label>
                        <select class="form-select @error('department_id') is-invalid @enderror" 
                                id="department_id" 
                                name="department_id"
                                onchange="loadUnits()">
                            <option value="">-- اختر القسم (اختياري) --</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" 
                                        data-org="{{ $dept->organization_id }}"
                                        {{ old('department_id', $item->department_id) == $dept->id ? 'selected' : '' }}>
                                    {{ $dept->name }} ({{ $dept->code }})
                                </option>
                            @endforeach
                        </select>
                        @error('department_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Section -->
                    <div class="mb-3">
                        <label for="section_id" class="form-label">
                            <i class="fas fa-layer-group text-primary me-1"></i>
                            الشعبة
                            <small class="text-muted">(اختياري)</small>
                        </label>
                        <select class="form-select @error('section_id') is-invalid @enderror" 
                                id="section_id" 
                                name="section_id"
                                onchange="loadUnits()">
                            <option value="">-- اختر الشعبة (اختياري) --</option>
                            @foreach($sections as $section)
                                <option value="{{ $section->id }}" 
                                        data-dept="{{ $section->department_id }}"
                                        {{ old('section_id', $item->section_id) == $section->id ? 'selected' : '' }}>
                                    {{ $section->name }} ({{ $section->code }})
                                </option>
                            @endforeach
                        </select>
                        @error('section_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Unit -->
                    <div class="mb-3">
                        <label for="unit_id" class="form-label">
                            <i class="fas fa-cubes text-primary me-1"></i>
                            الوحدة
                            <small class="text-muted">(اختياري)</small>
                        </label>
                        <select class="form-select @error('unit_id') is-invalid @enderror" 
                                id="unit_id" 
                                name="unit_id">
                            <option value="">-- اختر الوحدة (اختياري) --</option>
                            @foreach($units as $unit)
                                <option value="{{ $unit->id }}" 
                                        data-dept="{{ $unit->department_id }}"
                                        data-section="{{ $unit->section_id }}"
                                        {{ old('unit_id', $item->unit_id) == $unit->id ? 'selected' : '' }}>
                                    {{ $unit->name }} ({{ $unit->code }})
                                </option>
                            @endforeach
                        </select>
                        @error('unit_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <hr class="my-4">
                    
                    <!-- Name -->
                    <div class="mb-3">
                        <label for="name" class="form-label">
                            <i class="fas fa-box 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', $item->name) }}"
                               required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Type -->
                    <div class="mb-3">
                        <label for="type_id" class="form-label">
                            <i class="fas fa-tags text-primary me-1"></i>
                            نوع المادة <span class="text-danger">*</span>
                        </label>
                        <select class="form-select @error('type_id') is-invalid @enderror" 
                                id="type_id" 
                                name="type_id"
                                required>
                            <option value="">-- اختر نوع المادة --</option>
                            @foreach($types as $type)
                                <option value="{{ $type->id }}" 
                                        {{ old('type_id', $item->type_id) == $type->id ? 'selected' : '' }}>
                                    {{ $type->name }} ({{ $type->code }})
                                </option>
                            @endforeach
                        </select>
                        @error('type_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Item Type (Legacy) -->
                    <div class="mb-3">
                        <label for="item_type" class="form-label">
                            <i class="fas fa-tag text-primary me-1"></i>
                            نوع المادة (إضافي)
                        </label>
                        <input type="text" 
                               class="form-control @error('item_type') is-invalid @enderror" 
                               id="item_type" 
                               name="item_type" 
                               value="{{ old('item_type', $item->item_type) }}"
                               placeholder="مثال: أجهزة، أثاث، قرطاسية...">
                        @error('item_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Material Type -->
                    <div class="mb-3">
                        <label for="material_type" class="form-label">
                            <i class="fas fa-tag text-primary me-1"></i>
                            نوع الخامة
                        </label>
                        <input type="text" 
                               class="form-control @error('material_type') is-invalid @enderror" 
                               id="material_type" 
                               name="material_type" 
                               value="{{ old('material_type', $item->material_type) }}"
                               placeholder="مثال: خشب، حديد، بلاستيك...">
                        @error('material_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Quantity -->
                    <div class="mb-3">
                        <label for="quantity" class="form-label">
                            <i class="fas fa-calculator text-primary me-1"></i>
                            الكمية <span class="text-danger">*</span>
                        </label>
                        <input type="number" 
                               class="form-control @error('quantity') is-invalid @enderror" 
                               id="quantity" 
                               name="quantity" 
                               value="{{ old('quantity', $item->quantity) }}"
                               min="1"
                               required>
                        @error('quantity')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Details -->
                    <div class="mb-3">
                        <label for="details" class="form-label">
                            <i class="fas fa-file-alt text-primary me-1"></i>
                            التفاصيل
                        </label>
                        <textarea class="form-control @error('details') is-invalid @enderror" 
                                  id="details" 
                                  name="details" 
                                  rows="4">{{ old('details', $item->details) }}</textarea>
                        @error('details')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <hr class="my-4">
                    
                    <!-- Buttons -->
                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-2"></i>
                            حفظ التعديلات
                        </button>
                        <a href="{{ route('items.show', $item) }}" class="btn btn-secondary">
                            <i class="fas fa-times me-2"></i>
                            إلغاء
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Info -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    معلومات المادة
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fas fa-barcode text-muted me-2"></i>
                        <strong>الترميز:</strong><br>
                        <code style="font-size: 0.75rem;">{{ $item->code }}</code>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-barcode text-muted me-2"></i>
                        <strong>الباركودات:</strong> {{ $item->barcodes->count() }}
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-calendar text-muted me-2"></i>
                        <strong>تاريخ الإضافة:</strong>
                        <br><small>{{ $item->created_at->format('Y-m-d H:i') }}</small>
                    </li>
                </ul>
                
                <hr>
                
                <a href="{{ route('items.show', $item) }}" class="btn btn-sm btn-info w-100 mb-2">
                    <i class="fas fa-eye me-2"></i>
                    عرض التفاصيل
                </a>
                
                <a href="{{ route('barcodes.generate') }}?item_id={{ $item->id }}" 
                   class="btn btn-sm btn-success w-100">
                    <i class="fas fa-barcode me-2"></i>
                    توليد باركودات
                </a>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header bg-white">
                <h6 class="mb-0">
                    <i class="fas fa-lightbulb me-2"></i>
                    نصائح
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info small">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>ملاحظة:</strong>
                    <ul class="mb-0 mt-2">
                        <li>تغيير الموقع قد يؤثر على الترميز</li>
                        <li>تغيير النوع قد يؤثر على الباركودات</li>
                        <li>يمكنك ترك الحقول فارغة إذا لم تكن مطلوبة</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function loadDepartments() {
        const orgId = document.getElementById('organization_id').value;
        const deptSelect = document.getElementById('department_id');
        const sectionSelect = document.getElementById('section_id');
        const unitSelect = document.getElementById('unit_id');
        
        // Filter departments
        Array.from(deptSelect.options).forEach(option => {
            if (option.value === '') return;
            const optionOrgId = option.getAttribute('data-org');
            option.style.display = (optionOrgId == orgId) ? 'block' : 'none';
        });
        
        deptSelect.value = '';
        sectionSelect.value = '';
        unitSelect.value = '';
    }
    
    function loadUnits() {
        const deptId = document.getElementById('department_id').value;
        const sectionId = document.getElementById('section_id').value;
        const unitSelect = document.getElementById('unit_id');
        
        // Filter units based on department and section
        Array.from(unitSelect.options).forEach(option => {
            if (option.value === '') return;
            const optionDeptId = option.getAttribute('data-dept');
            const optionSectionId = option.getAttribute('data-section');
            
            let showUnit = true;
            
            // If department is selected, filter by department
            if (deptId && optionDeptId != deptId) {
                showUnit = false;
            }
            
            // If section is selected, filter by section
            if (sectionId && optionSectionId != sectionId) {
                showUnit = false;
            }
            
            option.style.display = showUnit ? 'block' : 'none';
        });
        
        unitSelect.value = '';
    }
    
    // Initialize filters on load
    window.addEventListener('load', function() {
        loadDepartments();
        loadUnits();
    });
</script>
@endpush