@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>

                <div class="card-body">
                    <div class="selected-categories mb-4">
                        @if($categories->count() > 0)
                            <h5>{{ __('არჩეული კატეგორიები:') }}</h5>
                            <div class="list-group mb-3">
                                @foreach($categories as $category)
                                    <div class="list-group-item">
                                        <div class="fw-bold">{{ $category->name }}</div>
                                        @if($category->description)
                                            <small class="text-muted">{{ $category->description }}</small>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @endif
                        
                        @if($subcategories->count() > 0)
                            <h5 class="mt-3">{{ __('არჩეული ქვეკატეგორიები:') }}</h5>
                            <div class="list-group mb-3">
                                @foreach($subcategories as $subcategory)
                                    <div class="list-group-item">
                                        <div>{{ $subcategory->name }}</div>
                                        <small class="text-muted">
                                            {{ __('From category:') }} {{ $subcategory->category->name ?? 'Unknown' }}
                                        </small>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                        
                        <div class="text-end">
                            <a href="{{ route('chatbot.select_category', ['language' => $language]) }}" class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-edit"></i> {{ __('კატეგორიების შეცვლა') }}
                            </a>
                        </div>
                    </div>
                    
                    <form id="question-form">
                        @csrf
                        <input type="hidden" name="language" value="{{ $language }}">
                        
                        @foreach($categories as $category)
                            <input type="hidden" name="categories[]" value="{{ $category->id }}">
                        @endforeach
                        
                        @foreach($subcategories as $subcategory)
                            <input type="hidden" name="subcategories[]" value="{{ $subcategory->id }}">
                        @endforeach
                        
                        <div class="form-group mb-3">
                            <label for="message">{{ __('თქვენი შეკითხვა:') }}</label>
                            <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
                            <small class="form-text text-muted">
                                {{ __('თქვენი შეკითხვა გაანალიზდება არჩეული კატეგორიებისა და ქვეკატეგორიების კონტექსტში.') }}
                            </small>
                        </div>
                        
                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-primary" id="submit-question">
                                <i class="fas fa-paper-plane"></i> {{ __('შეკითხვის გაგზავნა') }}
                            </button>
                        </div>
                    </form>
                    
                    <div id="response-container" class="mt-4" style="display: none;">
                        <div class="card">
                            <div class="card-header bg-primary text-white">
                                {{ __('პასუხი') }}
                            </div>
                            <div class="card-body">
                                <div id="response-message"></div>
                                
                                <div class="text-muted mt-3 small">
                                    <div id="analysis-source"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="loading-indicator" class="text-center my-4" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{{ __('იტვირთება...') }}</span>
                        </div>
                        <p class="mt-2">{{ __('თქვენი შეკითხვა მუშავდება...') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('question-form');
        const submitButton = document.getElementById('submit-question');
        const responseContainer = document.getElementById('response-container');
        const responseMessage = document.getElementById('response-message');
        const analysisSource = document.getElementById('analysis-source');
        const loadingIndicator = document.getElementById('loading-indicator');
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show loading indicator
            loadingIndicator.style.display = 'block';
            responseContainer.style.display = 'none';
            submitButton.disabled = true;
            
            // Prepare form data
            const formData = new FormData(form);
            
            // Send request to server
            fetch('{{ route('chatbot.query') }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Hide loading indicator
                loadingIndicator.style.display = 'none';
                submitButton.disabled = false;
                
                if (data.success) {
                    // Show response
                    responseMessage.innerHTML = data.message.replace(/\n/g, '<br>');
                    
                    // Show source info
                    if (data.rule_matched) {
                        if (data.analyzed) {
                            analysisSource.innerHTML = '<strong>წყარო:</strong> ანალიზი არჩეული კატეგორიების მიხედვით';
                        } else {
                            analysisSource.innerHTML = `<strong>შესაბამისი წესი:</strong> ${data.rule_matched}`;
                            
                            if (data.rule_category) {
                                analysisSource.innerHTML += ` | <strong>კატეგორია:</strong> ${data.rule_category}`;
                            }
                            
                            if (data.rule_subcategory) {
                                analysisSource.innerHTML += ` | <strong>ქვეკატეგორია:</strong> ${data.rule_subcategory}`;
                            }
                        }
                    } else {
                        analysisSource.innerHTML = '<strong>შენიშვნა:</strong> თქვენს შეკითხვას შესაბამისი წესი არ მოიძებნა.';
                    }
                    
                    responseContainer.style.display = 'block';
                } else {
                    // Show error
                    responseMessage.innerHTML = data.message || 'დაფიქსირდა შეცდომა თქვენი მოთხოვნის დამუშავებისას.';
                    analysisSource.innerHTML = '';
                    responseContainer.style.display = 'block';
                }
            })
            .catch(error => {
                // Hide loading indicator and show error
                loadingIndicator.style.display = 'none';
                submitButton.disabled = false;
                responseMessage.innerHTML = 'დაფიქსირდა შეცდომა თქვენი მოთხოვნის დამუშავებისას.';
                analysisSource.innerHTML = '';
                responseContainer.style.display = 'block';
                console.error('Error:', error);
            });
        });
    });
</script>
@endpush
@endsection