@extends('layouts.admin')
@section('content')
@php($productTypes = [
    'shrimp' => 'Shrimp',
    'neocaridina' => 'Neocaridina',
    'caridina' => 'Caridina',
    'snails' => 'Snails',
    'plants' => 'Plants',
    'aquariums' => 'Aquariums',
    'accessories' => 'Accessories',
    'food' => 'Food',
    'treatments' => 'Treatments',
    'decor' => 'Decor',
    'spares' => 'Spares',
])
@php($difficultyLevels = [
    'Beginner',
    'Beginner-friendly',
    'Intermediate',
    'Advanced',
    'Expert',
])
@php($selectedDifficulty = old('difficulty_level', $product->difficulty_level))
@php($selectedProductType = old('product_type', $product->product_type))
@php($selectedCategoryId = (int) old('category_id', $product->category_id))
@php($selectedCategory = $categories->firstWhere('id', $selectedCategoryId))
@php($selectedCategorySlug = $selectedCategory?->slug)
@php($usesProfileFields = in_array($selectedProductType, ['shrimp', 'neocaridina', 'caridina', 'snails'], true))
@php($usesLivestockFields = in_array($selectedProductType, ['shrimp', 'neocaridina', 'caridina', 'snails'], true))
@php($usesDifficultyFields = $usesProfileFields || $selectedCategorySlug === 'live-plants')
@php($usesDimensions = ! in_array($selectedProductType, ['shrimp', 'neocaridina', 'caridina', 'snails', 'starter_kits'], true))
@php($forcesNonReturnable = old('is_live_stock', $product->is_live_stock) || $selectedProductType === 'plants')
@php($isStarterKit = old('product_type', $product->product_type) === 'starter_kits')
@php($autoDefaultCompatibilities = $usesProfileFields && empty(old('compatibility_levels')) && empty($compatibilityMap))
@php($selectedKitProducts = collect(old('kit_products', $product->meta['kit_product_ids'] ?? []))->map(fn ($id) => (int) $id)->all())
@php($groupedCategories = $categories->groupBy(fn ($category) => $category->parent?->name ?? $category->name))
@if($selectedProductType === 'starter_kits')
    @php($productTypes['starter_kits'] = 'Starter Kits')
@endif
@once
    @push('styles')
    <style>
        .html-editor {
            border: 1px solid rgba(16,33,41,.12);
            border-radius: 1rem;
            overflow: hidden;
            background: #fff;
        }
        .html-editor-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            padding: .75rem;
            background: rgba(4,39,58,.04);
            border-bottom: 1px solid rgba(16,33,41,.08);
        }
        .html-editor-toolbar button {
            border: 1px solid rgba(16,33,41,.14);
            background: #fff;
            border-radius: .75rem;
            padding: .4rem .7rem;
            font-size: .875rem;
            line-height: 1;
        }
        .html-editor textarea {
            border: 0;
            border-radius: 0;
        }
    </style>
    @endpush
@endonce
<div class="admin-toolbar">
    <div>
        <h1 class="h3 mb-1">{{ $product->exists ? 'Edit product' : 'Create product' }}</h1>
        <div class="small text-muted">Catalogue, livestock data, compatibility guidance, and media are all managed from here.</div>
    </div>
    @if($product->exists)
        <form method="post" action="{{ route('admin.products.destroy', $product) }}" onsubmit="return confirm('Delete this product?');">
            @csrf
            @method('DELETE')
            <button class="btn admin-btn admin-btn-danger"><i class="fa-solid fa-trash"></i><span>Delete product</span></button>
        </form>
    @endif
</div>

