@extends('layouts.dashboard')

@section('title', 'Payment Form')

@section('header-title', 'Member Payment')

@section('content')
<div class="mt-8">
    <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
        <!-- Payment Form -->
        <div class="bg-white shadow-lg rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-900">Process Payment</h2>
                <p class="text-sm text-gray-500">Complete the payment for the selected member.</p>
            </div>

            <form action="{{ route('payment.process') }}" method="POST" class="p-6">
                @csrf
                <input type="hidden" name="member_id" value="{{ request('member_id') }}">

                <!-- Member Information -->
                @if(request('member_id'))
                    <div class="mb-6 p-4 bg-gray-50 rounded-lg">
                        <h3 class="text-sm font-semibold text-gray-700 mb-2">Member Details</h3>
                        @php
                            $member = App\Models\Member::find(request('member_id'));
                        @endphp
                        @if($member)
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <span class="font-medium">Name:</span> {{ $member->name }}
                                </div>
                                <div>
                                    <span class="font-medium">Email:</span> {{ $member->email }}
                                </div>
                                <div>
                                    <span class="font-medium">Phone:</span> {{ $member->phone }}
                                </div>
                                <div>
                                    <span class="font-medium">Company:</span> {{ $member->company }}
                                </div>
                            </div>
                        @endif
                    </div>
                @endif

                <!-- Payment Fields -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Payment Duration</label>
                        <select name="payment_duration" id="payment_duration" class="mt-1 block w-full p-2 border rounded-md" required>
                            <option value="">Select Duration</option>
                            <option value="1">1 Month (₹6,600)</option>
                            <option value="3">3 Months (₹2,00,000)</option>
                            <option value="6">6 Months (₹40,000)</option>
                            <option value="12">1 Year (₹72,000)</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Payment From</label>
                        <select name="payment_from" class="mt-1 block w-full p-2 border rounded-md" required>
                            <option value="">Select Payment Period</option>
                            <!-- Options will be populated based on member status -->
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Payment End Month</label>
                        <input type="text" name="payment_end_month" id="payment_end_month" value="" readonly
                            class="mt-1 block w-full px-2 py-1 border rounded-md bg-gray-100">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Amount to Pay</label>
                        <input type="text" name="amount" id="amountToPay" placeholder="Amount to Pay" class="mt-1 block w-full px-2 py-1 border rounded-md bg-gray-100" readonly>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Payment Method</label>
                        <select name="payment_method" class="mt-1 block w-full p-2 border rounded-md" required>
                            <option value="">Select Payment Method</option>
                            <option value="cash">Cash</option>
                            <option value="card">Card</option>
                            <option value="upi">UPI</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">UPI Number</label>
                        <input type="text" name="upi_number" class="mt-1 block w-full px-2 py-1 border rounded-md" placeholder="Enter UPI number">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">UPI Transaction ID</label>
                        <input type="text" name="upi_transaction_id" class="mt-1 block w-full px-2 py-1 border rounded-md" placeholder="Enter UPI transaction ID">
                    </div>
                </div>

                <div class="mt-6 flex items-center justify-end gap-x-4 border-t border-gray-100 pt-4">
                    <a href="{{ route('members') }}" class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-600 transition">
                        Cancel
                    </a>
                    <input type="submit" class="rounded-lg bg-[#CF2030] px-6 py-2 text-sm font-bold text-white shadow-md hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#CF2030] transition-all transform active:scale-95" value="Process Payment">
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Payment duration to amount mapping
    const durationAmountMap = {
        '1': 6600,
        '3': 200000,
        '6': 40000,
        '12': 72000
    };

    document.addEventListener('DOMContentLoaded', function() {
        const paymentDuration = document.getElementById('payment_duration');
        const paymentEndMonth = document.getElementById('payment_end_month');
        const amountToPay = document.getElementById('amountToPay');

        paymentDuration.addEventListener('change', calculate);

        function calculate() {
            const months = parseInt(paymentDuration.value) || 0;

            // Calculate amount based on duration
            if (months > 0) {
                const amount = durationAmountMap[months] || 0;
                amountToPay.value = '₹' + amount.toLocaleString('en-IN');

                // Calculate end date (assuming payment starts from current month)
                const currentDate = new Date();
                const endDate = new Date(currentDate);
                endDate.setMonth(endDate.getMonth() + months);

                // Format as "Month Year"
                const monthNames = ["January", "February", "March", "April", "May", "June",
                    "July", "August", "September", "October", "November", "December"];
                paymentEndMonth.value = monthNames[endDate.getMonth()] + ' ' + endDate.getFullYear();
            } else {
                amountToPay.value = '';
                paymentEndMonth.value = '';
            }
        }

        // Auto-populate Payment From based on member status
        const paymentFromSelect = document.querySelector('select[name="payment_from"]');

        @if(request('member_id'))
            @php
                $member = App\Models\Member::find(request('member_id'));
                $upcomingMeeting = App\Models\MeetingSchedule::where('status', 'scheduled')->limit(1)->first();
            @endphp

            @if($member && $upcomingMeeting)
                @if($member->expire_schedule_id)
                    // Member has expired schedule, show renewal
                    const renewalOption = document.createElement('option');
                    renewalOption.value = '{{ $member->renewal_schedule_id ?? "" }}';
                    renewalOption.text = 'Renewal - {{ $member->renewalSchedule->meeting_date ?? "Next Period" }}';
                    paymentFromSelect.appendChild(renewalOption);
                @else
                    // Member is unpaid, show upcoming meeting
                    const upcomingOption = document.createElement('option');
                    upcomingOption.value = '{{ $upcomingMeeting->id }}';
                    upcomingOption.text = 'Upcoming - {{ $upcomingMeeting->meeting_date }}';
                    paymentFromSelect.appendChild(upcomingOption);
                @endif
            @endif
        @endif
    });
</script>
@endpush