@extends('admin.master')

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

@php
    $selectedCategoryIds = old('categories', $product->categories->pluck('id')->all());

    $selectedOfferIds = old('offers', $product->offers->pluck('id')->all());

    $selectedFlagIds = old('flags', $product->flags->pluck('id')->all());

    $imagesBySlot = $product->images->keyBy('slot_number');

    $initialVariants = old(
        'variants',
        $product->variants
            ->map(function ($variant) {
                return [
                    'id' => $variant->id,
                    'name' => $variant->name,
                    'sku' => $variant->sku,
                    'regular_price' => $variant->regular_price,
                    'discount_type' => $variant->discount_type,
                    'discount_value' => $variant->discount_value,
                    'sale_price' => $variant->sale_price,
                    'stock_quantity' => $variant->stock_quantity,
                    'stock_alert_quantity' => $variant->stock_alert_quantity,
                    'weight_unit_id' => $variant->weight_unit_id,
                    'weight_value' => $variant->weight_value,
                    'is_default' => $variant->is_default,
                    'image' => $variant->image,
                    'attribute_value_ids' => $variant->attributeValues->pluck('id')->all(),
                ];
            })
            ->values()
            ->all(),
    );
@endphp

@push('styles')
    <style>
        .edit-product-toolbar {
            position: sticky;
            z-index: 90;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            padding: 16px 18px;
            border: 1px solid #dce3ec;
            border-radius: 11px;
            background: rgba(255, 255, 255, .96);
        }

        .edit-toolbar-actions {
            display: flex;
            gap: 9px;
        }

        .edit-card {
            margin-bottom: 15px;
            overflow: hidden;
            border: 1px solid #dce3ec;
            border-radius: 11px;
            background: #fff;
        }

        .edit-card-heading {
            padding: 14px 18px;
            border-bottom: 1px solid #dce3ec;
            font-weight: 800;
        }

        .edit-card-body {
            padding: 18px;
        }

        .edit-form-row {
            display: grid;
            grid-template-columns: 260px minmax(0, 1fr);
            align-items: start;
            gap: 18px;
            margin-bottom: 14px;
        }

        .edit-form-row:last-child {
            margin-bottom: 0;
        }

        .edit-form-label {
            padding-top: 10px;
            font-weight: 700;
        }

        .edit-control {
            width: 100%;
            min-height: 42px;
            padding: 9px 12px;
            border: 1px solid #dce3ec;
            border-radius: 7px;
            outline: none;
            background: #fff;
        }

        .edit-control:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
        }

        textarea.edit-control {
            min-height: 110px;
            resize: vertical;
        }

        .edit-split {
            display: grid;
            grid-template-columns: 210px minmax(0, 1fr);
            gap: 10px;
        }

        .required {
            color: #ef4444;
        }

        .edit-switch-wrap {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .edit-switch-input {
            position: absolute;
            width: 0;
            height: 0;
            opacity: 0;
        }

        .edit-switch {
            position: relative;
            width: 46px;
            height: 25px;
            border-radius: 30px;
            background: #d7dee8;
            cursor: pointer;
        }

        .edit-switch::after {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: #96a3b5;
            content: "";
            transition: .2s;
        }

        .edit-switch-input:checked+.edit-switch {
            background: #dbeafe;
        }

        .edit-switch-input:checked+.edit-switch::after {
            left: 25px;
            background: #2563eb;
        }

        .edit-image-grid {
            display: grid;
            grid-template-columns: 210px repeat(5, minmax(115px, 1fr));
            gap: 12px;
        }

        .edit-upload-box {
            position: relative;
            display: flex;
            min-height: 128px;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px dashed #bdd0e7;
            border-radius: 10px;
            background: #fbfdff;
            cursor: pointer;
            text-align: center;
        }

        .edit-upload-box.cover {
            grid-row: span 2;
            min-height: 268px;
        }

        .edit-upload-box input[type="file"] {
            display: none;
        }

        .edit-upload-number {
            position: absolute;
            z-index: 4;
            top: 8px;
            right: 8px;
            display: grid;
            width: 27px;
            height: 27px;
            place-items: center;
            border-radius: 50%;
            background: #087df1;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
        }

        .edit-image-preview {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 7px;
            background: #fff;
        }

        .edit-remove-image {
            position: absolute;
            z-index: 5;
            top: 8px;
            left: 8px;
            display: grid;
            width: 25px;
            height: 25px;
            place-items: center;
            border: 0;
            border-radius: 50%;
            background: #ef4444;
            color: #fff;
            cursor: pointer;
        }

        .edit-radio-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .edit-radio-card input {
            display: none;
        }

        .edit-radio-card span {
            display: inline-flex;
            min-width: 140px;
            min-height: 60px;
            align-items: center;
            justify-content: center;
            padding: 12px;
            border: 1px solid #dce3ec;
            border-radius: 9px;
            cursor: pointer;
        }

        .edit-radio-card input:checked+span {
            border-color: #2563eb;
            background: #eff6ff;
            color: #2563eb;
        }

        .edit-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 50px;
            border-bottom: 1px solid #edf0f4;
        }

        .edit-toggle-row:last-child {
            border-bottom: 0;
        }

        .edit-collapsible {
            display: none;
            margin-top: 16px;
        }

        .edit-collapsible.show {
            display: block;
        }

        .edit-variant-card {
            margin-bottom: 13px;
            padding: 16px;
            border: 1px solid #dce3ec;
            border-radius: 9px;
            background: #fbfcfe;
        }

        .edit-variant-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .edit-variant-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .edit-field label {
            display: block;
            margin-bottom: 6px;
            color: #475569;
            font-size: 12px;
            font-weight: 700;
        }

        .edit-button {
            display: inline-flex;
            min-height: 39px;
            align-items: center;
            justify-content: center;
            padding: 8px 15px;
            border: 1px solid transparent;
            border-radius: 7px;
            cursor: pointer;
            font-weight: 700;
        }

        .edit-button-primary {
            background: #2563eb;
            color: #fff;
        }

        .edit-button-outline {
            border-color: #2563eb;
            background: #fff;
            color: #2563eb;
        }

        .edit-button-danger {
            border-color: #fecaca;
            background: #fff;
            color: #ef4444;
        }

        .ql-container {
            min-height: 220px;
        }

        @media (max-width: 1000px) {
            .edit-image-grid {
                grid-template-columns: repeat(3, minmax(115px, 1fr));
            }

            .edit-upload-box.cover {
                grid-row: auto;
                min-height: 180px;
            }

            .edit-variant-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 700px) {
            .edit-product-toolbar {
                position: static;
                align-items: flex-start;
                flex-direction: column;
                gap: 12px;
            }

            .edit-toolbar-actions {
                width: 100%;
                flex-wrap: wrap;
            }

            .edit-form-row,
            .edit-split,
            .edit-variant-grid {
                grid-template-columns: 1fr;
            }

            .edit-form-label {
                padding-top: 0;
            }

            .edit-image-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .edit-upload-box.cover {
                grid-column: 1 / -1;
            }
        }
    </style>
