@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6" x-data="{ showModal: false,showLoanModal: false, showModalstatement:false }">
<h2 class="text-3xl font-semibold text-gray-700">Member Dashboard</h2>
<br>
   @if(session('success'))
        <div class="bg-green-500 text-white p-3 rounded mb-4">{{ session('success') }}</div>
    @endif
  <!-- Personal Information Section -->
<div class="bg-white p-8 rounded-2xl shadow-lg border border-gray-300 mb-8 relative overflow-hidden">
    <!-- Add Custom Contribution Button -->
    <div class="mb-6 flex flex-wrap justify-end space-x-4 gap-4">

        <button @click="showModalstatement = true" class="bg-gradient-to-r from-green-600 to-green-500 text-white px-6 py-3 rounded-full shadow-md hover:from-green-700 hover:to-green-600 focus:ring-4 focus:ring-green-300 text-lg transition-all duration-300 ease-in-out transform hover:scale-105 flex items-center">
            <i class="fas fa-file mr-2"></i> Print Statement
        </button>

        @if ($loan && $loan->status === 'approved')
            <a href="{{ route('loans.repayments', $loan->id) }}" class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 rounded-full shadow-md hover:from-blue-700 hover:to-blue-600 focus:ring-4 focus:ring-blue-300 text-lg transition-all duration-300 ease-in-out transform hover:scale-105 flex items-center">
                <i class="fas fa-history mr-2"></i> View Repayment History
            </a>
        @endif

        <button @click="showLoanModal = true" class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 rounded-full shadow-md hover:from-blue-700 hover:to-blue-600 focus:ring-4 focus:ring-blue-300 text-lg transition-all duration-300 ease-in-out transform hover:scale-105 flex items-center">
            <i class="fas fa-hand-holding-usd mr-2"></i> Request a Loan
        </button>

        <button @click="showModal = true" class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 rounded-full shadow-md hover:from-blue-700 hover:to-blue-600 focus:ring-4 focus:ring-blue-300 text-lg transition-all duration-300 ease-in-out transform hover:scale-105 flex items-center">
            <i class="fas fa-lock mr-2"></i> Change Password
        </button>
    </div>

    <h2 class="text-3xl font-semibold text-gray-900 mb-6 flex items-center">
        <i class="fas fa-user-circle mr-3 text-blue-600 text-4xl"></i> Personal Information
    </h2>

    <!-- Responsive Grid Layout for Personal and Financial Info -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Column 1: Member Details -->
        <div>
            <p class="flex items-center mb-4 text-gray-700 text-lg hover:text-blue-500 transition duration-200">
                <i class="fas fa-user mr-3 text-gray-500"></i>
                <strong class="font-medium">Name:</strong> 
                <span class="ml-2 text-gray-800">{{ $member->name }}</span>
            </p>
            <p class="flex items-center mb-4 text-gray-700 text-lg hover:text-blue-500 transition duration-200">
                <i class="fas fa-id-badge mr-3 text-gray-500"></i>
                <strong class="font-medium">Employee ID:</strong> 
                <span class="ml-2 text-gray-800">{{ $member->employee_id }}</span>
            </p>
            <p class="flex items-center mb-4 text-gray-700 text-lg hover:text-blue-500 transition duration-200">
                <i class="fas fa-envelope mr-3 text-gray-500"></i>
                <strong class="font-medium">Email:</strong> 
                <span class="ml-2 text-gray-800">{{ $member->email }}</span>
            </p>
            <p class="flex items-center mb-4 text-gray-700 text-lg hover:text-blue-500 transition duration-200">
                <i class="fas fa-phone-alt mr-3 text-gray-500"></i>
                <strong class="font-medium">Phone:</strong> 
                <span class="ml-2 text-gray-800">{{ $member->contact }}</span>
            </p>
            <p class="flex items-center mb-4 text-gray-700 text-lg hover:text-blue-500 transition duration-200">
                <i class="fas fa-user-shield mr-3 text-gray-500"></i>
                <strong class="font-medium">Role:</strong> 
                <span class="ml-2 text-gray-800">{{ Auth::user()->role->name }}</span>
            </p>
            <p class="flex items-center mb-4 text-lg">
                <i class="fas fa-check-circle mr-3 text-gray-500"></i>
                <strong class="font-medium">Status:</strong>
                <span class="ml-2 text-sm font-semibold px-3 py-1 rounded-full {{ $member->status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                    {{ ucfirst($member->status) }}
                </span>
            </p>
        </div>

        <!-- Column 2: Financial Details -->
        <div>
            <p class="flex items-center mb-4 text-gray-700 text-lg hover:text-blue-500 transition duration-200">
                <i class="fas fa-piggy-bank mr-3 text-gray-500"></i>
                <strong class="font-medium">Total Savings:</strong> 
                <span class="ml-2 text-green-800">{{ number_format($totalSavings, 2) }}</span>
            </p>
            <p class="flex items-center mb-4 text-gray-700 text-lg hover:text-blue-500 transition duration-200">
                <i class="fas fa-hand-holding-usd mr-3 text-gray-500"></i>
                <strong class="font-medium">Total Social:</strong> 
                <span class="ml-2 text-green-800">{{ number_format($totalSocial, 2) }}</span>
            </p>
            <p class="flex items-center mb-4 text-gray-700 text-lg hover:text-blue-500 transition duration-200">
                <i class="fas fa-money-bill-wave mr-3 text-gray-500"></i>
                <strong class="font-medium">Eligible Loan:</strong>
                <span class="ml-2 text-green-800">{{ number_format($eligibleLoan, 2) }}</span>
            </p>
           <p class="flex items-center mb-4 text-yellow-500 text-lg hover:text-yellow-500 transition duration-200">
    <i class="fas fa-money-bill mr-3 text-yellow-500"></i>
    <strong>
        <b style="font-size:18px;font-weight: 900;">
            Outstanding: Tsh 
            {{ number_format((($loan->total_loan ?? 0) - ($loan->paid_amount ?? 0)), 2) }}
        </b>
    </strong>
