@extends('admin.layouts.app')

@section('title', 'إضافة قنينة غاز جديدة')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-plus text-success"></i>
                            إضافة قنينة غاز جديدة
                        </h3>
                        <a href="{{ route('admin.gas') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-right"></i>
                            العودة للقائمة
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.gas.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="row">
                            <!-- المعلومات الأساسية -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <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') }}"
                                           placeholder="مثال: قنينة غاز طبخ 12 كجم"
                                           required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mt-3">
                                    <label for="description" class="form-label">الوصف</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror"
                                              id="description"
                                              name="description"
                                              rows="3"
                                              placeholder="وصف تفصيلي للقنينة">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mt-3">
                                    <label for="brand" class="form-label">العلامة التجارية</label>
                                    <input type="text"
                                           class="form-control @error('brand') is-invalid @enderror"
                                           id="brand"
                                           name="brand"
                                           value="{{ old('brand') }}"
                                           placeholder="مثال: شركة الغاز الوطنية">
                                    @error('brand')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mt-3">
                                    <label for="gas_office_id" class="form-label">مكتب الغاز <span class="text-danger">*</span></label>
                                    <select class="form-control @error('gas_office_id') is-invalid @enderror"
                                            id="gas_office_id"
                                            name="gas_office_id"
                                            required>
                                        <option value="">اختر مكتب الغاز</option>
                                        @foreach($gasOffices as $office)
                                            <option value="{{ $office->id }}" {{ old('gas_office_id') == $office->id ? 'selected' : '' }}>
                                                {{ $office->name }} - {{ $office->address }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('gas_office_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- المواصفات -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="type" class="form-label">نوع الغاز <span class="text-danger">*</span></label>
                                    <select class="form-control @error('type') is-invalid @enderror"
                                            id="type"
                                            name="type"
                                            required>
                                        <option value="">اختر نوع الغاز</option>
                                        <option value="طبخ" {{ old('type') == 'طبخ' ? 'selected' : '' }}>طبخ</option>
                                        <option value="تدفئة" {{ old('type') == 'تدفئة' ? 'selected' : '' }}>تدفئة</option>
                                        <option value="صناعي" {{ old('type') == 'صناعي' ? 'selected' : '' }}>صناعي</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mt-3">
                                    <label for="material" class="form-label">مادة القنينة <span class="text-danger">*</span></label>
                                    <select class="form-control @error('material') is-invalid @enderror"
                                            id="material"
                                            name="material"
                                            required>
                                        <option value="">اختر مادة القنينة</option>
                                        <option value="بلاستك" {{ old('material') == 'بلاستك' ? 'selected' : '' }}>
                                            <i class="fas fa-recycle"></i> بلاستك
                                        </option>
                                        <option value="حديد" {{ old('material') == 'حديد' ? 'selected' : '' }}>
                                            <i class="fas fa-cog"></i> حديد
                                        </option>
                                    </select>
                                    @error('material')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mt-3">
                                    <label for="size" class="form-label">الحجم <span class="text-danger">*</span></label>
                                    <select class="form-control @error('size') is-invalid @enderror"
                                            id="size"
                                            name="size"
                                            required>
                                        <option value="">اختر الحجم</option>
                                        <option value="12" {{ old('size') == '12' ? 'selected' : '' }}>12 كجم</option>
                                        <option value="25" {{ old('size') == '25' ? 'selected' : '' }}>25 كجم</option>
                                        <option value="50" {{ old('size') == '50' ? 'selected' : '' }}>50 كجم</option>
                                    </select>
                                    @error('size')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mt-3">
                                    <label for="weight_kg" class="form-label">الوزن (كجم) <span class="text-danger">*</span></label>
                                    <input type="number"
                                           class="form-control @error('weight_kg') is-invalid @enderror"
                                           id="weight_kg"
                                           name="weight_kg"
                                           value="{{ old('weight_kg') }}"
                                           step="0.01"
                                           min="0"
                                           placeholder="مثال: 15.5"
                                           required>
                                    @error('weight_kg')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <!-- السعر والمخزون -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <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="100"
                                               min="0"
                                               placeholder="مثال: 25000"
                                               required>
                                        <span class="input-group-text">د.ع</span>
                                    </div>
                                    @error('price')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">السعر بالدينار العراقي</small>
                                </div>

                                <div class="form-group mt-3">
                                    <label for="stock_quantity" class="form-label">الكمية المتوفرة <span class="text-danger">*</span></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"
                                           placeholder="مثال: 100"
                                           required>
                                    @error('stock_quantity')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- الصورة والتعليمات -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="image" class="form-label">صورة القنينة</label>
                                    <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">يُفضل أن تكون الصورة بحجم 500x500 بكسل</small>
                                </div>

                                <div class="form-group mt-3">
                                    <label for="safety_instructions" class="form-label">تعليمات الأمان</label>
                                    <textarea class="form-control @error('safety_instructions') is-invalid @enderror"
                                              id="safety_instructions"
                                              name="safety_instructions"
                                              rows="3"
                                              placeholder="تعليمات الأمان والاستخدام الآمن">{{ old('safety_instructions') }}</textarea>
                                    @error('safety_instructions')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input"
                                               type="checkbox"
                                               id="is_available"
                                               name="is_available"
                                               value="1"
                                               {{ old('is_available', true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_available">
                                            متوفر للطلب
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i>
                                        حفظ القنينة
                                    </button>
                                    <a href="{{ route('admin.gas') }}" class="btn btn-secondary ms-2">
                                        <i class="fas fa-times"></i>
                                        إلغاء
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// تحديث الوزن تلقائياً عند تغيير الحجم
document.getElementById('size').addEventListener('change', function() {
    const size = this.value;
    const weightInput = document.getElementById('weight_kg');

    // تقدير الوزن بناءً على الحجم
    const weightMap = {
        '12': 15,
        '25': 28,
        '50': 55
    };

    if (weightMap[size]) {
        weightInput.value = weightMap[size];
    }
});

// معاينة الصورة
document.getElementById('image').addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            // يمكن إضافة معاينة للصورة هنا
            console.log('تم اختيار الصورة:', file.name);
        };
        reader.readAsDataURL(file);
    }
});
</script>
@endsection