@extends('layouts.app')

@section('title', 'توليد باركودات')

@section('content')
<div class="mb-4">
    <h1 class="page-title">
        <i class="fas fa-barcode 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('barcodes.index') }}">الباركودات</a></li>
            <li class="breadcrumb-item active">توليد جديد</li>
        </ol>
    </nav>
</div>

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show">
    <i class="fas fa-exclamation-circle me-2"></i>
    <strong>خطأ!</strong> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="fas fa-magic me-2"></i>
                    معلومات التوليد
                </h5>
            </div>
            <div class="card-body">
                <!-- Generation Type Selection -->
                <div class="mb-4">
                    <label class="form-label">
                        <i class="fas fa-cogs text-primary me-1"></i>
                        نوع التوليد <span class="text-danger">*</span>
                    </label>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-check form-check-lg p-3 border rounded" id="single-item-option">
                                <input class="form-check-input" type="radio" name="generation_type" id="single_item" value="single_item" checked onchange="toggleGenerationType()">
                                <label class="form-check-label w-100" for="single_item">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-box fa-2x me-3"></i>
                                        <div>
                                            <strong>مادة واحدة</strong>
                                            <br>
                                            <small class="text-muted">توليد باركودات لمادة محددة</small>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-check-lg p-3 border rounded" id="department-option">
                                <input class="form-check-input" type="radio" name="generation_type" id="department" value="department" onchange="toggleGenerationType()">
                                <label class="form-check-label w-100" for="department">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-sitemap fa-2x me-3"></i>
                                        <div>
                                            <strong>القسم كاملاً</strong>
                                            <br>
                                            <small class="text-muted">توليد باركودات لجميع مواد القسم</small>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-check-lg p-3 border rounded" id="section-option">
                                <input class="form-check-input" type="radio" name="generation_type" id="section" value="section" onchange="toggleGenerationType()">
                                <label class="form-check-label w-100" for="section">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-layer-group fa-2x me-3"></i>
                                        <div>
                                            <strong>الشعبة كاملة</strong>
                                            <br>
                                            <small class="text-muted">توليد باركودات لجميع مواد الشعبة</small>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-check-lg p-3 border rounded" id="unit-option">
                                <input class="form-check-input" type="radio" name="generation_type" id="unit" value="unit" onchange="toggleGenerationType()">
                                <label class="form-check-label w-100" for="unit">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-cubes fa-2x me-3"></i>
                                        <div>
                                            <strong>الوحدة كاملة</strong>
                                            <br>
                                            <small class="text-muted">توليد باركودات لجميع مواد الوحدة</small>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Single Item Selection -->
                <div id="single-item-form">
                    <form action="{{ route('barcodes.store') }}" method="POST">
                        @csrf
                        
                        <!-- Item Selection -->
                        <div class="mb-4">
                            <label for="item_id" class="form-label">
                                <i class="fas fa-box text-primary me-1"></i>
                                المادة <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('item_id') is-invalid @enderror" 
                                    id="item_id" 
                                    name="item_id"
                                    onchange="updateItemInfo()">
                                <option value="">-- اختر المادة --</option>
                                @foreach($items as $item)
                                    <option value="{{ $item->id }}" 
                                            data-name="{{ $item->name }}"
                                            data-code="{{ $item->code }}"
                                            data-org="{{ $item->organization ? $item->organization->name : 'غير محدد' }}"
                                            data-dept="{{ $item->department ? $item->department->name : 'غير محدد' }}"
                                            data-section="{{ $item->unit && $item->unit->section ? $item->unit->section->name : 'غير محدد' }}"
                                            data-unit="{{ $item->unit ? $item->unit->name : 'غير محدد' }}"
                                            data-quantity="{{ $item->quantity }}"
                                            {{ old('item_id', $selectedItemId) == $item->id ? 'selected' : '' }}>
                                        {{ $item->name }} - {{ $item->organization ? $item->organization->name : 'غير محدد' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('item_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            
                            <!-- Item Info Preview -->
                            <div id="item-info" class="mt-3 p-3 bg-light rounded" style="display: none;">
                                <h6 class="fw-bold mb-2">معلومات المادة المختارة:</h6>
                                <div class="row small">
                                    <div class="col-md-6">
                                        <i class="fas fa-building text-primary me-2"></i>
                                        <strong>الهيئة:</strong> <span id="info-org"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <i class="fas fa-sitemap text-success me-2"></i>
                                        <strong>القسم:</strong> <span id="info-dept"></span>
                                    </div>
                                    <div class="col-md-6 mt-2">
                                        <i class="fas fa-layer-group text-info me-2"></i>
                                        <strong>الشعبة:</strong> <span id="info-section"></span>
                                    </div>
                                    <div class="col-md-6 mt-2">
                                        <i class="fas fa-cubes text-warning me-2"></i>
                                        <strong>الوحدة:</strong> <span id="info-unit"></span>
                                    </div>
                                    <div class="col-md-6 mt-2">
                                        <i class="fas fa-barcode text-warning me-2"></i>
                                        <strong>الترميز:</strong> <span id="info-code"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                        <!-- Quantity -->
                        <div class="mb-4">
                            <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 form-control-lg @error('quantity') is-invalid @enderror" 
                                   id="quantity" 
                                   name="quantity" 
                                   value="{{ old('quantity', 1) }}"
                                   min="1"
                                   max="100"
                                   required>
                            <small class="form-text text-muted">
                                <i class="fas fa-info-circle"></i>
                                سيتم توليد رقم تسلسلي فريد لكل باركود (الحد الأقصى: 100 باركود)
                            </small>
                            @error('quantity')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    
                        <!-- Barcode Type -->
                        <div class="mb-4">
                            <label class="form-label">
                                <i class="fas fa-qrcode text-primary me-1"></i>
                                نوع الباركود <span class="text-danger">*</span>
                            </label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-check-lg p-3 border rounded {{ old('barcode_type', 'code128') == 'code128' ? 'border-primary bg-light' : '' }}">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="barcode_type" 
                                               id="code128" 
                                               value="code128"
                                               {{ old('barcode_type', 'code128') == 'code128' ? 'checked' : '' }}
                                               required>
                                        <label class="form-check-label w-100" for="code128">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-barcode fa-2x me-3"></i>
                                                <div>
                                                    <strong>Code 128</strong>
                                                    <br>
                                                    <small class="text-muted">الأكثر استخداماً - سريع ودقيق</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check form-check-lg p-3 border rounded {{ old('barcode_type') == 'qr' ? 'border-primary bg-light' : '' }}">
                                        <input class="form-check-input" 
                                               type="radio" 
                                               name="barcode_type" 
                                               id="qr" 
                                               value="qr"
                                               {{ old('barcode_type') == 'qr' ? 'checked' : '' }}>
                                        <label class="form-check-label w-100" for="qr">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-qrcode fa-2x me-3"></i>
                                                <div>
                                                    <strong>QR Code</strong>
                                                    <br>
                                                    <small class="text-muted">يحتوي على معلومات أكثر</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            @error('barcode_type')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    
                        <hr>
                        
                        <!-- Preview -->
                        <div class="alert alert-info">
                            <h6 class="fw-bold mb-2">
                                <i class="fas fa-info-circle me-2"></i>
                                معاينة التوليد:
                            </h6>
                            <p class="mb-0">سيتم توليد <strong id="preview-quantity">-</strong> باركود من نوع <strong id="preview-type">Code 128</strong></p>
                            <p class="mb-0 small text-muted mt-2">
                                لكل باركود رقم تسلسلي فريد، ويمكن طباعتها جميعاً أو إعادة طباعتها لاحقاً
                            </p>
                        </div>
                        
                        <!-- Buttons -->
                        <div class="d-flex justify-content-between">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-magic me-2"></i>
                                توليد الباركودات
                            </button>
                            <a href="{{ route('barcodes.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>
                                إلغاء
                            </a>
                        </div>
                    </form>
                </div>

                <!-- Department Form -->
                <div id="department-form" style="display: none;">
                    <form action="{{ route('barcodes.generate.department') }}" method="POST">
                        @csrf
                        
                        <!-- Department Selection -->
                        <div class="mb-4">
                            <label for="department_id" class="form-label">
                                <i class="fas fa-sitemap text-primary 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"
                                    onchange="updateDepartmentInfo()">
                                <option value="">-- اختر القسم --</option>
                                @foreach($departments as $dept)
                                    <option value="{{ $dept->id }}" 
                                            data-name="{{ $dept->name }}"
                                            data-org="{{ $dept->organization ? $dept->organization->name : 'غير محدد' }}"
                                            {{ old('department_id', $selectedDepartmentId) == $dept->id ? 'selected' : '' }}>
                                        {{ $dept->organization ? $dept->organization->name : 'غير محدد' }} - {{ $dept->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('department_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            
                            <!-- Department Info Preview -->
                            <div id="department-info" class="mt-3 p-3 bg-light rounded" style="display: none;">
                                <h6 class="fw-bold mb-2">معلومات القسم المختار:</h6>
                                <div class="row small">
                                    <div class="col-md-6">
                                        <i class="fas fa-building text-primary me-2"></i>
                                        <strong>الهيئة:</strong> <span id="dept-info-org"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <i class="fas fa-sitemap text-success me-2"></i>
                                        <strong>القسم:</strong> <span id="dept-info-name"></span>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <i class="fas fa-info-circle text-info me-2"></i>
                                        <strong>ملاحظة:</strong> سيتم توليد باركودات لجميع المواد في هذا القسم
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Barcode Type -->
                        <div class="mb-4">
                            <label class="form-label">
                                <i class="fas fa-qrcode text-primary me-1"></i>
                                نوع الباركود <span class="text-danger">*</span>
                            </label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-check-lg p-3 border rounded">
                                        <input class="form-check-input" type="radio" name="barcode_type" id="dept_code128" value="code128" checked>
                                        <label class="form-check-label w-100" for="dept_code128">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-barcode fa-2x me-3"></i>
                                                <div>
                                                    <strong>Code 128</strong>
                                                    <br>
                                                    <small class="text-muted">الأكثر استخداماً</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check form-check-lg p-3 border rounded">
                                        <input class="form-check-input" type="radio" name="barcode_type" id="dept_qr" value="qr">
                                        <label class="form-check-label w-100" for="dept_qr">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-qrcode fa-2x me-3"></i>
                                                <div>
                                                    <strong>QR Code</strong>
                                                    <br>
                                                    <small class="text-muted">يحتوي على معلومات أكثر</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Buttons -->
                        <div class="d-flex justify-content-between">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-magic me-2"></i>
                                توليد باركودات القسم
                            </button>
                            <a href="{{ route('barcodes.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>
                                إلغاء
                            </a>
                        </div>
                    </form>
                </div>

                <!-- Section Form -->
                <div id="section-form" style="display: none;">
                    <form action="{{ route('barcodes.generate.section') }}" method="POST">
                        @csrf
                        
                        <!-- Section Selection -->
                        <div class="mb-4">
                            <label for="section_id" class="form-label">
                                <i class="fas fa-layer-group text-primary me-1"></i>
                                الشعبة <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('section_id') is-invalid @enderror" 
                                    id="section_id" 
                                    name="section_id"
                                    onchange="updateSectionInfo()">
                                <option value="">-- اختر الشعبة --</option>
                                @foreach($sections as $section)
                                    <option value="{{ $section->id }}" 
                                            data-name="{{ $section->name }}"
                                            data-dept="{{ $section->department ? $section->department->name : 'غير محدد' }}"
                                            data-org="{{ $section->department && $section->department->organization ? $section->department->organization->name : 'غير محدد' }}"
                                            {{ old('section_id', $selectedSectionId) == $section->id ? 'selected' : '' }}>
                                        {{ $section->department && $section->department->organization ? $section->department->organization->name : 'غير محدد' }} - {{ $section->department ? $section->department->name : 'غير محدد' }} - {{ $section->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('section_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            
                            <!-- Section Info Preview -->
                            <div id="section-info" class="mt-3 p-3 bg-light rounded" style="display: none;">
                                <h6 class="fw-bold mb-2">معلومات الشعبة المختارة:</h6>
                                <div class="row small">
                                    <div class="col-md-6">
                                        <i class="fas fa-building text-primary me-2"></i>
                                        <strong>الهيئة:</strong> <span id="sec-info-org"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <i class="fas fa-sitemap text-success me-2"></i>
                                        <strong>القسم:</strong> <span id="sec-info-dept"></span>
                                    </div>
                                    <div class="col-md-6 mt-2">
                                        <i class="fas fa-layer-group text-info me-2"></i>
                                        <strong>الشعبة:</strong> <span id="sec-info-name"></span>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <i class="fas fa-info-circle text-info me-2"></i>
                                        <strong>ملاحظة:</strong> سيتم توليد باركودات لجميع المواد في هذه الشعبة
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Barcode Type -->
                        <div class="mb-4">
                            <label class="form-label">
                                <i class="fas fa-qrcode text-primary me-1"></i>
                                نوع الباركود <span class="text-danger">*</span>
                            </label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-check-lg p-3 border rounded">
                                        <input class="form-check-input" type="radio" name="barcode_type" id="sec_code128" value="code128" checked>
                                        <label class="form-check-label w-100" for="sec_code128">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-barcode fa-2x me-3"></i>
                                                <div>
                                                    <strong>Code 128</strong>
                                                    <br>
                                                    <small class="text-muted">الأكثر استخداماً</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check form-check-lg p-3 border rounded">
                                        <input class="form-check-input" type="radio" name="barcode_type" id="sec_qr" value="qr">
                                        <label class="form-check-label w-100" for="sec_qr">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-qrcode fa-2x me-3"></i>
                                                <div>
                                                    <strong>QR Code</strong>
                                                    <br>
                                                    <small class="text-muted">يحتوي على معلومات أكثر</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Buttons -->
                        <div class="d-flex justify-content-between">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-magic me-2"></i>
                                توليد باركودات الشعبة
                            </button>
                            <a href="{{ route('barcodes.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>
                                إلغاء
                            </a>
                        </div>
                    </form>
                </div>

                <!-- Unit Form -->
                <div id="unit-form" style="display: none;">
                    <form action="{{ route('barcodes.generate.unit') }}" method="POST">
                        @csrf
                        
                        <!-- Unit Selection -->
                        <div class="mb-4">
                            <label for="unit_id" class="form-label">
                                <i class="fas fa-cubes text-primary 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"
                                    onchange="updateUnitInfo()">
                                <option value="">-- اختر الوحدة --</option>
                                @foreach($units as $unit)
                                    <option value="{{ $unit->id }}" 
                                            data-name="{{ $unit->name }}"
                                            data-org="{{ $unit->organization ? $unit->organization->name : 'غير محدد' }}"
                                            data-dept="{{ $unit->department ? $unit->department->name : 'غير محدد' }}"
                                            data-section="{{ $unit->section ? $unit->section->name : 'غير محدد' }}"
                                            {{ old('unit_id', $selectedUnitId) == $unit->id ? 'selected' : '' }}>
                                        {{ $unit->organization ? $unit->organization->name : 'غير محدد' }} - {{ $unit->department ? $unit->department->name : 'غير محدد' }} - {{ $unit->section ? $unit->section->name : 'غير محدد' }} - {{ $unit->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('unit_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            
                            <!-- Unit Info Preview -->
                            <div id="unit-info" class="mt-3 p-3 bg-light rounded" style="display: none;">
                                <h6 class="fw-bold mb-2">معلومات الوحدة المختارة:</h6>
                                <div class="row small">
                                    <div class="col-md-6">
                                        <i class="fas fa-building text-primary me-2"></i>
                                        <strong>الهيئة:</strong> <span id="unit-info-org"></span>
                                    </div>
                                    <div class="col-md-6">
                                        <i class="fas fa-sitemap text-success me-2"></i>
                                        <strong>القسم:</strong> <span id="unit-info-dept"></span>
                                    </div>
                                    <div class="col-md-6 mt-2">
                                        <i class="fas fa-layer-group text-info me-2"></i>
                                        <strong>الشعبة:</strong> <span id="unit-info-section"></span>
                                    </div>
                                    <div class="col-md-6 mt-2">
                                        <i class="fas fa-cubes text-warning me-2"></i>
                                        <strong>الوحدة:</strong> <span id="unit-info-name"></span>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <i class="fas fa-info-circle text-info me-2"></i>
                                        <strong>ملاحظة:</strong> سيتم توليد باركودات لجميع المواد في هذه الوحدة
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Barcode Type -->
                        <div class="mb-4">
                            <label class="form-label">
                                <i class="fas fa-qrcode text-primary me-1"></i>
                                نوع الباركود <span class="text-danger">*</span>
                            </label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-check-lg p-3 border rounded">
                                        <input class="form-check-input" type="radio" name="barcode_type" id="unit_code128" value="code128" checked>
                                        <label class="form-check-label w-100" for="unit_code128">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-barcode fa-2x me-3"></i>
                                                <div>
                                                    <strong>Code 128</strong>
                                                    <br>
                                                    <small class="text-muted">الأكثر استخداماً</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check form-check-lg p-3 border rounded">
                                        <input class="form-check-input" type="radio" name="barcode_type" id="unit_qr" value="qr">
                                        <label class="form-check-label w-100" for="unit_qr">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-qrcode fa-2x me-3"></i>
                                                <div>
                                                    <strong>QR Code</strong>
                                                    <br>
                                                    <small class="text-muted">يحتوي على معلومات أكثر</small>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Buttons -->
                        <div class="d-flex justify-content-between">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-magic me-2"></i>
                                توليد باركودات الوحدة
                            </button>
                            <a href="{{ route('barcodes.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>
                                إلغاء
                            </a>
                        </div>
                    </form>
                </div>
            </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">اطبع مباشرة أو احفظ PDF</li>
                </ol>
                
                <hr>
                
                <div class="alert alert-success small">
                    <i class="fas fa-lightbulb me-2"></i>
                    <strong>مثال:</strong>
                    <br>• المادة: أجهزة كمبيوتر
                    <br>• الكمية: 5 باركودات
                    <br>• النوع: Code 128
                    <br><br>
                    <strong>النتيجة:</strong>
                    <br>5 باركودات بأرقام تسلسلية:
                    <br>-0001, -0002, -0003, -0004, -0005
                </div>
                
                <hr>
                
                <h6 class="fw-bold">ماذا بعد التوليد؟</h6>
                <ul class="small">
                    <li class="mb-2">معاينة الباركودات</li>
                    <li class="mb-2">اختيار تخطيط الطباعة</li>
                    <li class="mb-2">طباعة PDF</li>
                    <li class="mb-2">إعادة الطباعة لاحقاً</li>
                </ul>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header bg-warning text-dark">
                <h6 class="mb-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    ملاحظات مهمة
                </h6>
            </div>
            <div class="card-body small">
                <ul class="mb-0">
                    <li class="mb-2">كل باركود له قيمة فريدة</li>
                    <li class="mb-2">لا يمكن تكرار نفس الباركود</li>
                    <li class="mb-2">يتم تسجيل تاريخ التوليد</li>
                    <li class="mb-2">يمكن حذف الباركودات لاحقاً</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function toggleGenerationType() {
        const singleItem = document.getElementById('single_item');
        const department = document.getElementById('department');
        const section = document.getElementById('section');
        const unit = document.getElementById('unit');
        
        const singleForm = document.getElementById('single-item-form');
        const deptForm = document.getElementById('department-form');
        const secForm = document.getElementById('section-form');
        const unitForm = document.getElementById('unit-form');
        
        // Hide all forms
        singleForm.style.display = 'none';
        deptForm.style.display = 'none';
        secForm.style.display = 'none';
        unitForm.style.display = 'none';
        
        // Show selected form
        if (singleItem.checked) {
            singleForm.style.display = 'block';
        } else if (department.checked) {
            deptForm.style.display = 'block';
        } else if (section.checked) {
            secForm.style.display = 'block';
        } else if (unit.checked) {
            unitForm.style.display = 'block';
        }
    }
    
    function updateItemInfo() {
        const select = document.getElementById('item_id');
        const option = select.options[select.selectedIndex];
        
        if (option.value) {
            document.getElementById('info-org').textContent = option.getAttribute('data-org');
            document.getElementById('info-dept').textContent = option.getAttribute('data-dept');
            document.getElementById('info-section').textContent = option.getAttribute('data-section');
            document.getElementById('info-unit').textContent = option.getAttribute('data-unit');
            document.getElementById('info-code').textContent = option.getAttribute('data-code');
            document.getElementById('item-info').style.display = 'block';
        } else {
            document.getElementById('item-info').style.display = 'none';
        }
    }
    
    function updateDepartmentInfo() {
        const select = document.getElementById('department_id');
        const option = select.options[select.selectedIndex];
        
        if (option.value) {
            document.getElementById('dept-info-org').textContent = option.getAttribute('data-org');
            document.getElementById('dept-info-name').textContent = option.getAttribute('data-name');
            document.getElementById('department-info').style.display = 'block';
        } else {
            document.getElementById('department-info').style.display = 'none';
        }
    }
    
    function updateSectionInfo() {
        const select = document.getElementById('section_id');
        const option = select.options[select.selectedIndex];
        
        if (option.value) {
            document.getElementById('sec-info-org').textContent = option.getAttribute('data-org');
            document.getElementById('sec-info-dept').textContent = option.getAttribute('data-dept');
            document.getElementById('sec-info-name').textContent = option.getAttribute('data-name');
            document.getElementById('section-info').style.display = 'block';
        } else {
            document.getElementById('section-info').style.display = 'none';
        }
    }
    
    function updateUnitInfo() {
        const select = document.getElementById('unit_id');
        const option = select.options[select.selectedIndex];
        
        if (option.value) {
            document.getElementById('unit-info-org').textContent = option.getAttribute('data-org');
            document.getElementById('unit-info-dept').textContent = option.getAttribute('data-dept');
            document.getElementById('unit-info-section').textContent = option.getAttribute('data-section');
            document.getElementById('unit-info-name').textContent = option.getAttribute('data-name');
            document.getElementById('unit-info').style.display = 'block';
        } else {
            document.getElementById('unit-info').style.display = 'none';
        }
    }
    
    function updatePreview() {
        const quantity = document.getElementById('quantity').value || '-';
        const type = document.querySelector('input[name="barcode_type"]:checked')?.nextElementSibling.querySelector('strong')?.textContent || 'Code 128';
        
        document.getElementById('preview-quantity').textContent = quantity;
        document.getElementById('preview-type').textContent = type;
    }
    
    // Update preview on change
    document.getElementById('quantity')?.addEventListener('input', updatePreview);
    document.querySelectorAll('input[name="barcode_type"]').forEach(radio => {
        radio.addEventListener('change', updatePreview);
    });
    
    // Initialize
    window.addEventListener('load', function() {
        toggleGenerationType();
        updateItemInfo();
        updateDepartmentInfo();
        updateSectionInfo();
        updateUnitInfo();
        updatePreview();
    });
</script>
@endpush