</p>        </div>

        <!-- Column 3: Loan Progress Circle -->
     @isset($loan)
    <div class="flex flex-col items-center justify-center">
        <h2 class="text-3xl font-semibold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-money-bill-wave mr-3 text-blue-600 text-4xl"></i> My Active Loan
        </h2>
        <div class="relative w-56 h-56">
            <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                <!-- Background Circle -->
                <circle class="text-gray-200" stroke-width="10" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"/>
                
                <!-- Progress Circle -->
                @php
                    $paidAmount = $loan->paid_amount ?? 0;
                    $loanAmount = $loan->amount ?? 1; // prevent division by zero
                    $progress = $loanAmount > 0 ? ($paidAmount / $loanAmount) : 0;
                    $dashoffset = 251.2 - (251.2 * $progress);
                @endphp

                <circle class="text-green-500 transition-all duration-500" stroke-width="10" stroke="currentColor" fill="transparent"
                    r="40" cx="50" cy="50"
                    stroke-dasharray="251.2"
                    stroke-dashoffset="{{ $dashoffset }}" />
            </svg>
            
            <!-- Text in the Center -->
            <span class="absolute inset-0 flex items-center justify-center text-2xl font-semibold text-gray-800">
                {{ round($progress * 100) }}%
            </span>
        </div>
        
        <!-- Loan Payment Details Below -->
        <p class="mt-4 text-center text-green-600 font-semibold text-lg">
            Paid: Tsh {{ number_format($paidAmount, 2) }} / {{ number_format($loan->total_loan ?? 0, 2) }}
        </p>
    </div>
@else
    <div class="text-center text-gray-500 mt-6">
        <i class="fas fa-info-circle text-2xl mb-2"></i><br>
        No active loan data available.
    </div>
@endisset

    </div>
