@extends('layouts.app')

@section('title', 'Reminders')

@section('content')

<div class="container mx-auto px-4 py-6">

    <!-- Page Header -->
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-bold text-gray-800">
            Locker Expiry Reminders
        </h2>

        <span class="text-sm text-gray-500">
            Total: {{ $registrations->count() }}
        </span>
    </div>

  <!-- Friendly Working Status -->
<div class="mb-6">
    <div class="bg-blue-100 border border-blue-300 text-blue-900 px-5 py-4 rounded-lg text-center">
        
        <p class="text-lg font-semibold">
            🚧 Page Update in Progress
        </p>

        <p class="text-sm mt-1">
            We are currently improving this page. Some sections may be updated soon.
        </p>

    </div>
</div>

    <!-- Table -->
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <table class="min-w-full text-sm text-left">
            
            <!-- Head -->
            <thead class="bg-gray-100 text-gray-700 uppercase text-xs">
                <tr>
                    <th class="px-4 py-3">Client</th>
                    <th class="px-4 py-3">Phone</th>
                    <th class="px-4 py-3">Expiry Date</th>
                    <th class="px-4 py-3">Days Left</th>
                    <th class="px-4 py-3">Status</th>
                    <th class="px-4 py-3 text-center">Action</th>
                </tr>
            </thead>

            <!-- Body -->
            <tbody class="divide-y">

            @forelse($registrations as $reg)

                @php
                    $isUrgent = $reg->days_left <= 7;
                    $rowColor = $isUrgent ? 'bg-red-50' : 'bg-yellow-50';
                @endphp

                <tr class="{{ $rowColor }} hover:bg-gray-50 transition">

                    <!-- Client -->
                    <td class="px-4 py-3 font-medium text-gray-800">
                        {{ $reg->client->name }}
                    </td>

                    <!-- Phone -->
                    <td class="px-4 py-3">
                        {{ $reg->client->phone }}
                    </td>

                    <!-- Expiry -->
                    <td class="px-4 py-3">
                        {{ \Carbon\Carbon::parse($reg->contract_end_date)->format('d M Y') }}
                    </td>

                    <!-- Days Left -->
                    <td class="px-4 py-3 font-semibold">
                        <span class="{{ $isUrgent ? 'text-red-600' : 'text-yellow-600' }}">
                            {{ $reg->days_left }} days
                        </span>
                    </td>

                    <!-- Status -->
                    <td class="px-4 py-3">
                        @if($reg->days_left <= 7)
                            <span class="px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full">
                                Urgent
                            </span>
                        @elseif($reg->days_left <= 15)
                            <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full">
                                Reminder
                            </span>
                        @endif
                    </td>

                    <!-- Action -->
                    <td class="px-4 py-3 text-center">

                        <!-- View -->
                        <a href="{{ route('customers.show', $reg->client->id) }}"
                           class="text-blue-600 hover:underline text-xs mr-2">
                           View
                        </a>

                        <!-- Send Mail Button -->
                        <button onclick="sendReminder('{{ $reg->id }}')"
                                class="bg-green-500 text-white px-2 py-1 text-xs rounded hover:bg-green-600">
                            Send Mail
                        </button>

                    </td>

                </tr>

            @empty

                <tr>
                    <td colspan="6" class="text-center py-6 text-gray-500">
                        No upcoming expiries
                    </td>
                </tr>

            @endforelse

            </tbody>
        </table>
    </div>

</div>

@endsection