@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <span>{{ __('აირჩიეთ კატეგორიები თქვენი შეკითხვისთვის') }}</span>
                        <span class="badge bg-primary" id="selected-count">0 არჩეული</span>
                    </div>
                </div>

                <div class="card-body">
                    <form method="POST" action="{{ route('chatbot.question_form') }}" id="category-form">
                        @csrf
                        <input type="hidden" name="language" value="ka">
                        
                        <div class="alert alert-info mb-3">
                            <i class="fas fa-info-circle"></i> 
                            {{ __('აირჩიეთ ერთი ან რამდენიმე კატეგორია, რომლებიც უკავშირდება თქვენს შეკითხვას. შეგიძლიათ აირჩიოთ რამდენიმე კატეგორია უფრო სრულყოფილი პასუხების მისაღებად.') }}
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="select-all-categories">
                                <label class="form-check-label fw-bold" for="select-all-categories">
                                    {{ __('ყველა კატეგორიის არჩევა') }}
                                </label>
                            </div>
                        </div>
                        
                        <div class="categories-container mb-4">
                            @foreach($categories as $category)
                                <div class="card mb-3">
                                    <div class="card-header">
                                        <div class="form-check">
                                            <input class="form-check-input category-checkbox" type="checkbox" name="categories[]" value="{{ $category->id }}" id="category-{{ $category->id }}">
                                            <label class="form-check-label fw-bold" for="category-{{ $category->id }}">
                                                {{ $category->name }}
                                            </label>
                                            @if($category->description)
                                                <small class="text-muted d-block">{{ $category->description }}</small>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    @if($category->subcategories && $category->subcategories->count() > 0)
                                        <div class="card-body py-2">
                                            <div class="subcategories-container">
                                                <div class="mb-2">
                                                    <div class="form-check">
                                                        <input class="form-check-input select-all-subcategories" type="checkbox" 
                                                               id="select-all-subcategories-{{ $category->id }}" 
                                                               data-category="{{ $category->id }}">
                                                        <label class="form-check-label" for="select-all-subcategories-{{ $category->id }}">
                                                            <em>{{ __('ყველა ქვეკატეგორიის არჩევა') }}</em>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    @foreach($category->subcategories as $subcategory)
                                                        <div class="col-md-6">
                                                            <div class="form-check">
                                                                <input class="form-check-input subcategory-checkbox" type="checkbox" 
                                                                       name="subcategories[]" value="{{ $subcategory->id }}" 
                                                                       id="subcategory-{{ $subcategory->id }}" 
                                                                       data-parent="{{ $category->id }}">
                                                                <label class="form-check-label" for="subcategory-{{ $subcategory->id }}">
                                                                    {{ $subcategory->name }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        
                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-primary" id="continue-button">
                                {{ __('გაგრძელება შეკითხვაზე') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const categoryCheckboxes = document.querySelectorAll('.category-checkbox');
        const subcategoryCheckboxes = document.querySelectorAll('.subcategory-checkbox');
        const selectAllCategories = document.getElementById('select-all-categories');
        const selectAllSubcategoriesBtns = document.querySelectorAll('.select-all-subcategories');
        const selectedCountBadge = document.getElementById('selected-count');
        const continueButton = document.getElementById('continue-button');
        const categoryForm = document.getElementById('category-form');
        
        // Update selected count
        function updateSelectedCount() {
            const selectedCategories = document.querySelectorAll('.category-checkbox:checked').length;
            const selectedSubcategories = document.querySelectorAll('.subcategory-checkbox:checked').length;
            
            selectedCountBadge.textContent = `${selectedCategories} კატეგორია, ${selectedSubcategories} ქვეკატეგორია არჩეული`;
            
            // Disable continue button if nothing selected
            continueButton.disabled = (selectedCategories + selectedSubcategories) === 0;
        }
        
        // When a category is checked/unchecked
        categoryCheckboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                const categoryId = this.value;
                const isChecked = this.checked;
                
                // Update subcategories
                document.querySelectorAll(`.subcategory-checkbox[data-parent="${categoryId}"]`).forEach(function(subcategoryCheckbox) {
                    subcategoryCheckbox.disabled = !isChecked;
                });
                
                updateSelectedCount();
            });
        });
        
        // When a subcategory is checked, make sure its parent category is also checked
        subcategoryCheckboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    const parentId = this.getAttribute('data-parent');
                    document.getElementById(`category-${parentId}`).checked = true;
                }
                
                updateSelectedCount();
            });
        });
        
        // Select all categories
        selectAllCategories.addEventListener('change', function() {
            const isChecked = this.checked;
            
            categoryCheckboxes.forEach(function(checkbox) {
                checkbox.checked = isChecked;
                
                // Update subcategories for this category
                const categoryId = checkbox.value;
                document.querySelectorAll(`.subcategory-checkbox[data-parent="${categoryId}"]`).forEach(function(subcategoryCheckbox) {
                    subcategoryCheckbox.disabled = !isChecked;
                });
            });
            
            updateSelectedCount();
        });
        
        // Select all subcategories for a specific category
        selectAllSubcategoriesBtns.forEach(function(btn) {
            btn.addEventListener('change', function() {
                const categoryId = this.getAttribute('data-category');
                const isChecked = this.checked;
                
                // Check the category too
                if (isChecked) {
                    document.getElementById(`category-${categoryId}`).checked = true;
                }
                
                // Check/uncheck all subcategories
                document.querySelectorAll(`.subcategory-checkbox[data-parent="${categoryId}"]`).forEach(function(subcategoryCheckbox) {
                    subcategoryCheckbox.checked = isChecked;
                });
                
                updateSelectedCount();
            });
        });
        
        // Form validation before submit
        categoryForm.addEventListener('submit', function(e) {
            const selectedCategories = document.querySelectorAll('.category-checkbox:checked').length;
            const selectedSubcategories = document.querySelectorAll('.subcategory-checkbox:checked').length;
            
            if (selectedCategories + selectedSubcategories === 0) {
                e.preventDefault();
                alert('გთხოვთ აირჩიოთ მინიმუმ ერთი კატეგორია ან ქვეკატეგორია გაგრძელებამდე.');
            }
        });
        
        // Initialize state
        updateSelectedCount();
        continueButton.disabled = true;
        
        // Disable subcategories initially
        subcategoryCheckboxes.forEach(function(checkbox) {
            const parentId = checkbox.getAttribute('data-parent');
            const parentChecked = document.getElementById(`category-${parentId}`).checked;
            checkbox.disabled = !parentChecked;
        });
    });
</script>
@endpush
@endsection