@extends('admin.layouts.app')

@section('title', 'Add New Product')

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

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Add New Product') }}</h1>
        <p class="text-muted mb-0">{{ __('Create a new product with complete SEO optimization') }}</p>
    </div>
    <div>
        <a href="{{ route('admin.products.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>
            {{ __('Back to Products') }}
        </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: #6038b8;
            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.products.store') }}" method="POST" enctype="multipart/form-data"
                  id="productForm">
                @csrf

                {{-- Language Tabs for Multi-language Support --}}
                <div class="mb-4">
                    <ul class="nav nav-tabs" id="languageTabs" role="tablist">
                        @php
                            $locales = [
                                'ar' => ['native' => 'العربية'],
                                'en' => ['native' => 'English'],
//                                'fr' => ['native' => 'Français']
                            ];
                        @endphp
                        @foreach($locales 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($locales as $localeCode => $locale)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                 id="{{ $localeCode }}-content"
                                 role="tabpanel">

                                {{-- Basic Product 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">
                                                    {{ __('Product Name') }}
                                                    @if($localeCode === 'ar')
                                                        <span class="required-field">*</span>
                                                    @endif
                                                </label>
                                                <input type="text"
                                                       class="form-control @error('translations.'.$localeCode.'.name') is-invalid @enderror"
                                                       id="name_{{ $localeCode }}"
                                                       name="translations[{{ $localeCode }}][name]"
                                                       value="{{ old('translations.'.$localeCode.'.name') }}"
                                                       @if($localeCode === 'ar') required @endif
                                                       maxlength="255"
                                                       onkeyup="updateCharCount(this, 'name_{{ $localeCode }}_count', 255); generateSlug('{{ $localeCode }}')">
                                                @error('translations.'.$localeCode.'.name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                                <div class="char-counter" id="name_{{ $localeCode }}_count">0/255
                                                    characters
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ✅ SIMPLE: Replace your slug field with this enhanced version --}}
                                        <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. Leave empty to auto-generate."></i>
                                                </label>
                                                <input type="text"
                                                       class="form-control"
                                                       id="slug_{{ $localeCode }}"
                                                       name="translations[{{ $localeCode }}][slug]"
                                                       value="{{ old('translations.'.$localeCode.'.slug') }}"
                                                       placeholder="auto-generated from name">
                                                <small
                                                    class="text-muted">{{ __('Leave empty to auto-generate from product name') }}</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="short_description_{{ $localeCode }}" class="form-label">
                                            {{ __('Short Description') }}
                                            <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                               title="Brief product summary for search results"></i>
                                        </label>
                                        <textarea
                                            class="form-control @error('translations.'.$localeCode.'.short_description') is-invalid @enderror"
                                            id="short_description_{{ $localeCode }}"
                                            name="translations[{{ $localeCode }}][short_description]"
                                            rows="2"
                                            maxlength="160"
                                            onkeyup="updateCharCount(this, 'short_desc_{{ $localeCode }}_count', 160)"
                                            placeholder="Brief description that appears in search results and product listings">{{ old('translations.'.$localeCode.'.short_description') }}</textarea>
                                        @error('translations.'.$localeCode.'.short_description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="char-counter" id="short_desc_{{ $localeCode }}_count">0/160
                                            {{__("characters (recommended for search snippets)")}}
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="description_{{ $localeCode }}" class="form-label">
                                            {{ __('Full Description') }}
                                            @if($localeCode === 'ar')
                                                <span class="required-field">*</span>
                                            @endif
                                        </label>
                                        <textarea
                                            class="form-control @error('translations.'.$localeCode.'.description') is-invalid @enderror"
                                            id="description_{{ $localeCode }}"
                                            name="translations[{{ $localeCode }}][description]"
                                            rows="6"
                                            @if($localeCode === 'ar') required @endif
                                            placeholder="Detailed product description with features, benefits, and specifications">{{ old('translations.'.$localeCode.'.description') }}</textarea>
                                        @error('translations.'.$localeCode.'.description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </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]"
                                                       value="{{ old('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]"
                                                       value="{{ old('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">{{ old('translations.'.$localeCode.'.meta_description') }}</textarea>
                                        <div class="char-counter" id="meta_desc_{{ $localeCode }}_count">0/160
                                            {{__("characters (optimal: 150-160)")}}
                                        </div>
                                    </div>
                                </div>

                                {{-- Product Features & Specifications --}}
                                <div class="form-section">
                                    <h5>
                                        <i class="fas fa-list me-2 text-info"></i>
                                        {{ __('Features & Specifications') }} ({{ $locale['native'] }})
                                    </h5>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="features_{{ $localeCode }}" class="form-label">
                                                    {{ __('Key Features') }}
                                                </label>
                                                <textarea class="form-control"
                                                          id="features_{{ $localeCode }}"
                                                          name="translations[{{ $localeCode }}][features]"
                                                          rows="4"
                                                          placeholder="• Feature 1&#10;• Feature 2&#10;• Feature 3">{{ old('translations.'.$localeCode.'.features') }}</textarea>
                                                <small
                                                    class="text-muted">{{__("One feature per line, use bullet points")}}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="specifications_{{ $localeCode }}" class="form-label">
                                                    {{ __('Technical Specifications') }}
                                                </label>
                                                <textarea class="form-control"
                                                          id="specifications_{{ $localeCode }}"
                                                          name="translations[{{ $localeCode }}][specifications]"
                                                          rows="4"
                                                          placeholder="Dimensions: 10x5x2 cm&#10;Weight: 500g&#10;Material: Premium plastic">{{ old('translations.'.$localeCode.'.specifications') }}</textarea>
                                                <small
                                                    class="text-muted">{{__("Format: Property: Value (one per line)")}}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>



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

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sku" class="form-label">
                                    {{ __('SKU') }} <span class="required-field">*</span>
                                </label>
                                <input type="text"
                                       class="form-control @error('sku') is-invalid @enderror"
                                       id="sku"
                                       name="sku"
                                       value="{{ old('sku') }}"
                                       required
                                       placeholder="SKU-001">
                                @error('sku')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="brand" class="form-label">{{ __('Brand') }}</label>
                                <input type="text"
                                       class="form-control @error('brand') is-invalid @enderror"
                                       id="brand"
                                       name="brand"
                                       value="{{ old('brand') }}"
                                       placeholder="Brand name">
                                @error('brand')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="model" class="form-label">{{ __('Model') }}</label>
                                <input type="text"
                                       class="form-control @error('model') is-invalid @enderror"
                                       id="model"
                                       name="model"
                                       value="{{ old('model') }}"
                                       placeholder="Model number">
                                @error('model')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>






                {{-- Global Product Data --}}
                {{-- ✅ Enhanced Pricing Section with VAT UX --}}
                <div class="form-section">
                    <h5>
                        <i class="fas fa-dollar-sign me-2 text-success"></i>
                        {{ __('Pricing & VAT') }}
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="price" class="form-label">
                                    {{ __('Base Price (excluding 15% VAT)') }} <span class="required-field">*</span>
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Enter your base price - VAT will be calculated automatically"></i>
                                </label>
                                <div class="price-input-container">
                                    <span class="currency-symbol">SAR</span>
                                    <input type="number"
                                           class="form-control @error('price') is-invalid @enderror"
                                           id="price"
                                           name="price"
                                           value="{{ old('price') }}"
                                           step="0.01"
                                           min="0"
                                           required
                                           placeholder="100.00"
                                           onkeyup="calculateVATPreview()"
                                           onchange="calculateVATPreview()">
                                </div>
                                @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">{{ __('Price before adding 15% VAT') }}</small>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="sale_price" class="form-label">
                                    {{ __('Sale Price (excluding VAT)') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Optional discounted base price"></i>
                                </label>
                                <div class="price-input-container">
                                    <span class="currency-symbol">SAR</span>
                                    <input type="number"
                                           class="form-control @error('sale_price') is-invalid @enderror"
                                           id="sale_price"
                                           name="sale_price"
                                           value="{{ old('sale_price') }}"
                                           step="0.01"
                                           min="0"
                                           placeholder="80.00"
                                           onkeyup="calculateVATPreview()"
                                           onchange="calculateVATPreview()">
                                </div>
                                @error('sale_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">{{ __('Discounted price (optional)') }}</small>
                            </div>
                        </div>
                    </div>

                    {{-- ✅ Customer Price Display --}}
                    <div class="pricing-container" id="vatPreviewContainer" style="display: none;">
                        <h6 class="mb-3">
                            <i class="fas fa-shopping-cart me-2 text-primary"></i>
                            {{ __('Customer will see:') }}
                        </h6>

                        <div class="customer-price-display">
                            <div class="customer-price-amount" id="customerPrice">0.00 {{ __('SAR') }}</div>
                            <div class="vat-breakdown">
                                {{ __('Including') }} <span id="vatAmount">0.00</span> {{ __('SAR VAT (15%)') }}
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-6 text-center">
                                <strong>{{ __('Your Base Price') }}</strong><br>
                                <span id="basePrice" class="text-muted">0.00 {{ __('SAR') }}</span>
                            </div>
                            <div class="col-6 text-center">
                                <strong>{{ __('VAT Amount') }}</strong><br>
                                <span id="vatAmountDetail" class="text-muted">0.00 {{ __('SAR') }}</span>
                            </div>
                        </div>

                        <div id="discountInfo" style="display: none;" class="mt-2 text-center">
                            <span class="badge bg-danger" id="discountBadge">-0% {{ __('Discount') }}</span>
                        </div>
                    </div>

                    {{-- Cost Price and Profit Calculation --}}
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="cost_price" class="form-label">
                                    {{ __('Cost Price (internal)') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Your internal cost for profit calculations"></i>
                                </label>
                                <div class="price-input-container">
                                    <span class="currency-symbol">SAR</span>
                                    <input type="number"
                                           class="form-control @error('cost_price') is-invalid @enderror"
                                           id="cost_price"
                                           name="cost_price"
                                           value="{{ old('cost_price') }}"
                                           step="0.01"
                                           min="0"
                                           placeholder="60.00"
                                           onchange="calculateProfitMargin()">
                                </div>
                                @error('cost_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">{{ __('Tax Rate') }}</label>
                                <div class="input-group">
                                    <input type="hidden" name="tax_rate" value="15">
                                    <input type="text" class="form-control" value="15.00" readonly>
                                    <span class="input-group-text">%</span>
                                </div>
                                <small class="text-muted">{{ __('Fixed 15% VAT for Saudi Arabia') }}</small>
                            </div>
                        </div>
                    </div>

                    {{-- Profit Margin Display --}}
                    <div class="profit-margin-display" id="profitMarginDisplay">
                        <div class="row text-center">
                            <div class="col-4">
                                <strong>{{ __('Profit Margin') }}</strong><br>
                                <span id="profitPercentage" class="text-warning fw-bold">0%</span>
                            </div>
                            <div class="col-4">
                                <strong>{{ __('Profit Amount') }}</strong><br>
                                <span id="profitAmount" class="text-success fw-bold">0.00 {{ __('SAR') }}</span>
                            </div>
                            <div class="col-4">
                                <strong>{{ __('Markup') }}</strong><br>
                                <span id="markupPercentage" class="text-info fw-bold">0%</span>
                            </div>
                        </div>
                    </div>
                </div>

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

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="quantity" class="form-label">
                                    {{ __('Stock Quantity') }} <span class="required-field">*</span>
                                </label>
                                <input type="number"
                                       class="form-control @error('quantity') is-invalid @enderror"
                                       id="quantity"
                                       name="quantity"
                                       value="{{ old('quantity') }}"
                                       required
                                       min="0"
                                       placeholder="100">
                                @error('quantity')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="min_quantity" class="form-label">
                                    {{ __('Low Stock Alert') }}
                                </label>
                                <input type="number"
                                       class="form-control @error('min_quantity') is-invalid @enderror"
                                       id="min_quantity"
                                       name="min_quantity"
                                       value="{{ old('min_quantity', 5) }}"
                                       min="0"
                                       placeholder="5">
                                @error('min_quantity')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="weight" class="form-label">{{ __('Weight (kg)') }}</label>
                                <input type="number"
                                       class="form-control @error('weight') is-invalid @enderror"
                                       id="weight"
                                       name="weight"
                                       value="{{ old('weight') }}"
                                       step="0.01"
                                       placeholder="0.50">
                                @error('weight')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="categories" class="form-label">
                            {{ __('Categories') }} <span class="required-field">*</span>
                        </label>
                        <select class="form-control @error('categories') is-invalid @enderror"
                                id="categories"
                                name="categories[]"
                                multiple
                                required>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ in_array($category->id, old('categories', [])) ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('categories')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- Image Upload Section --}}
                <div class="form-section">
                    <h5>
                        <i class="fas fa-images me-2 text-danger"></i>
                        {{ __('Product Images & SEO') }}
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="images" class="form-label">
                                    {{ __('Product Images') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Upload multiple high-quality images"></i>
                                </label>
                                <input type="file"
                                       class="form-control @error('images') @error('images.*') is-invalid @enderror @enderror"
                                       id="images"
                                       name="images[]"
                                       accept="image/*"
                                       multiple
                                       onchange="previewImages(this)">
                                @error('images')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @error('images.*')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small
                                    class="text-muted">{{__("Recommended: 800x800px minimum, JPG/PNG format")}}</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="image_alt" class="form-label">
                                    {{ __('Image Alt Text') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Descriptive text for accessibility and SEO"></i>
                                </label>
                                <input type="text"
                                       class="form-control @error('image_alt') is-invalid @enderror"
                                       id="image_alt"
                                       name="image_alt"
                                       value="{{ old('image_alt') }}"
                                       maxlength="125"
                                       onkeyup="updateCharCount(this, 'image_alt_count', 125)"
                                       placeholder="Descriptive alt text for the main product image">
                                @error('image_alt')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="char-counter"
                                     id="image_alt_count">{{__("0/125 characters (optimal for SEO)")}}</div>
                            </div>
                        </div>
                    </div>

                    <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 images to see preview")}}</p>
                    </div>
                </div>


                {{-- ✅ ADD: New Sale Period Section (add before your "Visibility & Status" section) --}}
                <div class="form-section">
                    <h5>
                        <i class="fas fa-calendar-alt me-2 text-info"></i>
                        {{ __('Sale Period Management') }}
                    </h5>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="has_sale_period" name="has_sale_period">
                        <label class="form-check-label" for="has_sale_period">
                            <strong>{{ __('Set Sale Period') }}</strong>
                            <br><small
                                class="text-muted">{{ __('Automatically activate/deactivate sale price') }}</small>
                        </label>
                    </div>

                    <div id="sale_period_fields" style="display: none;">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sale_starts_at" class="form-label">{{ __('Sale Starts') }}</label>
                                    <input type="datetime-local"
                                           class="form-control @error('sale_starts_at') is-invalid @enderror"
                                           id="sale_starts_at"
                                           name="sale_starts_at"
                                           value="{{ old('sale_starts_at') }}">
                                    @error('sale_starts_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sale_ends_at" class="form-label">{{ __('Sale Ends') }}</label>
                                    <input type="datetime-local"
                                           class="form-control @error('sale_ends_at') is-invalid @enderror"
                                           id="sale_ends_at"
                                           name="sale_ends_at"
                                           value="{{ old('sale_ends_at') }}">
                                    @error('sale_ends_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                {{-- Status checkboxes --}}
                <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-3">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input"
                                       type="checkbox"
                                       value="1"
                                       id="is_active"
                                       name="is_active"
                                    {{ old('is_active', '1') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    <strong>{{ __('Active') }}</strong>
                                    <br><small class="text-muted">{{__("Product is visible on the website")}}</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input"
                                       type="checkbox"
                                       value="1"
                                       id="is_featured"
                                       name="is_featured"
                                    {{ old('is_featured') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_featured">
                                    <strong>{{ __('Featured Product') }}</strong>
                                    <br><small class="text-muted">{{__("Show in featured sections")}}</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input"
                                       type="checkbox"
                                       value="1"
                                       id="cod_eligible"
                                       name="cod_eligible"
                                    {{ old('cod_eligible', '1') ? 'checked' : '' }}>
                                <label class="form-check-label" for="cod_eligible">
                                    <strong>{{ __('COD Eligible') }}</strong>
                                    <br><small class="text-muted">{{ __('Available for Cash on Delivery') }}</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input"
                                       type="checkbox"
                                       value="1"
                                       id="track_inventory"
                                       name="track_inventory"
                                    {{ old('track_inventory', '1') ? 'checked' : '' }}>
                                <label class="form-check-label" for="track_inventory">
                                    <strong>{{ __('Track Inventory') }}</strong>
                                    <br><small class="text-muted">{{__("Monitor stock levels")}}</small>
                                </label>
                            </div>
                        </div>
                    </div>
                    {{-- ✅ ADD: Product Status row --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status" class="form-label">{{ __('Publication Status') }}</label>
                                <select class="form-select @error('status') is-invalid @enderror"
                                        id="status"
                                        name="status">
                                    <option value="draft" {{ old('status', 'draft') === 'draft' ? 'selected' : '' }}>
                                        {{ __('Draft') }}
                                    </option>
                                    <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>
                                        {{ __('Published') }}
                                    </option>
                                </select>
                                @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small
                                    class="text-muted">{{ __('Draft products are not visible to customers') }}</small>
                            </div>
                        </div>
                    </div>

                </div>

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

                    <div>
                        <button type="submit" name="action" value="save_draft" class="btn btn-outline-primary me-2">
                            <i class="fas fa-save me-2"></i>
                            {{ __('Save as Draft') }}
                        </button>
                        <button type="submit" name="action" value="publish" class="btn btn-primary-custom">
                            <i class="fas fa-rocket me-2"></i>
                            {{ __('Save & Publish') }}
                        </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);
            if (counter) {
                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');
                }
            }
        }

        // ✅ SIMPLE: Auto-generate slug from product name (like CategoryTranslation)
        function generateSlug(locale) {
            const nameField = document.getElementById('name_' + locale);
            const slugField = document.getElementById('slug_' + locale);

            if (nameField && slugField && nameField.value) {
                if (!slugField.value) {
                    const slug = nameField.value.toLowerCase()
                        .replace(/[^a-z0-9\u0600-\u06FF\s-]/g, '') // Keep Arabic characters
                        .replace(/\s+/g, '-')
                        .replace(/-+/g, '-')
                        .trim('-');

                    slugField.value = slug;
                }
            }
        }

        // MISSING FUNCTION: Auto-generate code from SKU
        function generateCodeFromSKU() {
            const skuField = document.getElementById('sku');
            const codeField = document.getElementById('code');

            if (skuField && codeField && codeField.value === '') {
                const code = 'PRD-' + skuField.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
                codeField.value = code;
            }
        }

        // Calculate SEO score
        function calculateSEOScore(locale) {
            const metaTitleField = document.getElementById('meta_title_' + locale);
            const metaDescField = document.getElementById('meta_description_' + locale);
            const metaKeywordsField = document.getElementById('meta_keywords_' + locale);
            const nameField = document.getElementById('name_' + locale);
            const imageAltField = document.getElementById('image_alt');

            if (!metaTitleField || !metaDescField || !nameField) return;

            const metaTitle = metaTitleField.value;
            const metaDescription = metaDescField.value;
            const metaKeywords = metaKeywordsField ? metaKeywordsField.value : '';
            const name = nameField.value;
            const imageAlt = imageAltField ? imageAltField.value : '';

            let score = 0;

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

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

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

            // Product name (15 points)
            if (name.length >= 10 && name.length <= 60) score += 15;
            else if (name.length > 0) score += 7;

            // Image alt text (10 points)
            if (imageAlt.length >= 10 && imageAlt.length <= 125) score += 10;
            else if (imageAlt.length > 0) score += 5;

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

            if (scoreElement) scoreElement.textContent = score;

            if (scoreContainer && statusElement) {
                // 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 previewImages(input) {
            const preview = document.getElementById('imagePreview');
            if (!preview) return;

            preview.innerHTML = '';

            if (input.files && input.files.length > 0) {
                Array.from(input.files).forEach((file, index) => {
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            const div = document.createElement('div');
                            div.className = 'd-inline-block me-2 mb-2';
                            div.innerHTML = `
                        <img src="${e.target.result}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 0.25rem; border: 1px solid #dee2e6;">
                        <small class="d-block text-center mt-1">Image ${index + 1}</small>
                    `;
                            preview.appendChild(div);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            } else {
                preview.innerHTML = `
            <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
            <p class="text-muted">Upload images to see preview</p>
        `;
            }
        }

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

            // Define supported locales
            const locales = ['ar', 'en', 'fr'];

            // Auto-fill meta fields for each locale
            locales.forEach(localeCode => {
                const nameField = document.getElementById('name_' + localeCode);
                const shortDescField = document.getElementById('short_description_' + localeCode);

                if (nameField) {
                    nameField.addEventListener('blur', function () {
                        const metaTitleField = document.getElementById('meta_title_' + localeCode);
                        if (metaTitleField && metaTitleField.value === '' && this.value !== '') {
                            metaTitleField.value = this.value.substring(0, 60);
                            updateCharCount(metaTitleField, 'meta_title_' + localeCode + '_count', 60);
                            calculateSEOScore(localeCode);
                        }
                    });
                }

                if (shortDescField) {
                    shortDescField.addEventListener('blur', function () {
                        const metaDescField = document.getElementById('meta_description_' + localeCode);
                        if (metaDescField && 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);
            });

            // Form validation before submit
            const productForm = document.getElementById('productForm');
            if (productForm) {
                productForm.addEventListener('submit', function (e) {
                    let isValid = true;
                    const errors = [];

                    // Check main required fields
                    const requiredFields = [
                        {id: 'sku', name: 'SKU'},
                        {id: 'price', name: 'Price'},
                        {id: 'quantity', name: 'Quantity'},
                        {id: 'categories', name: 'Categories'}
                    ];

                    requiredFields.forEach(field => {
                        const element = document.getElementById(field.id);
                        if (!element || !element.value.trim()) {
                            if (element) element.classList.add('is-invalid');
                            isValid = false;
                            errors.push(field.name);
                        } else {
                            if (element) element.classList.remove('is-invalid');
                        }
                    });

                    // Check categories specifically (multi-select)
                    const categoriesField = document.getElementById('categories');
                    if (categoriesField && categoriesField.selectedOptions.length === 0) {
                        categoriesField.classList.add('is-invalid');
                        isValid = false;
                        if (!errors.includes('Categories')) errors.push('Categories');
                    } else if (categoriesField) {
                        categoriesField.classList.remove('is-invalid');
                    }

                    // Check at least one translation has name and description
                    let hasValidTranslation = false;
                    locales.forEach(localeCode => {
                        const nameField = document.getElementById('name_' + localeCode);
                        const descField = document.getElementById('description_' + localeCode);
                        if (nameField && descField && nameField.value.trim() && descField.value.trim()) {
                            hasValidTranslation = true;
                        }
                    });

                    if (!hasValidTranslation) {
                        isValid = false;
                        errors.push('At least one language (name and description)');
                    }

                    if (!isValid) {
                        e.preventDefault();
                        alert('Please fill in all required fields:\n- ' + errors.join('\n- '));

                        // Scroll to first invalid field
                        const firstInvalid = document.querySelector('.is-invalid');
                        if (firstInvalid) {
                            firstInvalid.scrollIntoView({behavior: 'smooth', block: 'center'});
                            firstInvalid.focus();
                        }
                    }
                });
            }
        });


        // ✅ ADD: Calculate profit margin in real-time
        function calculateProfitMargin() {
            const price = parseFloat(document.querySelector('input[name="price"]').value) || 0;
            const salePrice = parseFloat(document.querySelector('input[name="sale_price"]').value);
            const costPrice = parseFloat(document.querySelector('input[name="cost_price"]').value) || 0;

            const currentPrice = salePrice || price;
            const profitDisplay = document.getElementById('profit_margin');

            // Calculate profit margin
            if (currentPrice > 0 && costPrice > 0) {
                const margin = ((currentPrice - costPrice) / currentPrice * 100).toFixed(2);
                document.getElementById('profit_percentage').textContent = margin;
                profitDisplay.style.display = 'block';
            } else {
                profitDisplay.style.display = 'none';
            }

            // Calculate discount percentage
            if (price > 0 && salePrice > 0 && salePrice < price) {
                const discount = ((price - salePrice) / price * 100).toFixed(2);
                document.getElementById('discount_percentage').textContent = discount;
            } else {
                document.getElementById('discount_percentage').textContent = '0';
            }
        }

        // ✅ ADD: Toggle sale period fields
        document.addEventListener('DOMContentLoaded', function () {
            const hasSalePeriod = document.getElementById('has_sale_period');
            const salePeriodFields = document.getElementById('sale_period_fields');

            if (hasSalePeriod) {
                hasSalePeriod.addEventListener('change', function () {
                    salePeriodFields.style.display = this.checked ? 'block' : 'none';
                });
            }

            // ✅ ADD: Toggle featured until field
            const isFeatured = document.getElementById('is_featured');
            const featuredUntilGroup = document.getElementById('featured_until_group');

            if (isFeatured) {
                isFeatured.addEventListener('change', function () {
                    featuredUntilGroup.style.display = this.checked ? 'block' : 'none';
                });
            }
        });
    </script>




    <script>
        // ✅ VAT Calculation Function
        function calculateVATPreview() {
            const priceInput = document.getElementById('price');
            const salePriceInput = document.getElementById('sale_price');
            const vatContainer = document.getElementById('vatPreviewContainer');

            const basePrice = parseFloat(priceInput.value) || 0;
            const salePrice = parseFloat(salePriceInput.value) || 0;

            // Determine which price to use (sale price if available, otherwise regular price)
            const currentPrice = salePrice > 0 ? salePrice : basePrice;

            if (currentPrice > 0) {
                // Calculate VAT (15%)
                const vatAmount = currentPrice * 0.15;
                const customerPrice = currentPrice + vatAmount;

                // Update display
                document.getElementById('customerPrice').textContent = customerPrice.toFixed(2) + ' {{ __("SAR") }}';
                document.getElementById('vatAmount').textContent = vatAmount.toFixed(2);
                document.getElementById('basePrice').textContent = currentPrice.toFixed(2) + ' {{ __("SAR") }}';
                document.getElementById('vatAmountDetail').textContent = vatAmount.toFixed(2) + ' {{ __("SAR") }}';

                // Show discount info if sale price is set
                const discountInfo = document.getElementById('discountInfo');
                const discountBadge = document.getElementById('discountBadge');

                if (salePrice > 0 && basePrice > salePrice) {
                    const discountPercent = ((basePrice - salePrice) / basePrice) * 100;
                    discountBadge.textContent = `-${discountPercent.toFixed(0)}% {{ __("Discount") }}`;
                    discountInfo.style.display = 'block';
                } else {
                    discountInfo.style.display = 'none';
                }

                vatContainer.style.display = 'block';
            } else {
                vatContainer.style.display = 'none';
            }

            // Update profit calculation if cost price is set
            calculateProfitMargin();
        }

        // ✅ Profit Margin Calculation
        function calculateProfitMargin() {
            const priceInput = document.getElementById('price');
            const salePriceInput = document.getElementById('sale_price');
            const costPriceInput = document.getElementById('cost_price');
            const profitDisplay = document.getElementById('profitMarginDisplay');

            const basePrice = parseFloat(priceInput.value) || 0;
            const salePrice = parseFloat(salePriceInput.value) || 0;
            const costPrice = parseFloat(costPriceInput.value) || 0;

            const currentPrice = salePrice > 0 ? salePrice : basePrice;

            if (currentPrice > 0 && costPrice > 0) {
                const profit = currentPrice - costPrice;
                const profitMargin = (profit / currentPrice) * 100;
                const markup = (profit / costPrice) * 100;

                document.getElementById('profitPercentage').textContent = profitMargin.toFixed(1) + '%';
                document.getElementById('profitAmount').textContent = profit.toFixed(2) + ' {{ __("SAR") }}';
                document.getElementById('markupPercentage').textContent = markup.toFixed(1) + '%';

                profitDisplay.style.display = 'block';
            } else {
                profitDisplay.style.display = 'none';
            }
        }

        // Character counting function
        function updateCharCount(input, counterId, maxLength) {
            const count = input.value.length;
            const counter = document.getElementById(counterId);
            if (counter) {
                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
        function generateSlug(locale) {
            const nameField = document.getElementById('name_' + locale);
            const slugField = document.getElementById('slug_' + locale);

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

                    slugField.value = slug;
                }
            }
        }

        // Image preview
        function previewImages(input) {
            const preview = document.getElementById('imagePreview');
            if (!preview) return;

            preview.innerHTML = '';

            if (input.files && input.files.length > 0) {
                Array.from(input.files).forEach((file, index) => {
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            const img = document.createElement('img');
                            img.src = e.target.result;
                            img.style.maxWidth = '150px';
                            img.style.maxHeight = '150px';
                            img.style.margin = '0.5rem';
                            img.style.borderRadius = '8px';
                            preview.appendChild(img);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            } else {
                preview.innerHTML = `
                    <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                    <p class="text-muted">{{ __("Upload images 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);
            });

            // Calculate initial VAT preview if values are set
            calculateVATPreview();
        });
    </script>
@endpush