@extends('layouts.app')

@section('content')
@php
    // ─── window navigation helpers ─────────────────────────────────────
    $endStr = $window_end->toDateString();
    $prevEnd = $window_end->copy()->subDays($window_days)->toDateString();
    $nextEnd = $window_end->copy()->addDays($window_days);
    // Don't allow paging into the future
    if ($nextEnd->gt(now())) {
        $nextEnd = now();
    }
    $nextEndStr = $nextEnd->toDateString();
    $isFuture   = $window_end->copy()->addDays($window_days)->gt(now());

    // Build a route helper for the current view that lets us swap one query param
    $base = ['end' => $endStr, 'days' => $window_days, 'search' => $search, 'adjustments_only' => $adjustments_only ? 1 : 0];
@endphp

<div class="px-4 py-4 lg:px-8">

    {{-- ╔════════════ TOP BAR ════════════╗ --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
        <div class="flex flex-wrap items-center justify-between gap-3 mb-3">
            <div>
                <h1 class="text-lg font-semibold text-gray-800">Pharmacy Stock Movement Log</h1>
                <p class="text-xs text-gray-500 mt-0.5">
                    Day-by-drug movement matrix · negative = stock out · red = adjustment
                </p>
            </div>
            <div class="flex gap-2 text-xs">
                <a href="{{ route('pharmacy.stock.log', array_merge($base, ['days' => 1])) }}"
                   class="px-3 py-1.5 rounded-md border {{ $window_days === 1 ? 'bg-cr-700 text-white border-cr-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50' }}">
                    Day
                </a>
                <a href="{{ route('pharmacy.stock.log', array_merge($base, ['days' => 7])) }}"
                   class="px-3 py-1.5 rounded-md border {{ $window_days === 7 ? 'bg-cr-700 text-white border-cr-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50' }}">
                    Week
                </a>
                <a href="{{ route('pharmacy.stock.log', array_merge($base, ['days' => 30])) }}"
                   class="px-3 py-1.5 rounded-md border {{ $window_days === 30 ? 'bg-cr-700 text-white border-cr-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50' }}">
                    Month
                </a>
            </div>
        </div>

        {{-- ─── Window navigation row ─── --}}
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-2">
                <a href="{{ route('pharmacy.stock.log', array_merge($base, ['end' => $prevEnd])) }}"
                   class="px-2.5 py-1.5 rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 text-sm" title="Previous window">◀</a>

                <span class="text-sm font-medium text-gray-800">
                    {{ $days[0]->format('d M') }} → {{ end($days)->format('d M Y') }}
                </span>

                @if(! $isFuture)
                <a href="{{ route('pharmacy.stock.log', array_merge($base, ['end' => $nextEndStr])) }}"
                   class="px-2.5 py-1.5 rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 text-sm" title="Next window">▶</a>
                @else
                <span class="px-2.5 py-1.5 rounded-md border border-gray-200 bg-gray-100 text-gray-400 text-sm cursor-not-allowed">▶</span>
                @endif

                <a href="{{ route('pharmacy.stock.log', ['days' => $window_days]) }}"
                   class="px-2.5 py-1.5 rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 text-sm">
                    Today
                </a>
            </div>

            {{-- ─── Filters --- --}}
            <form method="GET" class="flex flex-wrap items-center gap-2" id="filterForm">
                <input type="hidden" name="days" value="{{ $window_days }}">
                <input type="hidden" name="end" value="{{ $endStr }}">

                <label class="text-xs text-gray-600">Jump to:</label>
                <input type="date" name="end" value="{{ $endStr }}"
                       max="{{ now()->toDateString() }}"
                       class="px-2 py-1.5 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-cr-500 focus:border-cr-500"
                       onchange="this.form.submit()">

                <input type="text" name="search" value="{{ $search }}"
                       placeholder="Search drug…"
                       class="px-2 py-1.5 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-cr-500 focus:border-cr-500">

                <label class="flex items-center gap-1.5 text-xs text-gray-700 cursor-pointer select-none">
                    <input type="checkbox" name="adjustments_only" value="1" {{ $adjustments_only ? 'checked' : '' }}
                           onchange="this.form.submit()"
                           class="rounded border-gray-300 text-cr-700 focus:ring-cr-500">
                    Adjustments only
                </label>

                <button type="submit" class="btn-secondary text-xs">Apply</button>
            </form>
        </div>
    </div>

    {{-- ╔════════════ MATRIX ════════════╗ --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        @if(count($rows) === 0)
            <div class="text-center py-16 text-gray-400 text-sm">
                No stock movement in this window.
                @if($adjustments_only)
                    <div class="mt-1 text-xs">("Adjustments only" is on — try turning it off.)</div>
                @endif
            </div>
        @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm border-collapse">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="text-left px-3 py-2 font-medium text-gray-700 sticky left-0 bg-gray-50 z-10 min-w-[220px]">
                            Drug
                        </th>
                        @foreach($days as $day)
                            @php
                                $isWeekend = $day->isWeekend();
                                $isToday   = $day->isToday();
                            @endphp
                            <th class="text-center px-2 py-2 font-medium text-xs whitespace-nowrap
                                       {{ $isToday ? 'bg-cr-50 text-cr-800' : ($isWeekend ? 'text-gray-400' : 'text-gray-700') }}">
                                <div>{{ $day->format('D') }}</div>
                                <div class="text-[10px] font-normal">{{ $day->format('d M') }}</div>
                            </th>
                        @endforeach
                        <th class="text-right px-3 py-2 font-medium text-gray-700 whitespace-nowrap bg-gray-100 border-l border-gray-200">
                            Balance today
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($rows as $row)
                        <tr class="hover:bg-gray-50">
                            {{-- Drug name (sticky left, click to drill into timeline) --}}
                            <td class="px-3 py-2 sticky left-0 bg-white hover:bg-gray-50 border-r border-gray-100">
                                <a href="{{ route('pharmacy.stock.log.timeline', $row['drug_id']) }}"
                                   class="font-medium text-cr-700 hover:underline">
                                    {{ $row['drug_name'] }}
                                </a>
                                <div class="text-[11px] text-gray-400 font-mono">{{ $row['drug_code'] }}</div>
                            </td>

                            {{-- Cells: one per day --}}
                            @foreach($days as $day)
                                @php
                                    $key  = $day->toDateString();
                                    $cell = $row['cells'][$key] ?? null;
                                @endphp
                                @if($cell === null)
                                    <td class="text-center text-gray-300 px-2 py-2">·</td>
                                @else
                                    @php
                                        $isAdj = $cell['kind'] === 'adjustment';
                                        $isPositive = !$isAdj && $cell['net'] > 0;
                                        $cellBg = $isAdj ? 'bg-red-50' : ($isPositive ? 'bg-green-50' : '');
                                        $textColor = $isAdj
                                            ? 'text-red-700 font-semibold'
                                            : ($cell['net'] > 0 ? 'text-green-700 font-semibold' : ($cell['net'] < 0 ? 'text-gray-800' : 'text-gray-400'));
                                    @endphp
                                    <td class="text-center px-2 py-2 {{ $cellBg }} cursor-pointer hover:bg-gray-200"
                                        onclick="openDayDetail({{ $row['drug_id'] }}, '{{ $key }}', '{{ addslashes($row['drug_name']) }}')"
                                        title="{{ $cell['txn_count'] }} transaction{{ $cell['txn_count'] === 1 ? '' : 's' }}{{ $cell['adj_count'] > 0 ? ' ('.$cell['adj_count'].' adjustment'.($cell['adj_count']===1?'':'s').')' : '' }}">
                                        <span class="{{ $textColor }}">
                                            {{ $cell['net'] > 0 ? '+' : '' }}{{ number_format($cell['net']) }}
                                        </span>
                                        @if($isAdj)
                                            <span class="text-red-600" title="Contains adjustment">⚠</span>
                                        @endif
                                    </td>
                                @endif
                            @endforeach

                            {{-- Balance --}}
                            <td class="text-right px-3 py-2 bg-gray-50 border-l border-gray-200 font-mono font-semibold
                                       {{ $row['balance_today'] <= 0 ? 'text-red-700' : 'text-gray-800' }}">
                                {{ number_format($row['balance_today']) }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>

                {{-- Footer with column totals --}}
                <tfoot class="bg-gray-50 border-t-2 border-gray-300">
                    <tr class="text-xs text-gray-600">
                        <td class="px-3 py-2 sticky left-0 bg-gray-50 font-semibold">Daily net</td>
                        @foreach($days as $day)
                            @php $t = $totals[$day->toDateString()] ?? ['net'=>0,'in'=>0,'out'=>0]; @endphp
                            <td class="text-center px-2 py-2 font-mono">
                                <div class="font-semibold {{ $t['net'] > 0 ? 'text-green-700' : ($t['net'] < 0 ? 'text-gray-700' : 'text-gray-400') }}">
                                    {{ $t['net'] > 0 ? '+' : '' }}{{ number_format($t['net']) }}
                                </div>
                                <div class="text-[10px] text-gray-400">
                                    @if($t['in']  > 0) +{{ number_format($t['in']) }} @endif
                                    @if($t['out'] < 0) {{ number_format($t['out']) }} @endif
                                </div>
                            </td>
                        @endforeach
                        <td class="bg-gray-100 border-l border-gray-200"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        @endif

        {{-- ─── Pagination ─── --}}
        @if($last_page > 1)
            <div class="px-4 py-3 border-t border-gray-200 flex items-center justify-between text-xs text-gray-600">
                <div>
                    Showing {{ ($page - 1) * $per_page + 1 }}–{{ min($page * $per_page, $total_rows) }} of {{ number_format($total_rows) }} drugs
                </div>
                <div class="flex gap-1">
                    @if($page > 1)
                        <a href="{{ route('pharmacy.stock.log', array_merge($base, ['page' => $page - 1])) }}"
                           class="px-2.5 py-1 rounded border border-gray-300 hover:bg-gray-50">Previous</a>
                    @endif
                    @if($page < $last_page)
                        <a href="{{ route('pharmacy.stock.log', array_merge($base, ['page' => $page + 1])) }}"
                           class="px-2.5 py-1 rounded border border-gray-300 hover:bg-gray-50">Next</a>
                    @endif
                </div>
            </div>
        @endif
    </div>

    {{-- ─── Legend ─── --}}
    <div class="mt-3 flex flex-wrap items-center gap-x-5 gap-y-1 text-xs text-gray-500">
        <span><span class="inline-block w-3 h-3 bg-red-50 border border-red-200 align-middle"></span> = cell with adjustment (loss signal)</span>
        <span><span class="inline-block w-3 h-3 bg-green-50 border border-green-200 align-middle"></span> = stock in (positive movement)</span>
        <span><span class="text-green-700 font-semibold">+30</span> = stock in</span>
        <span><span class="text-gray-800">-5</span> = stock out (dispense)</span>
        <span><span class="text-red-700 font-semibold">-20 ⚠</span> = adjustment</span>
        <span>· = no movement</span>
        <span class="text-cr-700">Click a drug name → full timeline</span>
        <span class="text-cr-700">Click a cell → day breakdown</span>
    </div>
</div>

{{-- ╔════════════ DAY DETAIL MODAL ════════════╗ --}}
<div id="dayDetailModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-start">
            <div>
                <h3 class="font-semibold text-gray-800" id="dayDetailTitle">Movement Details</h3>
                <p class="text-xs text-gray-500" id="dayDetailSub"></p>
            </div>
            <button onclick="closeDayDetail()" class="text-gray-500 hover:text-gray-800 text-2xl leading-none">&times;</button>
        </div>
        <div id="dayDetailBody" class="p-5">
            <div class="text-center py-8 text-gray-400 text-sm">Loading…</div>
        </div>
    </div>
</div>

<script>
    function openDayDetail(drugId, dateStr, drugName) {
        const modal = document.getElementById('dayDetailModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.getElementById('dayDetailTitle').textContent = drugName;

        const d = new Date(dateStr);
        document.getElementById('dayDetailSub').textContent =
            d.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });

        const body = document.getElementById('dayDetailBody');
        body.innerHTML = '<div class="text-center py-8 text-gray-400 text-sm">Loading…</div>';

        fetch('{{ route('pharmacy.stock.log.day-detail') }}?drug_id=' + drugId + '&date=' + dateStr)
            .then(r => r.json())
            .then(data => {
                if (!data.movements || data.movements.length === 0) {
                    body.innerHTML = '<div class="text-center py-8 text-gray-400 text-sm">No movements found for this day.</div>';
                    return;
                }
                let html = '<table class="w-full text-sm"><thead class="border-b border-gray-200"><tr class="text-xs text-gray-500 uppercase">' +
                    '<th class="text-left px-2 py-2">Time</th>' +
                    '<th class="text-left px-2 py-2">Type</th>' +
                    '<th class="text-right px-2 py-2">Qty</th>' +
                    '<th class="text-left px-2 py-2">Reference</th>' +
                    '<th class="text-left px-2 py-2">By</th>' +
                    '</tr></thead><tbody>';

                data.movements.forEach(m => {
                    const rowBg = m.is_adjustment ? 'bg-red-50' : '';
                    const qtyColor = m.is_adjustment ? 'text-red-700 font-semibold' :
                                     m.quantity > 0 ? 'text-green-700' : 'text-gray-800';
                    html += '<tr class="border-b border-gray-100 ' + rowBg + '">' +
                        '<td class="px-2 py-2 font-mono text-xs">' + m.time + '</td>' +
                        '<td class="px-2 py-2"><span class="text-xs">' + m.type + (m.is_adjustment ? ' ⚠' : '') + '</span></td>' +
                        '<td class="px-2 py-2 text-right font-mono ' + qtyColor + '">' +
                            (m.quantity > 0 ? '+' : '') + m.quantity + '</td>' +
                        '<td class="px-2 py-2 text-xs text-gray-600">' + (m.reference || '—') +
                            (m.notes ? '<div class="text-[11px] text-gray-400 italic">' + escapeHtml(m.notes) + '</div>' : '') +
                            (m.batch ? '<div class="text-[11px] text-gray-400">Batch: ' + escapeHtml(m.batch) + '</div>' : '') +
                            '</td>' +
                        '<td class="px-2 py-2 text-xs text-gray-600">' + (m.by || '—') + '</td>' +
                        '</tr>';
                });

                html += '</tbody></table>';
                body.innerHTML = html;
            })
            .catch(err => {
                body.innerHTML = '<div class="text-center py-8 text-red-500 text-sm">Failed to load: ' + err.message + '</div>';
            });
    }

    function closeDayDetail() {
        const modal = document.getElementById('dayDetailModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    function escapeHtml(s) {
        if (s === null || s === undefined) return '';
        return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }

    // Close modal on backdrop click
    document.getElementById('dayDetailModal').addEventListener('click', function (e) {
        if (e.target === this) closeDayDetail();
    });

    // Close modal on Escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeDayDetail();
    });
</script>
@endsection