@extends('admin.layouts.app')

@section('title', 'Edit Category')

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

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Edit Category') }}</h1>
        <p class="text-muted mb-0">{{ __('Update category information and SEO settings') }}</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.categories.show', $category) }}" class="btn btn-outline-info">
            <i class="fas fa-eye me-2"></i>
            {{ __('View Category') }}
        </a>
        <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;
        }

        .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;
        }

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

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

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

        .image-preview {
            max-width: 200px;
            max-height: 200px;
            object-fit: cover;
            border-radius: 0.5rem;
            border: 2px solid #e5e7eb;
        }
    </style>
@endpush

@section('content')
    <div class="admin-card">
        <div class="card-body-custom">
            {{-- Category Status Alert --}}
            @if(!$category->is_active)
                <div class="alert alert-warning mb-4">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>{{ __('Category is currently inactive') }}</strong> -
                    {{ __('This category is not visible on the website') }}
                </div>
            @endif

            <form action="{{ route('admin.categories.update', $category) }}" method="POST" enctype="multipart/form-data" id="categoryForm">
                @csrf
                @method('PUT')

                {{-- Language Tabs for Multi-language Support --}}
                <div class="mb-4">
                    <ul class="nav nav-tabs" id="languageTabs" role="tablist">
                        @foreach(['ar' => 'العربية', 'en' => 'English', 'fr' => 'Français'] as $localeCode => $localeName)
                            <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>
                                    {{ $localeName }}
                                    @php
                                        $translation = $category->translations->where('locale', $localeCode)->first();
                                    @endphp
                                    @if($translation)
                                        <i class="fas fa-check-circle text-success ms-2" title="{{ __('Translation available') }}"></i>
                                    @else
                                        <i class="fas fa-exclamation-circle text-warning ms-2" title="{{ __('Translation missing') }}"></i>
                                    @endif
                                </button>
                            </li>
                        @endforeach
                    </ul>

                    <div class="tab-content" id="languageTabContent">
                        @foreach(['ar' => 'العربية', 'en' => 'English', 'fr' => 'Français'] as $localeCode => $localeName)
                            @php
                                $translation = $category->translations->where('locale', $localeCode)->first();
                            @endphp
                            <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') }} ({{ $localeName }})
                                    </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]"
                                                       value="{{ $translation->name ?? '' }}"
                                                       required
                                                       maxlength="255"
                                                       onkeyup="updateCharCount(this, 'name_{{ $localeCode }}_count', 255); generateSlug('{{ $localeCode }}')">
                                                <div class="char-counter" id="name_{{ $localeCode }}_count">{{ strlen($translation->name ?? '') }}/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]"
                                                       value="{{ $translation->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">{{ $translation->description ?? '' }}</textarea>
                                    </div>
                                </div>

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

                                    <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]"
                                                       value="{{ $translation->meta_title ?? '' }}"
                                                       maxlength="60"
                                                       onkeyup="updateCharCount(this, 'meta_title_{{ $localeCode }}_count', 60)"
                                                       placeholder="Compelling title for search engines (50-60 chars)">
                                                <div class="char-counter" id="meta_title_{{ $localeCode }}_count">{{ strlen($translation->meta_title ?? '') }}/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]"
                                                       value="{{ $translation->meta_keywords ?? '' }}"
                                                       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)"
                                                  placeholder="Compelling description that encourages clicks from search results">{{ $translation->meta_description ?? '' }}</textarea>
                                        <div class="char-counter" id="meta_desc_{{ $localeCode }}_count">{{ strlen($translation->meta_description ?? '') }}/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"
                                       value="{{ $category->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') }}
                                </label>
                                <select class="form-select" id="parent_id" name="parent_id">
                                    <option value="">{{ __('No Parent (Root Category)') }}</option>
                                    @foreach($parentCategories as $parentCategory)
                                        <option value="{{ $parentCategory->id }}"
                                            {{ $category->parent_id == $parentCategory->id ? 'selected' : '' }}>
                                            {{ $parentCategory->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sort_order" class="form-label">
                                    {{ __('Sort Order') }}
                                </label>
                                <input type="number"
                                       class="form-control"
                                       id="sort_order"
                                       name="sort_order"
                                       value="{{ $category->sort_order }}"
                                       min="0"
                                       placeholder="0">
                                <small class="text-muted">Lower numbers appear first</small>
                            </div>
                        </div>
                    </div>
                </div>

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

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="image" class="form-label">
                                    {{ __('Upload Image') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip" title="Upload category image"></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">
                            @if($category->image)
                                <div class="mb-3">
                                    <label class="form-label">{{ __('Current Image') }}</label>
                                    <div>
                                        <img src="{{ asset('storage/' . $category->image) }}"
                                             alt="{{ $category->name }}"
                                             class="image-preview"
                                             id="currentImage">
                                    </div>
                                </div>
                            @endif
                            <div id="imagePreview" style="display: none;">
                                <label class="form-label">{{ __('New Image Preview') }}</label>
                                <div>
                                    <img id="previewImg" class="image-preview" alt="Preview">
                                </div>
                            </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"
                                    {{ $category->is_active ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    <strong>{{ __('Active') }}</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>
                            {{ __('Update 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 slugField = document.getElementById('slug_' + locale);

            if (name && (!slugField.value || slugField.value === slugField.defaultValue)) {
                const slug = name.toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .trim('-');
                slugField.value = slug;
            }
        }

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

            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(input.files[0]);
            } else {
                preview.style.display = 'none';
            }
        }

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

            // Initialize character counters
            @foreach(['ar', 'en', 'fr'] as $localeCode)
            @php
                $translation = $category->translations->where('locale', $localeCode)->first();
            @endphp
            updateCharCount(document.getElementById('name_{{ $localeCode }}'), 'name_{{ $localeCode }}_count', 255);
            updateCharCount(document.getElementById('meta_title_{{ $localeCode }}'), 'meta_title_{{ $localeCode }}_count', 60);
            updateCharCount(document.getElementById('meta_description_{{ $localeCode }}'), 'meta_desc_{{ $localeCode }}_count', 160);
            @endforeach

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