@extends('admin.master')

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

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">

    <style>
        .create-toolbar {
            position: sticky;
            z-index: 100;
            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, .97);
            box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
        }

        .create-toolbar h1 {
            margin: 0;
            font-size: 18px;
        }

        .create-toolbar-actions {
            display: flex;
            gap: 10px;
        }

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

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

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

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

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

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

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

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

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

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

        .required {
            color: #ef4444;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

        .create-upload-box input {
            display: none;
        }

        .create-upload-number {
            position: absolute;
            z-index: 3;
            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;
        }

        .create-upload-placeholder {
            padding: 14px;
            color: #52637a;
            font-size: 12px;
            line-height: 1.7;
        }

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

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

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

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

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

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

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

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

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

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

        .create-variant-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

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

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

        .create-error-box {
            margin-bottom: 15px;
            padding: 14px 18px;
            border: 1px solid #fecaca;
            border-radius: 8px;
            background: #fef2f2;
            color: #991b1b;
        }

        .create-error-text {
            margin-top: 5px;
            color: #ef4444;
            font-size: 12px;
        }

        .ql-toolbar.ql-snow {
            border-color: #dce3ec;
            border-radius: 7px 7px 0 0;
        }

        .ql-container.ql-snow {
            min-height: 220px;
            border-color: #dce3ec;
            border-radius: 0 0 7px 7px;
        }

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

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

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

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

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

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

            .create-label {
                padding-top: 0;
            }

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

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

@section('content')
    <form id="createProductForm" action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <input id="createFormAction" type="hidden" name="action" value="publish">

        <div class="create-toolbar">
            <div>
                <h1>Add Product</h1>
            </div>

            <div class="create-toolbar-actions">
                <a class="create-button create-button-outline" href="{{ route('admin.products.index') }}">
                    ✕ Cancel
                </a>

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

                <button class="create-button create-button-primary" type="submit"
                    onclick="
                    document.getElementById(
                        'createFormAction'
                    ).value = 'publish';
                ">
                    ▣ Publish
                </button>
            </div>
        </div>

        @if ($errors->any())
            <div class="create-error-box">
                <strong>
                    নিচের fieldগুলো ঠিক করুন:
                </strong>

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

        {{-- Product Information --}}
        <section class="create-card">
            <div class="create-card-header">
                Product Information
            </div>

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

                    <div>
                        <input id="productName" class="create-control" type="text" name="name"
                            value="{{ old('name') }}" placeholder="Enter title" required>

                        @error('name')
                            <div class="create-error-text">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>

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

                    <div>
                        <input id="productSku" class="create-control" type="text" name="sku"
                            value="{{ old('sku', $nextSku) }}" required>

                        @error('sku')
                            <div class="create-error-text">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>

                <div class="create-form-row">
                    <label class="create-label" for="productSlug">
                        Slug / URL
                    </label>

                    <div>
                        <input id="productSlug" class="create-control" type="text" name="slug"
                            value="{{ old('slug') }}" placeholder="Enter slug">
                    </div>
                </div>

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

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

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

                        <small style="color:#64748b;">
                            প্রথম selected category primary category
                            হিসেবে save হবে।
                        </small>
                    </div>
                </div>

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

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

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

                <div class="create-form-row">
                    <label class="create-label">
                        Unit
                        <span class="required">*</span>
                    </label>

                    <div class="create-split">
                        <select class="create-control" name="unit_id" required>
                            <option value="">Select unit</option>

                            @foreach ($units as $unit)
                                <option value="{{ $unit->id }}" @selected(old('unit_id') == $unit->id || (!old('unit_id') && $unit->code === 'piece'))>
                                    {{ $unit->name }}
                                </option>
                            @endforeach
                        </select>

                        <input class="create-control" type="number" name="unit_value" value="{{ old('unit_value', 1) }}"
                            min="0.001" step="0.001" placeholder="Unit value" required>
                    </div>
                </div>

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

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

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

                        <input class="create-control" type="number" name="weight_value" value="{{ old('weight_value') }}"
                            min="0" step="0.001" placeholder="Weight value">
                    </div>
                </div>

                <div class="create-form-row">
                    <label class="create-label">
                        Publish Status
                    </label>

                    <div class="create-switch-wrap">
                        <input type="hidden" name="is_published" value="0">

                        <input id="isPublished" class="create-switch-input" type="checkbox" name="is_published"
                            value="1" @checked(old('is_published', true))>

                        <label class="create-switch" for="isPublished"></label>

                        <span>Published</span>
                    </div>
                </div>

                <div class="create-form-row">
                    <label class="create-label">
                        Pre Order
                    </label>

                    <div>
                        <div class="create-switch-wrap">
                            <input type="hidden" name="pre_order_enabled" value="0">

                            <input id="preOrderEnabled" class="create-switch-input" type="checkbox"
                                name="pre_order_enabled" value="1" @checked(old('pre_order_enabled'))>

                            <label class="create-switch" for="preOrderEnabled"></label>

                            <span>Pre-Order Enabled</span>
                        </div>

                        <div id="preOrderMessageBox" style="display:none; margin-top:12px;">
                            <textarea class="create-control" name="pre_order_message" placeholder="Pre-order message">{{ old('pre_order_message') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- Media --}}
        <section class="create-card">
            <div class="create-card-header">
                Media
            </div>

            <div class="create-card-body">
                <div class="create-form-row">
                    <label class="create-label">
                        Product Image
                        <span class="required">*</span>
                    </label>

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

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

                            <span class="create-upload-placeholder">
                                <strong>Cover Image</strong><br>
                                Size<br>
                                (800 × 800)
                            </span>

                            <img class="create-upload-preview" alt="Cover preview">
                        </label>

                        @for ($slot = 2; $slot <= 11; $slot++)
                            <label class="create-upload-box">
                                <input class="create-image-input" type="file"
                                    name="gallery_images[{{ $slot }}]" accept="image/jpeg,image/png,image/webp">

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

                                <span class="create-upload-placeholder">
                                    Size<br>
                                    (800 × 800)
                                </span>

                                <img class="create-upload-preview" alt="Gallery preview">
                            </label>
                        @endfor
                    </div>
                </div>

                <div class="create-form-row">
                    <label class="create-label">
                        Insert Video Embed
                        <br>
                        <small>
                            YouTube/Facebook/Vimeo
                        </small>
                    </label>

                    <textarea class="create-control" name="video_embed" placeholder="Paste iframe or embed code">{{ old('video_embed') }}</textarea>
                </div>

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

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

                        <option value="product_info" @selected(old('video_position') === 'product_info')>
                            In product info (intro text area)
                        </option>

                        <option value="top_description" @selected(old('video_position') === 'top_description')>
                            Top product description
                        </option>

                        <option value="bottom_description" @selected(old('video_position') === 'bottom_description')>
                            Bottom product description
                        </option>

                        <option value="gallery" @selected(old('video_position') === 'gallery')>
                            Gallery Section
                        </option>
                    </select>
                </div>
            </div>
        </section>

        {{-- Price and Variants --}}
        <section class="create-card">
            <div class="create-card-header">
                Product Variants
            </div>

            <div class="create-card-body">
                <div class="create-form-row">
                    <label class="create-label">
                        Track Inventory
                    </label>

                    <div class="create-switch-wrap">
                        <input type="hidden" name="track_stock" value="0">

                        <input id="trackStock" class="create-switch-input" type="checkbox" name="track_stock"
                            value="1" @checked(old('track_stock', true))>

                        <label class="create-switch" for="trackStock"></label>

                        <span>Track product inventory</span>
                    </div>
                </div>

                <div class="create-form-row">
                    <label class="create-label">
                        Stock Alert
                    </label>

                    <input class="create-control" type="number" name="stock_alert_quantity"
                        value="{{ old('stock_alert_quantity', 5) }}"
                        min="0" placeholder="Stock alert number">
                </div>

                <div class="create-form-row">
                    <label class="create-label">
                        Stock Quantity
                    </label>

                    <input id="baseStockQuantity" class="create-control" type="number" name="stock_quantity"
                        value="{{ old('stock_quantity', 0) }}" min="0">
                </div>

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

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

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

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

                    <select class="create-control" name="availability" required>
                        <option value="in_stock" @selected(old('availability', 'in_stock') === 'in_stock')>
                            In Stock
                        </option>

                        <option value="out_of_stock" @selected(old('availability') === 'out_of_stock')>
                            Out of Stock
                        </option>

                        <option value="coming_soon" @selected(old('availability') === 'coming_soon')>
                            Coming Soon
                        </option>

                        <option value="discontinued" @selected(old('availability') === 'discontinued')>
                            Discontinued
                        </option>
                    </select>
                </div>

                <div class="create-form-row">
                    <label class="create-label">
                        Regular Price
                        <span class="required">*</span>
                    </label>

                    <input id="regularPrice" class="create-control" type="number" name="regular_price"
                        value="{{ old('regular_price') }}" min="0" step="0.01" placeholder="Regular price"
                        required>
                </div>

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

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

                            <option value="percentage" @selected(old('discount_type') === 'percentage')>
                                % (Per)
                            </option>
                        </select>

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

                <div class="create-form-row">
                    <label class="create-label">
                        Sale Price
                    </label>

                    <input id="salePrice" class="create-control" type="number" name="sale_price"
                        value="{{ old('sale_price') }}" min="0" step="0.01" placeholder="Sale price">
                </div>

                <div class="create-form-row">
                    <label class="create-label">
                        Add Variant
                    </label>

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

                            <input id="hasVariants" class="create-switch-input" type="checkbox" name="has_variants"
                                value="1" @checked(old('has_variants'))>

                            <label class="create-switch" for="hasVariants"></label>

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

                        <div id="variantSection" class="create-collapsible">
                            <div id="variantRows"></div>

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

        {{-- Description --}}
        <section class="create-card">
            <div class="create-card-header">
                Product Description
            </div>

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

                <div id="shortDescriptionEditor">
                    {!! old('short_description') !!}
                </div>

                <textarea id="shortDescriptionInput" 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="longDescriptionEditor">
                    {!! old('long_description') !!}
                </div>

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

        {{-- Delivery --}}
        <section class="create-card">
            <div class="create-card-header">
                Delivery Type
            </div>

            <div class="create-card-body">
                <div class="create-radio-grid">
                    <label class="create-radio-card">
                        <input type="radio" name="delivery_type" value="free_shipping" @checked(old('delivery_type', 'free_shipping') === 'free_shipping')>

                        <span>Free Shipping</span>
                    </label>

                    <label class="create-radio-card">
                        <input type="radio" name="delivery_type" value="rate_by_weight" @checked(old('delivery_type') === 'rate_by_weight')>

                        <span>Rate by Weight</span>
                    </label>
                </div>
            </div>
        </section>

        {{-- Offers --}}
        <section class="create-card">
            <div class="create-card-header">
                Offer Setup
            </div>

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

                            <div
                                style="
                                margin-top:3px;
                                color:#64748b;
                                font-size:12px;
                            ">
                                @if ($offer->discount_type === 'percentage')
                                    {{ $offer->discount_value }}%
                                    discount
                                @else
                                    ৳{{ $offer->discount_value }}
                                    discount
                                @endif
                            </div>
                        </div>

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

                            <label class="create-switch" for="offer{{ $offer->id }}"></label>
                        </div>
                    </div>
                @empty
                    <div style="color:#64748b;">
                        No active offers found.
                    </div>
                @endforelse
            </div>
        </section>

        {{-- Flags --}}
        <section class="create-card">
            <div class="create-card-header">
                Product Flags
            </div>

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

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

                            <label class="create-switch" for="flag{{ $flag->id }}"></label>
                        </div>
                    </div>
                @empty
                    <div style="color:#64748b;">
                        No product flags found.
                    </div>
                @endforelse
            </div>
        </section>

        {{-- Digital Product --}}
        <section class="create-card">
            <div class="create-card-header">
                Digital Product
            </div>

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

                    <input id="isDigital" class="create-switch-input" type="checkbox" name="is_digital" value="1"
                        @checked(old('is_digital'))>

                    <label class="create-switch" for="isDigital"></label>

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

                <div id="digitalSection" class="create-collapsible">
                    <div class="create-form-row">
                        <label class="create-label">
                            Digital File
                        </label>

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

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

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

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

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

        {{-- SEO --}}
        <section class="create-card">
            <div class="create-card-header">
                Product SEO
            </div>

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

                    <input id="seoEnabled" class="create-switch-input" type="checkbox" name="seo_enabled"
                        value="1" @checked(old('seo_enabled'))>

                    <label class="create-switch" for="seoEnabled"></label>

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

                <div id="seoSection" class="create-collapsible">
                    <div class="create-form-row">
                        <label class="create-label">
                            Meta Title
                        </label>

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

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

                        <input class="create-control" type="text" name="meta_keywords"
                            value="{{ old('meta_keywords') }}" placeholder="Comma-separated keywords">
                    </div>

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

                        <textarea class="create-control" name="meta_description">{{ old('meta_description') }}</textarea>
                    </div>

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

                        <input class="create-control" type="url" name="canonical_url"
                            value="{{ old('canonical_url') }}" placeholder="https://example.com/product">
                    </div>
                </div>
            </div>
        </section>
    </form>

    <template id="variantTemplate">
        <div class="create-variant-card">
            <div class="create-variant-header">
                <strong>
                    Variant #
                    <span class="variant-number"></span>
                </strong>

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

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

                    <input class="create-control variant-name" type="text" name="variants[__INDEX__][name]"
                        placeholder="Example: 500 gm" required>
                </div>

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

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

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

                    <select
                        class="
                        create-control
                        variant-attributes
                    "
                        name="variants[__INDEX__][attribute_value_ids][]" multiple style="min-height:95px;">
                        @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="create-field">
                    <label>Regular Price *</label>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const productForm = document.getElementById(
                'createProductForm'
            );

            /*
            |--------------------------------------------------------------------------
            | Product slug
            |--------------------------------------------------------------------------
            */

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

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

            let slugEditedManually = Boolean(
                productSlug.value.trim()
            );

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

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

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

            /*
            |--------------------------------------------------------------------------
            | Pre-order
            |--------------------------------------------------------------------------
            */

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

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

            function updatePreOrderSection() {
                preOrderMessageBox.style.display =
                    preOrderEnabled.checked ?
                    'block' :
                    'none';
            }

            preOrderEnabled.addEventListener(
                'change',
                updatePreOrderSection
            );

            updatePreOrderSection();

            /*
            |--------------------------------------------------------------------------
            | Product image preview
            |--------------------------------------------------------------------------
            */

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

                            const preview = box.querySelector(
                                '.create-upload-preview'
                            );

                            const placeholder = box.querySelector(
                                '.create-upload-placeholder'
                            );

                            if (!file) {
                                preview.src = '';
                                preview.style.display = 'none';

                                if (placeholder) {
                                    placeholder.style.display =
                                        'block';
                                }

                                return;
                            }

                            const reader = new FileReader();

                            reader.onload = function(event) {
                                preview.src = event.target.result;
                                preview.style.display = 'block';

                                if (placeholder) {
                                    placeholder.style.display =
                                        'none';
                                }
                            };

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

            /*
            |--------------------------------------------------------------------------
            | Product sale price
            |--------------------------------------------------------------------------
            */

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

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

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

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

            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
            );

            /*
            |--------------------------------------------------------------------------
            | Description editors
            |--------------------------------------------------------------------------
            */

            const editorOptions = {
                theme: 'snow',
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        ['link', 'image', 'video'],
                        [{
                            header: 1
                        }, {
                            header: 2
                        }],
                        [{
                            list: 'ordered'
                        }, {
                            list: 'bullet'
                        }],
                        [{
                            script: 'sub'
                        }, {
                            script: 'super'
                        }],
                        [{
                            indent: '-1'
                        }, {
                            indent: '+1'
                        }],
                        [{
                            align: []
                        }],
                        [{
                            color: []
                        }, {
                            background: []
                        }],
                        ['clean']
                    ]
                }
            };

            const shortEditor = new Quill(
                '#shortDescriptionEditor',
                editorOptions
            );

            const longEditor = new Quill(
                '#longDescriptionEditor',
                editorOptions
            );

            /*
            |--------------------------------------------------------------------------
            | Digital product and SEO
            |--------------------------------------------------------------------------
            */

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

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

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

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

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

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

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

            toggleSection(isDigital, digitalSection);
            toggleSection(seoEnabled, seoSection);

            /*
            |--------------------------------------------------------------------------
            | Product variants
            |--------------------------------------------------------------------------
            */

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

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

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

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

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

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

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

            const oldVariants = @json(old('variants', []));

            let variantIndex = 0;

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

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

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

            function setVariantInputsEnabled(enabled) {
                variantRows
                    .querySelectorAll(
                        'input, select, textarea'
                    )
                    .forEach(function(field) {
                        field.disabled = !enabled;
                    });
            }

            function registerDefaultVariant(
                defaultCheckbox
            ) {
                defaultCheckbox.addEventListener(
                    'change',
                    function() {
                        if (!this.checked) {
                            return;
                        }

                        variantRows
                            .querySelectorAll(
                                '.variant-default'
                            )
                            .forEach(function(checkbox) {
                                if (
                                    checkbox !==
                                    defaultCheckbox
                                ) {
                                    checkbox.checked = false;
                                }
                            });
                    }
                );
            }

            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-name',
                    data.name || ''
                );

                setValue(
                    card,
                    '.variant-sku',
                    data.sku || (
                        productSku.value +
                        '-' +
                        String(currentIndex + 1)
                        .padStart(2, '0')
                    )
                );

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

                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 || 5
                );

                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
                );

                registerDefaultVariant(
                    defaultCheckbox
                );

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

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

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

                const variantRegular = card.querySelector(
                    '.variant-regular-price'
                );

                const variantDiscountType = card.querySelector(
                    '.variant-discount-type'
                );

                const variantDiscountValue = card.querySelector(
                    '.variant-discount-value'
                );

                const variantSalePrice = card.querySelector(
                    '.variant-sale-price'
                );

                function calculateVariantSalePrice() {
                    const regular = Number(
                        variantRegular.value || 0
                    );

                    const discount = Number(
                        variantDiscountValue.value || 0
                    );

                    let calculated = regular;

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

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

                variantRegular.addEventListener(
                    'input',
                    calculateVariantSalePrice
                );

                variantDiscountType.addEventListener(
                    'change',
                    calculateVariantSalePrice
                );

                variantDiscountValue.addEventListener(
                    'input',
                    calculateVariantSalePrice
                );

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

                variantRows.appendChild(card);

                refreshVariantNumbers();
                setVariantInputsEnabled(
                    hasVariants.checked
                );
            }

            function toggleVariants() {
                variantSection.classList.toggle(
                    'show',
                    hasVariants.checked
                );

                baseStockQuantity.disabled =
                    hasVariants.checked;

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

                setVariantInputsEnabled(
                    hasVariants.checked
                );
            }

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

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

            hasVariants.addEventListener(
                'change',
                toggleVariants
            );

            toggleVariants();

            /*
            |--------------------------------------------------------------------------
            | Form submit
            |--------------------------------------------------------------------------
            */

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

                    document.getElementById(
                        'longDescriptionInput'
                    ).value = longEditor.root.innerHTML;
                }
            );
        });
    </script>
@endpush