@extends('layouts.app')
@section('title', 'Dispensed Products')
@section('content')

{{-- ─────────────────────────────────────────────────────────────────────
     Dispensed Products page (admin only).
     Lists recent PharmacyDispense rows so admins can find a wrong
     dispense and click Reverse. The Reverse modal at the bottom posts
     to the same /pharmacy/dispenses/{id}/reverse endpoint as the per-
     visit dispense form, so all the safety + audit + invoice handling
     is shared.
     ───────────────────────────────────────────────────────────────────── --}}

<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
            <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
        </div>
        <div>
            <h1 class="text-lg font-bold text-gray-900">Dispensed Products</h1>
            <p class="text-xs text-gray-400">
                Recent dispense events ·
                <a href="{{ route('pharmacy.index') }}" class="text-blue-600 hover:underline">Back to Pharmacy</a>
            </p>
        </div>
    </div>
</div>

@if(session('success'))
<div class="bg-green-50 border border-green-200 rounded-lg px-3 py-2 mb-3 text-xs text-green-800">{{ session('success') }}</div>
@endif
@if(session('warning'))
<div class="bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 mb-3 text-xs text-amber-800">{{ session('warning') }}</div>
@endif

{{-- Stat strip --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
    <div class="stat-card">
        <p class="text-xs text-gray-400 uppercase">Total Dispenses</p>
        <p class="text-lg font-bold text-gray-700">{{ number_format($stats['total']) }}</p>
    </div>
    <div class="stat-card">
        <p class="text-xs text-gray-400 uppercase">Active</p>
        <p class="text-lg font-bold text-blue-600">{{ number_format($stats['active']) }}</p>
    </div>
    <div class="stat-card">
        <p class="text-xs text-gray-400 uppercase">Reversed</p>
        <p class="text-lg font-bold text-red-600">{{ number_format($stats['reversed']) }}</p>
    </div>
    <div class="stat-card">
        <p class="text-xs text-gray-400 uppercase">Refund Pending</p>
        <p class="text-lg font-bold text-amber-600">{{ number_format($stats['refund_pending']) }}</p>
    </div>
</div>

<div class="bg-white rounded-xl border shadow-sm">
    {{-- Filter bar --}}
    <div class="px-5 py-3 border-b bg-gray-50/50">
        <form method="GET" class="flex flex-wrap gap-2 items-end">
            <div>
                <label class="form-label">From</label>
                <input type="date" name="from" value="{{ $from->format('Y-m-d') }}" class="form-input text-xs w-36 no-flatpickr">
            </div>
            <div>
                <label class="form-label">To</label>
                <input type="date" name="to" value="{{ $to->format('Y-m-d') }}" class="form-input text-xs w-36 no-flatpickr">
            </div>
            <div class="flex-1 min-w-[200px]">
                <label class="form-label">Search</label>
                <input type="text" name="q" value="{{ $q }}"
                       placeholder="Patient name / MRN / drug name…"
                       class="form-input text-xs w-full">
            </div>
            <div>
                <label class="form-label">Status</label>
                <select name="status" class="form-input text-xs w-32">
                    <option value="all"      {{ $status === 'all'      ? 'selected' : '' }}>All</option>
                    <option value="active"   {{ $status === 'active'   ? 'selected' : '' }}>Active only</option>
                    <option value="reversed" {{ $status === 'reversed' ? 'selected' : '' }}>Reversed only</option>
                </select>
            </div>
            <button class="btn-primary text-xs">Filter</button>
            @if(request()->hasAny(['from','to','q','status']))
            <a href="{{ route('pharmacy.dispensed') }}" class="btn-secondary text-xs">Reset</a>
            @endif
        </form>
        <p class="text-[11px] text-gray-400 mt-2">
            Showing dispenses from <strong>{{ $from->format('d M Y') }}</strong> to
            <strong>{{ $to->format('d M Y') }}</strong>. Default window is the last 7 days.
        </p>
    </div>

    {{-- Table --}}
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50">
                    <th class="table-header">Date / Time</th>
                    <th class="table-header">Patient</th>
                    <th class="table-header">Drug</th>
                    <th class="table-header text-right">Qty</th>
                    <th class="table-header text-right">Total (KES)</th>
                    <th class="table-header">Dispensed By</th>
                    <th class="table-header">Status</th>
                    <th class="table-header">Action</th>
                </tr>
            </thead>
            <tbody>
            @forelse($dispenses as $disp)
                @php
                    $patient = $disp->patient;
                    $drug    = $disp->drugItem;
                    $isRev   = $disp->reversed_at !== null;
                @endphp
                <tr class="border-b border-gray-50 {{ $isRev ? 'bg-gray-50/40 text-gray-500' : '' }}">
                    <td class="table-cell text-xs whitespace-nowrap">
                        {{ $disp->dispensed_at?->format('d M Y') }}<br>
                        <span class="text-[11px] text-gray-400">{{ $disp->dispensed_at?->format('H:i') }}</span>
                    </td>
                    <td class="table-cell text-xs">
                        @if($patient)
                            <div class="font-medium {{ $isRev ? '' : 'text-gray-900' }}">
                                {{ trim(($patient->first_name ?? '') . ' ' . ($patient->last_name ?? '')) ?: '—' }}
                            </div>
                            <div class="text-[11px] text-gray-400 font-mono">{{ $patient->mrn ?? '' }}</div>
                        @else
                            <span class="text-gray-400">—</span>
                        @endif
                    </td>
                    <td class="table-cell text-xs">
                        <div class="{{ $isRev ? 'line-through' : 'font-medium' }}">
                            {{ $drug->name ?? ($disp->prescription->drug_name ?? '—') }}
                        </div>
                        @if($drug && $drug->strength)
                        <div class="text-[11px] text-gray-400">{{ $drug->strength }}</div>
                        @endif
                    </td>
                    <td class="table-cell text-xs text-right font-semibold {{ $isRev ? '' : 'text-blue-700' }}">
                        {{ $disp->quantity_dispensed }}
                    </td>
                    <td class="table-cell text-xs text-right">
                        {{ number_format($disp->total_price ?? 0, 2) }}
                    </td>
                    <td class="table-cell text-xs">
                        {{ $disp->dispensedBy->name ?? '—' }}
                    </td>
                    <td class="table-cell">
                        @if($isRev)
                            <span class="inline-block text-[10px] font-bold text-red-700 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">
                                REVERSED
                            </span>
                            @if($disp->refund_status === 'pending')
                            <span class="inline-block text-[10px] font-bold text-amber-700 bg-amber-50 border border-amber-200 rounded px-1.5 py-0.5 ml-1">
                                REFUND PENDING
                            </span>
                            @endif
                            <div class="text-[11px] text-gray-500 mt-1">
                                by {{ $disp->reversedBy->name ?? 'unknown' }}
                                · {{ $disp->reversed_at?->format('d M Y, H:i') }}
                            </div>
                            @if($disp->reversal_reason)
                            <div class="text-[11px] text-gray-500 italic mt-0.5">
                                "{{ Str::limit($disp->reversal_reason, 80) }}"
                            </div>
                            @endif
                        @else
                            <span class="inline-block text-[10px] font-bold text-green-700 bg-green-50 border border-green-200 rounded px-1.5 py-0.5">
                                ACTIVE
                            </span>
                        @endif
                    </td>
                    <td class="table-cell">
                        @if(!$isRev)
                            <button type="button"
                                    onclick="openReverseDispenseModal({{ $disp->id }}, '{{ addslashes($drug->name ?? $disp->prescription->drug_name ?? 'this drug') }}', {{ $disp->quantity_dispensed }})"
                                    class="text-[11px] text-red-700 bg-red-50 hover:bg-red-100 border border-red-200 rounded px-2 py-1 font-semibold">
                                Reverse
                            </button>
                        @endif
                        @if($disp->prescription && $disp->prescription->visit_id)
                        <a href="{{ route('pharmacy.dispense.form', $disp->prescription->visit_id) }}"
                           class="text-[11px] text-blue-600 hover:underline ml-1"
                           title="Open this visit's dispense page">
                            View visit
                        </a>
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="table-cell text-center text-gray-400 py-8 text-xs">
                        No dispenses found in this date range.
                        @if($q || $status !== 'all')
                        Try clearing the search or switching status to "All".
                        @endif
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($dispenses->hasPages())
    <div class="px-4 py-3 border-t">{{ $dispenses->links() }}</div>
    @endif
</div>

{{-- ─── Reverse Dispense Modal ─────────────────────────────────────────
     Same modal as on the per-visit dispense page. Posts to the same
     endpoint. The page is admin-gated at the route level, so we don't
     re-check $isAdmin around the modal. --}}
<div id="reverseDispenseModal" class="hidden fixed inset-0 bg-black/30 z-50 flex items-center justify-center">
    <div class="bg-white rounded-xl p-6 w-[440px] shadow-xl">
        <div class="flex justify-between items-start mb-3">
            <div>
                <h4 class="text-sm font-bold text-red-800">Reverse Dispense</h4>
                <p class="text-[11px] text-gray-500 mt-0.5">
                    Returns <strong id="revDispQty">—</strong> unit(s) of
                    <strong id="revDispDrug">—</strong> to stock.
                </p>
            </div>
            <button type="button" onclick="closeReverseDispenseModal()" class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
        </div>

        <div class="bg-amber-50 border border-amber-200 rounded px-3 py-2 mb-3 text-[11px] text-amber-800">
            <strong>Note:</strong> if the patient has already paid, the
            invoice line will be flagged as <strong>refund pending</strong>.
            Stock is restocked either way. This action is logged.
        </div>

        <form id="reverseDispenseForm" method="POST">
            @csrf
            <div class="space-y-3">
                <div>
                    <label class="form-label">Reason <span class="text-red-500">*</span></label>
                    <textarea name="reversal_reason" rows="3" required minlength="5" maxlength="1000"
                              class="form-input text-sm"
                              placeholder="e.g. Wrong drug dispensed — patient was supposed to get Amoxicillin not Ampicillin."></textarea>
                    <p class="text-[11px] text-gray-400 mt-1">5–1000 characters. Captured in the audit log.</p>
                </div>
            </div>
            <div class="flex gap-2 mt-4 justify-end">
                <button type="button" onclick="closeReverseDispenseModal()" class="btn-secondary text-xs px-4">Cancel</button>
                <button type="submit" class="btn-danger text-xs px-4">Confirm Reverse</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openReverseDispenseModal(dispenseId, drugName, qty) {
        const m    = document.getElementById('reverseDispenseModal');
        const form = document.getElementById('reverseDispenseForm');
        if (!m || !form) return;

        form.action = "{{ url('/pharmacy/dispenses') }}/" + dispenseId + "/reverse";
        document.getElementById('revDispDrug').textContent = drugName;
        document.getElementById('revDispQty').textContent  = qty;

        const reason = form.querySelector('textarea[name="reversal_reason"]');
        if (reason) reason.value = '';

        m.classList.remove('hidden');
        setTimeout(() => reason?.focus(), 50);
    }

    function closeReverseDispenseModal() {
        document.getElementById('reverseDispenseModal')?.classList.add('hidden');
    }
</script>

@endsection