</div>
    <!-- Savings and Contributions Section (Side by Side) -->
    <div class="flex gap-8 mb-8">
        <!-- Savings History Section -->
        <div class="bg-white p-6 rounded-lg shadow-md border border-gray-300 flex-1">
            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-calendar-check mr-2 text-blue-500"></i> Regular Savings History
            </h2>
            <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>
                    </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 text-gray-700">{{ \Carbon\Carbon::parse($history->date)->format('Y-m-d') }}</td>
                            <td class="py-3 px-4 text-gray-700">{{ number_format($history->amount, 2) }}</td>
                            <td class="py-3 px-4 text-gray-700">{{ ucfirst($history->type) }}</td>
                        </tr>
                    @endforeach
                </tbody>
                  <tfoot>
                    <tr class="border-t-2 border-gray-300 bg-gray-50 font-semibold">
                        <td class="py-3 px-4 text-gray-800">Total</td>
                        <td class="py-3 px-4 text-gray-800">{{ number_format($savingsHistory->sum('amount'), 2) }}</td>
                        <td class="py-3 px-4"></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Contributions Section -->
        <div class="bg-white p-6 rounded-lg shadow-md border border-gray-300 flex-1">
            <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-hand-holding-usd mr-2 text-blue-500"></i> Other Contributions
            </h2>
            <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>
                    </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 text-gray-700">{{ \Carbon\Carbon::parse($contribution->date)->format('Y-m-d') }}</td>
                            <td class="py-3 px-4 text-gray-700">{{ number_format($contribution->amount, 2) }}</td>
                            <td class="py-3 px-4 text-gray-700">{{ ucfirst($contribution->type) }}</td>
                        </tr>
                    @endforeach
                </tbody>
                 <tfoot>
                    <tr class="border-t-2 border-gray-300 bg-gray-50 font-semibold">
                        <td class="py-3 px-4 text-gray-800">Total</td>
                        <td class="py-3 px-4 text-gray-800">{{ number_format($contributions->sum('amount'), 2) }}</td>
                        <td class="py-3 px-4"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div x-data="{ openModal: false }">
        <div x-show="showModal" x-clock class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
            <div class="bg-white p-6 rounded-lg shadow-lg w-1/3" @click.away="showModal = false">
                <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-lock mr-2 text-blue-500"></i> Update Password
            </h2>
            <!-- Wrap the form in an Alpine.js scope -->
<div x-data="{ showPassword: false, showConfirmPassword: false }">
    <form action="{{ route('members.updatePassword', $member) }}" method="POST">
        @csrf
        @method('PUT')

        <!-- Current Password -->
        <div class="mb-4">
            <label for="current_password" class="block text-sm font-medium text-gray-700">Current Password</label>
            <div class="relative">
                <input :type="showPassword ? 'text' : 'password'" id="current_password" name="current_password" 
                    class="mt-1 p-3 border border-gray-300 rounded-md w-full focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <button type="button" @click="showPassword = !showPassword" 
                    class="absolute inset-y-0 right-3 flex items-center text-gray-600">
                    <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                </button>
            </div>
        </div>

        <!-- New Password -->
        <div class="mb-4">
            <label for="new_password" class="block text-sm font-medium text-gray-700">New Password</label>
            <div class="relative">
                <input :type="showPassword ? 'text' : 'password'" id="new_password" name="new_password" 
                    class="mt-1 p-3 border border-gray-300 rounded-md w-full focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <button type="button" @click="showPassword = !showPassword" 
                    class="absolute inset-y-0 right-3 flex items-center text-gray-600">
                    <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                </button>
            </div>
        </div>

        <!-- Confirm Password -->
        <div class="mb-4">

            <label for="confirm_password" class="block text-sm font-medium text-gray-700">Confirm Password</label>
            <div class="relative">
                <input :type="showConfirmPassword ? 'text' : 'password'" id="confirm_password" name="confirm_password" 
                    class="mt-1 p-3 border border-gray-300 rounded-md w-full focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <button type="button" @click="showConfirmPassword = !showConfirmPassword" 
                    class="absolute inset-y-0 right-3 flex items-center text-gray-600">
                    <i :class="showConfirmPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                </button>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-end gap-2">
            <button type="submit" class="bg-blue-500 text-white px-6 py-3 rounded-md text-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <i class="fas fa-save mr-2"></i> Update Password
            </button>
            <button @click="showModal = false" type="button" class="bg-gray-500 text-white px-6 py-3 rounded-md text-lg hover:bg-gray-600 focus:outline-none">
                <i class="fas fa-times-circle mr-2"></i> Cancel
            </button>
        </div>
    </form>
