@extends('layouts.app')
@section('title', 'Bulk Edit Drug Catalogue')

@section('content')

<style>
  /* ═══ Bulk edit sheet styling ═══ */
  .bulk-sheet { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; background: #fff; }
  .bulk-sheet thead th { position: sticky; top: 0; background: #f8fafc; font-size: 10px; font-weight: 700; color: #475569;
                         text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; text-align: left;
                         border-bottom: 2px solid #cbd5e1; border-right: 1px solid #e2e8f0; white-space: nowrap; z-index: 5; }
  .bulk-sheet thead th:last-child { border-right: none; }
  .bulk-sheet tbody td { padding: 0; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; vertical-align: middle; }
  .bulk-sheet tbody tr:hover td { background: #fafbfd; }
  .bulk-sheet tbody tr.dirty td { background: #fef9c3; }
  .bulk-sheet tbody tr.dirty td:first-child { border-left: 3px solid #eab308; }
  .bulk-sheet tbody tr.has-error td { background: #fee2e2 !important; }
  .bulk-sheet tbody tr.has-error td:first-child { border-left: 3px solid #dc2626; }
  .bulk-sheet tbody tr.just-saved td { background: #dcfce7; transition: background 1.2s; }
  .bulk-sheet td.code-cell { font-family: monospace; font-size: 11px; padding: 6px 10px; color: #64748b; white-space: nowrap; }
  .bulk-sheet td.drug-name-cell { padding: 6px 10px; font-weight: 500; color: #0f172a; }
  .bulk-sheet input, .bulk-sheet select {
      width: 100%; padding: 6px 8px; border: 1px solid transparent; background: transparent;
      font-size: 12px; color: #0f172a; border-radius: 4px; outline: none;
  }
  .bulk-sheet input:focus, .bulk-sheet select:focus { border-color: #3b82f6; background: #fff; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
  .bulk-sheet input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
  /* Dropdown cells get a faint chevron and a subtle shaded hover so admins
     can tell at a glance they're pickable (not free-text). */
  .bulk-sheet select.dropdown-cell {
      appearance: none; -webkit-appearance: none; -moz-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat; background-position: right 8px center;
      padding-right: 22px; cursor: pointer;
  }
  .bulk-sheet select.dropdown-cell:hover { background-color: #f1f5f9; border-color: #cbd5e1; }
  /* Row with an unresolved legacy category: faint red left border so it's
     scan-findable while scrolling the sheet, without shouting. */
  .bulk-sheet tbody tr[data-legacy-category] td:first-child {
      border-left: 3px solid #fca5a5;
  }
  .bulk-sheet .reset-btn { color: #94a3b8; padding: 2px 6px; font-size: 11px; cursor: pointer; border: none; background: none; }
  .bulk-sheet .reset-btn:hover { color: #0f172a; }
  .bulk-sheet tr.dirty .reset-btn { color: #b45309; }

  .toolbar-card { background: #fff; border-bottom: 1px solid #e2e8f0; }
  .dirty-badge { display: inline-block; padding: 2px 10px; background: #fef3c7; color: #92400e; border-radius: 99px; font-size: 11px; font-weight: 600; }
  .no-changes  { color: #94a3b8; font-size: 11px; }
</style>

<div class="flex justify-between items-center mb-3">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Bulk Edit Drug Catalogue</h1>
        <p class="text-sm text-gray-500">Edit multiple drugs at once. Only modified rows will be saved.</p>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('pharmacy.drugs') }}" class="btn-secondary text-xs">← Back to Drug List</a>
    </div>
</div>

<div class="bg-white rounded-xl border shadow-sm overflow-hidden">

    {{-- Toolbar --}}
    <div class="toolbar-card px-4 py-3 flex flex-wrap items-center gap-3">
        <input type="text" id="bulkSearch" placeholder="Search by name, generic, code, category…"
               class="form-input text-xs" style="width: 320px">

        <select id="bulkCategoryFilter" class="form-input text-xs" style="width: 200px">
            <option value="">All categories</option>
            @foreach($categories as $c)<option value="{{ $c }}">{{ $c }}</option>@endforeach
        </select>

        <select id="bulkStatusFilter" class="form-input text-xs" style="width: 140px">
            <option value="">All statuses</option>
            <option value="active">Active only</option>
            <option value="inactive">Inactive only</option>
        </select>

        <span id="bulkVisibleCount" class="text-xs text-gray-500"></span>

        <div class="ml-auto flex items-center gap-3">
            <span id="bulkDirtyStatus" class="no-changes">No changes</span>
            <button id="bulkResetAllBtn" class="btn-secondary text-xs" disabled>Discard All</button>
            <button id="bulkSaveBtn" class="btn-primary text-sm" disabled>
                💾 Save Changes <span id="bulkSaveCount"></span>
            </button>
        </div>
    </div>

    {{-- Error / success banner --}}
    <div id="bulkBanner" class="hidden px-4 py-3 text-sm font-medium border-b"></div>

    {{-- Sheet --}}
    <div class="overflow-x-auto" style="max-height: calc(100vh - 220px)">
        <table class="bulk-sheet" id="bulkSheet">
            <thead>
                <tr>
                    <th style="width:40px"></th>
                    <th style="width:90px">Code</th>
                    <th style="min-width:220px">Drug Name *</th>
                    <th style="min-width:200px">Generic Name</th>
                    <th style="min-width:140px">Category *</th>
                    <th style="width:90px">Unit</th>
                    <th style="width:90px">Reorder</th>
                    <th style="width:100px">Cost (KES)</th>
                    <th style="width:110px">Price (KES) *</th>
                    <th style="width:80px">Active</th>
                    <th style="width:60px"></th>
                </tr>
            </thead>
            <tbody id="bulkRows">
            @foreach($drugs as $d)
            @php
                $rowData = [
                    'id'             => $d->id,
                    'name'           => $d->name,
                    'generic_name'   => $d->generic_name,
                    'category'       => $d->category,
                    'unit'           => $d->unit,
                    'reorder_level'  => $d->reorder_level ?? 0,
                    'cost_price'     => $d->cost_price,
                    'selling_price'  => $d->selling_price,
                    'is_active'      => (bool) $d->is_active,
                ];
            @endphp
            @php
                // If the drug's current category isn't on the canonical list,
                // render the dropdown with NO selection so the row visibly
                // reads "unresolved". The legacy value is shown as a badge
                // below the dropdown (so the admin can see what it was) but
                // is NOT an option in the list — forcing a pick from the 20.
                //
                // `data-original` then reflects the UI truth: original category
                // is empty. This prevents the row from being falsely flagged
                // "dirty" on load just because we rendered the select differently
                // than the DB value. It also means selecting ANY canonical
                // category (even one that happens to match the legacy label
                // textually) is a deliberate change — which is what we want.
                $isCanonical = $d->category && $categories->contains($d->category);
                $rowCategoryForDirty = $isCanonical ? $d->category : null;
                $rowData['category'] = $rowCategoryForDirty;
            @endphp
            <tr data-id="{{ $d->id }}" data-original='@json($rowData)' @if(!$isCanonical && $d->category) data-legacy-category="{{ $d->category }}" @endif>
                <td class="text-center"><span class="dirty-indicator text-gray-300 text-xs">●</span></td>
                <td class="code-cell">{{ $d->code }}</td>
                <td><input type="text" data-field="name" value="{{ $d->name }}"></td>
                <td><input type="text" data-field="generic_name" value="{{ $d->generic_name }}"></td>
                <td>
                    <select data-field="category" class="dropdown-cell">
                        <option value="">— Pick —</option>
                        @foreach($categories as $c)
                        <option value="{{ $c }}" {{ $isCanonical && $d->category === $c ? 'selected' : '' }}>{{ $c }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select data-field="unit" class="dropdown-cell" data-text-fallback>
                        <option value="">—</option>
                        @foreach($units as $u)
                        <option value="{{ $u }}" {{ $d->unit === $u ? 'selected' : '' }}>{{ $u }}</option>
                        @endforeach
                        @if($d->unit && !$units->contains($d->unit))
                        <option value="{{ $d->unit }}" selected>{{ $d->unit }}</option>
                        @endif
                        <option value="__other__">➕ Other…</option>
                    </select>
                </td>
                <td><input type="number" min="0" data-field="reorder_level" value="{{ $d->reorder_level ?? 0 }}"></td>
                <td><input type="number" min="0" step="0.01" data-field="cost_price" value="{{ $d->cost_price }}"></td>
                <td><input type="number" min="0" step="0.01" data-field="selling_price" value="{{ $d->selling_price }}"></td>
                <td style="text-align:center">
                    <select data-field="is_active">
                        <option value="1" {{ $d->is_active ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ !$d->is_active ? 'selected' : '' }}>Inactive</option>
                    </select>
                </td>
                <td style="text-align:center">
                    <button type="button" class="reset-btn" title="Discard changes to this row">↺</button>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- Autocomplete datalists removed — Category / Form / Unit now use proper <select> dropdowns populated from the controller --}}

<script>
(function() {
    const sheet     = document.getElementById('bulkSheet');
    const saveBtn   = document.getElementById('bulkSaveBtn');
    const saveCount = document.getElementById('bulkSaveCount');
    const resetAll  = document.getElementById('bulkResetAllBtn');
    const statusEl  = document.getElementById('bulkDirtyStatus');
    const banner    = document.getElementById('bulkBanner');
    const search    = document.getElementById('bulkSearch');
    const catFilter = document.getElementById('bulkCategoryFilter');
    const statFilter= document.getElementById('bulkStatusFilter');
    const countEl   = document.getElementById('bulkVisibleCount');
    const rows      = Array.from(document.querySelectorAll('#bulkRows tr'));

    // ─── Dirty tracking ─────────────────────────────────────────────────────
    // Compare each row's current input values against its data-original JSON
    // to decide if it's dirty. Using the full set each time (rather than a
    // Set of "touched" rows) guards against the user editing a field then
    // reverting the same field — it correctly becomes "not dirty" again.
    //
    // IMPORTANT on type handling: Blade's json directive serializes DB values
    // with their native types — decimals come across as strings ("10.00"),
    // ints as numbers, booleans as true/false, nullable fields as null. When
    // we read them back from inputs we get strings from text fields, parsed
    // numbers from number fields, and "1"/"0" from the is_active select.
    // Without careful normalization every row would flag dirty on page load.
    // So both sides go through `normalize()` before comparison.
    const NUMBER_FIELDS = new Set(['reorder_level', 'cost_price', 'selling_price']);
    const BOOL_FIELDS   = new Set(['is_active']);

    function normalize(field, val) {
        if (BOOL_FIELDS.has(field)) {
            if (val === true || val === 1 || val === '1' || val === 'true') return true;
            return false;
        }
        if (NUMBER_FIELDS.has(field)) {
            if (val === '' || val == null) return null;
            const n = Number(val);
            return isNaN(n) ? null : n;
        }
        // Text fields: null/undefined/"" all collapse to null, others trim
        if (val == null) return null;
        const s = String(val).trim();
        return s === '' ? null : s;
    }

    function currentRowData(tr) {
        const out = { id: Number(tr.dataset.id) };
        tr.querySelectorAll('[data-field]').forEach(el => {
            const f = el.dataset.field;
            out[f] = normalize(f, el.value);
        });
        return out;
    }
    function isRowDirty(tr) {
        const orig = JSON.parse(tr.dataset.original);
        const curr = currentRowData(tr);
        return Object.keys(orig).filter(k => k !== 'id').some(k => {
            const a = normalize(k, orig[k]);
            const b = normalize(k, curr[k]);
            return a !== b;
        });
    }
    function refreshDirty() {
        let dirtyCount = 0;
        rows.forEach(tr => {
            const dirty = isRowDirty(tr);
            tr.classList.toggle('dirty', dirty);
            tr.querySelector('.dirty-indicator').textContent = dirty ? '●' : '○';
            tr.querySelector('.dirty-indicator').style.color = dirty ? '#eab308' : '#cbd5e1';
            if (dirty) dirtyCount++;
        });
        saveBtn.disabled = dirtyCount === 0;
        resetAll.disabled = dirtyCount === 0;
        if (dirtyCount === 0) {
            statusEl.textContent = 'No changes';
            statusEl.className = 'no-changes';
            saveCount.textContent = '';
        } else {
            statusEl.textContent = dirtyCount + ' row' + (dirtyCount > 1 ? 's' : '') + ' modified';
            statusEl.className = 'dirty-badge';
            saveCount.textContent = '(' + dirtyCount + ')';
        }
    }

    // ─── "Other…" option on category/form/unit selects ──────────────────────
    // When the user picks the "__other__" sentinel, swap the <select> for a
    // text <input> so they can type any value. On blur / Enter the text
    // input is swapped back to a <select> with a new option for the typed
    // value selected, keeping the rest of the dirty/save machinery happy.
    sheet.addEventListener('change', e => {
        const sel = e.target;
        if (sel.tagName !== 'SELECT' || !sel.classList.contains('dropdown-cell')) return;
        if (sel.value !== '__other__') return;
        swapToFreeText(sel);
    });
    function swapToFreeText(select) {
        const input = document.createElement('input');
        input.type = 'text';
        input.dataset.field = select.dataset.field;
        input.placeholder = 'Type new value…';
        input.className = ''; // inherits .bulk-sheet input styling
        select.replaceWith(input);
        input.focus();
        const commit = () => {
            const val = input.value.trim();
            const td = input.closest('td');
            // Rebuild a select with the same options + the new value
            // (preserving whatever the user types) selected.
            const newSelect = buildSelectLike(select, val);
            input.replaceWith(newSelect);
            refreshDirty();
        };
        input.addEventListener('blur', commit);
        input.addEventListener('keydown', ev => {
            if (ev.key === 'Enter') { ev.preventDefault(); input.blur(); }
            if (ev.key === 'Escape') {
                // Cancel — restore original select
                input.replaceWith(select);
                select.value = select.querySelector('option[selected]')?.value || '';
                refreshDirty();
            }
        });
    }
    function buildSelectLike(template, chosen) {
        const s = document.createElement('select');
        s.dataset.field = template.dataset.field;
        s.className = template.className;
        // Copy every option EXCEPT the __other__ sentinel
        Array.from(template.options).forEach(o => {
            if (o.value === '__other__') return;
            const opt = document.createElement('option');
            opt.value = o.value; opt.textContent = o.textContent;
            s.appendChild(opt);
        });
        // Ensure the chosen value exists as an option
        if (chosen && !Array.from(s.options).some(o => o.value === chosen)) {
            const opt = document.createElement('option');
            opt.value = chosen; opt.textContent = chosen;
            s.appendChild(opt);
        }
        // Add __other__ back at the end so user can still type more
        const other = document.createElement('option');
        other.value = '__other__'; other.textContent = '➕ Other…';
        s.appendChild(other);
        s.value = chosen || '';
        return s;
    }

    // ─── Row reset ──────────────────────────────────────────────────────────
    function resetRow(tr) {
        const orig = JSON.parse(tr.dataset.original);
        tr.querySelectorAll('[data-field]').forEach(el => {
            const f = el.dataset.field;
            const n = normalize(f, orig[f]);
            if (BOOL_FIELDS.has(f)) {
                el.value = n ? '1' : '0';
            } else if (NUMBER_FIELDS.has(f)) {
                el.value = n == null ? '' : n;
            } else {
                el.value = n == null ? '' : n;
            }
        });
        tr.classList.remove('has-error');
        refreshDirty();
    }
    sheet.addEventListener('click', e => {
        if (e.target.classList.contains('reset-btn')) {
            resetRow(e.target.closest('tr'));
        }
    });

    // ─── Input listeners ────────────────────────────────────────────────────
    sheet.addEventListener('input',  refreshDirty);
    sheet.addEventListener('change', refreshDirty);

    // ─── Filters ────────────────────────────────────────────────────────────
    function applyFilters() {
        const q   = (search.value || '').toLowerCase().trim();
        const cat = catFilter.value;
        const stat = statFilter.value;
        let visible = 0;
        rows.forEach(tr => {
            const data = currentRowData(tr);
            const code = tr.querySelector('.code-cell').textContent.toLowerCase();
            const hay = [data.name, data.generic_name, data.category, code].filter(Boolean).join(' ').toLowerCase();
            let show = true;
            if (q && !hay.includes(q)) show = false;
            if (cat && data.category !== cat) show = false;
            if (stat === 'active' && !data.is_active) show = false;
            if (stat === 'inactive' && data.is_active) show = false;
            tr.style.display = show ? '' : 'none';
            if (show) visible++;
        });
        countEl.textContent = visible + ' of ' + rows.length + ' drugs';
    }
    [search, catFilter, statFilter].forEach(el => el.addEventListener('input', applyFilters));
    applyFilters();

    // ─── Discard all ────────────────────────────────────────────────────────
    resetAll.addEventListener('click', () => {
        if (!confirm('Discard all unsaved changes?')) return;
        rows.forEach(resetRow);
    });

    // ─── Save ───────────────────────────────────────────────────────────────
    function showBanner(msg, kind) {
        banner.className = 'px-4 py-3 text-sm font-medium border-b ' +
            (kind === 'success' ? 'bg-green-50 text-green-800 border-green-200' :
             kind === 'error'   ? 'bg-red-50 text-red-800 border-red-200' :
                                  'bg-gray-50 text-gray-800 border-gray-200');
        banner.textContent = msg;
        banner.classList.remove('hidden');
        if (kind === 'success') setTimeout(() => banner.classList.add('hidden'), 4000);
    }
    saveBtn.addEventListener('click', async () => {
        const dirtyRows = rows.filter(isRowDirty).map(currentRowData);
        if (!dirtyRows.length) return;
        saveBtn.disabled = true;
        const oldLabel = saveBtn.innerHTML;
        saveBtn.innerHTML = '⏳ Saving…';
        rows.forEach(tr => tr.classList.remove('has-error', 'just-saved'));

        try {
            const resp = await fetch('{{ route('pharmacy.drugs.bulk-update') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ rows: dirtyRows })
            });
            const data = await resp.json();
            if (data.ok) {
                // Update data-original on saved rows so they stop being dirty
                dirtyRows.forEach(row => {
                    const tr = sheet.querySelector(`tr[data-id="${row.id}"]`);
                    if (tr) {
                        tr.dataset.original = JSON.stringify(row);
                        tr.classList.add('just-saved');
                        setTimeout(() => tr.classList.remove('just-saved'), 1500);
                    }
                });
                showBanner('✓ ' + data.message, 'success');
                refreshDirty();
            } else {
                // Highlight error rows
                (data.errors || []).forEach(err => {
                    const tr = sheet.querySelector(`tr[data-id="${err.id}"]`);
                    if (tr) {
                        tr.classList.add('has-error');
                        tr.title = err.message;
                    }
                });
                showBanner('✗ ' + (data.message || 'Save failed.') + ' ' + (data.errors || []).map(e => e.name + ': ' + e.message).join(' | '), 'error');
            }
        } catch (err) {
            showBanner('✗ Network/server error: ' + err.message, 'error');
        } finally {
            saveBtn.innerHTML = oldLabel;
            refreshDirty();
        }
    });

    // ─── Ctrl/Cmd+S shortcut ────────────────────────────────────────────────
    document.addEventListener('keydown', e => {
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
            if (!saveBtn.disabled) saveBtn.click();
        }
    });

    // ─── Warn on leaving with unsaved changes ───────────────────────────────
    window.addEventListener('beforeunload', e => {
        if (rows.some(isRowDirty)) {
            e.preventDefault();
            e.returnValue = '';
        }
    });

    refreshDirty();
})();
</script>

@endsection