@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">{{ $member->name }} ({{ $member->company }})</h2>
                <p class="text-sm text-gray-500">Complete the payment for the selected member.</p>
            </div>

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

                <!-- Member Information -->
                <!-- @if($member)
                    <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>
                        <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>
                    </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 <sup class="text-red-500">*</sup></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</option>
                            <option value="3">3 Months</option>
                            <!--<option value="6">6 Months</option> -->
                            <!--<option value="12">1 Year</option>-->
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Payment From <sup class="text-red-500">*</sup></label>
                        <select name="payment_from" class="mt-1 block w-full p-2 border rounded-md" required>
                            <!-- Options will be populated based on member status -->
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Payment End Month <sup class="text-red-500">*</sup></label>
                        <select name="payment_end_month" id="payment_end_month" class="mt-1 block w-full p-2 border rounded-md bg-gray-50" required>
                            <option value="">Select End Month</option>
                            <!-- Options will be populated based on duration calculation -->
                        </select>
                    </div>

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

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Late Fee <sup class="text-red-500">*</sup></label>
                        <!--<input type="text" name="penalty" id="penalty" placeholder="Penalty" class="mt-1 block w-full p-2 border rounded-md bg-gray-50" value="{{ '₹' . $penalty }}" readonly>-->
                        <input type="text" name="penalty" id="penalty" placeholder="Penalty" class="mt-1 block w-full p-2 border rounded-md bg-gray-50" value="{{ '₹' . '0' }}" readonly>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Payment Method <sup class="text-red-500">*</sup></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 p-2 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 p-2 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>
    const pricePerMonth = 8250;

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

        document.querySelector('form').addEventListener('submit', function(e) {
            const submitBtn = this.querySelector('input[type="submit"]');

            // Prevent double click
            if (submitBtn.disabled) {
                e.preventDefault();
                return false;
            }

            // Disable button
            submitBtn.disabled = true;
            submitBtn.value = "Processing...";

            // Optional: add loading style
            submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
        });

        paymentDuration.addEventListener('change', function() {
            calculate();
            fetchPaymentEndMonth();
            updatePaymentMethods();
        });

        function fetchPaymentEndMonth() {
            const duration = paymentDuration.value;
            const paymentFrom = document.querySelector('select[name="payment_from"]').value;

            if (!duration) return;

            fetch(`/payment/calculate-end-month?duration=${duration}&payment_from=${paymentFrom}`)
                .then(response => response.json())
                .then(data => {
                    if (data.payment_to_month_id) {
                        // Clear existing options
                        paymentEndMonth.innerHTML = '<option value="">Select End Month</option>';

                        // Add the payment_to month with payment_to_month_id as value
                        const option = document.createElement('option');
                        option.value = data.payment_to_month_id;
                        option.text = data.payment_to_display;
                        option.selected = true;
                        paymentEndMonth.appendChild(option);

                        // Store renewal month info if needed
                        if (data.renewal_month_id) {
                            paymentEndMonth.dataset.renewalMonthId = data.renewal_month_id;
                            paymentEndMonth.dataset.renewalDisplay = data.renewal_display;
                        }
                    }
                })
                .catch(error => {
                    console.error('Error fetching payment end month:', error);
                });
        }

        function calculateMeetingPrice(startMeeting, endMeeting) {
            // Calculate total meetings based on meeting ID difference
            const startMeetingId = startMeeting.meeting_id;
            const endMeetingId = endMeeting.meeting_id;

            let totalMeetings = endMeetingId - startMeetingId + 1;

            // Calculate total amount (1600 rupees per meeting)
            const totalAmount = totalMeetings * pricePerMonth;

            // Update amount field
            amountToPay.value = '₹' + totalAmount.toLocaleString('en-IN');
        }

        function updatePaymentMethods() {
            const duration = paymentDuration.value;
            const paymentMethodSelect = document.querySelector('select[name="payment_method"]');
            const upiNumber = document.querySelector('input[name="upi_number"]');
            const upiTransactionId = document.querySelector('input[name="upi_transaction_id"]');

            // Clear existing options
            paymentMethodSelect.innerHTML = '<option value="">Select Payment Method</option>';

            if (duration === '1') {
                // Show all payment methods for 1 month
                paymentMethodSelect.innerHTML += '<option value="cash">Cash</option>';
                paymentMethodSelect.innerHTML += '<option value="card">Card</option>';
                paymentMethodSelect.innerHTML += '<option value="upi">UPI</option>';
                upiNumber.disabled = false;
                upiTransactionId.disabled = false;
            } else {
                // Show only cash for other durations
                paymentMethodSelect.innerHTML += '<option value="cash">Cash</option>';
                paymentMethodSelect.value = 'cash';
                upiNumber.disabled = true;
                upiTransactionId.disabled = true;
                upiNumber.value = '';
                upiTransactionId.value = '';
            }
        }

        function updateUPIFields() {
            const paymentMethod = document.querySelector('select[name="payment_method"]').value;
            const upiNumber = document.querySelector('input[name="upi_number"]');
            const upiTransactionId = document.querySelector('input[name="upi_transaction_id"]');

            if (paymentMethod === 'upi') {
                // Enable UPI fields when UPI is selected
                upiNumber.disabled = false;
                upiTransactionId.disabled = false;
                // upiNumber.required = true;
                // upiTransactionId.required = true;
            } else {
                // Disable and clear UPI fields for other payment methods
                upiNumber.disabled = true;
                upiTransactionId.disabled = true;
                upiNumber.required = false;
                upiTransactionId.required = false;
                upiNumber.value = '';
                upiTransactionId.value = '';
            }
        }

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

        //     // months means 8250, 3 means 20000, 6 means 40000


        //     // Calculate amount
        //     if (months > 0) {
        //         // const amount = months * pricePerMonth;
        //         amountToPay.value = '₹' + amount.toLocaleString('en-IN');

        //         // Reset end month dropdown when duration changes
        //         paymentEndMonth.innerHTML = '<option value="">Select End Month</option>';
        //     } else {
        //         amountToPay.value = '';
        //         paymentEndMonth.innerHTML = '<option value="">Select End Month</option>';
        //     }
        // }

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

            const pricing = {
                1: 8250,
                3: 21450,
                6: 40000
            };

            const amount = pricing[months] || 0;

            if (amount > 0) {
                amountToPay.value = '₹' + amount.toLocaleString('en-IN');
                paymentEndMonth.innerHTML = '<option value="">Select End Month</option>';
            } else {
                amountToPay.value = '';
                paymentEndMonth.innerHTML = '<option value="">Select End Month</option>';
            }
        }

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

        // Initialize payment methods on page load
        updatePaymentMethods();

        // Add payment method change listener
        document.querySelector('select[name="payment_method"]').addEventListener('change', function() {
            updateUPIFields();
        });

        // Set Payment From based on member's expire_month_id
        /* @if($member && $currentMonth) */
        /* @if($member->expire_month_id) */
        // Member has expire_month_id, show renewal option
        const renewalOption = document.createElement('option');
        renewalOption.value = '{{ $member->renewal_month_id }}';
        renewalOption.text = 'Renewal - {{ $member->renewalSchedule->name }} {{ $member->renewalSchedule->year }}';
        renewalOption.selected = true;
        paymentFromSelect.appendChild(renewalOption);

        // Trigger payment end month calculation after setting renewal
        fetchPaymentEndMonth();
        /* @else */
        // Member has no expire month, set Payment From to current month
        const currentMonthOption = document.createElement('option');
        currentMonthOption.value = '{{ $currentMonth->id }}';
        currentMonthOption.text = '{{ $currentMonth->name }} {{ $currentMonth->year }}';
        currentMonthOption.selected = true;
        paymentFromSelect.appendChild(currentMonthOption);

        // Trigger payment end month calculation after setting current month
        fetchPaymentEndMonth();
        /* @endif */
        /* @endif */
    });
</script>
@endpush