{{-- resources/views/stock/edit.blade.php --}}
<x-app-layout>
    {{-- ================= PAGE HEADER ================= --}}
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="m-b-10">Edit Inventory</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('stock.index') }}">Inventory</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ul>
        </div>

        <div class="page-header-right ms-auto">
            <div class="page-header-right-items">
                <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                    <a href="{{ route('stock.index') }}" class="btn btn-light">
                        <i class="feather-arrow-left me-2"></i> Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- ================= EDIT INVENTORY (Duralux-like) ================= --}}
    <div class="main-content">
        <div class="row">
            <div class="col-lg-12">

                <form action="{{ route('stock.update', $inventory->id) }}" method="POST" id="invEditForm">
                    @csrf
                    @method('PUT')

                    <div class="card stretch stretch-full">
                        <div class="card-header">
                            <h5 class="card-title">Update Inventory</h5>

                            <div class="card-header-action">
                                <div class="card-header-btn">
                                    <div data-bs-toggle="tooltip" data-bs-original-title="Reset to Saved">
                                        <a href="javascript:void(0);" class="avatar-text avatar-xs bg-warning" id="resetToSavedBtn"></a>
                                    </div>
                                    <div data-bs-toggle="tooltip" data-bs-original-title="Maximize/Minimize">
                                        <a href="javascript:void(0);" class="avatar-text avatar-xs bg-success" data-bs-toggle="expand"></a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            {{-- ✅ BASIC INFO --}}
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Inventory Name <span class="text-danger">*</span></label>
                                    <input type="text"
                                           name="name"
                                           id="nameInput"
                                           class="form-control @error('name') is-invalid @enderror"
                                           value="{{ old('name', $inventory->name) }}"
                                           placeholder="Eg: Cement, Rod, Marble, etc.">
                                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Category <span class="text-danger">*</span></label>
                                    <select name="category"
                                            id="categoryInput"
                                            class="form-select @error('category') is-invalid @enderror"
                                            data-select2-selector="status">
                                        <option value="">Select Category</option>
                                        @foreach($categories as $cat)
                                            <option value="{{ $cat->name }}"
                                                {{ old('category', $inventory->category) == $cat->name ? 'selected' : '' }}>
                                                {{ $cat->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('category') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>

                            <hr class="my-4">

                            {{-- ✅ RATES + BARCODE --}}
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Purchase Rate (₹) <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01"
                                           name="purchase_rate"
                                           id="purchaseRateInput"
                                           class="form-control @error('purchase_rate') is-invalid @enderror"
                                           value="{{ old('purchase_rate', $inventory->purchase_rate) }}"
                                           placeholder="0.00">
                                    @error('purchase_rate') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Wholesale Rate (₹) <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01"
                                           name="wholesale_rate"
                                           id="wholesaleRateInput"
                                           class="form-control @error('wholesale_rate') is-invalid @enderror"
                                           value="{{ old('wholesale_rate', $inventory->wholesale_rate) }}"
                                           placeholder="0.00">
                                    @error('wholesale_rate') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Selling Price (₹) <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01"
                                           name="salling_price"
                                           id="sellingPriceInput"
                                           class="form-control @error('salling_price') is-invalid @enderror"
                                           value="{{ old('salling_price', $inventory->salling_price) }}"
                                           placeholder="0.00">
                                    @error('salling_price') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Barcode (Locked)</label>

                                    {{-- ✅ Show existing barcode (readonly) --}}
                                    <div class="input-group">
                                        <input type="text"
                                               name="barcode"
                                               id="barcodeInput"
                                               class="form-control @error('barcode') is-invalid @enderror"
                                               value="{{ old('barcode', $inventory->barcode) }}"
                                               readonly>
                                        <button type="button" class="btn btn-light" id="copyBarcodeBtn">
                                            <i class="feather-copy me-1"></i> Copy
                                        </button>
                                    </div>
                                    @error('barcode') <div class="text-danger fs-12 mt-1">{{ $message }}</div> @enderror

                                    <div class="text-muted fs-12 mt-1">
                                        Barcode is fixed for this item. (If you want “Regenerate”, I can add permission-based button.)
                                    </div>
                                </div>

                                {{-- ✅ Barcode Preview + Print (pre-filled) --}}
                                <div class="col-md-6">
                                    <label class="form-label">Barcode Preview</label>

                                    <div class="card border bg-light">
                                        <div class="card-body p-3">
                                            <div class="d-flex align-items-start justify-content-between">
                                                <div>
                                                    <div class="fw-semibold" id="pvName">—</div>
                                                    <div class="small text-muted">
                                                        Code: <span class="fw-semibold" id="pvCode">—</span>
                                                    </div>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-outline-primary" id="printBarcodeBtn">
                                                    <i class="feather-printer me-1"></i> Print
                                                </button>
                                            </div>

                                            <div class="text-center mt-3">
                                                <div class="bg-white rounded p-2 d-inline-block w-100" style="overflow-x:auto;">
                                                    <div id="barcodePreviewSvg" class="d-flex justify-content-center">
                                                        {{-- ✅ server-rendered initial barcode (no JS dependency) --}}
                                                        @if(!empty($inventory->barcode))
                                                            {!! \Milon\Barcode\Facades\DNS1DFacade::getBarcodeSVG(
                                                                $inventory->barcode,
                                                                'C128',
                                                                1.6,
                                                                55,
                                                                '#111',
                                                                false
                                                            ) !!}
                                                        @else
                                                            <span class="text-muted">Barcode not available</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="mt-2">
                                                    <span class="badge bg-soft-dark text-dark" id="pvBadge">
                                                        {{ $inventory->barcode ?? '—' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-muted fs-12 mt-2">
                                        Print will open a small label page (clean & centered).
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer d-flex justify-content-end gap-2">
                            <a href="{{ route('stock.index') }}" class="btn btn-light">Cancel</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="feather-save me-1"></i> Update Inventory
                            </button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

    {{-- ================= PRINT LABEL TEMPLATE (hidden) ================= --}}
    <div id="printArea" style="display:none;">
        <div style="width:58mm; padding:10px; font-family: Inter, Arial, sans-serif;">
            <div style="text-align:center; font-weight:700; font-size:14px;" id="printName">—</div>
            <div style="text-align:center; color:#555; font-size:12px; margin-top:4px;" id="printCodeText">—</div>
            <div style="margin-top:10px; text-align:center;" id="printBarcodeSvg"></div>
        </div>
    </div>

    {{-- ================= SCRIPTS ================= --}}
    <script>
        (function () {
            const nameInput = document.getElementById('nameInput');
            const barcodeInput = document.getElementById('barcodeInput');

            const pvName = document.getElementById('pvName');
            const pvCode = document.getElementById('pvCode');
            const pvBadge = document.getElementById('pvBadge');
            const barcodePreviewSvg = document.getElementById('barcodePreviewSvg');

            const printBtn = document.getElementById('printBarcodeBtn');
            const copyBtn = document.getElementById('copyBarcodeBtn');
            const resetSavedBtn = document.getElementById('resetToSavedBtn');

            // ✅ Saved values (for reset button)
            const saved = {
                name: @json($inventory->name),
                category: @json($inventory->category),
                purchase_rate: @json($inventory->purchase_rate),
                wholesale_rate: @json($inventory->wholesale_rate),
                salling_price: @json($inventory->salling_price),
                barcode: @json($inventory->barcode),
            };

            function setPreviewFromInputs() {
                const nm = (nameInput?.value || '').trim();
                const code = (barcodeInput?.value || '').trim();

                pvName.textContent = nm || '—';
                pvCode.textContent = code || '—';
                pvBadge.textContent = code || '—';
            }

            // ✅ initial preview from existing data
            setPreviewFromInputs();

            // ✅ If name changes, preview title updates (barcode stays same)
            nameInput?.addEventListener('input', setPreviewFromInputs);

            // ✅ Copy barcode
            copyBtn?.addEventListener('click', async function () {
                try {
                    await navigator.clipboard.writeText(barcodeInput.value || '');
                    copyBtn.innerHTML = '<i class="feather-check me-1"></i> Copied';
                    setTimeout(() => copyBtn.innerHTML = '<i class="feather-copy me-1"></i> Copy', 1200);
                } catch (e) {
                    alert('Copy failed');
                }
            });

            // ✅ Reset to saved (not empty reset)
            resetSavedBtn?.addEventListener('click', function () {
                document.getElementById('nameInput').value = saved.name || '';
                document.getElementById('categoryInput').value = saved.category || '';
                document.getElementById('purchaseRateInput').value = saved.purchase_rate ?? '';
                document.getElementById('wholesaleRateInput').value = saved.wholesale_rate ?? '';
                document.getElementById('sellingPriceInput').value = saved.salling_price ?? '';
                document.getElementById('barcodeInput').value = saved.barcode || '';

                // ✅ reset preview text + keep barcode svg already rendered
                setPreviewFromInputs();
            });

            // ✅ Print
            printBtn?.addEventListener('click', function () {
                const nm = (nameInput?.value || '').trim();
                const code = (barcodeInput?.value || '').trim();

                if (!code) {
                    alert('Barcode not available.');
                    return;
                }

                document.getElementById('printName').textContent = nm || '—';
                document.getElementById('printCodeText').textContent = code;
                document.getElementById('printBarcodeSvg').innerHTML = barcodePreviewSvg.innerHTML;

                const w = window.open('', '_blank', 'width=420,height=520');
                w.document.write(`
                    <html>
                        <head>
                            <title>Print Barcode</title>
                            <style>
                                body{margin:0;padding:0;font-family:Inter, Arial, sans-serif;}
                                .wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;}
                            </style>
                        </head>
                        <body>
                            <div class="wrap">
                                ${document.getElementById('printArea').innerHTML}
                            </div>
                            <script>
                                window.onload = function(){ window.print(); setTimeout(()=>window.close(), 200); }
                            <\/script>
                        </body>
                    </html>
                `);
                w.document.close();
            });
        })();
    </script>
</x-app-layout>