@extends('layouts.app')

@section('title', 'B2B Variation Matrix — ' . $product->name)

@section('content')
<link rel="stylesheet" href="{{ asset('modules/b2bportal/admin.css') }}?v={{ config('app.version', '1') }}">
<style>
    /* Small AdminLTE reset so Tailwind classes look right inside the .content-wrapper */
    .content-wrapper .b2b-admin, .content-wrapper .b2b-admin * { box-sizing: border-box; }
    .content-wrapper .b2b-admin table { background: #fff; }
    .content-wrapper .b2b-admin .apply-all-btn {
        padding: 2px 4px; line-height: 1; opacity: .55;
    }
    .content-wrapper .b2b-admin .apply-all-btn:hover { opacity: 1; color: #16a34a; }
</style>

<section class="content-header">
    <h1>
        Variation Matrix
        <small>{{ $product->name }} ({{ $product->sku }})</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ url('/products') }}"><i class="fa fa-cube"></i> Products</a></li>
        <li class="active">Matrix Editor</li>
    </ol>
</section>

<section class="content">
    <div class="b2b-admin"
        x-data="matrixEditor({
            productId: {{ $product->id }},
            saveUrl: @js(url('/b2bportal/products/'.$product->id.'/matrix')),
            csrf: @js(csrf_token()),
            initColorTemplateId: {{ (int) ($product->b2b_color_attribute_id ?? 0) }},
            initSizeTemplateId: {{ (int) ($product->b2b_size_attribute_id ?? 0) }},
            initLocationId: {{ (int) $location_id }},
            initColors: @js($colors),
            initSizes: @js($sizes),
            initCells: @js($cells),
            templates: @js($templates->map(fn($t) => [
                'id' => $t->id,
                'name' => $t->name,
                'values' => $t->values->map(fn($v) => ['id' => $v->id, 'name' => $v->name])->values(),
            ])),
        })">
        <div class="box box-primary">
            <div class="box-header with-border" style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
                <div>
                    <label class="text-xs text-ink-500 uppercase" style="display:block;">Color attribute</label>
                    <select class="form-control" x-model.number="colorTemplateId" x-on:change="onAttributeChange">
                        <option value="0">— Select —</option>
                        <template x-for="t in templates" :key="'c'+t.id">
                            <option :value="t.id" x-text="t.name"></option>
                        </template>
                    </select>
                </div>
                <div>
                    <label class="text-xs text-ink-500 uppercase" style="display:block;">Size attribute</label>
                    <select class="form-control" x-model.number="sizeTemplateId" x-on:change="onAttributeChange">
                        <option value="0">— Select —</option>
                        <template x-for="t in templates" :key="'s'+t.id">
                            <option :value="t.id" x-text="t.name" :disabled="t.id === colorTemplateId"></option>
                        </template>
                    </select>
                </div>
                <div>
                    <label class="text-xs text-ink-500 uppercase" style="display:block;">Stock location</label>
                    <select class="form-control" x-model.number="locationId">
                        @foreach($locations as $loc)
                            <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div style="margin-left:auto; display:flex; gap:8px;">
                    <button type="button" class="b2b-btn-outline" x-on:click="openBulkFill = !openBulkFill">
                        <i class="fa fa-magic"></i> Bulk fill…
                    </button>
                    <button type="button" class="b2b-btn" x-on:click="save" :disabled="saving">
                        <i class="fa" :class="saving ? 'fa-spinner fa-spin' : 'fa-save'"></i>
                        <span x-text="saving ? 'Saving…' : 'Save all'"></span>
                    </button>
                </div>
            </div>

            <div class="box-body">
                <div x-show="openBulkFill" x-transition class="b2b-bulk-fill" style="margin-bottom:12px;">
                    <label>Field:
                        <select x-model="bulk.field" class="form-control input-sm" style="width:auto; display:inline-block;">
                            <option value="price">Price</option>
                            <option value="stock">Stock</option>
                        </select>
                    </label>
                    <label>Value:
                        <input type="number" step="0.01" min="0" x-model.number="bulk.value" class="form-control input-sm" style="width:9rem; display:inline-block;">
                    </label>
                    <label>Apply to:
                        <select x-model="bulk.scope" class="form-control input-sm" style="width:auto; display:inline-block;">
                            <option value="all">All cells</option>
                            <option value="empty">Empty cells only</option>
                            <option value="row">Row…</option>
                            <option value="column">Column…</option>
                        </select>
                    </label>
                    <template x-if="bulk.scope === 'row'">
                        <select x-model="bulk.row" class="form-control input-sm" style="width:auto; display:inline-block;">
                            <template x-for="c in colors" :key="'br'+c"><option :value="c" x-text="c"></option></template>
                        </select>
                    </template>
                    <template x-if="bulk.scope === 'column'">
                        <select x-model="bulk.col" class="form-control input-sm" style="width:auto; display:inline-block;">
                            <template x-for="s in sizes" :key="'bc'+s"><option :value="s" x-text="s"></option></template>
                        </select>
                    </template>
                    <button class="b2b-btn" type="button" x-on:click="applyBulk">Apply</button>
                </div>

                <div style="overflow-x:auto;">
                    <table class="b2b-editor-grid">
                        <thead>
                            <tr>
                                <th class="color-header">Color \ Size</th>
                                <template x-for="s in sizes" :key="'h'+s">
                                    <th x-text="s"></th>
                                </template>
                                <th style="width:2rem;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="color in colors" :key="'r'+color">
                                <tr>
                                    <th class="color-header" x-text="color"></th>
                                    <template x-for="size in sizes" :key="'c'+color+'-'+size">
                                        <td class="combo-cell"
                                            :data-dirty="isDirty(color, size) ? '1' : '0'"
                                            :data-inactive="!cell(color,size).is_active ? '1' : '0'">
                                            <div style="display:flex; gap:2px; align-items:center; justify-content:center;">
                                                <input type="number" step="0.01" min="0" class="combo-price"
                                                    :value="cell(color,size).price"
                                                    x-on:input="setField(color, size, 'price', parseFloat($event.target.value) || 0)"
                                                    placeholder="₹">
                                                <button type="button" class="btn btn-xs btn-default apply-all-btn"
                                                    title="Apply this price to every combo"
                                                    x-on:click="applyToAll('price', cell(color,size).price)">
                                                    <i class="fa fa-check-double"></i>
                                                </button>
                                            </div>
                                            <div style="margin-top:2px; display:flex; gap:2px; align-items:center; justify-content:center;">
                                                <input type="number" step="1" min="0" class="combo-stock"
                                                    :value="cell(color,size).stock"
                                                    x-on:input="setField(color, size, 'stock', parseFloat($event.target.value) || 0)"
                                                    placeholder="stk">
                                                <button type="button" class="btn btn-xs btn-default apply-all-btn"
                                                    title="Apply this stock to every combo"
                                                    x-on:click="applyToAll('stock', cell(color,size).stock)">
                                                    <i class="fa fa-check-double"></i>
                                                </button>
                                                <button type="button" class="btn btn-xs btn-default"
                                                    :title="cell(color,size).is_active ? 'Deactivate' : 'Activate'"
                                                    x-on:click="setField(color, size, 'is_active', !cell(color,size).is_active)">
                                                    <i class="fa" :class="cell(color,size).is_active ? 'fa-eye' : 'fa-eye-slash'"></i>
                                                </button>
                                            </div>
                                            <input type="text" class="combo-sku" style="margin-top:2px;"
                                                :value="cell(color,size).sub_sku || ''"
                                                x-on:input="setField(color, size, 'sub_sku', $event.target.value)"
                                                placeholder="SKU">
                                        </td>
                                    </template>
                                    <td>
                                        <button type="button" class="btn btn-xs btn-danger" title="Remove color"
                                            x-on:click="removeColor(color)"><i class="fa fa-times"></i></button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td style="padding:8px;">
                                    <input type="text" x-model="newColor" placeholder="+ Add color"
                                        class="form-control input-sm"
                                        x-on:keydown.enter.prevent="addColor">
                                </td>
                                <td :colspan="sizes.length + 1" style="padding:8px;">
                                    <input type="text" x-model="newSize" placeholder="+ Add size"
                                        class="form-control input-sm" style="max-width:8rem;"
                                        x-on:keydown.enter.prevent="addSize">
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div style="margin-top:10px;" class="text-muted small">
                    <i class="fa fa-info-circle"></i>
                    Rows highlighted yellow have unsaved changes. Deactivating a combo hides it from the portal
                    but preserves sales history. New attribute values you type here will be added to the source
                    templates on save.
                </div>

                <div x-show="message" x-transition style="margin-top:10px;">
                    <div class="alert" :class="messageType === 'error' ? 'alert-danger' : 'alert-success'"
                        x-text="message"></div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js" defer></script>