</div>

            </div>
        </div>
    </div>



    <div x-show="showModalstatement" @click.away="showModalstatement = false" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex justify-center items-center z-50">
    <div class="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full" x-data="{ startDate: '', endDate: '', generateStatement() { 
        // You can add validation or any actions here
        if (!this.startDate || !this.endDate) {
            alert('Please select both start and end dates.');
            return;
        }

        // If you want to process the statement before submission, you can add logic here
        // Example: Submit the form or call a method to handle it.
        this.$refs.printButton.click(); // Trigger the print action if needed
    }}">

        <form @submit.prevent="generateStatement" method="POST">

            <!-- Date Range -->
            <div class="mb-4">
                <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
                <input type="date" x-model="startDate" id="start_date" name="start_date" 
                    class="mt-1 p-3 border border-gray-300 rounded-md w-full focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>

            <div class="mb-4">
                <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
                <input type="date" x-model="endDate" id="end_date" name="end_date" 
                    class="mt-1 p-3 border border-gray-300 rounded-md w-full focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end gap-2">
                <!-- Print Statement Button -->
               <a href="{{ route('member.statement', ['memberId' => auth()->id(), 'start_date' => '2025-01-01', 'end_date' => '2025-12-31']) }}"
                   class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-3 rounded-full shadow-md 
                          hover:from-blue-700 hover:to-blue-600 focus:ring-4 focus:ring-blue-300 text-lg transition-all 
                          duration-300 ease-in-out transform hover:scale-105 flex items-center">
                   <i class="fas fa-print mr-2"></i> Print Statement
                </a>


            </div>
        </form>
    </div>
</div>



    <!-- Loan Request Modal -->
<!-- <div x-show="showLoanModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"> -->
  <div x-show="showLoanModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
    <div class="bg-white p-6 rounded-lg shadow-lg w-full sm:w-1/2 md:w-1/2 lg:w-1/3 max-w-[90vw] max-h-[90vh] overflow-y-auto">
        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 mb-4">Request a Loan</h2>

        <form action="{{ route('loans.store') }}" method="POST">
            @csrf
            
            <!-- Select Member -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Select Member</label>
                <select name="member_id" class="w-full p-2 border rounded-md">
                    @foreach ($members as $member)
                        <option value="{{ $member->id }}">{{ $member->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Loan Amount -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Loan Amount</label>
                <input type="number" name="amount" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
            </div>

            <!-- Interest Rate -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Interest Rate (%)</label>
                <input type="number" step="0.01" name="interest_rate" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
            </div>

            <!-- Repayment Period -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Repayment Period (Months)</label>
                <input type="number" name="repayment_period" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
            </div>

            <!-- Collateral -->
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700">Collateral (if any)</label>
                <input type="text" name="collateral" class="w-full p-3 border rounded-md">
            </div>

            <!-- Guarantors Section -->
            <div x-data="{
                    guarantors: [{name: '', contact: ''}],
                    addGuarantor() {
                        if (this.guarantors.length < 4) {
                            this.guarantors.push({ name: '', contact: '' });
                        }
                    },
                    removeGuarantor(index) {
                        if (this.guarantors.length > 1) {
                            this.guarantors.splice(index, 1);
                        }
                    }
                }" class="mb-4">
                
                <label class="block text-sm font-medium text-gray-700">Guarantors</label>
                
                <template x-for="(guarantor, index) in guarantors" :key="index">
                    <div class="mb-4 flex space-x-4">
                        <div class="w-full sm:w-1/2">
                            <label class="block text-sm font-medium text-gray-700">Guarantor Name</label>
                            <input type="text" :name="'guarantors['+index+'][name]'" x-model="guarantor.name" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <div class="w-full sm:w-1/2">
                            <label class="block text-sm font-medium text-gray-700">Guarantor Contact</label>
                            <input type="text" :name="'guarantors['+index+'][contact]'" x-model="guarantor.contact" class="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500" required>
                        </div>
                        <button type="button" x-show="guarantors.length > 1" @click="removeGuarantor(index)" class="text-red-500 hover:text-red-700 mt-6 ml-2">Remove</button>
                    </div>
                </template>

                <button type="button" @click="addGuarantor" class="bg-blue-500 text-white px-6 py-2 rounded-md mt-4">
                    Add Another Guarantor
                </button>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end gap-2 mt-6">
                <button type="submit" class="bg-blue-500 text-white px-6 py-3 rounded-md text-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    Submit Loan Request
                </button>
                <button @click="showLoanModal = false" type="button" class="bg-gray-500 text-white px-6 py-3 rounded-md text-lg hover:bg-gray-600 focus:outline-none">
                    Cancel
                </button>
            </div>

        </form>
    </div>
</div>
</div>
<!-- Alpine.js Script -->
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('openModal', () => ({
            openModal: false
        }));
    });
</script>

@endsection