@extends('dashboard.layouts.base')
@section('content')
<div class="col-12">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center" style="direction: rtl;">
                    <h3 class="card-title mb-0">تعديل بيانات مقدم الخدمة</h3>
                    <a href="{{ route('dashboard.technical.index') }}" class="btn btn-secondary btn-sm">رجوع</a>
                </div>
                <div class="card-body" style="direction: rtl;">
                    <form action="{{ route('dashboard.technical.update', $provider->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="mb-3">
                            <label class="form-label">الدولة <span class="text-danger">*</span></label>
                            <select name="country_id" id="country_id" class="form-control" required>
                                <option value="">-- اختر الدولة --</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->id }}"
                                        {{ old('country_id', $provider->country_id) == $country->id ? 'selected' : '' }}>
                                        {{ $country->getTranslation('name', 'ar') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('country_id')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">الوصف</label>
                            <textarea name="description" class="form-control" rows="4" placeholder="أدخل وصف مقدم الخدمة...">{{ old('description', $provider->description) }}</textarea>
                            @error('description')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">التصنيف الرئيسي <span class="text-danger">*</span></label>
                            <select name="category_id" id="category_id" class="form-control" required>
                                <option value="">-- اختر التصنيف الرئيسي --</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('category_id', $provider->category_id) == $category->id ? 'selected' : '' }}>
                                        {{ $category->getTranslation('name', 'ar') }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">التصنيفات الفرعية <span class="text-danger">*</span></label>
                            <small class="d-block text-muted mb-2">يمكنك اختيار تصنيف فرعي أو اثنين</small>
                            <div id="subcategories-container">
                                @foreach($subcategories as $subcategory)
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox"
                                               name="subcategories[]"
                                               value="{{ $subcategory->id }}"
                                               id="subcategory_{{ $subcategory->id }}"
                                               {{ in_array($subcategory->id, old('subcategories', $provider->subcategories->pluck('id')->toArray())) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="subcategory_{{ $subcategory->id }}">
                                            {{ $subcategory->getTranslation('name', 'ar') }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                            @error('subcategories')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                            @error('subcategories.*')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('dashboard.technical.index') }}" class="btn btn-secondary">إلغاء</a>
                            <button type="submit" class="btn btn-primary">تحديث</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('category_id');
    const subcategoriesContainer = document.getElementById('subcategories-container');
    const currentSubcategoryIds = @json($provider->subcategories->pluck('id')->toArray());

    categorySelect.addEventListener('change', function() {
        const categoryId = this.value;

        if (!categoryId) {
            subcategoriesContainer.innerHTML = '<p class="text-muted">يرجى اختيار التصنيف الرئيسي أولاً</p>';
            return;
        }

        // Show loading
        subcategoriesContainer.innerHTML = '<p class="text-muted">جاري التحميل...</p>';

        // Fetch subcategories via API
        fetch(`/api/select/subcategories/${categoryId}`)
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    let html = '';
                    data.forEach(subcategory => {
                        const isChecked = currentSubcategoryIds.includes(subcategory.id) ? 'checked' : '';
                        html += `
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox"
                                       name="subcategories[]"
                                       value="${subcategory.id}"
                                       id="subcategory_${subcategory.id}"
                                       ${isChecked}>
                                <label class="form-check-label" for="subcategory_${subcategory.id}">
                                    ${subcategory.name || 'N/A'}
                                </label>
                            </div>
                        `;
                    });
                    subcategoriesContainer.innerHTML = html;
                } else {
                    subcategoriesContainer.innerHTML = '<p class="text-muted">لا توجد تصنيفات فرعية متاحة</p>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                subcategoriesContainer.innerHTML = '<p class="text-danger">حدث خطأ أثناء تحميل التصنيفات الفرعية</p>';
            });
    });

    // Validate subcategories on form submit
    document.querySelector('form').addEventListener('submit', function(e) {
        const checkedSubcategories = document.querySelectorAll('input[name="subcategories[]"]:checked');
        if (checkedSubcategories.length === 0) {
            e.preventDefault();
            alert('يرجى اختيار تصنيف فرعي واحد على الأقل');
            return false;
        }
        if (checkedSubcategories.length > 2) {
            e.preventDefault();
            alert('يمكنك اختيار تصنيف فرعي أو اثنين فقط');
            return false;
        }
    });
});
</script>
@endsection