@extends('admin.layouts.app')

@section('title', __('Add New Category'))

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('admin.categories.index') }}">{{ __('Categories') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ __('Add Category') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Add New Category') }}</h1>
        <p class="text-muted mb-0">{{ __('Create a new category with complete SEO optimization') }}</p>
    </div>
    <div>
        <a href="{{ route('admin.categories.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>
            {{ __('Back to Categories') }}
        </a>
    </div>
@endsection

@push('styles')
    <style>
        .nav-tabs .nav-link {
            border: 1px solid transparent;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            color: #6b7280;
            font-weight: 500;
        }

        .nav-tabs .nav-link.active {
            color: #4f46e5;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

        .tab-content {
            border: 1px solid #dee2e6;
            border-top: none;
            padding: 2rem;
            border-radius: 0 0 0.5rem 0.5rem;
            background: white;
        }

        .image-preview {
            max-width: 200px;
            max-height: 200px;
            border-radius: 0.5rem;
            border: 2px dashed #dee2e6;
            padding: 1rem;
            text-align: center;
        }

        .image-preview img {
            max-width: 100%;
            max-height: 150px;
            border-radius: 0.25rem;
        }

        .seo-score {
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .seo-score.good {
            background: #dcfce7;
            border: 1px solid #bbf7d0;
            color: #166534;
        }

        .seo-score.warning {
            background: #fef3c7;
            border: 1px solid #fde68a;
            color: #92400e;
        }

        .seo-score.error {
            background: #fee2e2;
            border: 1px solid #fecaca;
            color: #991b1b;
        }

        .char-counter {
            font-size: 0.875rem;
            color: #6b7280;
        }

        .char-counter.warning {
            color: #f59e0b;
        }

        .char-counter.error {
            color: #ef4444;
        }

        .form-section {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-section h5 {
            color: #374151;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .required-field {
            color: #ef4444;
        }
    </style>
@endpush

@section('content')
    <div class="admin-card">
        <div class="card-body-custom">
            <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data" id="categoryForm">
                @csrf

                {{-- Language Tabs for Multi-language Support --}}
                <div class="mb-4">
                    <ul class="nav nav-tabs" id="languageTabs" role="tablist">
                        @foreach(config('laravellocalization.supportedLocales') as $localeCode => $locale)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                                        id="{{ $localeCode }}-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#{{ $localeCode }}-content"
                                        type="button"
                                        role="tab">
                                    <i class="fas fa-flag me-2"></i>
                                    {{ $locale['native'] }}
                                </button>
                            </li>
                        @endforeach
                    </ul>

                    <div class="tab-content" id="languageTabContent">
                        @foreach(config('laravellocalization.supportedLocales') as $localeCode => $locale)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                 id="{{ $localeCode }}-content"
                                 role="tabpanel">

                                {{-- Basic Category Information --}}
                                <div class="form-section">
                                    <h5>
                                        <i class="fas fa-info-circle me-2 text-primary"></i>
                                        {{ __('Basic Information') }} ({{ $locale['native'] }})
                                    </h5>

                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="mb-3">
                                                <label for="name_{{ $localeCode }}" class="form-label">
                                                    {{ __('Category Name') }} <span class="required-field">*</span>
                                                </label>
                                                <input type="text"
                                                       class="form-control"
                                                       id="name_{{ $localeCode }}"
                                                       name="translations[{{ $localeCode }}][name]"
                                                       required
                                                       maxlength="255"
                                                       onkeyup="updateCharCount(this, 'name_{{ $localeCode }}_count', 255); generateSlug('{{ $localeCode }}')">
                                                <div class="char-counter" id="name_{{ $localeCode }}_count">0/255 characters</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="slug_{{ $localeCode }}" class="form-label">
                                                    {{ __('URL Slug') }}
                                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="SEO-friendly URL"></i>
                                                </label>
                                                <input type="text"
                                                       class="form-control"
                                                       id="slug_{{ $localeCode }}"
                                                       name="translations[{{ $localeCode }}][slug]"
                                                       placeholder="auto-generated">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="description_{{ $localeCode }}" class="form-label">
                                            {{ __('Description') }}
                                        </label>
                                        <textarea class="form-control"
                                                  id="description_{{ $localeCode }}"
                                                  name="translations[{{ $localeCode }}][description]"
                                                  rows="4"
                                                  placeholder="Category description for customers and search engines"></textarea>
                                    </div>
                                </div>

                                {{-- SEO Meta Information --}}
                                <div class="form-section">
                                    <h5>
                                        <i class="fas fa-search me-2 text-success"></i>
                                        {{ __('SEO Optimization') }} ({{ $locale['native'] }})
                                    </h5>

                                    {{-- SEO Score Indicator --}}
                                    <div class="seo-score warning" id="seo_score_{{ $localeCode }}">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-chart-line me-2"></i>
                                            <strong>SEO Score: <span id="score_{{ $localeCode }}">0</span>/100</strong>
                                            <div class="ms-auto">
                                                <small id="seo_status_{{ $localeCode }}">Needs improvement</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="meta_title_{{ $localeCode }}" class="form-label">
                                                    {{ __('Meta Title') }}
                                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="Title that appears in search engine results"></i>
                                                </label>
                                                <input type="text"
                                                       class="form-control"
                                                       id="meta_title_{{ $localeCode }}"
                                                       name="translations[{{ $localeCode }}][meta_title]"
                                                       maxlength="60"
                                                       onkeyup="updateCharCount(this, 'meta_title_{{ $localeCode }}_count', 60); calculateSEOScore('{{ $localeCode }}')"
                                                       placeholder="Compelling title for search engines (50-60 chars)">
                                                <div class="char-counter" id="meta_title_{{ $localeCode }}_count">0/60 characters (optimal: 50-60)</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="meta_keywords_{{ $localeCode }}" class="form-label">
                                                    {{ __('Focus Keywords') }}
                                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="Main keywords for SEO (comma-separated)"></i>
                                                </label>
                                                <input type="text"
                                                       class="form-control"
                                                       id="meta_keywords_{{ $localeCode }}"
                                                       name="translations[{{ $localeCode }}][meta_keywords]"
                                                       onkeyup="calculateSEOScore('{{ $localeCode }}')"
                                                       placeholder="keyword1, keyword2, keyword3">
                                                <small class="text-muted">Separate keywords with commas (3-5 keywords recommended)</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="meta_description_{{ $localeCode }}" class="form-label">
                                            {{ __('Meta Description') }}
                                            <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="Description that appears in search engine results"></i>
                                        </label>
                                        <textarea class="form-control"
                                                  id="meta_description_{{ $localeCode }}"
                                                  name="translations[{{ $localeCode }}][meta_description]"
                                                  rows="3"
                                                  maxlength="160"
                                                  onkeyup="updateCharCount(this, 'meta_desc_{{ $localeCode }}_count', 160); calculateSEOScore('{{ $localeCode }}')"
                                                  placeholder="Compelling description that encourages clicks from search results"></textarea>
                                        <div class="char-counter" id="meta_desc_{{ $localeCode }}_count">0/160 characters (optimal: 150-160)</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Global Category Data --}}
                <div class="form-section">
                    <h5>
                        <i class="fas fa-cog me-2 text-warning"></i>
                        {{ __('Category Settings') }}
                    </h5>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="code" class="form-label">
                                    {{ __('Category Code') }} <span class="required-field">*</span>
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="Unique category identifier"></i>
                                </label>
                                <input type="text"
                                       class="form-control"
                                       id="code"
                                       name="code"
                                       required
                                       placeholder="CAT-001">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="parent_id" class="form-label">
                                    {{ __('Parent Category') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="Select parent for subcategory"></i>
                                </label>
                                <select class="form-control" id="parent_id" name="parent_id">
                                    <option value="">{{ __('Root Category (No Parent)') }}</option>
                                    @foreach($parentCategories as $parent)
                                        <option value="{{ $parent->id }}">{{ $parent->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sort_order" class="form-label">
                                    {{ __('Sort Order') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="Lower numbers appear first"></i>
                                </label>
                                <input type="number"
                                       class="form-control"
                                       id="sort_order"
                                       name="sort_order"
                                       min="0"
                                       value="0"
                                       placeholder="0">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Image Upload --}}
                <div class="form-section">
                    <h5>
                        <i class="fas fa-image me-2 text-danger"></i>
                        {{ __('Category Image') }}
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="image" class="form-label">
                                    {{ __('Category Image') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="Upload category image for better visual appeal"></i>
                                </label>
                                <input type="file"
                                       class="form-control"
                                       id="image"
                                       name="image"
                                       accept="image/*"
                                       onchange="previewImage(this)">
                                <small class="text-muted">Recommended: 400x400px minimum, JPG/PNG format</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="image-preview" id="imagePreview">
                                <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                                <p class="text-muted">Upload image to see preview</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Status and Visibility --}}
                <div class="form-section">
                    <h5>
                        <i class="fas fa-eye me-2 text-secondary"></i>
                        {{ __('Visibility & Status') }}
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" value="1" id="is_active" name="is_active" checked>
                                <label class="form-check-label" for="is_active">
                                    <strong>{{ __('Active Category') }}</strong>
                                    <br><small class="text-muted">Category is visible on the website</small>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Form Actions --}}
                <div class="d-flex justify-content-between align-items-center">
                    <a href="{{ route('admin.categories.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times me-2"></i>
                        {{ __('Cancel') }}
                    </a>

                    <div>
                        <button type="submit" class="btn btn-primary-custom">
                            <i class="fas fa-check me-2"></i>
                            {{ __('Create Category') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Character counting function
        function updateCharCount(input, counterId, maxLength) {
            const count = input.value.length;
            const counter = document.getElementById(counterId);
            counter.textContent = count + '/' + maxLength + ' characters';

            if (count > maxLength * 0.9) {
                counter.classList.add('error');
                counter.classList.remove('warning');
            } else if (count > maxLength * 0.7) {
                counter.classList.add('warning');
                counter.classList.remove('error');
            } else {
                counter.classList.remove('warning', 'error');
            }
        }

        // Auto-generate slug from category name
        function generateSlug(locale) {
            const name = document.getElementById('name_' + locale).value;
            const slug = name.toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim('-');
            document.getElementById('slug_' + locale).value = slug;
        }

        // Calculate SEO score
        function calculateSEOScore(locale) {
            const metaTitle = document.getElementById('meta_title_' + locale).value;
            const metaDescription = document.getElementById('meta_description_' + locale).value;
            const metaKeywords = document.getElementById('meta_keywords_' + locale).value;
            const name = document.getElementById('name_' + locale).value;

            let score = 0;

            // Title optimization (35 points)
            if (metaTitle.length >= 30 && metaTitle.length <= 60) score += 35;
            else if (metaTitle.length > 0) score += 17;

            // Description optimization (30 points)
            if (metaDescription.length >= 120 && metaDescription.length <= 160) score += 30;
            else if (metaDescription.length > 0) score += 15;

            // Keywords (20 points)
            if (metaKeywords.length > 0) {
                const keywords = metaKeywords.split(',').map(k => k.trim()).filter(k => k.length > 0);
                if (keywords.length >= 3 && keywords.length <= 5) score += 20;
                else if (keywords.length > 0) score += 10;
            }

            // Category name (15 points)
            if (name.length >= 5 && name.length <= 50) score += 15;
            else if (name.length > 0) score += 7;

            // Update score display
            const scoreElement = document.getElementById('score_' + locale);
            const statusElement = document.getElementById('seo_status_' + locale);
            const scoreContainer = document.getElementById('seo_score_' + locale);

            scoreElement.textContent = score;

            // Update status and styling
            scoreContainer.classList.remove('good', 'warning', 'error');
            if (score >= 80) {
                scoreContainer.classList.add('good');
                statusElement.textContent = 'Excellent SEO optimization!';
            } else if (score >= 60) {
                scoreContainer.classList.add('warning');
                statusElement.textContent = 'Good, but can be improved';
            } else {
                scoreContainer.classList.add('error');
                statusElement.textContent = 'Needs SEO improvement';
            }
        }

        // Image preview function
        function previewImage(input) {
            const preview = document.getElementById('imagePreview');

            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.innerHTML = `
                        <img src="${e.target.result}" style="max-width: 100%; max-height: 150px; border-radius: 0.25rem;">
                        <small class="d-block text-center mt-2">Image Preview</small>
                    `;
                };
                reader.readAsDataURL(input.files[0]);
            } else {
                preview.innerHTML = `
                    <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                    <p class="text-muted">Upload image to see preview</p>
                `;
            }
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // Auto-fill meta title from category name if empty
            @foreach(config('laravellocalization.supportedLocales') as $localeCode => $locale)
            document.getElementById('name_{{ $localeCode }}').addEventListener('blur', function() {
                const metaTitleField = document.getElementById('meta_title_{{ $localeCode }}');
                if (metaTitleField.value === '' && this.value !== '') {
                    metaTitleField.value = this.value.substring(0, 60);
                    updateCharCount(metaTitleField, 'meta_title_{{ $localeCode }}_count', 60);
                    calculateSEOScore('{{ $localeCode }}');
                }
            });

            // Auto-fill meta description from description if empty
            document.getElementById('description_{{ $localeCode }}').addEventListener('blur', function() {
                const metaDescField = document.getElementById('meta_description_{{ $localeCode }}');
                if (metaDescField.value === '' && this.value !== '') {
                    metaDescField.value = this.value.substring(0, 160);
                    updateCharCount(metaDescField, 'meta_desc_{{ $localeCode }}_count', 160);
                    calculateSEOScore('{{ $localeCode }}');
                }
            });

            // Calculate initial SEO score
            calculateSEOScore('{{ $localeCode }}');
            @endforeach

            // Generate code from first translation name
            const firstNameField = document.querySelector('input[name*="[name]"]');
            if (firstNameField) {
                firstNameField.addEventListener('blur', function() {
                    const codeField = document.getElementById('code');
                    if (codeField.value === '' && this.value !== '') {
                        const code = 'CAT-' + this.value.toLowerCase()
                            .replace(/[^a-z0-9\s]/g, '')
                            .replace(/\s+/g, '-')
                            .substring(0, 15)
                            .toUpperCase();
                        codeField.value = code;
                    }
                });
            }

            // Form validation before submit
            document.getElementById('categoryForm').addEventListener('submit', function(e) {
                const requiredFields = document.querySelectorAll('input[required], textarea[required], select[required]');
                let isValid = true;

                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        field.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        field.classList.remove('is-invalid');
                    }
                });

                if (!isValid) {
                    e.preventDefault();
                    alert('Please fill in all required fields.');
                }
            });
        });
    </script>
@endpush