@extends('layouts.app')

@section('content')
<div class="container mx-auto p-4 sm:p-6" x-data="{ showModal: false }">
    <!-- Member Header -->
    <div class="mb-8 text-center">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Member Details - <span class="text-blue-600">{{ $member->name }}</span></h1>
    </div>

    <!-- Personal Information Section -->
    <div class="bg-white p-4 sm:p-6 rounded-lg shadow-md mb-8 border border-gray-300">
        <!-- Add Custom Contribution Button -->
        <div class="mb-6 flex justify-end">
            <button @click="showModal = true" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 text-sm transition">
                <i class="fas fa-plus-circle mr-2"></i> Add Custom
            </button>
        </div>

        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-user-circle mr-2 text-blue-500"></i> Personal Information
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
            <div>
                <p class="flex items-center mb-2 text-gray-700"><strong>Name:</strong> {{ $member->name }}</p>
                <p class="flex items-center mb-2 text-gray-700"><strong>Employee ID:</strong> {{ $member->employee_id }}</p>
                <p class="flex items-center mb-2 text-gray-700"><strong>Email:</strong> {{ $member->email }}</p>
                <p class="flex items-center mb-2 text-gray-700"><strong>Phone:</strong> {{ $member->contact }}</p>
                <p class="flex items-center mb-2 text-gray-700"><strong>Status:</strong> 
                    <span class="text-sm {{ $member->status === 'active' ? 'text-green-500' : 'text-red-500' }}">
                        {{ ucfirst($member->status) }}
                    </span>
                </p>
            </div>

            <div>
                <p class="flex items-center mb-2 text-gray-700"><strong>Total Savings:</strong> {{ number_format($totalSavings, 2) }}</p>
                <p class="flex items-center mb-2 text-gray-700"><strong>Total Social:</strong> {{ number_format($totalSocial, 2) }}</p>
            </div>
        </div>
    </div>

    <!-- Savings and Contributions Section (Responsive Stacking) -->
    <div class="flex flex-wrap gap-4 sm:gap-8 mb-8">
        <!-- Savings History Section -->
        <div class="bg-white p-4 sm:p-6 rounded-lg shadow-md border border-gray-300 flex-1 min-w-full sm:min-w-[45%]">
            <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 mb-4">
                <i class="fas fa-calendar-check mr-2 text-blue-500"></i> Regular Savings History
            </h2>
            <div class="overflow-x-auto">
                <table class="min-w-full table-auto border-collapse bg-white rounded-lg shadow-md">
                    <thead class="bg-blue-500 text-white">
                        <tr>
                            <th class="py-3 px-4 text-left">Date</th>
                            <th class="py-3 px-4 text-left">Amount</th>
                            <th class="py-3 px-4 text-left">Type</th>
                            <th class="py-3 px-4 text-left">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-700">
                        @foreach ($savingsHistory as $history)
                            <tr class="border-t hover:bg-gray-100">
                                <td class="py-3 px-4">{{ \Carbon\Carbon::parse($history->date)->format('Y-m-d') }}</td>
                                <td class="py-3 px-4">{{ number_format($history->amount, 2) }}</td>
                                <td class="py-3 px-4">{{ ucfirst($history->type) }}</td>
                                <td class="py-3 px-4">{{ $history->description ?? 'Monthly Savings' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Contributions Section -->
        <div class="bg-white p-4 sm:p-6 rounded-lg shadow-md border border-gray-300 flex-1 min-w-full sm:min-w-[45%]">
            <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 mb-4">
                <i class="fas fa-hand-holding-usd mr-2 text-blue-500"></i> Other Contributions
            </h2>
            <div class="overflow-x-auto">
                <table class="min-w-full table-auto border-collapse bg-white rounded-lg shadow-md">
                    <thead class="bg-blue-500 text-white">
                        <tr>
                            <th class="py-3 px-4 text-left">Date</th>
                            <th class="py-3 px-4 text-left">Amount</th>
                            <th class="py-3 px-4 text-left">Type</th>
                            <th class="py-3 px-4 text-left">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-700">
                        @foreach ($contributions as $contribution)
                            <tr class="border-t hover:bg-gray-100">
                                <td class="py-3 px-4">{{ \Carbon\Carbon::parse($contribution->date)->format('Y-m-d') }}</td>
                                <td class="py-3 px-4">{{ number_format($contribution->amount, 2) }}</td>
                                <td class="py-3 px-4">{{ ucfirst($contribution->type) }}</td>
                                <td class="py-3 px-4">{{ $contribution->description ?? 'Savings Top up' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

   <!-- Modal (Responsive) -->
<div x-show="showModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 p-4 z-50">
    <div 
        class="bg-white p-4 sm:p-6 rounded-lg shadow-lg w-full max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl"
        @click.away="showModal = false"
    >
        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 mb-4">Add Custom Contribution</h2>
        <form action="{{ route('members.addContribution', $member) }}" method="POST">
            @csrf
            <div class="mb-4">
                <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label>
                <input type="number" id="amount" name="amount" class="mt-1 p-2 border border-gray-300 rounded-md w-full focus:ring-blue-500" required>
            </div>
            <div class="flex justify-end gap-2">
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
                    Save Contribution
                </button>
                <button @click="showModal = false" type="button" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

</div>
@endsection