@extends('layouts.app')
@section('title','Services Charged Report')
@section('styles')<style>@media print{.no-print{display:none!important}body{background:#fff}}.sc-tab{padding:8px 16px;font-size:12px;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;white-space:nowrap}.sc-tab:hover{color:#0069c9;background:#f0f7ff}.sc-tab.active{color:#0069c9;border-bottom-color:#0069c9}.sc-panel{display:none}.sc-panel.active{display:block}</style>@endsection
@section('content')
<div class="no-print flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Services Charged</h1>
        <p class="text-xs text-gray-400">{{ $from->format('d M Y') }} — {{ $to->format('d M Y') }}</p>
    </div>
    @include('reports._export-buttons', ['exportType' => 'services-charged'])
</div>
@include('reports._date-filter')

{{-- Tabs + Panels --}}
<div class="bg-white rounded-xl border shadow-sm overflow-hidden">
    <div class="flex overflow-x-auto border-b border-gray-200 px-1" style="scrollbar-width:none">
        @foreach($grouped as $cat => $items)
        <button class="sc-tab {{ $loop->first ? 'active' : '' }}" data-cat="{{ Str::slug($cat) }}" onclick="scTab(this, '{{ Str::slug($cat) }}')">
            {{ $cat }}
            <span class="ml-1 text-xs px-1.5 py-0.5 rounded-full {{ $loop->first ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500' }}">{{ $items->count() }}</span>
        </button>
        @endforeach
    </div>

    @foreach($grouped as $cat => $items)
    <div class="sc-panel {{ $loop->first ? 'active' : '' }}" id="sc-{{ Str::slug($cat) }}">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="table-header whitespace-nowrap">Date of Service</th>
                    <th class="table-header">Patient Name</th>
                    <th class="table-header">Payer</th>
                    <th class="table-header">Service / Description</th>
                    <th class="table-header text-right" style="width:70px">Qty</th>
                    <th class="table-header text-right" style="width:110px">Unit Price</th>
                    <th class="table-header text-right" style="width:110px">Total (KES)</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($items as $row)
                <tr class="hover:bg-gray-50/50">
                    <td class="table-cell text-xs text-gray-400 whitespace-nowrap">{{ \Carbon\Carbon::parse($row->date_of_service)->format('d M Y') }}</td>
                    <td class="table-cell text-xs">{{ $row->patient_name }}</td>
                    <td class="table-cell text-xs">{{ $row->payer }}</td>
                    <td class="table-cell text-xs font-medium">{{ $row->service }}</td>
                    <td class="table-cell text-xs text-right">{{ number_format($row->qty) }}</td>
                    <td class="table-cell text-xs text-right">{{ number_format($row->unit_price) }}</td>
                    <td class="table-cell text-xs text-right font-semibold">{{ number_format($row->revenue) }}</td>
                </tr>
                @empty
                <tr><td colspan="7" class="table-cell text-center text-gray-400 py-8">No records.</td></tr>
                @endforelse
            </tbody>
            <tfoot>
                <tr class="bg-gray-100">
                    <td colspan="4" class="table-cell font-bold text-xs">{{ $cat }} Total</td>
                    <td class="table-cell text-right font-bold text-xs">{{ number_format($items->sum('qty')) }}</td>
                    <td class="table-cell"></td>
                    <td class="table-cell text-right font-bold">KES {{ number_format($items->sum('revenue')) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    @endforeach
</div>
@endsection
@section('scripts')
<script>
function scTab(el, panelId) {
    if (!el) return;
    document.querySelectorAll('.sc-tab').forEach(t => {
        t.classList.remove('active');
        const b = t.querySelector('span');
        if (b) { b.classList.remove('bg-blue-100','text-blue-700'); b.classList.add('bg-gray-100','text-gray-500'); }
    });
    document.querySelectorAll('.sc-panel').forEach(p => p.classList.remove('active'));
    el.classList.add('active');
    const b = el.querySelector('span');
    if (b) { b.classList.add('bg-blue-100','text-blue-700'); b.classList.remove('bg-gray-100','text-gray-500'); }
    const panel = document.getElementById('sc-' + panelId);
    if (panel) panel.classList.add('active');
}
</script>
@endsection