@php
    $isEdit = $product->exists;
    $action = $isEdit ? route('admin.products.update', $product) : route('admin.products.store');
    $productColors    = $isEdit ? $product->colors->pluck('id')->all()    : [];
    $productMaterials = $isEdit ? $product->materials->pluck('id')->all() : [];
@endphp

<form action="{{ $action }}" method="POST" enctype="multipart/form-data">
    @csrf
    @if($isEdit) @method('PUT') @endif

    @if($errors->any())
        <div class="alert alert-danger"><ul class="mb-0">
            @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
        </ul></div>
    @endif

    <div class="card card-tabs">
        <div class="card-header p-0 pt-1">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#tab-basic">أساسي</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#tab-pricing">الأسعار</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#tab-stock">المخزون</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#tab-dimensions">الأبعاد والخامات</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#tab-images">الصور</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#tab-seo">SEO</a></li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">

                {{-- ===== Basic ===== --}}
                <div class="tab-pane fade show active" id="tab-basic">
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label>SKU</label>
                            <input type="text" name="sku" class="form-control"
                                   value="{{ old('sku', $product->sku ?? ($suggested_sku ?? '')) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>Barcode</label>
                            <input type="text" name="barcode" class="form-control"
                                   value="{{ old('barcode', $product->barcode) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>النوع</label>
                            <select name="type" class="form-control" required>
                                @foreach(['finished' => 'منتج جاهز', 'manufactured' => 'تصنيع', 'service' => 'خدمة'] as $k => $v)
                                    <option value="{{ $k }}" @selected(old('type', $product->type) === $k)>{{ $v }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label>{{ __('admin.status') }}</label>
                            <select name="status" class="form-control" required>
                                <option value="active"   @selected(old('status', $product->status) === 'active')>{{ __('admin.active') }}</option>
                                <option value="inactive" @selected(old('status', $product->status) === 'inactive')>{{ __('admin.inactive') }}</option>
                            </select>
                        </div>

                        <div class="form-group col-md-6">
                            <label>الاسم بالعربي *</label>
                            <input type="text" name="name_ar" class="form-control"
                                   value="{{ old('name_ar', $product->name_ar) }}" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label>الاسم بالإنجليزي</label>
                            <input type="text" name="name_en" class="form-control"
                                   value="{{ old('name_en', $product->name_en) }}">
                        </div>

                        <div class="form-group col-md-4">
                            <label>{{ __('admin.categories') }} *</label>
                            <select name="category_id" class="form-control" required>
                                <option value="">—</option>
                                @foreach($categories as $c)
                                    <option value="{{ $c->id }}" @selected(old('category_id', $product->category_id) == $c->id)>{{ $c->name_ar }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-4">
                            <label>{{ __('admin.brands') }}</label>
                            <select name="brand_id" class="form-control">
                                <option value="">—</option>
                                @foreach($brands as $b)
                                    <option value="{{ $b->id }}" @selected(old('brand_id', $product->brand_id) == $b->id)>{{ $b->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-4">
                            <label>{{ __('admin.units') }}</label>
                            <select name="unit_id" class="form-control">
                                <option value="">—</option>
                                @foreach($units as $u)
                                    <option value="{{ $u->id }}" @selected(old('unit_id', $product->unit_id) == $u->id)>{{ $u->name }} ({{ $u->symbol }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-12">
                            <label>وصف مختصر</label>
                            <textarea name="short_description" class="form-control" rows="2" maxlength="500">{{ old('short_description', $product->short_description) }}</textarea>
                        </div>

                        <div class="form-group col-md-12">
                            <label>الوصف الكامل</label>
                            <textarea name="description" class="form-control" rows="6">{{ old('description', $product->description) }}</textarea>
                            <small class="form-text text-muted">يمكن لاحقاً ربطه بـ TinyMCE / CKEditor.</small>
                        </div>

                        <div class="form-group col-md-3">
                            <div class="icheck-primary">
                                <input type="checkbox" name="is_featured" id="is_featured" value="1"
                                       @checked(old('is_featured', $product->is_featured))>
                                <label for="is_featured">منتج مميز ⭐</label>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ===== Pricing ===== --}}
                <div class="tab-pane fade" id="tab-pricing">
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label>سعر التكلفة *</label>
                            <input type="number" step="0.01" min="0" name="cost_price" class="form-control" required
                                   value="{{ old('cost_price', $product->cost_price ?? 0) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>سعر البيع *</label>
                            <input type="number" step="0.01" min="0" name="sale_price" class="form-control" required
                                   value="{{ old('sale_price', $product->sale_price ?? 0) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>أقل سعر بيع</label>
                            <input type="number" step="0.01" min="0" name="min_sale_price" class="form-control"
                                   value="{{ old('min_sale_price', $product->min_sale_price) }}">
                            <small class="form-text text-muted">لمنع الخسارة عند تطبيق الخصم</small>
                        </div>
                        <div class="form-group col-md-3">
                            <label>سعر الجملة</label>
                            <input type="number" step="0.01" min="0" name="wholesale_price" class="form-control"
                                   value="{{ old('wholesale_price', $product->wholesale_price) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>أقصى نسبة خصم %</label>
                            <input type="number" step="0.01" min="0" max="100" name="max_discount_pct" class="form-control"
                                   value="{{ old('max_discount_pct', $product->max_discount_pct ?? 0) }}">
                        </div>
                    </div>
                </div>

                {{-- ===== Stock ===== --}}
                <div class="tab-pane fade" id="tab-stock">
                    <div class="row">
                        <div class="form-group col-md-3">
                            <div class="icheck-primary">
                                <input type="checkbox" name="track_stock" id="track_stock" value="1"
                                       @checked(old('track_stock', $product->track_stock ?? true))>
                                <label for="track_stock">تتبع المخزون</label>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>الحد الأدنى</label>
                            <input type="number" step="0.01" min="0" name="min_stock" class="form-control"
                                   value="{{ old('min_stock', $product->min_stock ?? 0) }}">
                            <small class="form-text text-muted">تنبيه عند النزول تحت هذا الحد</small>
                        </div>
                        <div class="form-group col-md-3">
                            <label>الحد الأقصى</label>
                            <input type="number" step="0.01" min="0" name="max_stock" class="form-control"
                                   value="{{ old('max_stock', $product->max_stock) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>الضمان (شهور)</label>
                            <input type="number" min="0" name="warranty_months" class="form-control"
                                   value="{{ old('warranty_months', $product->warranty_months) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>مدة التوريد (أيام)</label>
                            <input type="number" min="0" name="lead_time_days" class="form-control"
                                   value="{{ old('lead_time_days', $product->lead_time_days) }}">
                        </div>
                    </div>
                </div>

                {{-- ===== Dimensions / Materials / Colors ===== --}}
                <div class="tab-pane fade" id="tab-dimensions">
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label>الطول (سم)</label>
                            <input type="number" step="0.01" min="0" name="length_cm" class="form-control"
                                   value="{{ old('length_cm', $product->length_cm) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>العرض (سم)</label>
                            <input type="number" step="0.01" min="0" name="width_cm" class="form-control"
                                   value="{{ old('width_cm', $product->width_cm) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>الارتفاع (سم)</label>
                            <input type="number" step="0.01" min="0" name="height_cm" class="form-control"
                                   value="{{ old('height_cm', $product->height_cm) }}">
                        </div>
                        <div class="form-group col-md-3">
                            <label>الوزن (كجم)</label>
                            <input type="number" step="0.01" min="0" name="weight_kg" class="form-control"
                                   value="{{ old('weight_kg', $product->weight_kg) }}">
                        </div>

                        <div class="form-group col-md-6">
                            <label>الخامات</label>
                            <select name="materials[]" multiple class="form-control select2-multi" data-placeholder="اختر خامة">
                                @foreach($materials as $m)
                                    <option value="{{ $m->id }}" @selected(in_array($m->id, old('materials', $productMaterials)))>{{ $m->name_ar ?: $m->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label>الألوان</label>
                            <select name="colors[]" multiple class="form-control select2-multi" data-placeholder="اختر لون">
                                @foreach($colors as $col)
                                    <option value="{{ $col->id }}" data-color="{{ $col->hex_code }}"
                                            @selected(in_array($col->id, old('colors', $productColors)))>{{ $col->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                {{-- ===== Images ===== --}}
                <div class="tab-pane fade" id="tab-images">
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label>الصورة الرئيسية</label>
                            <input type="file" name="main_image" accept="image/*" class="form-control-file">
                            @if($isEdit)
                                @php $main = $product->getFirstMedia('main'); @endphp
                                @if($main)
                                    <div class="mt-2"><img src="{{ $main->getUrl('thumb') }}" class="img-thumbnail" style="max-height:120px"></div>
                                @endif
                            @endif
                        </div>
                        <div class="form-group col-md-8">
                            <label>معرض الصور (يمكن رفع عدة صور)</label>
                            <input type="file" name="gallery[]" multiple accept="image/*" class="form-control-file">
                            @if($isEdit)
                                @php $gallery = $product->getMedia('gallery'); @endphp
                                @if($gallery->count())
                                    <div class="row mt-2">
                                        @foreach($gallery as $img)
                                            <div class="col-md-3 col-6 mb-2">
                                                <div class="position-relative">
                                                    <img src="{{ $img->getUrl('thumb') }}" class="img-thumbnail w-100">
                                                    <label class="position-absolute" style="top:4px;left:4px;background:#dc3545;color:#fff;padding:2px 6px;border-radius:4px;cursor:pointer">
                                                        <input type="checkbox" name="delete_media[]" value="{{ $img->id }}" style="margin-right:4px"> حذف
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>

                {{-- ===== SEO ===== --}}
                <div class="tab-pane fade" id="tab-seo">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label>الـ slug</label>
                            <input type="text" name="slug" class="form-control" value="{{ old('slug', $product->slug) }}">
                            <small class="form-text text-muted">يُولَّد تلقائياً من الاسم الإنجليزي/العربي إن تركته فارغاً.</small>
                        </div>
                        <div class="form-group col-md-6">
                            <label>SEO Title</label>
                            <input type="text" name="seo_title" class="form-control" value="{{ old('seo_title', $product->seo_title) }}">
                        </div>
                        <div class="form-group col-md-6">
                            <label>SEO Keywords</label>
                            <input type="text" name="seo_keywords" class="form-control" value="{{ old('seo_keywords', $product->seo_keywords) }}">
                        </div>
                        <div class="form-group col-md-12">
                            <label>SEO Description</label>
                            <textarea name="seo_description" class="form-control" rows="3" maxlength="500">{{ old('seo_description', $product->seo_description) }}</textarea>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="card-footer text-{{ in_array(app()->getLocale(), ['ar']) ? 'left' : 'right' }}">
            <a href="{{ route('admin.products.index') }}" class="btn btn-secondary">{{ __('admin.cancel') }}</a>
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {{ __('admin.save') }}</button>
        </div>
    </div>
</form>

@push('scripts')
<script>
$(function () {
    $('.select2-multi').select2({ placeholder: $(this).data('placeholder'), width: '100%', allowClear: true });
});
</script>
@endpush