@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>إضافة منتج جديد</h1>
        <a href="{{ route('products.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right"></i> العودة للمنتجات
        </a>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">معلومات المنتج</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label for="name" class="form-label">اسم المنتج <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">وصف المنتج</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="category_id" class="form-label">التصنيف <span class="text-danger">*</span></label>
                                    <select class="form-select @error('category_id') is-invalid @enderror" id="category_id" name="category_id" required>
                                        <option value="">اختر التصنيف</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="printer_id" class="form-label">الطابعة</label>
                                    <select class="form-select @error('printer_id') is-invalid @enderror" id="printer_id" name="printer_id">
                                        <option value="">بدون طابعة</option>
                                        @foreach($printers as $printer)
                                            <option value="{{ $printer->id }}" {{ old('printer_id') == $printer->id ? 'selected' : '' }}>
                                                {{ $printer->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('printer_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">اختر الطابعة التي سيتم طباعة طلبات هذا المنتج عليها</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="price" class="form-label">السعر <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="number" class="form-control @error('price') is-invalid @enderror" id="price" name="price" value="{{ old('price') }}" step="0.01" min="0" required>
                                        <span class="input-group-text">ريال</span>
                                        @error('price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="cost_price" class="form-label">التكلفة</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control @error('cost_price') is-invalid @enderror" id="cost_price" name="cost_price" value="{{ old('cost_price') }}" step="0.01" min="0">
                                        <span class="input-group-text">ريال</span>
                                        @error('cost_price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <small class="form-text text-muted">تكلفة إنتاج المنتج (اختياري)</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sku" class="form-label">رمز المنتج (SKU)</label>
                                    <input type="text" class="form-control @error('sku') is-invalid @enderror" id="sku" name="sku" value="{{ old('sku') }}">
                                    @error('sku')
                                        <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">
                                    <div class="form-check form-switch mt-4">
                                        <input class="form-check-input" type="checkbox" id="is_stock_tracked" name="is_stock_tracked" value="1" {{ old('is_stock_tracked') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_stock_tracked">تتبع المخزون لهذا المنتج</label>
                                    </div>
                                    <small class="form-text text-muted">فعّل هذا الخيار للمنتجات المعلبة مثل البيبسي والمياه</small>
                                </div>
                            </div>
                        </div>

                        <div id="inventory_fields" class="row {{ old('is_stock_tracked') ? '' : 'd-none' }}">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="stock_quantity" class="form-label">الكمية في المخزون</label>
                                    <input type="number" class="form-control @error('stock_quantity') is-invalid @enderror" id="stock_quantity" name="stock_quantity" value="{{ old('stock_quantity', 0) }}" min="0">
                                    @error('stock_quantity')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="reorder_level" class="form-label">حد إعادة الطلب</label>
                                    <input type="number" class="form-control @error('reorder_level') is-invalid @enderror" id="reorder_level" name="reorder_level" value="{{ old('reorder_level') }}" min="0">
                                    @error('reorder_level')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">سيتم التنبيه عند الوصول لهذا الحد</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', '1') == '1' ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">متاح للبيع</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="card-title">صورة المنتج</h6>
                            </div>
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <div class="image-preview mb-3">
                                        <img id="imagePreview" src="{{ asset('images/avatar-1.jpg') }}" alt="صورة المنتج" class="img-fluid rounded" style="max-height: 200px;">
                                    </div>
                                    <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image" accept="image/*">
                                    @error('image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">اختياري: يمكنك رفع صورة للمنتج</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mt-3">
                            <div class="card-header">
                                <h6 class="card-title">خيارات المنتج</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="has_options" name="has_options" value="1" {{ old('has_options') == '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="has_options">يحتوي على خيارات</label>
                                    </div>
                                    <small class="form-text text-muted">مثل: الحجم، الإضافات، إلخ</small>
                                </div>
                                
                                <div id="options_container" class="{{ old('has_options') == '1' ? '' : 'd-none' }}">
                                    <div class="mb-3">
                                        <label class="form-label">الخيارات</label>
                                        <div id="options_list">
                                            @if(old('options'))
                                                @foreach(old('options') as $index => $option)
                                                    <div class="option-item mb-2">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" name="options[{{ $index }}][name]" placeholder="اسم الخيار" value="{{ $option['name'] }}">
                                                            <input type="number" class="form-control" name="options[{{ $index }}][price]" placeholder="السعر الإضافي" value="{{ $option['price'] }}" step="0.01" min="0">
                                                            <button type="button" class="btn btn-danger remove-option"><i class="fas fa-times"></i></button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                        <button type="button" class="btn btn-sm btn-secondary mt-2" id="add_option">
                                            <i class="fas fa-plus"></i> إضافة خيار
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end mt-4">
                    <button type="button" class="btn btn-secondary me-2" onclick="window.history.back()">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ المنتج</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Image preview
        $('#image').change(function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').attr('src', e.target.result);
                }
                reader.readAsDataURL(file);
            }
        });
        
        // Toggle options container
        $('#has_options').change(function() {
            if ($(this).is(':checked')) {
                $('#options_container').removeClass('d-none');
            } else {
                $('#options_container').addClass('d-none');
            }
        });
        
        // Add option
        let optionIndex = {{ old('options') ? count(old('options')) : 0 }};
        
        $('#add_option').click(function() {
            const optionHtml = `
                <div class="option-item mb-2">
                    <div class="input-group">
                        <input type="text" class="form-control" name="options[${optionIndex}][name]" placeholder="اسم الخيار" required>
                        <input type="number" class="form-control" name="options[${optionIndex}][price]" placeholder="السعر الإضافي" step="0.01" min="0" required>
                        <button type="button" class="btn btn-danger remove-option"><i class="fas fa-times"></i></button>
                    </div>
                </div>
            `;
            
            $('#options_list').append(optionHtml);
            optionIndex++;
        });
        
        // Remove option
        $(document).on('click', '.remove-option', function() {
            $(this).closest('.option-item').remove();
        });

        // Toggle inventory fields
        $('#is_stock_tracked').on('change', function() {
            if ($(this).is(':checked')) {
                $('#inventory_fields').removeClass('d-none');
            } else {
                $('#inventory_fields').addClass('d-none');
            }
        });
    });
</script>
@endpush