@extends('admin.layouts.app')

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

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

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Edit Product') }}</h1>
        <p class="text-muted mb-0">{{ __('Update product information and SEO settings') }}</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.products.show', $product) }}" class="btn btn-outline-info">
            <i class="fas fa-eye me-2"></i>
            {{ __('View Product') }}
        </a>
        <a href="{{ route('admin.products.duplicate', $product) }}" class="btn btn-outline-secondary">
            <i class="fas fa-copy me-2"></i>
            {{ __('Duplicate') }}
        </a>
        <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 !important;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

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

        .image-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1rem;
        }

        .image-item {
            position: relative;
            border: 2px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 0.5rem;
            background: #f8f9fa;
        }

        .image-item.primary {
            border-color: #28a745;
        }

        .image-item img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 0.25rem;
        }

        .image-actions {
            position: absolute;
            top: 0.25rem;
            right: 0.25rem;
            display: flex;
            gap: 0.25rem;
        }

        .image-actions .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

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

        .current-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .category-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            background: #e0f2fe;
            color: #01579b;
            border-radius: 1rem;
            font-size: 0.875rem;
        }
    </style>
@endpush

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

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

                {{-- Language Tabs for Multi-language Support --}}
                <div class="mb-4">
                    <ul class="nav nav-tabs" id="languageTabs" role="tablist">
                        @foreach(config('laravellocalization.supportedLocales') as $localeCode => $locale)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                                        id="{{ $localeCode }}-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#{{ $localeCode }}-content"
                                        type="button"
                                        role="tab">
                                    <i class="fas fa-flag me-2"></i>
                                    {{ $locale['native'] }}
                                    @php
                                        $translation = $product->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(config('laravellocalization.supportedLocales') as $localeCode => $locale)
                            @php
                                $translation = $product->translations->where('locale', $localeCode)->first();
                            @endphp
                            <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') }} <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="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"
                                                  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">{{ $translation->short_description ?? '' }}</textarea>
                                        <div class="char-counter"
                                             id="short_desc_{{ $localeCode }}_count">{{ strlen($translation->short_description ?? '') }}
                                            /160 characters (recommended for search snippets)
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="description_{{ $localeCode }}" class="form-label">
                                            {{ __('Full Description') }}
                                        </label>
                                        <textarea class="form-control"
                                                  id="description_{{ $localeCode }}"
                                                  name="translations[{{ $localeCode }}][description]"
                                                  rows="6"
                                                  placeholder="Detailed product description with features, benefits, and specifications">{{ $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') }} ({{ $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="{{ $translation->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">{{ 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 ?? '' }}"
                                                       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">{{ $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>

                                {{-- 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">{{ $translation->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">{{ $translation->specifications ?? '' }}</textarea>
                                                <small class="text-muted">Format: Property: Value (one per line)</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Global Product Data --}}
                <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-3">
                            <div class="mb-3">
                                <label for="sku" class="form-label">
                                    {{ __('SKU') }} <span class="required-field">*</span>
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Unique product identifier"></i>
                                </label>
                                <input type="text"
                                       class="form-control"
                                       id="sku"
                                       name="sku"
                                       value="{{ $product->sku }}"
                                       required
                                       placeholder="PRD-001">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="brand" class="form-label">{{ __('Brand') }}</label>
                                <input type="text"
                                       class="form-control"
                                       id="brand"
                                       name="brand"
                                       value="{{ $product->brand }}"
                                       placeholder="Brand name">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="model" class="form-label">{{ __('Model') }}</label>
                                <input type="text"
                                       class="form-control"
                                       id="model"
                                       name="model"
                                       value="{{ $product->model }}"
                                       placeholder="Model number">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="weight" class="form-label">
                                    {{ __('Weight') }} (kg)
                                </label>
                                <input type="number"
                                       class="form-control"
                                       id="weight"
                                       name="weight"
                                       value="{{ $product->weight }}"
                                       step="0.01"
                                       placeholder="0.50">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="price" class="form-label">
                                    {{ __('Price') }} <span class="required-field">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number"
                                           class="form-control"
                                           id="price"
                                           name="price"
                                           value="{{ $product->price }}"
                                           step="0.01"
                                           required
                                           placeholder="99.99"
                                           onchange="calculateProfitMargin()"> {{-- ✅ ADD THIS --}}

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sale_price" class="form-label">
                                    {{ __('Sale Price') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Optional discounted price"></i>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number"
                                           class="form-control"
                                           id="sale_price"
                                           name="sale_price"
                                           value="{{ $product->sale_price }}"
                                           step="0.01"
                                           placeholder="79.99"
                                           onchange="calculateProfitMargin()"> {{-- ✅ ADD THIS --}}

                                </div>
                            </div>
                        </div>
                        {{-- ✅ ADD: New pricing fields after your existing sale_price field --}}
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="cost_price" class="form-label">
                                    {{ __('Cost Price') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Internal cost for profit calculation"></i>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number"
                                           class="form-control @error('cost_price') is-invalid @enderror"
                                           id="cost_price"
                                           name="cost_price"
                                           value="{{ old('cost_price', $product->cost_price) }}"
                                           step="0.01"
                                           placeholder="50.00"
                                           onchange="calculateProfitMargin()">
                                </div>
                                @error('cost_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">{{ __('For internal profit calculation') }}</small>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="tax_rate" class="form-label">
                                    {{ __('Tax Rate') }} (%)
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Product-specific tax rate"></i>
                                </label>
                                <div class="input-group">
                                    <input type="number"
                                           class="form-control @error('tax_rate') is-invalid @enderror"
                                           id="tax_rate"
                                           name="tax_rate"
                                           value="{{ old('tax_rate', $product->tax_rate) }}"
                                           step="0.01"
                                           min="0"
                                           max="100"
                                           placeholder="15.00">
                                    <span class="input-group-text">%</span>
                                </div>
                                @error('tax_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div> {{-- Close the row --}}

                    {{-- ✅ ADD: Profit Margin Display --}}
                    <div class="alert alert-info" id="profit_margin" style="display: none;">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <strong>{{ __('Profit Margin') }}:</strong>
                                <span id="profit_percentage" class="text-success fw-bold">0</span>%
                            </div>
                            <div class="col-md-6">
                                <strong>{{ __('Discount') }}:</strong>
                                <span id="discount_percentage" class="text-warning fw-bold">0</span>%
                            </div>
                        </div>
                        {{-- ✅ Show current profit if data exists --}}
                        @if($product->cost_price && $product->price)
                            <div class="col-12 mt-2">
                                <small class="text-muted">
                                    {{ __('Current Profit') }}:
                                    ${{ number_format(($product->current_price - $product->cost_price), 2) }}
                                </small>
                            </div>
                        @endif
                    </div>

                    <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"
                                   id="quantity"
                                   name="quantity"
                                   value="{{ $product->quantity }}"
                                   required
                                   min="0"
                                   placeholder="100">
                        </div>
                    </div>
                </div>
                {{-- ✅ ADD: Sale Period Management Section (add as new form-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"
                            {{ ($product->sale_starts_at || $product->sale_ends_at) ? 'checked' : '' }}>
                        <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: {{ ($product->sale_starts_at || $product->sale_ends_at) ? 'block' : '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', $product->sale_starts_at ? $product->sale_starts_at->format('Y-m-d\TH:i') : '') }}">
                                    @error('sale_starts_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    @if($product->sale_starts_at)
                                        <small class="text-muted">
                                            {{ __('Current') }}: {{ $product->sale_starts_at->format('M d, Y H:i') }}
                                        </small>
                                    @endif
                                </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', $product->sale_ends_at ? $product->sale_ends_at->format('Y-m-d\TH:i') : '') }}">
                                    @error('sale_ends_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    @if($product->sale_ends_at)
                                        <small class="text-muted">
                                            {{ __('Current') }}: {{ $product->sale_ends_at->format('M d, Y H:i') }}
                                        </small>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- ✅ Sale status indicator --}}
                        @if($product->sale_price)
                            <div class="alert alert-{{ $product->isSaleActive() ? 'success' : 'warning' }} mt-3">
                                <strong>{{ __('Sale Status') }}:</strong>
                                @if($product->isSaleActive())
                                    <span class="text-success">{{ __('Currently Active') }}</span>
                                    @if($product->sale_ends_at)
                                        - {{ __('Ends') }}: {{ $product->sale_ends_at->format('M d, Y H:i') }}
                                    @endif
                                @else
                                    <span class="text-warning">{{ __('Not Active') }}</span>
                                    @if($product->sale_starts_at && $product->sale_starts_at->gt(now()))
                                        - {{ __('Starts') }}: {{ $product->sale_starts_at->format('M d, Y H:i') }}
                                    @elseif($product->sale_ends_at && $product->sale_ends_at->lt(now()))
                                        - {{ __('Ended') }}: {{ $product->sale_ends_at->format('M d, Y H:i') }}
                                    @endif
                                @endif
                            </div>
                        @endif
                    </div>
                </div>

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

                    {{-- Current Categories --}}
                    @if($product->categories->count() > 0)
                        <div class="current-categories">
                            <strong>{{ __('Current Categories') }}:</strong>
                            @foreach($product->categories as $category)
                                <span class="category-badge">
                                    {{ $category->name }}
                                </span>
                            @endforeach
                        </div>
                    @endif

                    <div class="mb-3">
                        <label class="form-label">{{ __('Select Categories') }} <span
                                class="required-field">*</span></label>
                        <div class="row">
                            @foreach($categories as $category)
                                <div class="col-md-4 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input"
                                               type="checkbox"
                                               value="{{ $category->id }}"
                                               id="category_{{ $category->id }}"
                                               name="categories[]"
                                            {{ $product->categories->contains($category->id) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="category_{{ $category->id }}">
                                            {{ $category->name }}
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Current Images --}}
                @if($product->images->count() > 0)
                    <div class="form-section">
                        <h5>
                            <i class="fas fa-images me-2 text-success"></i>
                            {{ __('Current Images') }}
                        </h5>

                        <div class="image-preview">
                            @foreach($product->images as $image)
                                <div class="image-item {{ $image->is_primary ? 'primary' : '' }}"
                                     data-image-id="{{ $image->id }}">
                                    <img src="{{ asset('storage/' . $image->image_path) }}"
                                         alt="{{ $image->alt_text }}">

                                    <div class="image-actions">
                                        @if(!$image->is_primary)
                                            <button type="button"
                                                    class="btn btn-sm btn-success"
                                                    onclick="setPrimaryImage({{ $image->id }})"
                                                    title="{{ __('Set as Primary') }}">
                                                <i class="fas fa-star"></i>
                                            </button>
                                        @else
                                            <span class="btn btn-sm btn-success disabled">
                                                <i class="fas fa-star"></i>
                                            </span>
                                        @endif

                                        <button type="button"
                                                class="btn btn-sm btn-danger"
                                                onclick="deleteImage({{ $image->id }})"
                                                title="{{ __('Delete Image') }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>

                                    @if($image->is_primary)
                                        <div class="text-center mt-2">
                                            <small class="badge bg-success">{{ __('Primary Image') }}</small>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>

                        <input type="hidden" id="delete_images" name="delete_images" value="">
                    </div>
                @endif

                {{-- Add New Images --}}
                <div class="form-section">
                    <h5>
                        <i class="fas fa-cloud-upload-alt me-2 text-info"></i>
                        {{ __('Add New Images') }}
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="new_images" class="form-label">
                                    {{ __('Upload New Images') }}
                                    <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                       title="Upload additional high-quality images"></i>
                                </label>
                                <input type="file"
                                       class="form-control"
                                       id="new_images"
                                       name="new_images[]"
                                       accept="image/*"
                                       multiple
                                       onchange="previewNewImages(this)">
                                <small class="text-muted">Recommended: 800x800px minimum, JPG/PNG format</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div id="new-images-preview" style="display: none;">
                                <label class="form-label">{{ __('New Images Preview') }}</label>
                                <div id="new-images-container"></div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ✅ ENHANCE: Status section (find your existing status checkboxes and enhance) --}}
                <div class="form-section">
                    <h5>
                        <i class="fas fa-eye me-2 text-secondary"></i>
                        {{ __('Visibility & Status') }}
                    </h5>

                    <div class="row">
                        {{-- ✅ ADD: Product Status --}}

                        {{-- ✅ EXISTING: Active status (enhance) --}}
                        <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', $product->is_active) ? '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>

                        {{-- ✅ EXISTING: Featured status (enhance) --}}
                        <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', $product->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>

                        {{-- ✅ ADD: COD Eligible --}}

                        <div class="col-md-3">
                            <div class="form-check form-switch mb-3">
                                <input type="hidden" name="cod_eligible" value="0">
                                <input class="form-check-input"
                                       type="checkbox"
                                       value="1"
                                       id="cod_eligible"
                                       name="cod_eligible"
                                    {{ old('cod_eligible', $product->cod_eligible) ? '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>
                        {{-- ✅ EXISTING: Track inventory (keep as-is) --}}
                        <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', $product->track_inventory) ? '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>
                    <div class="col-md-12">
                        <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', $product->status) === 'draft' ? 'selected' : '' }}>
                                    {{ __('Draft') }}
                                </option>
                                <option
                                    value="published" {{ old('status', $product->status) === 'published' ? 'selected' : '' }}>
                                    {{ __('Published') }}
                                </option>
                                <option
                                    value="archived" {{ old('status', $product->status) === 'archived' ? 'selected' : '' }}>
                                    {{ __('Archived') }}
                                </option>
                            </select>
                            @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                {{ __('Current') }}:
                                <span
                                    class="badge bg-{{ $product->status === 'published' ? 'success' : ($product->status === 'draft' ? 'warning' : 'secondary') }}">
                        {{ ucfirst($product->status) }}
                    </span>
                            </small>
                        </div>
                    </div>

                    {{-- ✅ ADD: Featured Until Field --}}
                    <div class="mb-3" id="featured_until_group"
                         style="display: {{ $product->is_featured ? 'block' : 'none' }};">
                        <label for="featured_until" class="form-label">
                            {{ __('Featured Until') }}
                            <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                               title="Automatically unfeature after this date"></i>
                        </label>
                        <input type="datetime-local"
                               class="form-control @error('featured_until') is-invalid @enderror"
                               id="featured_until"
                               name="featured_until"
                               value="{{ old('featured_until', $product->featured_until ? $product->featured_until->format('Y-m-d\TH:i') : '') }}">
                        @error('featured_until')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">
                            {{ __('Leave empty to keep featured indefinitely') }}
                            @if($product->featured_until)
                                <br>{{ __('Current') }}: {{ $product->featured_until->format('M d, Y H:i') }}
                                @if($product->featured_until->lt(now()))
                                    <span class="text-warning">({{ __('Expired') }})</span>
                                @endif
                            @endif
                        </small>
                    </div>

                    {{-- ✅ ADD: Analytics Display --}}
                    @if($product->views_count > 0)
                        <div class="alert alert-info">
                            <div class="row">
                                <div class="col-md-6">
                                    <strong>{{ __('Views') }}:</strong> {{ number_format($product->views_count) }}
                                </div>
                                <div class="col-md-6">
                                    <strong>{{ __('Created') }}:</strong> {{ $product->created_at->diffForHumans() }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                {{-- ✅ ENHANCED: 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-arrow-left me-2"></i>
                        {{ __('Back to Products') }}
                    </a>

                    <div>
                        @if($product->status !== 'published')
                            <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>
                        @endif

                        <button type="submit" name="action" value="publish" class="btn btn-primary">
                            <i class="fas fa-{{ $product->status === 'published' ? 'save' : 'rocket' }} me-2"></i>
                            {{ $product->status === 'published' ? __('Update Product') : __('Save & Publish') }}
                        </button>

                        @if($product->status === 'published')
                            <button type="submit" name="action" value="archive" class="btn btn-outline-warning ms-2">
                                <i class="fas fa-archive me-2"></i>
                                {{ __('Archive') }}
                            </button>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let imagesToDelete = [];

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

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

            let score = 0;

            // Title optimization (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;

            // Existing images (10 points)
            const hasImages = {{ $product->images->count() > 0 ? 'true' : 'false' }};
            if (hasImages) score += 10;

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

            scoreElement.textContent = score;

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

        // Preview new images
        function previewNewImages(input) {
            const preview = document.getElementById('new-images-preview');
            const container = document.getElementById('new-images-container');

            container.innerHTML = '';

            if (input.files && input.files.length > 0) {
                preview.style.display = 'block';

                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: 80px; height: 80px; object-fit: cover; border-radius: 0.25rem; border: 1px solid #dee2e6;">
                                <small class="d-block text-center mt-1">New ${index + 1}</small>
                            `;
                            container.appendChild(div);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            } else {
                preview.style.display = 'none';
            }
        }

        // Set primary image
        function setPrimaryImage(imageId) {
            fetch(`{{ route('admin.products.set-primary-image', $product->id) }}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({image_id: imageId})
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Remove primary status from all images
                        document.querySelectorAll('.image-item').forEach(item => {
                            item.classList.remove('primary');
                            const badge = item.querySelector('.badge');
                            if (badge) badge.remove();

                            const starBtn = item.querySelector('.btn-success');
                            if (starBtn && starBtn.classList.contains('disabled')) {
                                starBtn.classList.remove('disabled');
                                starBtn.onclick = () => setPrimaryImage(item.dataset.imageId);
                            }
                        });

                        // Set new primary image
                        const newPrimaryItem = document.querySelector(`[data-image-id="${imageId}"]`);
                        newPrimaryItem.classList.add('primary');

                        const starBtn = newPrimaryItem.querySelector('.btn-success');
                        starBtn.classList.add('disabled');
                        starBtn.onclick = null;

                        // Add primary badge
                        const badge = document.createElement('div');
                        badge.className = 'text-center mt-2';
                        badge.innerHTML = '<small class="badge bg-success">{{ __("Primary Image") }}</small>';
                        newPrimaryItem.appendChild(badge);

                        showNotification(data.message, 'success');
                    } else {
                        showNotification('{{ __("Error updating primary image") }}', 'error');
                    }
                })
                .catch(error => {
                    showNotification('{{ __("Error updating primary image") }}', 'error');
                });
        }

        // Delete image
        function deleteImage(imageId) {
            if (confirm('{{ __("Are you sure you want to delete this image?") }}')) {
                imagesToDelete.push(imageId);
                document.getElementById('delete_images').value = imagesToDelete.join(',');

                // Hide the image item
                const imageItem = document.querySelector(`[data-image-id="${imageId}"]`);
                imageItem.style.opacity = '0.5';
                imageItem.style.pointerEvents = 'none';

                // Add a "restore" option
                const restoreBtn = document.createElement('button');
                restoreBtn.type = 'button';
                restoreBtn.className = 'btn btn-sm btn-warning mt-2';
                restoreBtn.innerHTML = '<i class="fas fa-undo"></i> {{ __("Restore") }}';
                restoreBtn.onclick = () => restoreImage(imageId);
                imageItem.appendChild(restoreBtn);

                showNotification('{{ __("Image marked for deletion") }}', 'warning');
            }
        }

        // Restore image
        function restoreImage(imageId) {
            imagesToDelete = imagesToDelete.filter(id => id !== imageId);
            document.getElementById('delete_images').value = imagesToDelete.join(',');

            const imageItem = document.querySelector(`[data-image-id="${imageId}"]`);
            imageItem.style.opacity = '1';
            imageItem.style.pointerEvents = 'auto';

            // Remove restore button
            const restoreBtn = imageItem.querySelector('.btn-warning');
            if (restoreBtn) restoreBtn.remove();

            showNotification('{{ __("Image restored") }}', 'success');
        }

        // Initialize tooltips and calculate initial SEO scores
        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);
            });

            // Calculate initial SEO scores
            @foreach(config('laravellocalization.supportedLocales') as $localeCode => $locale)
            calculateSEOScore('{{ $localeCode }}');

            // Initialize character counters
            @php
                $translation = $product->translations->where('locale', $localeCode)->first();
            @endphp
            updateCharCount(document.getElementById('name_{{ $localeCode }}'), 'name_{{ $localeCode }}_count', 255);
            updateCharCount(document.getElementById('short_description_{{ $localeCode }}'), 'short_desc_{{ $localeCode }}_count', 160);
            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('productForm').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');
                    }
                });

                // Check if at least one category is selected
                const categoryCheckboxes = document.querySelectorAll('input[name="categories[]"]:checked');
                if (categoryCheckboxes.length === 0) {
                    alert('{{ __("Please select at least one category") }}');
                    isValid = false;
                }

                if (!isValid) {
                    e.preventDefault();
                    alert('{{ __("Please fill in all required fields") }}');
                }
            });
        });

        // Show notification function
        function showNotification(message, type) {
            const alertClass = type === 'success' ? 'alert-success' :
                type === 'warning' ? 'alert-warning' : 'alert-danger';
            const icon = type === 'success' ? 'fa-check-circle' :
                type === 'warning' ? 'fa-exclamation-triangle' : 'fa-exclamation-circle';

            const alert = document.createElement('div');
            alert.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
            alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            alert.innerHTML = `
                <i class="fas ${icon} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;

            document.body.appendChild(alert);

            setTimeout(() => {
                if (alert.parentNode) {
                    alert.remove();
                }
            }, 5000);
        }
    </script>
    {{-- ✅ ADD: Enhanced JavaScript --}}
    <script>
        // ✅ Calculate profit margin (same as create form)
        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';
            }
        }

        // ✅ Initialize on page load
        document.addEventListener('DOMContentLoaded', function () {
            // Calculate initial profit margin
            calculateProfitMargin();

            // Toggle sale period fields
            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';
                });
            }

            // 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>
    {{--    @endpushdraft" 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="--}}