{{-- resources/views/livewire/pages/savings/contribute.blade.php - -}}

@extends('layouts.dashboard')

@section('title', 'Add Funds - PangoQ')

@push('styles')
    <style>
        .payment-method-card {
            transition: all 0.2s ease-in-out;
            cursor: pointer;
        }

        .payment-method-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .payment-method-card.selected {
            border-color: #059669;
            background-color: #f0fdf4;
        }

        .pulse-dot {
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.7;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .stk-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        .stk-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .stk-modal-content {
            background: white;
            padding: 2rem;
            border-radius: 0.5rem;
            max-width: 400px;
            width: 90%;
            text-align: center;
        }
    </style>
@endpush

@section('content')
    <div class="py-6">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Add CSRF token meta tag -->
            <meta name="csrf-token" content="{{ csrf_token() }}">

            <div class="mb-6">
                <a href="{{ route('wallet.index') }}" class="text-blue-600 hover:text-blue-800 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="19" y1="12" x2="5" y2="12"></line>
                        <polyline points="12 19 5 12 12 5"></polyline>
                    </svg>
                    Back to Savings Wallet
                </a>
            </div>

            <!-- Success/Error Messages -->
            @if(session('success'))
                <div class="mb-6 bg-green-50 border border-green-200 rounded-md p-4">
                    <div class="flex">
                        <svg class="flex-shrink-0 h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <div class="ml-3">
                            <p class="text-sm text-green-800">{!! session('success') !!}</p>
                        </div>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="mb-6 bg-red-50 border border-red-200 rounded-md p-4">
                    <div class="flex">
                        <svg class="flex-shrink-0 h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                clip-rule="evenodd" />
                        </svg>
                        <div class="ml-3">
                            <p class="text-sm text-red-800">{{ session('error') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <div class="bg-white shadow overflow-hidden sm:rounded-lg">
                <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                    <h1 class="text-2xl font-bold text-gray-900">Add Funds</h1>
                    <p class="mt-1 text-sm text-gray-600">Contribute to your trip savings wallet using M-Pesa.</p>
                </div>

                <div class="p-6">
                    <form id="contributeForm" action="{{ route('wallet.contribute.store') }}" method="POST">
                        @csrf

                        <div class="space-y-6">
                            <!-- Wallet Selection -->
                            <div>
                                <label for="wallet_id" class="block text-sm font-medium text-gray-700 mb-2">Select Trip
                                    Wallet</label>
                                <select id="wallet_id" name="wallet_id" required
                                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm">
                                    <option value="">-- Select a wallet --</option>
                                    @foreach ($wallets as $wallet)
                                        <option value="{{ $wallet->id }}" data-account="{{ $wallet->account_number }}"
                                            data-current="{{ number_format($wallet->current_amount, 2) }}"
                                            data-goal="{{ number_format($wallet->custom_goal ?? $wallet->minimum_goal, 2) }}">
                                            {{ $wallet->trip->title }} ({{ $wallet->trip->destination }}) - Acc:
                                            {{ $wallet->account_number }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('wallet_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror

                                <!-- Wallet Info Display -->
                                <div id="walletInfo" class="mt-3 p-3 bg-gray-50 rounded-md hidden">
                                    <div class="grid grid-cols-2 gap-4 text-sm">
                                        <div>
                                            <span class="font-medium">Account Number:</span>
                                            <span id="accountNumber" class="text-gray-600"></span>
                                        </div>
                                        <div>
                                            <span class="font-medium">Current Amount:</span>
                                            <span id="currentAmount" class="text-gray-600"></span> KES
                                        </div>
                                        <div>
                                            <span class="font-medium">Goal:</span>
                                            <span id="goalAmount" class="text-gray-600"></span> KES
                                        </div>
                                        <div>
                                            <span class="font-medium">Progress:</span>
                                            <span id="progressPercent" class="text-gray-600"></span>%
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Amount Input -->
                            <div>
                                <label for="amount" class="block text-sm font-medium text-gray-700 mb-2">Amount
                                    (KES)</label>
                                <div class="relative rounded-md shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">KES</span>
                                    </div>
                                    <input type="number" name="amount" id="amount" min="1" max="70000" step="1" required
                                        placeholder="Enter amount (Min: 1, Max: 70,000)"
                                        class="block w-full pl-12 pr-12 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500 sm:text-sm">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <span class="text-gray-400 sm:text-sm">.00</span>
                                    </div>
                                </div>
                                <p class="mt-1 text-xs text-gray-500">M-Pesa transaction limits: Min KES 1, Max KES 70,000
                                </p>
                                @error('amount')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Phone Number -->
                            <div>
                                <label for="phone_number" class="block text-sm font-medium text-gray-700 mb-2">Phone
                                    Number</label>
                                <div class="relative rounded-md shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">+254</span>
                                    </div>
                                    <input type="tel" name="phone_number" id="phone_number"
                                        value="{{ old('phone_number', str_replace('+254', '', auth()->user()->phone_number ?? '')) }}"
                                        pattern="[7][0-9]{8}" placeholder="7XXXXXXXX" required
                                        class="block w-full pl-12 pr-3 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500 sm:text-sm">
                                </div>
                                <p class="mt-1 text-xs text-gray-500">Enter your M-Pesa registered phone number (without
                                    +254)</p>
                                @error('phone_number')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Payment Method Selection -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-3">Payment Method</label>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- M-Pesa STK Push -->
                                    <div class="payment-method-card border-2 border-gray-200 rounded-lg p-4 selected"
                                        data-method="mpesa_stk">
                                        <div class="flex items-center">
                                            <input type="radio" id="mpesa_stk" name="payment_method" value="mpesa_stk"
                                                checked class="sr-only">
                                            <div class="flex items-center space-x-3">
                                                <div class="flex-shrink-0">
                                                    <div
                                                        class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                                        <svg class="w-6 h-6 text-green-600" fill="currentColor"
                                                            viewBox="0 0 24 24">
                                                            <path
                                                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
                                                        </svg>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h3 class="text-sm font-medium text-gray-900">M-Pesa STK Push</h3>
                                                    <p class="text-xs text-gray-500">Pay with your M-Pesa PIN</p>
                                                </div>
                                            </div>
                                            <div class="ml-auto">
                                                <div
                                                    class="w-4 h-4 border-2 border-green-500 rounded-full bg-green-500 flex items-center justify-center">
                                                    <div class="w-2 h-2 bg-white rounded-full"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- M-Pesa Paybill (Manual) -->
                                    <div class="payment-method-card border-2 border-gray-200 rounded-lg p-4"
                                        data-method="mpesa_paybill">
                                        <div class="flex items-center">
                                            <input type="radio" id="mpesa_paybill" name="payment_method"
                                                value="mpesa_paybill" class="sr-only">
                                            <div class="flex items-center space-x-3">
                                                <div class="flex-shrink-0">
                                                    <div
                                                        class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                                        <svg class="w-6 h-6 text-blue-600" fill="currentColor"
                                                            viewBox="0 0 24 24">
                                                            <path
                                                                d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" />
                                                        </svg>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h3 class="text-sm font-medium text-gray-900">M-Pesa Paybill</h3>
                                                    <p class="text-xs text-gray-500">Manual payment via Paybill</p>
                                                </div>
                                            </div>
                                            <div class="ml-auto">
                                                <div class="w-4 h-4 border-2 border-gray-300 rounded-full"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @error('payment_method')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Paybill Instructions (Hidden by default) -->
                            <div id="paybillInstructions" class="hidden bg-blue-50 border border-blue-200 rounded-md p-4">
                                <h4 class="text-sm font-medium text-blue-900 mb-2">M-Pesa Paybill Instructions</h4>
                                <ol class="text-sm text-blue-800 space-y-1">
                                    <li>1. Go to M-Pesa on your phone</li>
                                    <li>2. Select "Lipa na M-Pesa" → "Pay Bill"</li>
                                    <li>3. Enter Business Number:
                                        <strong>{{ config('services.mpesa.business_short_code', '4083207') }}</strong></li>
                                    <li>4. Enter Account Number: <strong id="paybillAccount">Select wallet first</strong>
                                    </li>
                                    <li>5. Enter Amount and confirm with your M-Pesa PIN</li>
                                </ol>
                                <p class="text-xs text-blue-600 mt-2">Your transaction will be automatically credited to
                                    your wallet.</p>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="mt-8 flex justify-end space-x-3">
                            <a href="{{ route('wallet.index') }}"
                                class="px-6 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                Cancel
                            </a>
                            <button type="button" id="submitBtn"
                                class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed">
                                <span id="submitText">Initiate STK Push</span>
                                <svg id="submitLoader" class="hidden animate-spin -mr-1 ml-2 h-4 w-4 text-white"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                        stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                    </path>
                                </svg>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- STK Push Status Modal -->
            <div id="stkModal" class="stk-modal">
                <div class="stk-modal-content">
                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
                        <div class="pulse-dot w-6 h-6 bg-green-600 rounded-full"></div>
                    </div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2">STK Push Sent</h3>
                    <p class="text-sm text-gray-500 mb-4">
                        Please check your phone and enter your M-Pesa PIN to complete the payment.
                    </p>
                    <p class="text-xs text-gray-400 mb-4">
                        Checking status... <span id="statusText">Please wait</span>
                    </p>
                    <button id="cancelSTK"
                        class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const walletSelect = document.getElementById('wallet_id');
                const walletInfo = document.getElementById('walletInfo');
                const paymentMethodCards = document.querySelectorAll('.payment-method-card');
                const paybillInstructions = document.getElementById('paybillInstructions');
                const paybillAccount = document.getElementById('paybillAccount');
                const form = document.getElementById('contributeForm');
                const submitBtn = document.getElementById('submitBtn');
                const submitText = document.getElementById('submitText');
                const submitLoader = document.getElementById('submitLoader');
                const stkModal = document.getElementById('stkModal');
                const cancelSTK = document.getElementById('cancelSTK');
                const statusText = document.getElementById('statusText');

                let currentCheckoutRequestId = null;
                let statusCheckInterval = null;

                // Get CSRF token
                function getCSRFToken() {
                    return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
                        document.querySelector('input[name="_token"]')?.value;
                }

                // Wallet selection handler
                walletSelect.addEventListener('change', function () {
                    const selectedOption = this.options[this.selectedIndex];

                    if (selectedOption.value) {
                        const accountNumber = selectedOption.dataset.account;
                        const currentAmount = selectedOption.dataset.current;
                        const goalAmount = selectedOption.dataset.goal;
                        const progress = goalAmount > 0 ? ((parseFloat(currentAmount.replace(/,/g, '')) / parseFloat(goalAmount.replace(/,/g, ''))) * 100).toFixed(1) : 0;

                        document.getElementById('accountNumber').textContent = accountNumber;
                        document.getElementById('currentAmount').textContent = currentAmount;
                        document.getElementById('goalAmount').textContent = goalAmount;
                        document.getElementById('progressPercent').textContent = progress;

                        paybillAccount.textContent = accountNumber;
                        walletInfo.classList.remove('hidden');
                    } else {
                        walletInfo.classList.add('hidden');
                        paybillAccount.textContent = 'Select wallet first';
                    }
                });

                // Payment method selection
                paymentMethodCards.forEach(card => {
                    card.addEventListener('click', function () {
                        const radio = this.querySelector('input[type="radio"]');
                        const method = this.dataset.method;

                        // Update UI
                        paymentMethodCards.forEach(c => {
                            c.classList.remove('selected');
                            c.querySelector('.ml-auto > div').classList.remove('border-green-500', 'bg-green-500');
                            c.querySelector('.ml-auto > div').classList.add('border-gray-300');
                            const dot = c.querySelector('.w-2');
                            if (dot) dot.classList.add('hidden');
                        });

                        this.classList.add('selected');
                        const indicator = this.querySelector('.ml-auto > div');
                        indicator.classList.remove('border-gray-300');
                        indicator.classList.add('border-green-500', 'bg-green-500');
                        const dot = this.querySelector('.w-2');
                        if (dot) dot.classList.remove('hidden');

                        radio.checked = true;

                        // Show/hide instructions and update button text
                        if (method === 'mpesa_paybill') {
                            paybillInstructions.classList.remove('hidden');
                            submitText.textContent = 'Submit Paybill Payment';
                        } else {
                            paybillInstructions.classList.add('hidden');
                            submitText.textContent = 'Initiate STK Push';
                        }
                    });
                });

                // Phone number formatting
                const phoneInput = document.getElementById('phone_number');
                phoneInput.addEventListener('input', function () {
                    let value = this.value.replace(/\D/g, '');
                    if (value.startsWith('254')) {
                        value = value.substring(3);
                    }
                    if (value.startsWith('0')) {
                        value = value.substring(1);
                    }
                    this.value = value;
                });

                // Submit button handler
                submitBtn.addEventListener('click', function (e) {
                    e.preventDefault();

                    const paymentMethod = document.querySelector('input[name="payment_method"]:checked').value;

                    if (paymentMethod === 'mpesa_stk') {
                        initiateSTKPush();
                    } else {
                        // For paybill, submit the form normally
                        form.submit();
                    }
                });

                // STK Push initiation
                function initiateSTKPush() {
                    const formData = new FormData(form);

                    // Validate form
                    if (!formData.get('wallet_id') || !formData.get('amount') || !formData.get('phone_number')) {
                        alert('Please fill in all required fields');
                        return;
                    }

                    // Update button state
                    submitBtn.disabled = true;
                    submitText.textContent = 'Processing...';
                    submitLoader.classList.remove('hidden');

                    fetch('{{ route("wallet.stk.push") }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': getCSRFToken(),
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            console.log('STK Push Response:', data);

                            if (data.success) {
                                currentCheckoutRequestId = data.checkout_request_id;
                                showSTKModal();
                                startStatusChecking();
                            } else {
                                alert('Error: ' + (data.message || 'STK Push failed'));
                                resetSubmitButton();
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('Error: Unable to initiate payment');
                            resetSubmitButton();
                        });
                }

                // Show STK Modal
                function showSTKModal() {
                    stkModal.classList.add('show');
                    statusText.textContent = 'Please complete payment on your phone';

                    cancelSTK.onclick = function () {
                        hideSTKModal();
                        resetSubmitButton();
                    };
                }

                // Hide STK Modal
                function hideSTKModal() {
                    stkModal.classList.remove('show');
                    if (statusCheckInterval) {
                        clearInterval(statusCheckInterval);
                        statusCheckInterval = null;
                    }
                }

                // Start status checking
                function startStatusChecking() {
                    let checkCount = 0;
                    const maxChecks = 40; // Check for 2 minutes (40 * 3 seconds)

                    statusCheckInterval = setInterval(function () {
                        checkCount++;

                        if (checkCount > maxChecks) {
                            clearInterval(statusCheckInterval);
                            statusText.textContent = 'Payment timeout. Please try again.';
                            setTimeout(() => {
                                hideSTKModal();
                                resetSubmitButton();
                            }, 3000);
                            return;
                        }

                        statusText.textContent = `Checking payment status... (${checkCount}/${maxChecks})`;

                        fetch(`{{ route("wallet.transaction.status") }}?checkout_request_id=${currentCheckoutRequestId}`, {
                            headers: {
                                'X-CSRF-TOKEN': getCSRFToken(),
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                            .then(response => response.json())
                            .then(data => {
                                console.log('Status Check Response:', data);

                                if (data.success) {
                                    if (data.status === 'completed') {
                                        clearInterval(statusCheckInterval);
                                        statusText.textContent = 'Payment successful! Redirecting...';
                                        setTimeout(() => {
                                            window.location.href = '{{ route("wallet.index") }}';
                                        }, 2000);
                                    } else if (data.status === 'failed' || data.status === 'cancelled' || data.status === 'timeout') {
                                        clearInterval(statusCheckInterval);
                                        statusText.textContent = 'Payment ' + data.status + ': ' + (data.message || 'Please try again');
                                        setTimeout(() => {
                                            hideSTKModal();
                                            resetSubmitButton();
                                        }, 3000);
                                    }
                                }
                            })
                            .catch(error => {
                                console.error('Status check error:', error);
                            });
                    }, 3000); // Check every 3 seconds
                }

                // Reset submit button
                function resetSubmitButton() {
                    submitBtn.disabled = false;
                    submitText.textContent = 'Initiate STK Push';
                    submitLoader.classList.add('hidden');
                    currentCheckoutRequestId = null;
                }
            });
        </script>
    @endpush
@endsection