@endpush

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

        <input id="editFormAction" type="hidden" name="action" value="save">

        <div id="deletedImagesContainer"></div>

        <div class="edit-product-toolbar">
            <div>
                <strong style="font-size:18px;">
                    Edit Product
                </strong>

                <div style="margin-top:4px; color:#94a3b8;">
                    {{ $product->name }}
                </div>
            </div>

            <div class="edit-toolbar-actions">
                <a class="edit-button edit-button-outline"
                    href="{{ route('admin.products.show', $product) }}">
                    Cancel
                </a>

                <button class="edit-button edit-button-outline" type="submit"
                    onclick="
                    document.getElementById(
                        'editFormAction'
                    ).value = 'draft';
                ">
                    Save Draft
                </button>

                <button class="edit-button edit-button-primary" type="submit"
                    onclick="
                    document.getElementById(
                        'editFormAction'
                    ).value = 'publish';
                ">
                    Update & Publish
                </button>
            </div>
        </div>

        @if ($errors->any())
            <div
                style="
                margin-bottom:15px;
                padding:14px;
                border:1px solid #fecaca;
                border-radius:8px;
                background:#fef2f2;
                color:#991b1b;
            ">
                <strong>Please correct the following errors:</strong>

                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <section class="edit-card">
            <div class="edit-card-heading">
                Product Information
            </div>

            <div class="edit-card-body">
                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Product Name / Title
                        <span class="required">*</span>
                    </label>

                    <input id="editProductName" class="edit-control" type="text" name="name"
                        value="{{ old('name', $product->name) }}" required>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Product SKU ID
                        <span class="required">*</span>
                    </label>

                    <input class="edit-control" type="text" name="sku" value="{{ old('sku', $product->sku) }}"
                        required>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Slug / URL
                    </label>

                    <input id="editProductSlug" class="edit-control" type="text" name="slug"
                        value="{{ old('slug', $product->slug) }}">
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Category
                        <span class="required">*</span>
                    </label>

                    <select class="edit-control" name="categories[]" multiple required style="min-height:110px;">
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @selected(in_array($category->id, $selectedCategoryIds))>
                                @if ($category->parent)
                                    {{ $category->parent->name }} →
                                @endif

                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Brand
                    </label>

                    <select class="edit-control" name="brand_id">
                        <option value="">Select Brand</option>

                        @foreach ($brands as $brand)
                            <option value="{{ $brand->id }}" @selected(old('brand_id', $product->brand_id) == $brand->id)>
                                {{ $brand->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Unit
                    </label>

                    <div class="edit-split">
                        <select class="edit-control" name="unit_id" required>
                            @foreach ($units as $unit)
                                <option value="{{ $unit->id }}" @selected(old('unit_id', $product->unit_id) == $unit->id)>
                                    {{ $unit->name }}
                                </option>
                            @endforeach
                        </select>

                        <input class="edit-control" type="number" name="unit_value"
                            value="{{ old('unit_value', $product->unit_value) }}"
                            min="0.001" step="0.001" required>
                    </div>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Weight
                    </label>

                    <div class="edit-split">
                        <select class="edit-control" name="weight_unit_id">
                            <option value="">
                                Select weight unit
                            </option>

                            @foreach ($weightUnits as $weightUnit)
                                <option value="{{ $weightUnit->id }}" @selected(old('weight_unit_id', $product->weight_unit_id) == $weightUnit->id)>
                                    {{ $weightUnit->name }}
                                </option>
                            @endforeach
                        </select>

                        <input class="edit-control" type="number" name="weight_value"
                            value="{{ old('weight_value', $product->weight_value) }}"
                            min="0" step="0.001">
                    </div>
                </div>

                @foreach ([
            [
                'id' => 'editPublished',
                'name' => 'is_published',
                'label' => 'Published',
                'checked' => old('is_published', $product->is_published),
            ],
            [
                'id' => 'editPreorder',
                'name' => 'pre_order_enabled',
                'label' => 'Pre-order Enabled',
                'checked' => old('pre_order_enabled', $product->pre_order_enabled),
            ],
            [
                'id' => 'editTrackStock',
                'name' => 'track_stock',
                'label' => 'Track Inventory',
                'checked' => old('track_stock', $product->track_stock),
            ],
        ] as $switchData)
                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            {{ $switchData['label'] }}
                        </label>

                        <div class="edit-switch-wrap">
                            <input type="hidden" name="{{ $switchData['name'] }}" value="0">

                            <input id="{{ $switchData['id'] }}" class="edit-switch-input" type="checkbox"
                                name="{{ $switchData['name'] }}" value="1" @checked($switchData['checked'])>

                            <label class="edit-switch" for="{{ $switchData['id'] }}"></label>

                            <span>{{ $switchData['label'] }}</span>
                        </div>
                    </div>
                @endforeach

                <div id="editPreorderMessage" class="edit-form-row">
                    <label class="edit-form-label">
                        Pre-order Message
                    </label>

                    <textarea class="edit-control" name="pre_order_message">{{ old('pre_order_message', $product->pre_order_message) }}</textarea>
                </div>
            </div>
        </section>

        <section class="edit-card">
            <div class="edit-card-heading">
                Media
            </div>

            <div class="edit-card-body">
                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Product Images
                    </label>

                    <div class="edit-image-grid">
                        <label class="edit-upload-box cover">
                            <input class="edit-image-input" type="file" name="cover_image"
                                accept="image/jpeg,image/png,image/webp">

                            <span class="edit-upload-number">1</span>

                            @if ($product->cover_image)
                                <img class="edit-image-preview"
                                    src="{{ asset('storage/' . $product->cover_image) }}"
                                    alt="{{ $product->name }}">
                            @else
                                <span>Cover Image<br>(800 × 800)</span>
                            @endif
                        </label>

                        @for ($slot = 2; $slot <= 11; $slot++)
                            @php
                                $currentImage = $imagesBySlot->get($slot);
                            @endphp

                            <label class="edit-upload-box" data-image-box>
                                <input class="edit-image-input" type="file"
                                    name="gallery_images[{{ $slot }}]" accept="image/jpeg,image/png,image/webp">

                                <span class="edit-upload-number">
                                    {{ $slot }}
                                </span>

                                @if ($currentImage)
                                    <button class="edit-remove-image" type="button"
                                        data-delete-image="{{ $currentImage->id }}">
                                        ×
                                    </button>

                                    <img class="edit-image-preview"
                                        src="{{ asset('storage/' . $currentImage->image_path) }}"
                                        alt="{{ $product->name }}">
                                @else
                                    <span>
                                        Image {{ $slot }}<br>
                                        (800 × 800)
                                    </span>
                                @endif
                            </label>
                        @endfor
                    </div>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Video Embed
                    </label>

                    <textarea class="edit-control" name="video_embed">{{ old('video_embed', $product->video_embed) }}</textarea>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Video Position
                    </label>

                    <select class="edit-control" name="video_position">
                        <option value="">
                            Select video position
                        </option>

                        @foreach ([
            'product_info' => 'In product info',
            'top_description' => 'Top product description',
            'bottom_description' => 'Bottom product description',
            'gallery' => 'Gallery section',
        ] as $value => $label)
                            <option value="{{ $value }}" @selected(old('video_position', $product->video_position) === $value)>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </section>

        <section class="edit-card">
            <div class="edit-card-heading">
                Product Price and Inventory
            </div>

            <div class="edit-card-body">
                @foreach ([
            [
                'label' => 'Stock Alert',
                'name' => 'stock_alert_quantity',
                'value' => $product->stock_alert_quantity,
                'step' => '1',
            ],
            [
                'label' => 'Stock Quantity',
                'name' => 'stock_quantity',
                'value' => $product->stock_quantity,
                'step' => '1',
            ],
            [
                'label' => 'Regular Price',
                'name' => 'regular_price',
                'value' => $product->regular_price,
                'step' => '0.01',
            ],
            [
                'label' => 'Sale Price',
                'name' => 'sale_price',
                'value' => $product->sale_price,
                'step' => '0.01',
            ],
        ] as $numberField)
                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            {{ $numberField['label'] }}
                        </label>

                        <input id="{{ $numberField['name'] }}" class="edit-control" type="number"
                            name="{{ $numberField['name'] }}"
                            value="{{ old($numberField['name'], $numberField['value']) }}"
                            min="0" step="{{ $numberField['step'] }}">
                    </div>
                @endforeach

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Condition
                    </label>

                    <select class="edit-control" name="condition">
                        <option value="new" @selected(old('condition', $product->condition) === 'new')>
                            New
                        </option>

                        <option value="used" @selected(old('condition', $product->condition) === 'used')>
                            Used
                        </option>
                    </select>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Availability
                    </label>

                    <select class="edit-control" name="availability">
                        @foreach ([
            'in_stock' => 'In Stock',
            'out_of_stock' => 'Out of Stock',
            'coming_soon' => 'Coming Soon',
            'discontinued' => 'Discontinued',
        ] as $value => $label)
                            <option value="{{ $value }}" @selected(old('availability', $product->availability) === $value)>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Discount
                    </label>

                    <div class="edit-split">
                        <select id="discount_type" class="edit-control" name="discount_type">
                            <option value="flat" @selected(old('discount_type', $product->discount_type) === 'flat')>
                                Flat
                            </option>

                            <option value="percentage" @selected(old('discount_type', $product->discount_type) === 'percentage')>
                                Percentage
                            </option>
                        </select>

                        <input id="discount_value" class="edit-control" type="number" name="discount_value"
                            value="{{ old('discount_value', $product->discount_value) }}"
                            min="0" step="0.01">
                    </div>
                </div>

                <div class="edit-form-row">
                    <label class="edit-form-label">
                        Add Variants
                    </label>

                    <div>
                        <div class="edit-switch-wrap">
                            <input type="hidden" name="has_variants" value="0">

                            <input id="editHasVariants" class="edit-switch-input" type="checkbox" name="has_variants"
                                value="1" @checked(old('has_variants', $product->has_variants))>

                            <label class="edit-switch" for="editHasVariants"></label>

                            <span>Enable variants</span>
                        </div>

                        <div id="editVariantsSection" class="edit-collapsible">
                            <div id="editVariantRows"></div>

                            <button id="editAddVariant"
                                class="
                                edit-button
                                edit-button-outline
                            "
                                type="button">
                                + Add Variant
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="edit-card">
            <div class="edit-card-heading">
                Product Description
            </div>

            <div class="edit-card-body">
                <label
                    style="
                    display:block;
                    margin-bottom:8px;
                    font-weight:700;
                ">
                    Short Description
                </label>

                <div id="editShortEditor">
                    {!! old('short_description', $product->short_description) !!}
                </div>

                <textarea id="editShortInput" name="short_description" hidden></textarea>

                <label
                    style="
                    display:block;
                    margin:22px 0 8px;
                    font-weight:700;
                ">
                    Long Description
                    <span class="required">*</span>
                </label>

                <div id="editLongEditor">
                    {!! old('long_description', $product->long_description) !!}
                </div>

                <textarea id="editLongInput" name="long_description" hidden></textarea>
            </div>
        </section>

        <section class="edit-card">
            <div class="edit-card-heading">
                Delivery Type
            </div>

            <div class="edit-card-body">
                <div class="edit-radio-grid">
                    @foreach ([
            'free_shipping' => 'Free Shipping',
            'rate_by_weight' => 'Rate by Weight',
        ] as $value => $label)
                        <label class="edit-radio-card">
                            <input type="radio" name="delivery_type" value="{{ $value }}"
                                @checked(old('delivery_type', $product->delivery_type) === $value)>

                            <span>{{ $label }}</span>
                        </label>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="edit-card">
            <div class="edit-card-heading">
                Offers
            </div>

            <div class="edit-card-body">
                @forelse($offers as $offer)
                    <div class="edit-toggle-row">
                        <strong>{{ $offer->name }}</strong>

                        <div class="edit-switch-wrap">
                            <input id="editOffer{{ $offer->id }}" class="edit-switch-input" type="checkbox"
                                name="offers[]" value="{{ $offer->id }}" @checked(in_array($offer->id, $selectedOfferIds))>

                            <label class="edit-switch" for="editOffer{{ $offer->id }}"></label>
                        </div>
                    </div>
                @empty
                    No active offers.
                @endforelse
            </div>
        </section>

        <section class="edit-card">
            <div class="edit-card-heading">
                Product Flags
            </div>

            <div class="edit-card-body">
                @forelse($flags as $flag)
                    <div class="edit-toggle-row">
                        <strong>{{ $flag->name }}</strong>

                        <div class="edit-switch-wrap">
                            <input id="editFlag{{ $flag->id }}" class="edit-switch-input" type="checkbox"
                                name="flags[]" value="{{ $flag->id }}" @checked(in_array($flag->id, $selectedFlagIds))>

                            <label class="edit-switch" for="editFlag{{ $flag->id }}"></label>
                        </div>
                    </div>
                @empty
                    No product flags.
                @endforelse
            </div>
        </section>

        <section class="edit-card">
            <div class="edit-card-heading">
                Digital Product
            </div>

            <div class="edit-card-body">
                <div class="edit-switch-wrap">
                    <input type="hidden" name="is_digital" value="0">

                    <input id="editIsDigital" class="edit-switch-input" type="checkbox" name="is_digital"
                        value="1" @checked(old('is_digital', $product->is_digital))>

                    <label class="edit-switch" for="editIsDigital"></label>

                    <span>Digital Product</span>
                </div>

                <div id="editDigitalSection" class="edit-collapsible">
                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            Replace Digital File
                        </label>

                        <input class="edit-control" type="file" name="digital_file">
                    </div>

                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            Download Limit
                        </label>

                        <input class="edit-control" type="number" name="download_limit"
                            value="{{ old('download_limit', $product->download_limit) }}"
                            min="1">
                    </div>

                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            Expiry Days
                        </label>

                        <input class="edit-control" type="number" name="download_expiry_days"
                            value="{{ old('download_expiry_days', $product->download_expiry_days) }}"
                            min="1">
                    </div>
                </div>
            </div>
        </section>

        <section class="edit-card">
            <div class="edit-card-heading">
                SEO
            </div>

            <div class="edit-card-body">
                <div class="edit-switch-wrap">
                    <input type="hidden" name="seo_enabled" value="0">

                    <input id="editSeoEnabled" class="edit-switch-input" type="checkbox" name="seo_enabled"
                        value="1" @checked(old('seo_enabled', $product->seo_enabled))>

                    <label class="edit-switch" for="editSeoEnabled"></label>

                    <span>Enable SEO</span>
                </div>

                <div id="editSeoSection" class="edit-collapsible">
                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            Meta Title
                        </label>

                        <input class="edit-control" type="text" name="meta_title"
                            value="{{ old('meta_title', $product->meta_title) }}">
                    </div>

                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            Meta Keywords
                        </label>

                        <input class="edit-control" type="text" name="meta_keywords"
                            value="{{ old('meta_keywords', $product->meta_keywords) }}">
                    </div>

                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            Meta Description
                        </label>

                        <textarea class="edit-control" name="meta_description">{{ old('meta_description', $product->meta_description) }}</textarea>
                    </div>

                    <div class="edit-form-row">
                        <label class="edit-form-label">
                            Canonical URL
                        </label>

                        <input class="edit-control" type="url" name="canonical_url"
                            value="{{ old('canonical_url', $product->canonical_url) }}">
                    </div>
                </div>
            </div>
        </section>
    </form>

    <template id="editVariantTemplate">
        <div class="edit-variant-card">
            <input class="variant-id-input" type="hidden" name="variants[__INDEX__][id]">

            <div class="edit-variant-header">
                <strong>
                    Variant #<span class="variant-number"></span>
                </strong>

                <button
                    class="
                    edit-button
                    edit-button-danger
                    remove-edit-variant
                "
                    type="button">
                    Remove
                </button>
            </div>

            <div class="edit-variant-grid">
                <div class="edit-field">
                    <label>Name *</label>

                    <input class="edit-control variant-name" type="text" name="variants[__INDEX__][name]" required>
                </div>

                <div class="edit-field">
                    <label>SKU *</label>

                    <input class="edit-control variant-sku" type="text" name="variants[__INDEX__][sku]" required>
                </div>

                <div class="edit-field">
                    <label>Attributes</label>

                    <select class="edit-control variant-attributes" name="variants[__INDEX__][attribute_value_ids][]"
                        multiple style="min-height:90px;">
                        @foreach ($attributes as $attribute)
                            <optgroup label="{{ $attribute->name }}">
                                @foreach ($attribute->values as $value)
                                    <option value="{{ $value->id }}">
                                        {{ $value->value }}
                                    </option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>

                <div class="edit-field">
                    <label>Regular Price *</label>

                    <input class="edit-control variant-regular-price" type="number"
                        name="variants[__INDEX__][regular_price]" min="0" step="0.01" required>
                </div>

                <div class="edit-field">
                    <label>Discount Type</label>

                    <select class="edit-control variant-discount-type" name="variants[__INDEX__][discount_type]">
                        <option value="flat">Flat</option>
                        <option value="percentage">
                            Percentage
                        </option>
                    </select>
                </div>

                <div class="edit-field">
                    <label>Discount Value</label>

                    <input class="edit-control variant-discount-value" type="number"
                        name="variants[__INDEX__][discount_value]" min="0" step="0.01">
                </div>

                <div class="edit-field">
                    <label>Sale Price</label>

                    <input class="edit-control variant-sale-price" type="number" name="variants[__INDEX__][sale_price]"
                        min="0" step="0.01">
                </div>

                <div class="edit-field">
                    <label>Stock Quantity</label>

                    <input class="edit-control variant-stock" type="number" name="variants[__INDEX__][stock_quantity]"
                        min="0">
                </div>

                <div class="edit-field">
                    <label>Stock Alert</label>

                    <input class="edit-control variant-stock-alert" type="number"
                        name="variants[__INDEX__][stock_alert_quantity]" min="0">
                </div>

                <div class="edit-field">
                    <label>Weight Unit</label>

                    <select class="edit-control variant-weight-unit" name="variants[__INDEX__][weight_unit_id]">
                        <option value="">
                            Use product weight
                        </option>

                        @foreach ($weightUnits as $weightUnit)
                            <option value="{{ $weightUnit->id }}">
                                {{ $weightUnit->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="edit-field">
                    <label>Weight Value</label>

                    <input class="edit-control variant-weight-value" type="number"
                        name="variants[__INDEX__][weight_value]" min="0" step="0.001">
                </div>

                <div class="edit-field">
                    <label>Variant Image</label>

                    <input class="edit-control" type="file" name="variants[__INDEX__][image]"
                        accept="image/jpeg,image/png,image/webp">

                    <div class="variant-current-image" style="margin-top:6px;"></div>
                </div>

                <div class="edit-field">
                    <label>Default Variant</label>

                    <div class="edit-switch-wrap">
                        <input id="variantDefault__INDEX__"
                            class="
                            edit-switch-input
                            variant-default
                        "
                            type="checkbox" name="variants[__INDEX__][is_default]" value="1">

                        <label class="edit-switch" for="variantDefault__INDEX__"></label>
                    </div>
                </div>
            </div>
        </div>
    </template>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('editProductForm');

            const shortEditor = new Quill('#editShortEditor', {
                theme: 'snow'
            });

            const longEditor = new Quill('#editLongEditor', {
                theme: 'snow'
            });

            form.addEventListener('submit', function() {
                document.getElementById(
                    'editShortInput'
                ).value = shortEditor.root.innerHTML;

                document.getElementById(
                    'editLongInput'
                ).value = longEditor.root.innerHTML;
            });

            const productName = document.getElementById(
                'editProductName'
            );

            const productSlug = document.getElementById(
                'editProductSlug'
            );

            let slugEdited = true;

            productSlug.addEventListener('input', function() {
                slugEdited = this.value.trim() !== '';
            });

            function slugify(value) {
                return value
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-');
            }

            productName.addEventListener('input', function() {
                if (!slugEdited) {
                    productSlug.value = slugify(this.value);
                }
            });

            document
                .querySelectorAll('.edit-image-input')
                .forEach(function(input) {
                    input.addEventListener('change', function() {
                        const file = this.files[0];

                        if (!file) {
                            return;
                        }

                        const box = this.closest('.edit-upload-box');
                        let image = box.querySelector(
                            '.edit-image-preview'
                        );

                        if (!image) {
                            image = document.createElement('img');
                            image.className = 'edit-image-preview';
                            box.appendChild(image);
                        }

                        const reader = new FileReader();

                        reader.onload = function(event) {
                            image.src = event.target.result;
                        };

                        reader.readAsDataURL(file);
                    });
                });

            const deletedImagesContainer = document.getElementById(
                'deletedImagesContainer'
            );

            document
                .querySelectorAll('[data-delete-image]')
                .forEach(function(button) {
                    button.addEventListener('click', function(event) {
                        event.preventDefault();
                        event.stopPropagation();

                        const imageId = this.dataset.deleteImage;

                        const hidden = document.createElement('input');

                        hidden.type = 'hidden';
                        hidden.name = 'deleted_image_ids[]';
                        hidden.value = imageId;

                        deletedImagesContainer.appendChild(hidden);

                        const box = this.closest('[data-image-box]');

                        box.querySelector(
                            '.edit-image-preview'
                        )?.remove();

                        this.remove();
                    });
                });

            const preOrder = document.getElementById('editPreorder');
            const preorderMessage = document.getElementById(
                'editPreorderMessage'
            );

            function togglePreorder() {
                preorderMessage.style.display = preOrder.checked ?
                    'grid' :
                    'none';
            }

            preOrder.addEventListener('change', togglePreorder);
            togglePreorder();

            const digitalSwitch = document.getElementById(
                'editIsDigital'
            );

            const digitalSection = document.getElementById(
                'editDigitalSection'
            );

            const seoSwitch = document.getElementById(
                'editSeoEnabled'
            );

            const seoSection = document.getElementById(
                'editSeoSection'
            );

            function toggleSection(switchInput, section) {
                section.classList.toggle(
                    'show',
                    switchInput.checked
                );
            }

            digitalSwitch.addEventListener('change', function() {
                toggleSection(digitalSwitch, digitalSection);
            });

            seoSwitch.addEventListener('change', function() {
                toggleSection(seoSwitch, seoSection);
            });

            toggleSection(digitalSwitch, digitalSection);
            toggleSection(seoSwitch, seoSection);

            const variantsSwitch = document.getElementById(
                'editHasVariants'
            );

            const variantsSection = document.getElementById(
                'editVariantsSection'
            );

            const variantRows = document.getElementById(
                'editVariantRows'
            );

            const variantTemplate = document.getElementById(
                'editVariantTemplate'
            );

            const addVariantButton = document.getElementById(
                'editAddVariant'
            );

            const initialVariants = @json($initialVariants);

            let variantIndex = 0;

            function setValue(card, selector, value) {
                const input = card.querySelector(selector);

                if (
                    input &&
                    value !== null &&
                    value !== undefined
                ) {
                    input.value = value;
                }
            }

            function refreshVariantNumbers() {
                variantRows
                    .querySelectorAll('.edit-variant-card')
                    .forEach(function(card, index) {
                        card.querySelector(
                            '.variant-number'
                        ).textContent = index + 1;
                    });
            }

            function addVariant(data = {}) {
                const currentIndex = variantIndex++;

                const html = variantTemplate.innerHTML.replaceAll(
                    '__INDEX__',
                    currentIndex
                );

                const wrapper = document.createElement('div');

                wrapper.innerHTML = html.trim();

                const card = wrapper.firstElementChild;

                setValue(
                    card,
                    '.variant-id-input',
                    data.id || ''
                );

                setValue(
                    card,
                    '.variant-name',
                    data.name || ''
                );

                setValue(
                    card,
                    '.variant-sku',
                    data.sku || ''
                );

                setValue(
                    card,
                    '.variant-regular-price',
                    data.regular_price || ''
                );

                setValue(
                    card,
                    '.variant-discount-type',
                    data.discount_type || 'flat'
                );

                setValue(
                    card,
                    '.variant-discount-value',
                    data.discount_value || 0
                );

                setValue(
                    card,
                    '.variant-sale-price',
                    data.sale_price || ''
                );

                setValue(
                    card,
                    '.variant-stock',
                    data.stock_quantity || 0
                );

                setValue(
                    card,
                    '.variant-stock-alert',
                    data.stock_alert_quantity || 0
                );

                setValue(
                    card,
                    '.variant-weight-unit',
                    data.weight_unit_id || ''
                );

                setValue(
                    card,
                    '.variant-weight-value',
                    data.weight_value || ''
                );

                const defaultCheckbox = card.querySelector(
                    '.variant-default'
                );

                defaultCheckbox.checked = Boolean(data.is_default);

                const attributes = card.querySelector(
                    '.variant-attributes'
                );

                const selectedValues = (
                    data.attribute_value_ids || []
                ).map(String);

                Array.from(attributes.options).forEach(function(option) {
                    option.selected = selectedValues.includes(
                        String(option.value)
                    );
                });

                if (data.image) {
                    card.querySelector(
                        '.variant-current-image'
                    ).innerHTML = `
                <img
                    src="{{ asset('storage') }}/${data.image}"
                    style="
                        width:70px;
                        height:70px;
                        object-fit:contain;
                        border:1px solid #dce3ec;
                        border-radius:6px;
                    "
                    alt="Variant image"
                >
            `;
                }

                card.querySelector(
                    '.remove-edit-variant'
                ).addEventListener('click', function() {
                    card.remove();
                    refreshVariantNumbers();
                });

                variantRows.appendChild(card);

                refreshVariantNumbers();
            }

            function toggleVariants() {
                variantsSection.classList.toggle(
                    'show',
                    variantsSwitch.checked
                );

                if (
                    variantsSwitch.checked &&
                    variantRows.children.length === 0
                ) {
                    addVariant();
                }
            }

            initialVariants.forEach(function(variant) {
                addVariant(variant);
            });

            addVariantButton.addEventListener('click', function() {
                addVariant();
            });

            variantsSwitch.addEventListener(
                'change',
                toggleVariants
            );

            toggleVariants();

            const regularPrice = document.getElementById(
                'regular_price'
            );

            const discountType = document.getElementById(
                'discount_type'
            );

            const discountValue = document.getElementById(
                'discount_value'
            );

            const salePrice = document.getElementById(
                'sale_price'
            );

            function calculateSalePrice() {
                const regular = Number(regularPrice.value || 0);
                const discount = Number(discountValue.value || 0);

                let calculated = regular;

                if (discountType.value === 'percentage') {
                    calculated = regular -
                        (regular * Math.min(discount, 100) / 100);
                } else {
                    calculated = regular - discount;
                }

                salePrice.value = Math.max(
                    0,
                    calculated
                ).toFixed(2);
            }

            regularPrice.addEventListener(
                'input',
                calculateSalePrice
            );

            discountType.addEventListener(
                'change',
                calculateSalePrice
            );

            discountValue.addEventListener(
                'input',
                calculateSalePrice
            );
        });
    </script>
@endpush