<script>
    function matrixEditor(cfg) {
        return {
            productId: cfg.productId,
            saveUrl: cfg.saveUrl,
            csrf: cfg.csrf,
            templates: cfg.templates || [],
            colorTemplateId: cfg.initColorTemplateId || 0,
            sizeTemplateId: cfg.initSizeTemplateId || 0,
            locationId: cfg.initLocationId,
            colors: cfg.initColors && cfg.initColors.length
                ? cfg.initColors.slice()
                : (cfg.initColors ? [] : []),
            sizes: cfg.initSizes && cfg.initSizes.length
                ? cfg.initSizes.slice()
                : (cfg.initSizes ? [] : []),
            cells: cfg.initCells || {},
            dirtySet: new Set(),
            newColor: '',
            newSize: '',
            openBulkFill: false,
            bulk: { field: 'price', value: 0, scope: 'all', row: '', col: '' },
            saving: false,
            message: '',
            messageType: '',

            cell(color, size) {
                if (!this.cells[color]) this.cells[color] = {};
                if (!this.cells[color][size]) this.cells[color][size] = { price: 0, stock: 0, sub_sku: '', is_active: true };
                return this.cells[color][size];
            },
            setField(color, size, field, val) {
                const c = this.cell(color, size);
                c[field] = val;
                this.dirtySet.add(color + '::' + size);
            },
            isDirty(color, size) { return this.dirtySet.has(color + '::' + size); },

            onAttributeChange() {
                const colorTpl = this.templates.find(t => t.id === this.colorTemplateId);
                const sizeTpl = this.templates.find(t => t.id === this.sizeTemplateId);
                if (colorTpl && (!this.colors.length || confirm('Load colors from selected attribute (replaces current list)?'))) {
                    this.colors = colorTpl.values.map(v => v.name);
                }
                if (sizeTpl && (!this.sizes.length || confirm('Load sizes from selected attribute (replaces current list)?'))) {
                    this.sizes = sizeTpl.values.map(v => v.name);
                }
            },

            addColor() {
                const n = (this.newColor || '').trim();
                if (!n || this.colors.includes(n)) { this.newColor = ''; return; }
                this.colors.push(n);
                this.newColor = '';
            },
            addSize() {
                const n = (this.newSize || '').trim();
                if (!n || this.sizes.includes(n)) { this.newSize = ''; return; }
                this.sizes.push(n);
                this.newSize = '';
            },
            removeColor(c) {
                if (!confirm('Remove ' + c + ' from the matrix? Combos will be deactivated on save.')) return;
                this.colors = this.colors.filter(x => x !== c);
            },

            applyBulk() {
                const { field, value, scope, row, col } = this.bulk;
                const shouldTouch = (c, s) => {
                    if (scope === 'all') return true;
                    if (scope === 'row') return c === row;
                    if (scope === 'column') return s === col;
                    if (scope === 'empty') {
                        const cell = this.cell(c, s);
                        return !cell[field] || cell[field] === 0;
                    }
                    return false;
                };
                this.colors.forEach(c => this.sizes.forEach(s => {
                    if (shouldTouch(c, s)) this.setField(c, s, field, value);
                }));
                this.openBulkFill = false;
            },

            /**
             * UltimatePOS-style "apply all" — takes one cell's value and
             * cascades it to every color/size combo in the matrix.
             * Matches the fa-check-double UX in the standard product form.
             */
            applyToAll(field, value) {
                const v = Number(value) || 0;
                if (!confirm(`Apply ${field} = ${v} to all ${this.colors.length * this.sizes.length} combos?`)) return;
                this.colors.forEach(c => this.sizes.forEach(s => {
                    this.setField(c, s, field, v);
                }));
                this.showMessage(`Applied ${field} = ${v} to every cell.`, 'success');
            },

            async save() {
                if (!this.colorTemplateId || !this.sizeTemplateId) {
                    this.showMessage('Pick both color and size attributes first.', 'error');
                    return;
                }
                const payload = {
                    color_template_id: this.colorTemplateId,
                    size_template_id: this.sizeTemplateId,
                    location_id: this.locationId,
                    cells: [],
                };
                this.colors.forEach(color => this.sizes.forEach(size => {
                    const c = this.cell(color, size);
                    payload.cells.push({
                        color, size,
                        price: c.price || 0,
                        stock: c.stock || 0,
                        sub_sku: c.sub_sku || null,
                        is_active: c.is_active !== false,
                        moq: c.moq ?? null,
                    });
                }));

                this.saving = true;
                this.message = '';
                try {
                    const res = await fetch(this.saveUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': this.csrf,
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify(payload),
                    });
                    const body = await res.json();
                    if (!res.ok || !body.success) {
                        throw new Error(body.message || 'Save failed');
                    }
                    this.dirtySet.clear();
                    this.showMessage(body.message, 'success');
                } catch (e) {
                    this.showMessage(e.message, 'error');
                } finally {
                    this.saving = false;
                }
            },

            showMessage(msg, type) {
                this.message = msg;
                this.messageType = type;
                setTimeout(() => { this.message = ''; }, 5000);
            },
        };
    }
</script>
@endsection