@extends('layouts.app')

@section('content')
<div class="px-4 py-4 lg:px-8">

    {{-- ╔════════════ HEADER ════════════╗ --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <a href="{{ route('pharmacy.stock.log') }}" class="text-cr-700 text-xs hover:underline">← Back to matrix</a>
                <h1 class="text-lg font-semibold text-gray-800 mt-1">
                    {{ trim($drug->name . ' ' . ($drug->strength ?? '') . ' ' . ($drug->form ?? '')) }}
                </h1>
                <div class="text-xs text-gray-500 mt-0.5">
                    <span class="font-mono">{{ $drug->code }}</span> ·
                    Category: {{ $drug->category }} ·
                    Reorder level: {{ number_format($drug->reorder_level) }}
                </div>
            </div>

            <div class="flex items-center gap-3 text-sm">
                <div class="text-center">
                    <div class="text-[11px] text-gray-500 uppercase">Opening</div>
                    <div class="font-mono font-semibold text-gray-800">{{ number_format($opening) }}</div>
                </div>
                <div class="text-gray-300">→</div>
                <div class="text-center">
                    <div class="text-[11px] text-gray-500 uppercase">Closing</div>
                    <div class="font-mono font-semibold {{ $closing <= 0 ? 'text-red-700' : 'text-gray-800' }}">
                        {{ number_format($closing) }}
                    </div>
                </div>
                <div class="text-center pl-3 border-l border-gray-200">
                    <div class="text-[11px] text-gray-500 uppercase">Net</div>
                    <div class="font-mono font-semibold {{ ($closing - $opening) > 0 ? 'text-green-700' : (($closing - $opening) < 0 ? 'text-red-700' : 'text-gray-500') }}">
                        {{ ($closing - $opening) > 0 ? '+' : '' }}{{ number_format($closing - $opening) }}
                    </div>
                </div>
            </div>
        </div>

        {{-- Window picker --}}
        <form method="GET" class="flex flex-wrap items-center gap-2 mt-3 pt-3 border-t border-gray-100 text-sm">
            <label class="text-xs text-gray-600">From:</label>
            <input type="date" name="start" value="{{ $start->toDateString() }}"
                   max="{{ now()->toDateString() }}"
                   class="px-2 py-1.5 border border-gray-300 rounded-md text-sm">
            <label class="text-xs text-gray-600">To:</label>
            <input type="date" name="end" value="{{ $end->toDateString() }}"
                   max="{{ now()->toDateString() }}"
                   class="px-2 py-1.5 border border-gray-300 rounded-md text-sm">
            <button type="submit" class="btn-secondary text-xs">Apply</button>

            <span class="text-xs text-gray-400 ml-2">{{ $timeline->count() }} movement{{ $timeline->count() === 1 ? '' : 's' }} in window</span>
        </form>
    </div>

    {{-- ╔════════════ TIMELINE TABLE ════════════╗ --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        @if($timeline->isEmpty())
            <div class="text-center py-16 text-gray-400 text-sm">
                No movement in this window.
            </div>
        @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr class="text-xs text-gray-600 uppercase">
                        <th class="text-left px-3 py-2.5 font-medium">Date</th>
                        <th class="text-left px-3 py-2.5 font-medium">Type</th>
                        <th class="text-left px-3 py-2.5 font-medium">Reference / Notes</th>
                        <th class="text-left px-3 py-2.5 font-medium">Batch</th>
                        <th class="text-left px-3 py-2.5 font-medium">By</th>
                        <th class="text-right px-3 py-2.5 font-medium">In</th>
                        <th class="text-right px-3 py-2.5 font-medium">Out</th>
                        <th class="text-right px-3 py-2.5 font-medium border-l border-gray-200 bg-gray-100">Running</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {{-- Opening balance row --}}
                    <tr class="bg-gray-50">
                        <td class="px-3 py-2 text-xs text-gray-500 italic" colspan="5">
                            Opening balance ({{ $start->format('d M Y') }})
                        </td>
                        <td class="px-3 py-2"></td>
                        <td class="px-3 py-2"></td>
                        <td class="px-3 py-2 text-right font-mono font-semibold text-gray-700 border-l border-gray-200 bg-gray-100">
                            {{ number_format($opening) }}
                        </td>
                    </tr>

                    @foreach($timeline as $m)
                        <tr class="{{ $m['is_adjustment'] ? 'bg-red-50' : 'hover:bg-gray-50' }}">
                            <td class="px-3 py-2 whitespace-nowrap">
                                <div class="text-sm text-gray-800">{{ $m['created_at']->format('d M Y') }}</div>
                                <div class="text-[11px] text-gray-400 font-mono">{{ $m['created_at']->format('H:i') }}</div>
                            </td>
                            <td class="px-3 py-2">
                                <span class="inline-block text-xs px-2 py-0.5 rounded
                                    {{ $m['is_adjustment'] ? 'bg-red-100 text-red-700' :
                                       ($m['quantity'] > 0 ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700') }}">
                                    {{ ucfirst($m['type']) }}{{ $m['is_adjustment'] ? ' ⚠' : '' }}
                                </span>
                                @if($m['department'])
                                    <div class="text-[11px] text-gray-400 mt-0.5">{{ $m['department'] }}</div>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-700">
                                {{ $m['reference'] ?? '—' }}
                                @if($m['notes'])
                                    <div class="text-[11px] text-gray-500 italic mt-0.5">{{ $m['notes'] }}</div>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-600 font-mono">{{ $m['batch'] ?? '—' }}</td>
                            <td class="px-3 py-2 text-xs text-gray-600">{{ $m['by'] }}</td>
                            <td class="px-3 py-2 text-right font-mono {{ $m['quantity'] > 0 ? 'text-green-700' : 'text-gray-300' }}">
                                {{ $m['quantity'] > 0 ? '+' . number_format($m['quantity']) : '·' }}
                            </td>
                            <td class="px-3 py-2 text-right font-mono {{ $m['quantity'] < 0 ? ($m['is_adjustment'] ? 'text-red-700 font-semibold' : 'text-gray-800') : 'text-gray-300' }}">
                                {{ $m['quantity'] < 0 ? number_format($m['quantity']) : '·' }}
                            </td>
                            <td class="px-3 py-2 text-right font-mono font-semibold border-l border-gray-200 bg-gray-50
                                       {{ $m['running'] <= 0 ? 'text-red-700' : 'text-gray-800' }}">
                                {{ number_format($m['running']) }}
                            </td>
                        </tr>
                    @endforeach

                    {{-- Closing balance row --}}
                    <tr class="bg-cr-50 font-semibold">
                        <td class="px-3 py-2 text-sm text-cr-800" colspan="5">
                            Closing balance ({{ $end->format('d M Y') }})
                        </td>
                        <td class="px-3 py-2"></td>
                        <td class="px-3 py-2"></td>
                        <td class="px-3 py-2 text-right font-mono border-l border-gray-200 bg-cr-100
                                   {{ $closing <= 0 ? 'text-red-700' : 'text-cr-800' }}">
                            {{ number_format($closing) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        @endif
    </div>

    {{-- ─── Quick stats footer ─── --}}
    @if($timeline->isNotEmpty())
        @php
            $totalIn  = $timeline->where('quantity', '>', 0)->sum('quantity');
            $totalOut = abs($timeline->where('quantity', '<', 0)->where('is_adjustment', false)->sum('quantity'));
            $totalAdj = abs($timeline->where('is_adjustment', true)->sum('quantity'));
            $adjCount = $timeline->where('is_adjustment', true)->count();
        @endphp
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mt-4">
            <div class="bg-white rounded-lg border border-gray-200 p-3">
                <div class="text-[11px] text-gray-500 uppercase">Total received</div>
                <div class="text-lg font-semibold text-green-700 font-mono">+{{ number_format($totalIn) }}</div>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-3">
                <div class="text-[11px] text-gray-500 uppercase">Total dispensed</div>
                <div class="text-lg font-semibold text-gray-800 font-mono">-{{ number_format($totalOut) }}</div>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-3">
                <div class="text-[11px] text-gray-500 uppercase">Adjustments (loss)</div>
                <div class="text-lg font-semibold text-red-700 font-mono">
                    {{ $totalAdj > 0 ? '-' . number_format($totalAdj) : '0' }}
                </div>
                <div class="text-[11px] text-gray-400">{{ $adjCount }} event{{ $adjCount === 1 ? '' : 's' }}</div>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-3">
                <div class="text-[11px] text-gray-500 uppercase">Loss rate</div>
                <div class="text-lg font-semibold font-mono
                           {{ ($totalIn > 0 && ($totalAdj / $totalIn) > 0.05) ? 'text-red-700' : 'text-gray-800' }}">
                    @if($totalIn > 0)
                        {{ number_format(($totalAdj / $totalIn) * 100, 1) }}%
                    @else
                        —
                    @endif
                </div>
                <div class="text-[11px] text-gray-400">of received</div>
            </div>
        </div>
    @endif
</div>
@endsection