@extends('layouts.app')

@section('content')
<div class="p-6 font-[Poppins]">

    <h1 class="text-2xl font-semibold mb-6 text-gray-800">💳 Member Payments Overview</h1>

    {{-- Filters --}}
    <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name or ID..."
            class="border rounded-xl p-2 w-full shadow-sm focus:ring-2 focus:ring-yellow-400">

        <select name="status" class="border rounded-xl p-2 shadow-sm focus:ring-2 focus:ring-yellow-400">
            <option value="">All Status</option>
            <option value="active" {{ request('status')=='active'?'selected':'' }}>Active</option>
            <option value="expired" {{ request('status')=='expired'?'selected':'' }}>Expired</option>
        </select>

        <select name="package_type" class="border rounded-xl p-2 shadow-sm focus:ring-2 focus:ring-yellow-400">
            <option value="">All Packages</option>
            <option value="1 Month" {{ request('package_type')=='1 Month'?'selected':'' }}>1 Month</option>
            <option value="3 Months" {{ request('package_type')=='3 Months'?'selected':'' }}>3 Months</option>
            <option value="6 Months" {{ request('package_type')=='6 Months'?'selected':'' }}>6 Months</option>
            <option value="12 Months" {{ request('package_type')=='12 Months'?'selected':'' }}>12 Months</option>
            <option value="Annual" {{ request('package_type')=='Annual'?'selected':'' }}>Annual</option>
            <option value="Personal Training" {{ request('package_type')=='Personal Training'?'selected':'' }}>Personal Training</option>
        </select>

        <button type="submit"
            class="bg-yellow-400 text-black font-semibold rounded-xl hover:bg-yellow-500 transition-all shadow py-2">
            Filter
        </button>
    </form>

    {{-- Members Table --}}
    <div class="bg-white rounded-2xl shadow-md overflow-hidden">
        <table class="min-w-full text-sm text-gray-700">
            <thead class="bg-gray-100 text-gray-700 uppercase text-xs">
                <tr>
                    <th class="px-4 py-3 text-left">Member</th>
                    <th class="px-4 py-3 text-left">Fingerprint ID</th>
                    <th class="px-4 py-3 text-left">Package</th>
                    <th class="px-4 py-3 text-left">Expiry Date</th>
                    <th class="px-4 py-3 text-left">Days Left</th>
                    <th class="px-4 py-3 text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($members as $member)
                    @php
                        $daysLeft = \Carbon\Carbon::now()->diffInDays(\Carbon\Carbon::parse($member->expiry_date), false);
                        $isExpired = $daysLeft < 0;
                        $rowColor = $isExpired ? 'bg-red-100 text-red-600' : ($daysLeft <= 7 ? 'bg-yellow-100 text-yellow-700' : '');
                    @endphp
                    <tr class="border-b hover:bg-gray-50 transition {{ $rowColor }}">
                        <td class="px-4 py-3 font-semibold">{{ $member->first_name }} {{ $member->surname }}</td>
                        <td class="px-4 py-3">{{ $member->fingerprint_id }}</td>
                        <td class="px-4 py-3">{{ $member->package_type }}</td>
                        <td class="px-4 py-3">{{ $member->expiry_date ? \Carbon\Carbon::parse($member->expiry_date)->format('Y-m-d') : 'N/A' }}</td>
                        <td class="px-4 py-3">
                            @if($isExpired)
                                <span class="font-bold text-red-500">Expired</span>
                            @else
                                {{ $daysLeft }} days
                            @endif
                        </td>
                        <td class="px-4 py-3 flex items-center justify-center gap-2">
                            <button onclick="openRenewModal('{{ $member->id }}', '{{ $member->first_name }}', '{{ $member->package_type }}')" 
                                class="bg-yellow-400 text-black text-xs px-3 py-2 rounded-lg hover:bg-yellow-500 transition shadow">
                                Renew
                            </button>
                            <a href="{{ route('members.paymentHistory', $member->id) }}" 
                                class="bg-gray-800 text-white text-xs px-3 py-2 rounded-lg hover:bg-gray-900 transition shadow">
                                History
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center py-6 text-gray-500">No members found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Renew Modal --}}
<div id="renewModal" class="fixed inset-0 bg-black bg-opacity-50 hidden justify-center items-center z-50">
    <div class="bg-white rounded-2xl p-6 w-[400px] shadow-lg">
        <h2 class="text-xl font-semibold mb-4 text-gray-800">Renew Membership</h2>
        <form id="renewForm" method="POST">
            @csrf
            <p class="text-sm mb-3 text-gray-600" id="memberInfo"></p>

            <label class="block text-sm font-semibold mb-1">Months</label>
            <input type="number" name="months" min="1" class="w-full border rounded-xl p-2 mb-3" required>

            <label class="block text-sm font-semibold mb-1">Amount (LKR)</label>
            <input type="number" name="amount" class="w-full border rounded-xl p-2 mb-4" required>

            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeRenewModal()"
                    class="bg-gray-300 rounded-xl px-4 py-2 hover:bg-gray-400 transition">
                    Cancel
                </button>
                <button type="submit"
                    class="bg-yellow-400 text-black font-semibold rounded-xl px-4 py-2 hover:bg-yellow-500 transition">
                    Renew
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openRenewModal(id, name, packageType) {
        const modal = document.getElementById('renewModal');
        const form = document.getElementById('renewForm');
        const info = document.getElementById('memberInfo');

        form.action = `/members/${id}/renew`;
        info.textContent = `${name} (${packageType})`;

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeRenewModal() {
        const modal = document.getElementById('renewModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }
</script>
@endsection