@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('items.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('items.store') }}" method="POST" id="itemForm">
                    @csrf
                    
                    <!-- 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') == $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') == $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') == $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', $selectedUnitId) == $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') }}"
                               placeholder="مثال: أجهزة كمبيوتر مكتبية"
                               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') == $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') }}"
                               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') }}"
                               list="material_types"
                               placeholder="مثال: إلكترونيات، خشب، معدن...">
                        <datalist id="material_types">
                            <option value="إلكترونيات">
                            <option value="خشب">
                            <option value="معدن">
                            <option value="بلاستيك">
                            <option value="ورق">
                        </datalist>
                        @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', 1) }}"
                               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"
                                  placeholder="أدخل تفاصيل إضافية عن المادة...">{{ old('details') }}</textarea>
                        @error('details')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <hr>
                    
                    <!-- Buttons -->
                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>
                            حفظ المادة
                        </button>
                        <a href="{{ route('items.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times me-2"></i>
                            إلغاء
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Help Card -->
    <div class="col-md-4">
        <div class="card bg-light">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="fas fa-question-circle me-2"></i>
                    مساعدة
                </h6>
            </div>
            <div class="card-body">
                <h6 class="fw-bold">خطوات الإضافة:</h6>
                <ol class="small">
                    <li class="mb-2">اختر الهيئة</li>
                    <li class="mb-2">اختر القسم</li>
                    <li class="mb-2">اختر الشعبة</li>
                    <li class="mb-2">أدخل اسم المادة</li>
                    <li class="mb-2">حدد النوع والكمية</li>
                    <li class="mb-2">اضغط حفظ</li>
                </ol>
                
                <hr>
                
                <div class="alert alert-info small">
                    <i class="fas fa-lightbulb me-2"></i>
                    <strong>ملاحظة:</strong>
                    سيتم توليد الترميز تلقائياً بناءً على:
                    <br>• الهيئة + القسم + الشعبة
                    <br>• التاريخ
                    <br>• رقم تسلسلي
                </div>
                
                <hr>
                
                <h6 class="fw-bold">مثال:</h6>
                <div class="alert alert-success small">
                    <strong>أجهزة كمبيوتر مكتبية</strong>
                    <br>النوع: أجهزة
                    <br>الخامة: إلكترونيات
                    <br>الكمية: 10
                </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 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 = '';
        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