@include('admin.header', [
    'title' => $product->exists ? 'Edit Product' : 'Add Product',
    'active' => 'products',
    'searchPlaceholder' => 'Search products, MOQ, specifications...'
])

<section class="page-hero mb-3">
    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
        <div>
            <h1 class="page-title mb-2">{{ $product->exists ? 'Edit Product' : 'Add Product' }}</h1>
            <p class="mb-0 text-secondary">Active, non-archived products appear on the public website.</p>
        </div>
        <a class="btn-outline-earth" href="{{ route('admin.products.index') }}"><i class="bi bi-arrow-left"></i> Back</a>
    </div>
</section>

<form class="content-card" method="POST" action="{{ $product->exists ? route('admin.products.update', $product) : route('admin.products.store') }}" enctype="multipart/form-data">
    @csrf
    @if ($product->exists)
        @method('PATCH')
    @endif

    <div class="card-head">
        <h2 class="card-title"><span class="title-icon"><i class="bi bi-box-seam-fill"></i></span>Product Details</h2>
    </div>
    <div class="card-body-pad">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-bold" for="name">Product Name</label>
                <select class="form-select @error('name') is-invalid @enderror" id="name" name="name" required>
                    <option value="">Select product</option>
                    @foreach ($catalogProducts as $value => $label)
                        <option value="{{ $label }}" @selected(old('name', $product->name) === $label)>{{ $label }}</option>
                    @endforeach
                    @if ($product->exists && $product->name && ! in_array($product->name, $catalogProducts, true))
                        <option value="{{ $product->name }}" @selected(old('name', $product->name) === $product->name)>{{ $product->name }} (existing)</option>
                    @endif
                </select>
                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold" for="slug">Slug</label>
                <input class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" value="{{ old('slug', $product->slug) }}" placeholder="Auto-generated when blank">
                @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-12">
                <label class="form-label fw-bold" for="description">Description</label>
                <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="5">{{ old('description', $product->description) }}</textarea>
                @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4">
                <label class="form-label fw-bold" for="moq">MOQ</label>
                <input class="form-control @error('moq') is-invalid @enderror" id="moq" name="moq" value="{{ old('moq', $product->moq) }}">
                @error('moq')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4">
                <label class="form-label fw-bold" for="status">Status</label>
                <select class="form-select @error('status') is-invalid @enderror" id="status" name="status">
                    <option value="active" @selected(old('status', $product->status) === 'active')>Active</option>
                    <option value="inactive" @selected(old('status', $product->status) === 'inactive')>Inactive</option>
                </select>
                @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4">
                <label class="form-label fw-bold" for="sort_order">Sort Order</label>
                <input class="form-control @error('sort_order') is-invalid @enderror" id="sort_order" name="sort_order" type="number" min="0" value="{{ old('sort_order', $product->sort_order ?? 0) }}">
                @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-12">
                <label class="form-label fw-bold" for="images">Product Images</label>
                <input class="form-control @error('images.*') is-invalid @enderror" id="images" name="images[]" type="file" accept="image/*" multiple>
                @error('images.*')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                @if ($product->images)
                    <div class="d-flex flex-wrap gap-3 mt-3">
                        @foreach ($product->images as $image)
                            <label class="border rounded p-2 bg-white">
                                <img src="{{ Storage::disk('public')->url($image) }}" alt="Product image" style="width:92px;height:72px;object-fit:cover" class="d-block mb-2 rounded">
                                <input type="checkbox" name="remove_images[]" value="{{ $image }}"> Remove
                            </label>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <hr>

        @php
            $catalogProductTypes = array_flip($catalogProducts);
            $selectedBatchIds = collect(old('existing_batch_ids', $product->exists ? $product->availableBatches()->pluck('id')->all() : []))
                ->map(fn ($id) => (string) $id)
                ->all();
        @endphp
        <h3 class="h6 fw-bold">Batch Connection</h3>
        <p class="text-secondary small mb-3">Choose one or more available batches to connect this product with batch-wise lab reports. Sold-out batches are kept in history and hidden from this dropdown.</p>
        <div class="row g-3 mb-3">
            <div class="col-12">
                <label class="form-label fw-bold" for="existing_batch_ids">Existing Available Batches</label>
                <select class="form-select @error('existing_batch_ids') is-invalid @enderror @error('existing_batch_ids.*') is-invalid @enderror" id="existing_batch_ids" name="existing_batch_ids[]" multiple size="6">
                    @foreach ($availableBatches as $batch)
                        <option
                            value="{{ $batch->id }}"
                            data-batch-number="{{ $batch->batch_number }}"
                            data-product-type="{{ $batch->product_type }}"
                            data-title="{{ $batch->title ?: $batch->productLabel() }}"
                            data-initial="{{ number_format((float) $batch->initial_quantity, 2) }}"
                            data-remaining="{{ number_format((float) $batch->remaining_quantity, 2) }}"
                            data-unit="{{ $batch->quantity_unit }}"
                            data-date="{{ optional($batch->production_date)->format('d M Y') ?: 'Not set' }}"
                            @selected(in_array((string) $batch->id, $selectedBatchIds, true))
                        >
                            {{ $batch->batch_number }} - {{ $batch->title ?: $batch->productLabel() }} - {{ number_format((float) $batch->remaining_quantity, 2) }} {{ $batch->quantity_unit }}
                        </option>
                    @endforeach
                </select>
                @error('existing_batch_ids')<div class="invalid-feedback">{{ $message }}</div>@enderror
                @error('existing_batch_ids.*')<div class="invalid-feedback">{{ $message }}</div>@enderror
                @if ($availableBatches->isEmpty())
                    <div class="form-text">No unlinked available batches right now. Create one from Batch Lab Reports first.</div>
                @else
                    <div class="form-text" id="batch-filter-help">Select a product name to show matching available batches.</div>
                @endif
            </div>
        </div>

        <div class="border rounded bg-white p-3 mb-3 d-none" id="selected-batch-card">
            <div class="text-uppercase text-secondary small fw-bold mb-2">Selected Batches</div>
            <div class="row g-2" id="selected-batch-list"></div>
        </div>

        <hr>

        <h3 class="h6 fw-bold">Specifications</h3>
        @php($specs = old('specifications', $product->specificationRows() ?: [['label' => '', 'value' => ''], ['label' => '', 'value' => ''], ['label' => '', 'value' => '']]))
        <div class="row g-2 mb-3">
            @foreach ($specs as $index => $row)
                <div class="col-md-6">
                    <input class="form-control" name="specifications[{{ $index }}][label]" value="{{ $row['label'] ?? '' }}" placeholder="Label">
                </div>
                <div class="col-md-6">
                    <input class="form-control" name="specifications[{{ $index }}][value]" value="{{ $row['value'] ?? '' }}" placeholder="Value">
                </div>
            @endforeach
        </div>

        <h3 class="h6 fw-bold">Packaging Details</h3>
        @php($packs = old('packaging_details', $product->packagingRows() ?: [['label' => '', 'value' => ''], ['label' => '', 'value' => ''], ['label' => '', 'value' => '']]))
        <div class="row g-2 mb-3">
            @foreach ($packs as $index => $row)
                <div class="col-md-6">
                    <input class="form-control" name="packaging_details[{{ $index }}][label]" value="{{ $row['label'] ?? '' }}" placeholder="Label">
                </div>
                <div class="col-md-6">
                    <input class="form-control" name="packaging_details[{{ $index }}][value]" value="{{ $row['value'] ?? '' }}" placeholder="Value">
                </div>
            @endforeach
        </div>

        <hr>

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-bold" for="seo_title">SEO Title</label>
                <input class="form-control @error('seo_title') is-invalid @enderror" id="seo_title" name="seo_title" value="{{ old('seo_title', $product->seo_title) }}">
                @error('seo_title')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold" for="seo_description">SEO Description</label>
                <input class="form-control @error('seo_description') is-invalid @enderror" id="seo_description" name="seo_description" value="{{ old('seo_description', $product->seo_description) }}">
                @error('seo_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="d-flex gap-2 mt-4">
            <button class="btn-earth" type="submit"><i class="bi bi-save"></i> Save Product</button>
            <a class="btn-outline-earth" href="{{ route('admin.products.index') }}">Cancel</a>
        </div>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const productName = document.getElementById('name');
    const select = document.getElementById('existing_batch_ids');
    const card = document.getElementById('selected-batch-card');
    const list = document.getElementById('selected-batch-list');
    const help = document.getElementById('batch-filter-help');
    const productTypes = @json($catalogProductTypes);

    if (! productName || ! select || ! card || ! list) {
        return;
    }

    const detailLine = (label, value) => {
        const row = document.createElement('div');
        row.className = 'd-flex justify-content-between gap-3 border-top pt-2 mt-2 small';

        const labelEl = document.createElement('span');
        labelEl.className = 'text-secondary fw-bold';
        labelEl.textContent = label;

        const valueEl = document.createElement('span');
        valueEl.className = 'fw-semibold text-end';
        valueEl.textContent = value;

        row.append(labelEl, valueEl);

        return row;
    };

    const filterBatchOptions = () => {
        const selectedType = productTypes[productName.value] || '';
        let visibleCount = 0;

        Array.from(select.options).forEach((option) => {
            const matches = selectedType && option.dataset.productType === selectedType;
            option.hidden = ! matches;
            option.disabled = ! matches;

            if (! matches) {
                option.selected = false;
            } else {
                visibleCount++;
            }
        });

        if (help) {
            if (! selectedType) {
                help.textContent = 'Select a product name to show matching available batches.';
            } else if (visibleCount === 0) {
                help.textContent = `No available ${productName.value} batches right now. You can still save the product without a batch connection.`;
            } else {
                help.textContent = `Showing ${visibleCount} available ${productName.value} ${visibleCount === 1 ? 'batch' : 'batches'}. Use Ctrl or Shift to select multiple batches.`;
            }
        }

        renderBatches();
    };

    const renderBatches = () => {
        const options = Array.from(select.selectedOptions).filter((option) => option.value && ! option.disabled);
        list.replaceChildren();

        if (options.length === 0) {
            card.classList.add('d-none');
            return;
        }

        options.forEach((option) => {
            const item = document.createElement('div');
            item.className = 'col-md-6 col-xl-4';

            const box = document.createElement('div');
            box.className = 'border rounded p-3 h-100';

            const title = document.createElement('div');
            title.className = 'fw-bold';
            title.textContent = option.dataset.title || 'Selected batch';

            const date = document.createElement('div');
            date.className = 'text-secondary small mb-2';
            date.textContent = `Production date: ${option.dataset.date || 'Not set'}`;

            box.append(
                title,
                date,
                detailLine('Batch No.', option.dataset.batchNumber || '-'),
                detailLine('Initial Qty', `${option.dataset.initial || '0.00'} ${option.dataset.unit || ''}`),
                detailLine('Available Qty', `${option.dataset.remaining || '0.00'} ${option.dataset.unit || ''}`)
            );
            item.appendChild(box);
            list.appendChild(item);
        });

        card.classList.remove('d-none');
    };

    select.addEventListener('change', renderBatches);
    productName.addEventListener('change', filterBatchOptions);
    filterBatchOptions();
});
</script>

@include('admin.footer')