@extends('layouts.app')
@section('title', 'Pharmacy | Stock Take')

@section('styles')
<style>
    .hmis-tab-bar{display:flex;gap:6px;padding:12px 16px;background:linear-gradient(to bottom,#f8fafc,#fff);border:1px solid #e5e7eb;border-radius:12px;overflow-x:auto;margin-bottom:16px}
    .hmis-tab{padding:10px 22px;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;color:#64748b;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.04);text-decoration:none}
    .hmis-tab:hover{border-color:#94a3b8;color:#334155;box-shadow:0 2px 6px rgba(0,0,0,.06)}
    .hmis-tab.active{color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .hmis-tab[data-color="amber"].active{background:linear-gradient(135deg,#f59e0b,#d97706)}
</style>
@endsection

@section('content')

@php
    $authUser   = Auth::user();
    $isFullAccess = $authUser->hasAnyRole('Super Admin','Hospital Admin','Pharmacy User');
@endphp

{{-- Drug Inventory tab bar — Stock Take is part of the Drug Inventory group --}}
<div class="hmis-tab-bar">
    <a href="{{ route('pharmacy.drugs') }}" class="hmis-tab">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
        Drug Inventory
    </a>
    @if($isFullAccess)
    <a href="{{ route('pharmacy.drugs', ['tab' => 'suppliers']) }}" class="hmis-tab">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
        Suppliers
    </a>
    <a href="{{ route('pharmacy.stock-take') }}" class="hmis-tab active" data-color="amber">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
        Stock Take
    </a>
    @endif
</div>

@php
    $history = \App\Models\StockMovement::with(['drugItem', 'creator'])
        ->where('type', 'adjustment')
        ->orderByDesc('created_at')
        ->limit(200)
        ->get();
    $historyGroups = $history->groupBy('reference');
@endphp

<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Stock Take</h1>
        <p class="text-xs text-gray-500 mt-0.5">Enter physical counts to reconcile system quantities. Leave blank to skip a drug.</p>
    </div>
    <div class="flex items-center gap-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 3a9 9 0 100 18A9 9 0 0012 3z"/></svg>
        Adjustments are permanent and logged
    </div>
</div>

@if(session('success'))
<div class="bg-green-50 border border-green-200 rounded-xl px-4 py-3 mb-4 text-sm text-green-700 flex items-center gap-2">
    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
    {{ session('success') }}
</div>
@endif

@if($errors->any())
<div class="bg-red-50 border border-red-200 rounded-xl px-4 py-3 mb-4 text-sm text-red-700">
    <ul class="list-disc list-inside space-y-0.5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

{{-- Filters --}}
<div class="bg-white rounded-xl border shadow-sm p-4 mb-4">
    <form method="GET" class="flex flex-wrap gap-3 items-end">
        <div class="flex-1 min-w-[180px]">
            <label class="form-label">Search Drug</label>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Name, generic or code…" class="form-input">
        </div>
        <div class="w-48">
            <label class="form-label">Category</label>
            <select name="category" class="form-input">
                <option value="">All Categories</option>
                @foreach($categories as $cat)
                <option value="{{ $cat }}" {{ request('category') === $cat ? 'selected' : '' }}>{{ $cat }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn-primary text-xs">Filter</button>
        @if(request()->hasAny(['search','category']))
        <a href="{{ route('pharmacy.stock-take') }}" class="btn-secondary text-xs">Clear</a>
        @endif
    </form>
</div>

<form method="POST" action="{{ route('pharmacy.stock-take.store') }}" id="stockTakeForm">
@csrf

{{-- Reason --}}
<div class="bg-white rounded-xl border shadow-sm p-4 mb-4">
    <label class="form-label">Reason for Adjustment *</label>
    <input type="text" name="reason" value="{{ old('reason', 'Opening stock take ' . date('d M Y')) }}"
           required class="form-input max-w-xl"
           placeholder="e.g. Opening stock take 16 Apr 2026">
    <p class="text-xs text-gray-400 mt-1">Applied to all adjustments in this session and saved in the audit log.</p>
</div>

{{-- Drug table --}}
<div class="bg-white rounded-xl border shadow-sm overflow-hidden mb-5">
    <div class="px-5 py-3 border-b bg-gray-50 flex items-center justify-between">
        <div>
            <h3 class="text-sm font-bold text-gray-800">Drugs in Stock</h3>
            <p class="text-xs text-gray-400 mt-0.5">{{ $drugs->count() }} drug(s) shown</p>
        </div>
        <div class="flex items-center gap-3">
            <button type="button" onclick="clearAll()" class="text-xs text-gray-500 hover:text-gray-700">Clear all</button>
            <span class="text-xs text-gray-400" id="changedCount">0 changes pending</span>
        </div>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50 border-b">
                    <th class="table-header">Drug</th>
                    <th class="table-header">Category</th>
                    <th class="table-header text-center">System Qty</th>
                    <th class="table-header text-center w-36">Physical Count</th>
                    <th class="table-header text-center w-28">Difference</th>
                    <th class="table-header text-center w-28">Save</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($drugs as $drug)
                @php $sysQty = $drug->system_qty; @endphp
                <tr class="drug-row hover:bg-gray-50/50 transition-colors" data-drug-id="{{ $drug->id }}" data-sys="{{ $sysQty }}">
                    <td class="table-cell">
                        <p class="font-medium text-sm">{{ $drug->name }}</p>
                        <p class="text-xs text-gray-400">{{ $drug->generic_name }} &nbsp;·&nbsp; <span class="font-mono">{{ $drug->code }}</span></p>
                    </td>
                    <td class="table-cell text-xs text-gray-500">{{ $drug->category }}</td>
                    <td class="table-cell text-center">
                        <span class="font-bold text-gray-800 text-sm sys-qty">{{ $sysQty }}</span>
                        <span class="text-xs text-gray-400 block">{{ $drug->unit }}</span>
                    </td>
                    <td class="table-cell text-center">
                        <input type="number" name="counts[{{ $drug->id }}]" min="0" placeholder="—"
                               class="physical-count w-24 text-center form-input font-bold text-sm py-1"
                               data-sys="{{ $sysQty }}" oninput="updateDiff(this)">
                    </td>
                    <td class="table-cell text-center">
                        <span class="diff-badge text-xs font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-400">—</span>
                    </td>
                    <td class="table-cell text-center">
                        <button type="button"
                                class="row-save-btn text-xs font-semibold px-3 py-1 rounded bg-gray-100 text-gray-400 cursor-not-allowed transition-colors"
                                onclick="saveOneDrug({{ $drug->id }}, this)" disabled>
                            Save
                        </button>
                        <span class="row-saved-ref text-xs text-gray-400 block mt-0.5" style="display:none"></span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="table-cell text-center text-gray-400 py-10">
                        No drugs with stock found.
                        @if(request()->hasAny(['search','category']))
                        <a href="{{ route('pharmacy.stock-take') }}" class="text-blue-600 hover:underline ml-1">Clear filters</a>
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Submit --}}
@if($drugs->count() > 0)
<div class="flex items-center justify-between bg-white rounded-xl border shadow-sm px-5 py-4 mb-6">
    <p class="text-sm text-gray-500">Save each drug individually using its <strong>Save</strong> button, or use <strong>Save All Remaining</strong> to commit every unsaved row at once.</p>
    <div class="flex gap-3">
        <a href="{{ route('pharmacy.drugs') }}" class="btn-secondary text-xs">Cancel</a>
        <button type="submit" onclick="return confirmSubmit()" class="btn-primary text-xs">Save All Remaining</button>
    </div>
</div>
@endif

</form>

{{-- History — collapsible, at the very bottom --}}
@if($historyGroups->count() > 0)
<div class="bg-white rounded-xl border shadow-sm overflow-hidden mt-2">
    <button type="button" onclick="toggleHistory()"
            class="w-full flex items-center justify-between px-5 py-3 bg-gray-50 hover:bg-gray-100 transition-colors text-left">
        <div>
            <h3 class="text-sm font-bold text-gray-800">Stock Take History</h3>
            <p class="text-xs text-gray-400 mt-0.5">{{ $historyGroups->count() }} session(s) — click to expand</p>
        </div>
        <svg id="historyChevron" class="w-4 h-4 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    <div id="historyBody" class="hidden divide-y divide-gray-50">
        @foreach($historyGroups as $reference => $movements)
        @php $first = $movements->first(); @endphp
        <div class="px-5 py-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-3">
                    <span class="font-mono text-xs font-bold text-blue-700">{{ $reference }}</span>
                    <span class="text-xs text-gray-500">{{ $first->created_at->format('d M Y, H:i') }}</span>
                    <span class="text-xs text-gray-500">by {{ $first->creator->name ?? '—' }}</span>
                </div>
                <span class="text-xs text-gray-400">{{ $movements->count() }} drug(s)</span>
            </div>
            <table class="w-full text-xs">
                <thead>
                    <tr class="text-gray-400 border-b">
                        <th class="text-left py-1 pr-4 font-medium">Drug</th>
                        <th class="text-center py-1 px-3 font-medium">Change</th>
                        <th class="text-center py-1 px-3 font-medium">Balance After</th>
                        <th class="text-left py-1 px-3 font-medium">Notes</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($movements as $m)
                    <tr class="border-b border-gray-50 last:border-0">
                        <td class="py-1.5 pr-4 font-medium text-gray-800">{{ $m->drugItem->name ?? '—' }}</td>
                        <td class="py-1.5 px-3 text-center">
                            @if($m->quantity > 0)
                                <span class="font-bold text-green-600">+{{ $m->quantity }}</span>
                            @elseif($m->quantity < 0)
                                <span class="font-bold text-red-600">{{ $m->quantity }}</span>
                            @else
                                <span class="text-gray-400">0</span>
                            @endif
                        </td>
                        <td class="py-1.5 px-3 text-center font-semibold text-gray-700">{{ $m->balance_after }}</td>
                        <td class="py-1.5 px-3 text-gray-500">{{ $m->notes }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endforeach
    </div>
</div>
@endif

<script>
function updateDiff(input) {
    const row      = input.closest('tr');
    const sysQty   = parseInt(input.dataset.sys) || 0;
    const physical = input.value !== '' ? parseInt(input.value) : null;
    const badge    = row.querySelector('.diff-badge');
    const saveBtn  = row.querySelector('.row-save-btn');

    // Don't do anything if this row is already saved (locked)
    if (row.classList.contains('row-saved')) return;

    if (physical === null || input.value === '') {
        badge.textContent = '—';
        badge.className = 'diff-badge text-xs font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-400';
        input.classList.remove('border-green-400', 'border-red-400', 'border-amber-400');
        disableSaveBtn(saveBtn);
    } else {
        const diff = physical - sysQty;
        if (diff === 0) {
            badge.textContent = 'No change';
            badge.className = 'diff-badge text-xs font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500';
            input.classList.remove('border-green-400', 'border-red-400');
            input.classList.add('border-amber-400');
            disableSaveBtn(saveBtn);
        } else if (diff > 0) {
            badge.textContent = '+' + diff;
            badge.className = 'diff-badge text-xs font-semibold px-2 py-0.5 rounded-full bg-green-100 text-green-700';
            input.classList.remove('border-red-400', 'border-amber-400');
            input.classList.add('border-green-400');
            enableSaveBtn(saveBtn);
        } else {
            badge.textContent = diff;
            badge.className = 'diff-badge text-xs font-semibold px-2 py-0.5 rounded-full bg-red-100 text-red-700';
            input.classList.remove('border-green-400', 'border-amber-400');
            input.classList.add('border-red-400');
            enableSaveBtn(saveBtn);
        }
    }

    updatePendingCount();
}

function enableSaveBtn(btn) {
    btn.disabled = false;
    btn.className = 'row-save-btn text-xs font-semibold px-3 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors cursor-pointer';
    btn.textContent = 'Save';
}
function disableSaveBtn(btn) {
    btn.disabled = true;
    btn.className = 'row-save-btn text-xs font-semibold px-3 py-1 rounded bg-gray-100 text-gray-400 cursor-not-allowed transition-colors';
    btn.textContent = 'Save';
}

function updatePendingCount() {
    const pending = Array.from(document.querySelectorAll('.drug-row:not(.row-saved) .physical-count'))
        .filter(i => i.value !== '' && parseInt(i.value) !== parseInt(i.dataset.sys)).length;
    document.getElementById('changedCount').textContent = pending + ' change(s) pending';
}

function saveOneDrug(drugId, btn) {
    const row      = btn.closest('tr');
    const input    = row.querySelector('.physical-count');
    const physical = parseInt(input.value);
    const reason   = document.querySelector('[name="reason"]').value.trim();

    if (isNaN(physical)) { alert('Enter a physical count first.'); input.focus(); return; }
    if (!reason) { alert('Enter a reason for the adjustment at the top of the page before saving individual rows.'); document.querySelector('[name="reason"]').focus(); return; }

    btn.disabled = true;
    btn.textContent = 'Saving…';
    btn.className = 'row-save-btn text-xs font-semibold px-3 py-1 rounded bg-blue-400 text-white cursor-wait transition-colors';

    const csrf = document.querySelector('meta[name=csrf-token]')?.content || '{{ csrf_token() }}';
    fetch('{{ url("/pharmacy/stock-take/drug") }}/' + drugId, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ reason: reason, physical_count: physical })
    })
    .then(r => r.json())
    .then(data => {
        if (data.ok) {
            // Lock the row — physical count input goes read-only, Save button turns into "Saved ✓"
            row.classList.add('row-saved');
            input.disabled = true;
            input.classList.remove('border-green-400', 'border-red-400', 'border-amber-400');
            input.classList.add('bg-gray-50', 'text-gray-500');

            // Update System Qty display to reflect new value
            row.querySelector('.sys-qty').textContent = data.new_system_qty;
            input.dataset.sys = data.new_system_qty;

            // Refresh diff badge to show "Saved"
            const badge = row.querySelector('.diff-badge');
            badge.textContent = data.changed ? (data.difference > 0 ? '+' + data.difference + ' ✓' : data.difference + ' ✓') : 'No change';
            badge.className = 'diff-badge text-xs font-semibold px-2 py-0.5 rounded-full ' +
                (data.changed ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500');

            btn.className = 'row-save-btn text-xs font-semibold px-3 py-1 rounded bg-green-100 text-green-700 cursor-default';
            btn.textContent = 'Saved ✓';
            btn.disabled = true;

            // Show the reference quietly underneath
            const refEl = row.querySelector('.row-saved-ref');
            if (refEl && data.reference) {
                refEl.textContent = data.reference;
                refEl.style.display = '';
            }

            updatePendingCount();
        } else {
            btn.disabled = false;
            btn.className = 'row-save-btn text-xs font-semibold px-3 py-1 rounded bg-red-100 text-red-700';
            btn.textContent = 'Retry';
            alert(data.message || 'Save failed. Try again.');
        }
    })
    .catch(err => {
        btn.disabled = false;
        btn.className = 'row-save-btn text-xs font-semibold px-3 py-1 rounded bg-red-100 text-red-700';
        btn.textContent = 'Retry';
        alert('Network error. Check connection and try again.');
    });
}

function clearAll() {
    document.querySelectorAll('.drug-row:not(.row-saved) .physical-count').forEach(input => {
        input.value = '';
        input.classList.remove('border-green-400', 'border-red-400', 'border-amber-400');
        const row = input.closest('tr');
        const badge = row.querySelector('.diff-badge');
        badge.textContent = '—';
        badge.className = 'diff-badge text-xs font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-400';
        disableSaveBtn(row.querySelector('.row-save-btn'));
    });
    updatePendingCount();
}

function confirmSubmit() {
    // The bottom button commits ANY still-unsaved rows with a count entered.
    const pending = Array.from(document.querySelectorAll('.drug-row:not(.row-saved) .physical-count'))
        .filter(i => i.value !== '' && parseInt(i.value) !== parseInt(i.dataset.sys));
    if (pending.length === 0) {
        alert('Nothing left to save. All rows with counts entered have either been saved individually or match the system quantity.');
        return false;
    }
    const reason = document.querySelector('[name="reason"]').value.trim();
    if (!reason) { alert('Please enter a reason for the adjustment.'); return false; }
    return confirm(pending.length + ' remaining drug(s) will be adjusted in one batch.\n\nReason: ' + reason + '\n\nContinue?');
}

function toggleHistory() {
    const body     = document.getElementById('historyBody');
    const chevron  = document.getElementById('historyChevron');
    const isHidden = body.classList.contains('hidden');
    body.classList.toggle('hidden', !isHidden);
    chevron.style.transform = isHidden ? 'rotate(180deg)' : '';
}
</script>

@endsection