@extends('layouts.app')
@section('title', 'Notifications')
@section('no-page-header')
@section('content')
<div class="space-y-3">
    <div class="flex flex-wrap items-center justify-between gap-2">
        <div><h1 class="text-base font-semibold text-gray-800">Needs attention</h1><p class="text-xs text-gray-500 mt-1">Alerts disappear after renewal, payment or appointment completion. Refresh to update the list.</p></div>
        <a href="{{ request()->fullUrl() }}" class="px-3 py-2 border border-gray-200 bg-white rounded-md text-xs text-gray-700">Refresh</a>
    </div>
    <div class="flex flex-wrap gap-2">
        <a href="{{ route('notifications.index', ['search' => $search]) }}" class="px-3 py-2 rounded-md border text-xs {{ $category === 'all' ? 'bg-blue-50 border-blue-200 text-blue-800' : 'bg-white border-gray-200 text-gray-600' }}">All ({{ array_sum(array_column($groups, 'count')) }})</a>
        @foreach ($groups as $key => $group)
            <a href="{{ route('notifications.index', ['category' => $key, 'search' => $search]) }}" class="px-3 py-2 rounded-md border text-xs {{ $category === $key ? 'bg-blue-50 border-blue-200 text-blue-800' : 'bg-white border-gray-200 text-gray-600' }}">{{ $group['label'] }} ({{ $group['count'] }})</a>
        @endforeach
    </div>
    <form action="{{ route('notifications.index') }}" method="GET" class="flex flex-wrap gap-2 rounded-md bg-white border border-gray-200 p-3">
        <input type="hidden" name="category" value="{{ $category }}">
        <input type="search" name="search" value="{{ $search }}" maxlength="100" aria-label="Search alerts" placeholder="Customer, ID, phone, safebox or invoice" class="flex-1 min-w-0 px-3 py-2 text-xs border border-gray-300 rounded-md">
        <button class="px-3 py-2 rounded-md border border-blue-200 bg-blue-50 text-blue-700 text-xs">Search</button>
        <a href="{{ route('notifications.index', ['category' => $category]) }}" class="px-3 py-2 text-xs text-gray-600 border border-gray-200 rounded-md">Reset</a>
    </form>
    @if (in_array($category, ['all', 'overdue']))
        <p class="text-xs text-gray-500">Invoices without a saved due date use 30 days from the invoice date.</p>
    @endif
    <div class="bg-white border border-gray-200 rounded-md overflow-x-auto">
        <table class="min-w-full text-xs text-gray-600">
            <thead class="bg-gray-50"><tr>
                @foreach (['Alert', 'Customer', 'Safebox / Reference', 'Date / Time', 'Details', 'Action'] as $heading)
                    <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ $heading }}</th>
                @endforeach
            </tr></thead>
            <tbody class="divide-y divide-gray-100">
                @forelse ($alerts as $alert)
                    @php
                        $date = \Carbon\Carbon::parse($alert->alert_date)->startOfDay();
                        $days = (int) abs(today()->diffInDays($date));
                    @endphp
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2">{{ $groups[$alert->category]['label'] }}</td>
                        <td class="px-3 py-2"><div class="font-medium text-gray-700" style="max-width:180px;overflow-wrap:anywhere">{{ $alert->customer }}</div><span class="text-gray-500">ID {{ $alert->client_id }} · {{ $alert->phone }}</span></td>
                        <td class="px-3 py-2"><div>{{ $alert->safebox ?? '—' }}</div><div>{{ $alert->reference }}</div></td>
                        <td class="px-3 py-2 whitespace-nowrap">{{ $date->format('d-m-Y') }}@if ($alert->appointment_time)<div>{{ \Carbon\Carbon::parse($alert->appointment_time)->format('g:i A') }}</div>@endif</td>
                        <td class="px-3 py-2">
                            @if ($alert->category === 'overdue')
                                <div class="font-medium text-red-700">RM {{ number_format($alert->amount, 2) }} outstanding</div><div>{{ $days }} days overdue</div>
                            @elseif ($alert->category === 'expired')
                                <span class="text-red-700">Expired {{ $days }} days ago</span>
                            @elseif ($alert->category === 'expiring')
                                {{ $days === 0 ? 'Expires today' : 'Expires in ' . $days . ' days' }}
                            @else
                                Scheduled today
                            @endif
                        </td>
                        <td class="px-3 py-2 whitespace-nowrap">
                            @if (in_array($alert->category, ['expired', 'expiring']))
                                <a href="{{ route('customers.renewal', ['client' => $alert->client_id, 'registration' => $alert->registration_id]) }}" class="px-2 py-1 inline-flex rounded border border-blue-200 text-blue-700 bg-blue-50">Renew</a>
                            @elseif ($alert->category === 'appointments')
                                <a href="{{ route('appointments.show', $alert->id) }}" class="px-2 py-1 inline-flex rounded border border-blue-200 text-blue-700 bg-blue-50">View Appointment</a>
                            @elseif (auth()->user()->can('access_customers') && $alert->registration_id)
                                <a href="{{ route('customers.invoice.show', ['client' => $alert->client_id, 'registration' => $alert->registration_id, 'invoice_id' => $alert->id]) }}" class="px-2 py-1 inline-flex rounded border border-blue-200 text-blue-700 bg-blue-50">View / Pay Invoice</a>
                            @else
                                <a href="{{ route('invoices.index', ['search' => $alert->reference]) }}" class="px-2 py-1 inline-flex rounded border border-blue-200 text-blue-700 bg-blue-50">View Invoice</a>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-3 py-8 text-center">No outstanding alerts match this selection.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $alerts->links() }}
</div>
@endsection