<form method="post" enctype="multipart/form-data" action="{{ $product->exists ? route('admin.products.update',$product) : route('admin.products.store') }}" class="row g-4 admin-form-grid">
    @csrf
    @if($product->exists)
        @method('PUT')
    @endif

    <div class="col-12">
        <div class="card admin-card">
            <div class="card-body p-4">
                <div class="admin-section-title">Core product details</div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label" for="product_name">Product name</label>
                        <input id="product_name" name="name" value="{{ old('name',$product->name) }}" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="product_sku">SKU</label>
                        <input id="product_sku" name="sku" value="{{ old('sku',$product->sku) }}" class="form-control" data-autofill="{{ $product->exists ? 'false' : 'true' }}">
                        <div class="form-text">Auto generates, but can be modified.</div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="product_slug">Slug</label>
                        <input id="product_slug" name="slug" value="{{ old('slug',$product->slug) }}" class="form-control" data-autofill="{{ $product->exists ? 'false' : 'true' }}">
                        <div class="form-text">Auto generates, but can be modified.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="category_id">Category</label>
                        <select id="category_id" name="category_id" class="form-select">
                            <option value="">Select category</option>
                            @foreach($groupedCategories as $groupLabel => $groupCategories)
                                <optgroup label="{{ $groupLabel }}">
                                    @foreach($groupCategories as $category)
                                        @php($parentLabel = $category->parent?->slug === 'health-nutrition' ? 'Feeds' : $category->parent?->name)
                                        @php($currentLabel = $category->slug === 'health-nutrition' ? 'Feeds' : $category->name)
                                        @php($categoryLabel = $category->parent ? $parentLabel.' > '.$currentLabel : $currentLabel)
                                        <option value="{{ $category->id }}" data-category-slug="{{ $category->slug }}" @selected(old('category_id',$product->category_id)==$category->id)>{{ $categoryLabel }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="product_type">Product type</label>
                        <select id="product_type" name="product_type" class="form-select">
                            <option value="">Select product type</option>
                            @foreach($productTypes as $value => $label)
                                <option value="{{ $value }}" @selected(old('product_type', $product->product_type) === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" for="product_price">Price</label>
                        <input id="product_price" name="price" value="{{ old('price',$product->price) }}" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" for="sale_price">Sale price</label>
                        <input id="sale_price" name="sale_price" value="{{ old('sale_price',$product->sale_price) }}" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="stock_quantity">Stock quantity</label>
                        <input id="stock_quantity" name="stock_quantity" value="{{ old('stock_quantity',$product->stock_quantity) }}" class="form-control">
                    </div>
                    <div class="col-md-3" data-product-section="difficulty-only" @if(! $usesDifficultyFields) style="display:none" @endif>
                        <label class="form-label" for="difficulty_level">Difficulty level</label>
                        <select id="difficulty_level" name="difficulty_level" class="form-select">
                            <option value="">Select difficulty</option>
                            @foreach($difficultyLevels as $difficulty)
                                <option value="{{ $difficulty }}" @selected($selectedDifficulty === $difficulty)>{{ $difficulty }}</option>
                            @endforeach
                            @if($selectedDifficulty && ! in_array($selectedDifficulty, $difficultyLevels, true))
                                <option value="{{ $selectedDifficulty }}" selected>{{ $selectedDifficulty }}</option>
                            @endif
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="weight_grams">Weight (g)</label>
                        <input id="weight_grams" name="weight_grams" value="{{ old('weight_grams',$product->weight_grams) }}" class="form-control">
                    </div>
                    <div class="col-md-3" data-product-section="dimensions-only" @if(! $usesDimensions) style="display:none" @endif>
                        <label class="form-label" for="width_cm">Width (cm)</label>
                        <input id="width_cm" name="width_cm" value="{{ old('width_cm',$product->width_cm) }}" class="form-control">
                    </div>
                    <div class="col-md-3" data-product-section="dimensions-only" @if(! $usesDimensions) style="display:none" @endif>
                        <label class="form-label" for="height_cm">Height (cm)</label>
                        <input id="height_cm" name="height_cm" value="{{ old('height_cm',$product->height_cm) }}" class="form-control">
                    </div>
                    <div class="col-md-3" data-product-section="dimensions-only" @if(! $usesDimensions) style="display:none" @endif>
                        <label class="form-label" for="depth_cm">Depth (cm)</label>
                        <input id="depth_cm" name="depth_cm" value="{{ old('depth_cm',$product->depth_cm) }}" class="form-control">
                    </div>
                    <div class="col-md-3 d-flex flex-column justify-content-end gap-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_visible" value="1" id="isVisible" @checked(old('is_visible',$product->is_visible ?? true))>
                            <label class="form-check-label" for="isVisible">Visible in store</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_featured" value="1" id="isFeatured" @checked(old('is_featured',$product->is_featured))>
                            <label class="form-check-label" for="isFeatured">Feature on homepage</label>
                        </div>
                    </div>
                    <div class="col-md-3 d-flex flex-column justify-content-end gap-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_live_stock" value="1" id="isLiveStock" @checked(old('is_live_stock',$product->is_live_stock))>
                            <label class="form-check-label" for="isLiveStock">Live stock item</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="allow_backorders" value="1" id="allowBackorders" @checked(old('allow_backorders',$product->allow_backorders))>
                            <label class="form-check-label" for="allowBackorders">Allow backorders</label>
                        </div>
                    </div>
                    <div class="col-md-3 d-flex flex-column justify-content-end gap-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="requires_hot_pack" value="1" id="requiresHotPack" @checked(old('requires_hot_pack',$product->requires_hot_pack))>
                            <label class="form-check-label" for="requiresHotPack">Requires hot pack</label>
                        </div>
                        <div class="form-check" data-product-section="returnable-only" @if($forcesNonReturnable) style="display:none" @endif>
                            <input class="form-check-input" type="checkbox" name="is_returnable" value="1" id="isReturnable" @checked(old('is_returnable', $product->exists ? $product->is_returnable : true))>
                            <label class="form-check-label" for="isReturnable">Returnable item</label>
                        </div>
                        <div class="small text-muted">Maximum 4 featured products can appear on the homepage.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12" data-product-section="general-copy">
        <div class="card admin-card h-100">
            <div class="card-body p-4">
                <div class="admin-section-title">Descriptions and care content</div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label" for="short_description">Short description</label>
                        <div class="html-editor">
                            <div class="html-editor-toolbar">
                                <button type="button" data-editor-target="short_description" data-wrap-tag="strong">Bold</button>
                                <button type="button" data-editor-target="short_description" data-wrap-tag="em">Italic</button>
                                <button type="button" data-editor-target="short_description" data-prefix="<br>">Line break</button>
                                <button type="button" data-editor-target="short_description" data-prefix="<ul>\n  <li>" data-suffix="</li>\n  <li></li>\n</ul>">Bullets</button>
                                <button type="button" data-editor-target="short_description" data-prefix="<p>" data-suffix="</p>">Paragraph</button>
                            </div>
                            <textarea id="short_description" name="short_description" class="form-control" rows="3">{{ old('short_description',$product->short_description) }}</textarea>
                        </div>
                        <div class="form-text">HTML is allowed here. Use the toolbar for quick formatting like line breaks and bullet lists.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="description">Full description</label>
                        <div class="html-editor">
                            <div class="html-editor-toolbar">
                                <button type="button" data-editor-target="description" data-wrap-tag="strong">Bold</button>
                                <button type="button" data-editor-target="description" data-wrap-tag="em">Italic</button>
                                <button type="button" data-editor-target="description" data-prefix="<br>">Line break</button>
                                <button type="button" data-editor-target="description" data-prefix="<p>" data-suffix="</p>">Paragraph</button>
                                <button type="button" data-editor-target="description" data-prefix="<h3>" data-suffix="</h3>">Heading</button>
                                <button type="button" data-editor-target="description" data-prefix="<ul>\n  <li>" data-suffix="</li>\n  <li></li>\n</ul>">Bullets</button>
                            </div>
                            <textarea id="description" name="description" class="form-control" rows="8">{{ old('description',$product->description) }}</textarea>
                        </div>
                        <div class="form-text">Supports basic HTML. Frontend output now keeps your paragraphs, lists, and line breaks.</div>
                    </div>
                    <div class="col-12" data-product-section="livestock-only" @if(! $usesLivestockFields) style="display:none" @endif>
                        <label class="form-label" for="care_notes">Care notes</label>
                        <textarea id="care_notes" name="care_notes" class="form-control" rows="3">{{ old('care_notes',$product->care_notes) }}</textarea>
                    </div>
                    <div class="col-12" data-product-section="livestock-only" @if(! $usesLivestockFields) style="display:none" @endif>
                        <label class="form-label" for="compatibility_notes">Compatibility notes</label>
                        <textarea id="compatibility_notes" name="compatibility_notes" class="form-control" rows="3">{{ old('compatibility_notes',$product->compatibility_notes) }}</textarea>
                    </div>
                    <div class="col-12" data-product-section="livestock-only" @if(! $usesLivestockFields) style="display:none" @endif>
                        <label class="form-label" for="shipping_notes">Shipping notes</label>
                        <textarea id="shipping_notes" name="shipping_notes" class="form-control" rows="2">{{ old('shipping_notes',$product->shipping_notes) }}</textarea>
                    </div>
                    <div class="col-md-6" data-product-section="livestock-only" @if(! $usesLivestockFields) style="display:none" @endif>
                        <label class="form-label" for="temperament">Temperament / behaviour</label>
                        <input id="temperament" name="temperament" value="{{ old('temperament',$product->temperament) }}" class="form-control">
                    </div>
                    <div class="col-md-6" data-product-section="livestock-only" @if(! $usesLivestockFields) style="display:none" @endif>
                        <label class="form-label" for="ideal_tank_mates">Ideal tank mates</label>
                        <input id="ideal_tank_mates" name="ideal_tank_mates" value="{{ old('ideal_tank_mates',$product->ideal_tank_mates) }}" class="form-control">
                    </div>
                    <div class="col-12" data-product-section="livestock-only" @if(! $usesLivestockFields) style="display:none" @endif>
                        <label class="form-label" for="unsafe_tank_mates">Unsafe tank mates</label>
                        <textarea id="unsafe_tank_mates" name="unsafe_tank_mates" class="form-control" rows="2">{{ old('unsafe_tank_mates',$product->unsafe_tank_mates) }}</textarea>
                    </div>
                    <div class="col-12" data-product-section="livestock-only" @if(! $usesLivestockFields) style="display:none" @endif>
                        <label class="form-label" for="breeding_notes">Breeding notes</label>
                        <textarea id="breeding_notes" name="breeding_notes" class="form-control" rows="2">{{ old('breeding_notes',$product->breeding_notes) }}</textarea>
                    </div>
                    <div class="col-12" data-product-section="profile-only" @if(! $usesProfileFields) style="display:none" @endif>
                        <label class="form-label" for="parameter_target_notes">Water parameter target notes</label>
                        <textarea id="parameter_target_notes" name="parameter_target_notes" class="form-control" rows="2">{{ old('parameter_target_notes',$product->parameter_target_notes) }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12" data-product-section="profile-only" @if(! $usesProfileFields) style="display:none" @endif>
        <div class="card admin-card h-100">
            <div class="card-body p-4">
                <div class="admin-section-title">Water parameter profile</div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label" for="ph_min">pH minimum</label>
                        <input id="ph_min" name="ph_min" value="{{ old('ph_min',$product->ph_min) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="ph_max">pH maximum</label>
                        <input id="ph_max" name="ph_max" value="{{ old('ph_max',$product->ph_max) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="gh_min">GH minimum</label>
                        <input id="gh_min" name="gh_min" value="{{ old('gh_min',$product->gh_min) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="gh_max">GH maximum</label>
                        <input id="gh_max" name="gh_max" value="{{ old('gh_max',$product->gh_max) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="kh_min">KH minimum</label>
                        <input id="kh_min" name="kh_min" value="{{ old('kh_min',$product->kh_min) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="kh_max">KH maximum</label>
                        <input id="kh_max" name="kh_max" value="{{ old('kh_max',$product->kh_max) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="tds_min">TDS minimum</label>
                        <input id="tds_min" name="tds_min" value="{{ old('tds_min',$product->tds_min) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="tds_max">TDS maximum</label>
                        <input id="tds_max" name="tds_max" value="{{ old('tds_max',$product->tds_max) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="temperature_min">Temperature minimum</label>
                        <input id="temperature_min" name="temperature_min" value="{{ old('temperature_min',$product->temperature_min) }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="temperature_max">Temperature maximum</label>
                        <input id="temperature_max" name="temperature_max" value="{{ old('temperature_max',$product->temperature_max) }}" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12" data-product-section="profile-only" @if(! $usesProfileFields) style="display:none" @endif>
        <div class="card admin-card">
            <div class="card-body p-4">
                <div class="admin-section-title">Fish compatibility matrix</div>
                <div class="table-responsive border rounded-4">
                    <table class="table table-sm align-middle mb-0">
                        <thead><tr><th>Fish species</th><th>Compatibility level</th><th>Admin notes</th></tr></thead>
                        <tbody>
                            @foreach($fishSpecies as $fish)
                                @php($entry = $compatibilityMap[$fish->id] ?? null)
                                @php($defaultCompatibility = $autoDefaultCompatibilities ? $fish->shrimp_safety_rating : '')
                                @php($selectedCompatibility = old("compatibility_levels.$fish->id", $entry['compatibility_level'] ?? $defaultCompatibility))
                                <tr>
                                    <td>{{ $fish->common_name }}</td>
                                    <td>
                                        <select
                                            name="compatibility_levels[{{ $fish->id }}]"
                                            class="form-select form-select-sm"
                                            data-default-rating="{{ $fish->shrimp_safety_rating }}"
                                            data-has-saved="{{ $entry ? 'true' : 'false' }}"
                                        >
                                            <option value="">Not assigned</option>
                                            @foreach(['safe','mostly_safe','caution','may_eat_shrimplets','may_eat_shrimp','unsafe'] as $level)
                                                <option value="{{ $level }}" @selected($selectedCompatibility === $level)>{{ str_replace('_',' ',$level) }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input name="compatibility_notes_map[{{ $fish->id }}]" value="{{ old("compatibility_notes_map.$fish->id", $entry['notes'] ?? '') }}" class="form-control form-control-sm"></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12" data-product-section="profile-only" @if(! $usesProfileFields) style="display:none" @endif>
        <div class="card admin-card">
            <div class="card-body p-4">
                <div class="admin-section-title">Snail compatibility matrix</div>
                <div class="table-responsive border rounded-4">
                    <table class="table table-sm align-middle mb-0">
                        <thead><tr><th>Snail species</th><th>Compatibility level</th><th>Admin notes</th></tr></thead>
                        <tbody>
                            @foreach($snailSpecies as $snail)
                                @php($entry = $snailCompatibilityMap[$snail->id] ?? null)
                                @php($defaultCompatibility = $autoDefaultCompatibilities ? $snail->compatibility_rating : '')
                                @php($selectedCompatibility = old("snail_compatibility_levels.$snail->id", $entry['compatibility_level'] ?? $defaultCompatibility))
                                <tr>
                                    <td>{{ $snail->common_name }}</td>
                                    <td>
                                        <select
                                            name="snail_compatibility_levels[{{ $snail->id }}]"
                                            class="form-select form-select-sm"
                                            data-default-rating="{{ $snail->compatibility_rating }}"
                                            data-has-saved="{{ $entry ? 'true' : 'false' }}"
                                            data-compatibility-type="snail"
                                        >
                                            <option value="">Not assigned</option>
                                            @foreach(['safe','mostly_safe','caution','may_eat_shrimplets','may_eat_shrimp','unsafe'] as $level)
                                                <option value="{{ $level }}" @selected($selectedCompatibility === $level)>{{ str_replace('_',' ',$level) }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input name="snail_compatibility_notes_map[{{ $snail->id }}]" value="{{ old("snail_compatibility_notes_map.$snail->id", $entry['notes'] ?? '') }}" class="form-control form-control-sm"></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12" data-product-section="starter-kit-only" @if(! $isStarterKit) style="display:none" @endif>
        <div class="card admin-card">
            <div class="card-body p-4">
                <div class="admin-section-title">Starter kit contents</div>
                <div class="row g-3">
                    <div class="col-md-12">
                        <label class="form-label" for="kit_savings_text">Savings message</label>
                        <input id="kit_savings_text" name="kit_savings_text" value="{{ old('kit_savings_text', $product->meta['kit_savings_text'] ?? '') }}" class="form-control" placeholder="e.g. Save compared with buying separately">
                        <div class="form-text">Savings are calculated automatically from the total of the included products minus this kit&apos;s own price.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Products included in this kit</label>
                        <div class="row g-3">
                            @foreach($kitProducts as $kitProduct)
                                <div class="col-md-6 col-xl-4">
                                    <label class="border rounded-4 p-3 d-flex gap-2 align-items-start h-100">
                                        <input type="checkbox" name="kit_products[]" value="{{ $kitProduct->id }}" @checked(in_array($kitProduct->id, $selectedKitProducts, true))>
                                        <span>
                                            <strong class="d-block">{{ $kitProduct->name }}</strong>
                                            <span class="small text-muted d-block">{{ $kitProduct->category?->name ?: 'Uncategorised' }}</span>
                                            <span class="small text-muted">@money($kitProduct->current_price)</span>
                                        </span>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card admin-card">
            <div class="card-body p-4">
                <div class="admin-section-title">Product images</div>
                <div class="small text-muted mb-3">Upload new images here. Existing image management is shown below once the product has been saved.</div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label" for="images">Upload images</label>
                        <input id="images" type="file" name="images[]" class="form-control" multiple accept=".jpg,.jpeg,.png,.webp">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 d-flex flex-wrap gap-2">
        <button class="btn admin-btn admin-btn-primary"><i class="fa-solid fa-floppy-disk"></i><span>Save product</span></button>
        <a href="{{ route('admin.products.index') }}" class="btn admin-btn admin-btn-secondary"><i class="fa-solid fa-arrow-left"></i><span>Back to products</span></a>
    </div>
</form>

@if($product->exists && $product->images->count())
    <div class="row g-4 mt-1">
        <div class="col-12">
            <div class="card admin-card">
                <div class="card-body p-4">
                    <div class="admin-section-title">Existing uploaded images</div>
                    <div class="small text-muted mb-3">Sort order controls gallery position, and the primary image is the main storefront photo.</div>
                    <div class="row g-3">
                        @foreach($product->images as $image)
                            <div class="col-6 col-md-3">
                                <div class="border rounded-4 p-2 h-100">
                                    <img src="{{ asset('storage/'.$image->path) }}" class="img-fluid rounded-3 border mb-2" alt="{{ $image->alt_text }}">
                                    <form method="post" action="{{ route('admin.product-images.update',$image) }}" class="mb-2">
                                        @csrf
                                        @method('PUT')
                                        <label class="form-label" for="sort_order_{{ $image->id }}">Sort order</label>
                                        <input id="sort_order_{{ $image->id }}" type="number" name="sort_order" value="{{ $image->sort_order }}" class="form-control form-control-sm mb-2">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="is_primary" value="1" id="primary{{ $image->id }}" @checked($image->is_primary)>
                                            <label class="form-check-label small" for="primary{{ $image->id }}">Primary image</label>
                                        </div>
                                        <button class="btn admin-btn admin-btn-secondary admin-btn-sm w-100"><i class="fa-solid fa-image"></i><span>Update image</span></button>
                                    </form>
                                    <form method="post" action="{{ route('admin.product-images.destroy',$image) }}" onsubmit="return confirm('Delete this image?');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn admin-btn admin-btn-danger admin-btn-sm w-100"><i class="fa-solid fa-trash"></i><span>Delete image</span></button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

@push('scripts')
<script>
    (() => {
        const nameInput = document.getElementById('product_name');
        const slugInput = document.getElementById('product_slug');
        const skuInput = document.getElementById('product_sku');
        const productTypeInput = document.getElementById('product_type');
        const categoryInput = document.getElementById('category_id');
        const liveStockInput = document.getElementById('isLiveStock');
        const returnableInput = document.getElementById('isReturnable');
        const compatibilityInputs = Array.from(document.querySelectorAll('select[data-default-rating]'));
        const profileSections = Array.from(document.querySelectorAll('[data-product-section="profile-only"]'));
        const livestockSections = Array.from(document.querySelectorAll('[data-product-section="livestock-only"]'));
        const starterKitSections = Array.from(document.querySelectorAll('[data-product-section="starter-kit-only"]'));
        const difficultySections = Array.from(document.querySelectorAll('[data-product-section="difficulty-only"]'));
        const dimensionSections = Array.from(document.querySelectorAll('[data-product-section="dimensions-only"]'));
        const returnableSections = Array.from(document.querySelectorAll('[data-product-section="returnable-only"]'));
        const editorButtons = Array.from(document.querySelectorAll('[data-editor-target]'));

        if (!nameInput || !slugInput || !skuInput || !productTypeInput || !categoryInput) {
            return;
        }

        const insertAtCursor = (textarea, before = '', after = '') => {
            const start = textarea.selectionStart ?? textarea.value.length;
            const end = textarea.selectionEnd ?? textarea.value.length;
            const selected = textarea.value.slice(start, end);
            const replacement = before + selected + after;

            textarea.value = textarea.value.slice(0, start) + replacement + textarea.value.slice(end);
            textarea.focus();

            const cursorOffset = selected.length ? replacement.length : before.length;
            const nextPosition = start + cursorOffset;
            textarea.setSelectionRange(nextPosition, nextPosition);
            textarea.dispatchEvent(new Event('input', { bubbles: true }));
        };

        editorButtons.forEach((button) => {
            button.addEventListener('click', () => {
                const textarea = document.getElementById(button.dataset.editorTarget || '');

                if (!textarea) {
                    return;
                }

                if (button.dataset.wrapTag) {
                    insertAtCursor(textarea, `<${button.dataset.wrapTag}>`, `</${button.dataset.wrapTag}>`);
                    return;
                }

                insertAtCursor(textarea, button.dataset.prefix || '', button.dataset.suffix || '');
            });
        });

        const profileTypes = new Set(['shrimp', 'neocaridina', 'caridina', 'snails']);
        const livestockTypes = new Set(['shrimp', 'neocaridina', 'caridina', 'snails']);
        const starterKitType = 'starter_kits';
        const dimensionlessTypes = new Set(['shrimp', 'neocaridina', 'caridina', 'snails', 'starter_kits']);

        const selectedCategorySlug = () => categoryInput.selectedOptions[0]?.dataset.categorySlug || '';

        const slugify = (value) => value
            .toLowerCase()
            .trim()
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/^-+|-+$/g, '')
            .replace(/-{2,}/g, '-');

        const skuify = (value) => {
            const parts = value
                .toUpperCase()
                .replace(/[^A-Z0-9 ]+/g, ' ')
                .trim()
                .split(/\s+/)
                .filter(Boolean)
                .slice(0, 3)
                .map((part) => part.slice(0, 4));

            return parts.join('-');
        };

        const isAutoFillEnabled = (input) => input.dataset.autofill === 'true';

        const setManualIfEdited = (input) => {
            input.addEventListener('input', () => {
                input.dataset.autofill = 'false';
            });
        };

        const refreshGeneratedFields = () => {
            if (isAutoFillEnabled(slugInput)) {
                slugInput.value = slugify(nameInput.value);
            }

            if (isAutoFillEnabled(skuInput)) {
                skuInput.value = skuify(nameInput.value);
            }
        };

        const applyCompatibilityDefaults = () => {
            if (!profileTypes.has(productTypeInput.value)) {
                return;
            }

            compatibilityInputs.forEach((input) => {
                const hasSavedValue = input.dataset.hasSaved === 'true';
                const hasCurrentValue = input.value !== '';

                if (hasSavedValue || hasCurrentValue) {
                    return;
                }

                input.value = input.dataset.defaultRating || '';
            });
        };

        const toggleSections = () => {
            const categorySlug = selectedCategorySlug();
            const usesProfile = profileTypes.has(productTypeInput.value);
            const usesLivestock = livestockTypes.has(productTypeInput.value);
            const isStarterKit = productTypeInput.value === starterKitType;
            const usesDifficulty = usesProfile || categorySlug === 'live-plants';
            const usesDimensions = !dimensionlessTypes.has(productTypeInput.value);
            const forcesNonReturnable = !!liveStockInput?.checked || productTypeInput.value === 'plants';

            profileSections.forEach((section) => {
                section.style.display = usesProfile ? '' : 'none';
            });

            livestockSections.forEach((section) => {
                section.style.display = usesLivestock ? '' : 'none';
            });

            starterKitSections.forEach((section) => {
                section.style.display = isStarterKit ? '' : 'none';
            });

            difficultySections.forEach((section) => {
                section.style.display = usesDifficulty ? '' : 'none';
            });

            dimensionSections.forEach((section) => {
                section.style.display = usesDimensions ? '' : 'none';
            });

            returnableSections.forEach((section) => {
                section.style.display = forcesNonReturnable ? 'none' : '';
            });

            if (forcesNonReturnable && returnableInput) {
                returnableInput.checked = false;
            }
        };

        setManualIfEdited(slugInput);
        setManualIfEdited(skuInput);

        nameInput.addEventListener('input', refreshGeneratedFields);
        productTypeInput.addEventListener('change', () => {
            toggleSections();
            applyCompatibilityDefaults();
        });
        categoryInput.addEventListener('change', toggleSections);
        liveStockInput?.addEventListener('change', toggleSections);

        refreshGeneratedFields();
        toggleSections();
        applyCompatibilityDefaults();
    })();
</script>
@endpush