@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">
                    <h3 class="card-title">إضافة مكتب غاز جديد</h3>
                    <div class="card-tools">
                        <a href="{{ route('admin.gas-offices.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> العودة
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.gas-offices.store') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <!-- معلومات المكتب -->
                            <div class="col-md-6">
                                <h5>معلومات المكتب</h5>
                                <hr>
                                
                                <div class="form-group">
                                    <label for="name">اسم المكتب <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" 
                                           value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

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

                                <div class="form-group">
                                    <label for="address">العنوان <span class="text-danger">*</span></label>
                                    <input type="text" name="address" id="address" class="form-control @error('address') is-invalid @enderror" 
                                           value="{{ old('address') }}" required>
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="latitude">خط العرض</label>
                                            <input type="number" name="latitude" id="latitude" class="form-control @error('latitude') is-invalid @enderror" 
                                                   value="{{ old('latitude') }}" step="any">
                                            @error('latitude')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="longitude">خط الطول</label>
                                            <input type="number" name="longitude" id="longitude" class="form-control @error('longitude') is-invalid @enderror" 
                                                   value="{{ old('longitude') }}" step="any">
                                            @error('longitude')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="phone">رقم الهاتف <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror" 
                                           value="{{ old('phone') }}" required>
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="email">البريد الإلكتروني</label>
                                    <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" 
                                           value="{{ old('email') }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- معلومات المالك -->
                            <div class="col-md-6">
                                <h5>معلومات المالك</h5>
                                <hr>
                                
                                <div class="form-group">
                                    <label for="owner_name">اسم المالك <span class="text-danger">*</span></label>
                                    <input type="text" name="owner_name" id="owner_name" class="form-control @error('owner_name') is-invalid @enderror" 
                                           value="{{ old('owner_name') }}" required>
                                    @error('owner_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="owner_email">بريد المالك الإلكتروني <span class="text-danger">*</span></label>
                                    <input type="email" name="owner_email" id="owner_email" class="form-control @error('owner_email') is-invalid @enderror" 
                                           value="{{ old('owner_email') }}" required>
                                    @error('owner_email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="owner_phone">هاتف المالك <span class="text-danger">*</span></label>
                                    <input type="text" name="owner_phone" id="owner_phone" class="form-control @error('owner_phone') is-invalid @enderror" 
                                           value="{{ old('owner_phone') }}" required>
                                    @error('owner_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="owner_password">كلمة مرور المالك <span class="text-danger">*</span></label>
                                    <input type="password" name="owner_password" id="owner_password" class="form-control @error('owner_password') is-invalid @enderror" 
                                           required>
                                    @error('owner_password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- إعدادات الخدمة -->
                            <div class="col-md-6">
                                <h5>إعدادات الخدمة</h5>
                                <hr>
                                
                                <div class="form-group">
                                    <label for="service_areas">المناطق التي يخدمها المكتب <span class="text-danger">*</span></label>
                                    <div id="service-areas-container">
                                        <div class="input-group mb-2">
                                            <input type="text" name="service_areas[]" class="form-control" placeholder="اسم المنطقة">
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-success add-area">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    @error('service_areas')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="opening_time">ساعة الافتتاح</label>
                                            <input type="time" name="opening_time" id="opening_time" class="form-control @error('opening_time') is-invalid @enderror" 
                                                   value="{{ old('opening_time') }}">
                                            @error('opening_time')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="closing_time">ساعة الإغلاق</label>
                                            <input type="time" name="closing_time" id="closing_time" class="form-control @error('closing_time') is-invalid @enderror" 
                                                   value="{{ old('closing_time') }}">
                                            @error('closing_time')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- إعدادات التوصيل -->
                            <div class="col-md-6">
                                <h5>إعدادات التوصيل</h5>
                                <hr>
                                
                                <div class="form-group">
                                    <label for="delivery_fee">رسوم التوصيل <span class="text-danger">*</span></label>
                                    <input type="number" name="delivery_fee" id="delivery_fee" class="form-control @error('delivery_fee') is-invalid @enderror" 
                                           value="{{ old('delivery_fee', 0) }}" min="0" step="0.01" required>
                                    @error('delivery_fee')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="delivery_time_minutes">وقت التوصيل (بالدقائق) <span class="text-danger">*</span></label>
                                    <input type="number" name="delivery_time_minutes" id="delivery_time_minutes" class="form-control @error('delivery_time_minutes') is-invalid @enderror" 
                                           value="{{ old('delivery_time_minutes', 30) }}" min="1" required>
                                    @error('delivery_time_minutes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="minimum_order">الحد الأدنى للطلب <span class="text-danger">*</span></label>
                                    <input type="number" name="minimum_order" id="minimum_order" class="form-control @error('minimum_order') is-invalid @enderror" 
                                           value="{{ old('minimum_order', 0) }}" min="0" step="0.01" required>
                                    @error('minimum_order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- الصور -->
                            <div class="col-md-12">
                                <h5>الصور</h5>
                                <hr>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="logo">شعار المكتب</label>
                                            <input type="file" name="logo" id="logo" class="form-control-file @error('logo') is-invalid @enderror" 
                                                   accept="image/*">
                                            @error('logo')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="cover_image">صورة الغلاف</label>
                                            <input type="file" name="cover_image" id="cover_image" class="form-control-file @error('cover_image') is-invalid @enderror" 
                                                   accept="image/*">
                                            @error('cover_image')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> حفظ
                            </button>
                            <a href="{{ route('admin.gas-offices.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> إلغاء
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // إضافة منطقة جديدة
    document.querySelector('.add-area').addEventListener('click', function() {
        const container = document.getElementById('service-areas-container');
        const newArea = document.createElement('div');
        newArea.className = 'input-group mb-2';
        newArea.innerHTML = `
            <input type="text" name="service_areas[]" class="form-control" placeholder="اسم المنطقة">
            <div class="input-group-append">
                <button type="button" class="btn btn-danger remove-area">
                    <i class="fas fa-minus"></i>
                </button>
            </div>
        `;
        container.appendChild(newArea);
    });

    // حذف منطقة
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-area')) {
            e.target.closest('.input-group').remove();
        }
    });
});
</script>
@endsection