@extends('layouts.minimal-payment')

@section('title', 'Payment - M-Ajira Registration Fee')

@section('content')

<!-- MAIN PAYMENT SECTION -->
<section class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 sm:pt-24 lg:pt-28">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-black text-gray-800 mb-2 sm:mb-3 text-center">Registration Fee Payment</h1>
    <p class="text-gray-600 text-base sm:text-lg text-center mb-8">Complete your KES {{ $registrationFee }} registration fee to proceed</p>
    
    @if(session('success'))
        <div class="glass-card border-2 border-green-400 rounded-xl sm:rounded-2xl p-4 sm:p-6 mb-6">
            <div class="flex items-start space-x-3 sm:space-x-4">
                <span class="text-3xl sm:text-4xl">✅</span>
                <div>
                    <h3 class="text-lg sm:text-xl font-bold text-green-800 mb-1">Success!</h3>
                    <p class="text-green-700 text-sm sm:text-base">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="glass-card border-2 border-red-400 rounded-xl sm:rounded-2xl p-4 sm:p-6 mb-6">
            <div class="flex items-start space-x-3 sm:space-x-4">
                <span class="text-3xl sm:text-4xl">❌</span>
                <div>
                    <h3 class="lg:text-xl font-bold text-red-800 mb-1">Error</h3>
                    <p class="text-red-700 text-sm sm:text-base">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if($candidate->has_paid_registration_fee)
        <div class="glass-card border-2 border-blue-400 rounded-xl sm:rounded-2xl p-6 sm:p-8 mb-6 text-center">
            <h3 class="text-xl sm:text-2xl font-bold text-blue-800 mb-4">Payment Already Completed!</h3>
            <p class="text-blue-700 text-base mb-6">Thank you for completing your registration fee. You can now access your dashboard.</p>
            <a href="{{ route('candidate.dashboard') }}" class="w-full btn-primary text-white font-bold px-8 py-4 rounded-xl hover:shadow-2xl text-lg inline-flex items-center justify-center group">
                <span>Go to Dashboard</span>
                <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                </svg>
            </a>
        </div>
    @else
        <div id="stkPushContainer" class="grid grid-cols-1 gap-8 @if($pendingTransaction) hidden @endif">
            <!-- STK PUSH FORM -->
            <div class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10">
                <h3 class="text-xl sm:text-2xl font-bold text-gray-800 mb-1">Pay Online (Recommended)</h3>
                <p class="text-gray-600 text-sm mb-6">An M-Pesa payment prompt will be sent to your phone.</p>

                <form id="paymentForm">
                    @csrf
                    <div class="mb-6">
                        <label class="block text-sm font-bold text-gray-700 mb-2">M-Pesa Phone Number *</label>
                        <input type="tel" 
                               id="phoneNumber" 
                               name="phone_number" 
                               placeholder="0712345678"
                               value="{{ old('phone_number', $candidate->phone_number) }}"
                               required
                               class="w-full px-6 py-4 text-lg border-2 border-gray-200 rounded-xl focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-200 transition">
                        <p class="text-sm text-gray-500 mt-2">Enter the M-Pesa number to receive the prompt.</p>
                    </div>

                    <div id="statusMessage" class="hidden mb-6">
                        <div class="p-4 rounded-xl bg-blue-50 border-2 border-blue-300">
                            <p id="statusText" class="text-blue-800 font-semibold"></p>
                        </div>
                    </div>

                    <button type="submit" 
                            id="payButton"
                            class="w-full bg-gradient-to-r from-green-600 to-green-700 text-white font-bold px-8 py-5 rounded-xl hover:from-green-700 hover:to-green-800 transition-all duration-300 text-lg shadow-lg hover:shadow-2xl">
                        <span id="buttonText">💳 Pay KES {{ $registrationFee }} with M-Pesa</span>
                        <span id="buttonLoading" class="hidden">⏳ Processing... Please wait.</span>
                    </button>
                </form>
            </div>
        </div>

        <!-- PENDING TRANSACTION / MANUAL PAYMENT SECTION -->
        <div id="pendingOrManualContainer" class="grid grid-cols-1 gap-8 @if(!$pendingTransaction) hidden @endif">
             <!-- PENDING TRANSACTION MESSAGE -->
             <div id="pendingTransactionMessage" class="glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 @if(!$pendingTransaction) hidden @endif">
                <div class="flex items-center space-x-4 mb-4">
                    <div class="spinner border-t-4 border-blue-500 border-solid rounded-full w-8 h-8 animate-spin"></div>
                    <h3 class="text-xl sm:text-2xl font-bold text-gray-800">Checking Payment Status...</h3>
                </div>
                <p class="text-gray-600 text-base mb-6">
                    A payment prompt was sent to your phone number ending with <strong>{{ substr($candidate->phone_number, -4) }}</strong>.
                    Please enter your M-Pesa PIN to complete the KES {{ $registrationFee }} payment.
                    We are actively monitoring the transaction status.
                </p>
                <div class="p-4 rounded-xl bg-blue-50 border-2 border-blue-300 mb-6">
                    <p id="pendingStatusText" class="text-blue-800 font-semibold">Payment is pending. Please complete the payment on your phone.</p>
                </div>
                <button id="retryStkButton" 
                        class="w-full btn-primary text-white font-bold px-8 py-4 rounded-xl hover:shadow-2xl text-lg inline-flex items-center justify-center group mt-4">
                    <span class="flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12m7-9v8h8"></path></svg>
                        Retry STK Push
                    </span>
                </button>
            </div>

            <!-- MANUAL PAYMENT INSTRUCTIONS (Initially hidden, revealed on failure/timeout) -->
            <div id="manualPaymentSection" class="hidden glass-card rounded-2xl sm:rounded-3xl p-6 sm:p-8 lg:p-10 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200">
                <h3 class="text-xl sm:text-2xl font-bold text-gray-800 mb-1">Alternative: Pay Manually</h3>
                <p class="text-gray-600 text-sm mb-6">If the online payment fails or times out, use the M-Pesa menu on your phone.</p>

                <div class="space-y-4">
                    <div class="bg-white rounded-lg p-3">
                        <p class="text-xs text-gray-500">Go to M-Pesa > Lipa na M-Pesa > Pay Bill</p>
                    </div>

                    <div>
                        <p class="text-sm font-bold text-gray-600">Business Number:</p>
                        <p class="text-2xl font-black text-blue-900 tracking-widest bg-gray-100 p-2 rounded-lg text-center">{{ config('mpesa.short_code') }}</p>
                    </div>
                    
                    <div>
                        <p class="text-sm font-bold text-gray-600">Account Number:</p>
                        <p class="text-2xl font-black text-blue-900 tracking-widest bg-gray-100 p-2 rounded-lg text-center">{{ $candidate->majira_id }}</p>
                    </div>

                    <div>
                        <p class="text-sm font-bold text-gray-600">Amount:</p>
                        <p class="text-2xl font-black text-blue-900 tracking-widest bg-gray-100 p-2 rounded-lg text-center">KES {{ $registrationFee }}</p>
                    </div>
                </div>

                <div class="mt-6 p-3 bg-yellow-100 border border-yellow-300 rounded-lg text-center">
                    <p class="text-sm text-yellow-800 font-semibold">Your payment will be confirmed automatically within a few minutes.</p>
                </div>
                <button id="showStkFormButton" 
                        class="w-full btn-primary text-white font-bold px-8 py-4 rounded-xl hover:shadow-2xl text-lg inline-flex items-center justify-center group mt-4">
                    <span class="flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        Try STK Push Again
                    </span>
                </button>
            </div>
        </div>
    @endif
</section>

@endsection

@push('scripts')
<script>
    const stkPushContainer = document.getElementById('stkPushContainer');
    const pendingOrManualContainer = document.getElementById('pendingOrManualContainer');
    const pendingTransactionMessage = document.getElementById('pendingTransactionMessage');
    const manualPaymentSection = document.getElementById('manualPaymentSection');
    
    const paymentForm = document.getElementById('paymentForm');
    const phoneNumberInput = document.getElementById('phoneNumber');
    const payButton = document.getElementById('payButton');
    const buttonText = document.getElementById('buttonText');
    const buttonLoading = document.getElementById('buttonLoading');
    const statusMessageDiv = document.getElementById('statusMessage');
    const statusText = document.getElementById('statusText');
    const pendingStatusText = document.getElementById('pendingStatusText');

    const retryStkButton = document.getElementById('retryStkButton');
    const showStkFormButton = document.getElementById('showStkFormButton');

    let currentCheckoutRequestId = '{{ $pendingTransaction->checkout_request_id ?? '' }}';

    // Initial state setup
    window.onload = function() {
        @if($pendingTransaction)
            console.log('Existing pending transaction found. Starting poll...');
            stkPushContainer.classList.add('hidden');
            pendingOrManualContainer.classList.remove('hidden');
            pendingTransactionMessage.classList.remove('hidden');
            manualPaymentSection.classList.add('hidden'); // Ensure manual is hidden initially if pending
            
            // Update the pending status text based on the actual pending transaction status
            if ('{{ $pendingTransaction->status }}' === 'pending') {
                pendingStatusText.textContent = 'Payment is pending. Please complete the payment on your phone ending with {{ substr($candidate->phone_number, -4) }}.';
            } else if ('{{ $pendingTransaction->status }}' === 'failed' || '{{ $pendingTransaction->status }}' === 'cancelled') {
                pendingStatusText.textContent = 'Last payment attempt {{ $pendingTransaction->status }}. Please try again.';
                pendingTransactionMessage.classList.add('hidden'); // Hide pending message
                manualPaymentSection.classList.remove('hidden'); // Show manual and retry
            }
            
            pollForStatus(currentCheckoutRequestId);
        @else
            stkPushContainer.classList.remove('hidden');
            pendingOrManualContainer.classList.add('hidden');
        @endif
    };

    paymentForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const phoneNumber = phoneNumberInput.value;
        
        // Disable button and show loading, hide manual section
        payButton.disabled = true;
        buttonText.classList.add('hidden');
        buttonLoading.classList.remove('hidden');
        statusMessageDiv.classList.add('hidden');
        manualPaymentSection.classList.add('hidden'); // Always hide manual section on new STK attempt
        
        try {
            const response = await fetch('{{ route("candidate.payment.initiate") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ phone_number: phoneNumber })
            });
            
            const data = await response.json();
            
            if (response.ok && data.success) {
                statusMessageDiv.classList.remove('hidden');
                statusText.textContent = data.message || 'Please check your phone for an M-Pesa prompt...';
                currentCheckoutRequestId = data.checkout_request_id; // Store for polling
                stkPushContainer.classList.add('hidden'); // Hide STK form
                pendingOrManualContainer.classList.remove('hidden'); // Show pending/manual container
                pendingTransactionMessage.classList.remove('hidden'); // Show pending message
                manualPaymentSection.classList.add('hidden'); // Ensure manual is hidden
                pendingStatusText.textContent = 'Payment is pending. Please complete the payment on your phone ending with ' + phoneNumber.slice(-4) + '.';

                pollForStatus(currentCheckoutRequestId);
            } else {
                throw new Error(data.message || 'Failed to initiate payment.');
            }
            
        } catch (error) {
            console.error('Payment initiation error:', error);
            statusMessageDiv.classList.remove('hidden');
            statusText.textContent = '❌ ' + error.message + ' Please try again or use the manual instructions below.';
            resetButton();
            showManualPayment();
        }
    });

    function pollForStatus(checkoutRequestId) {
        let attempts = 0;
        const maxAttempts = 90; // Poll for 90 seconds (45 * 2 seconds)
        
        // Clear any previous interval to prevent multiple polls
        if (window.pollingInterval) {
            clearInterval(window.pollingInterval);
        }

        window.pollingInterval = setInterval(async () => {
            attempts++;
            
            if (attempts > maxAttempts) {
                clearInterval(window.pollingInterval);
                statusText.textContent = 'Payment check timed out. Please try again or use the manual instructions below.';
                pendingStatusText.textContent = 'Payment check timed out. Please try again or use the manual instructions below.';
                resetButton();
                showManualPayment();
                return;
            }
            
            try {
                const response = await fetch('{{ route("candidate.payment.check-status") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ checkout_request_id: checkoutRequestId })
                });
                
                if (!response.ok) {
                    // Log error but continue polling if it's just a network glitch
                    console.error('Status check network error, continuing poll.');
                    return; 
                }

                const data = await response.json();
                
                if (data.status === 'completed') {
                    clearInterval(window.pollingInterval);
                    pendingStatusText.textContent = '✅ Payment successful! Redirecting to your dashboard...';
                    statusText.textContent = '✅ Payment successful! Redirecting to your dashboard...'; // Update STK form status too
                    setTimeout(() => {
                        window.location.href = '{{ route("candidate.dashboard") }}?payment=success';
                    }, 2000);
                } else if (data.status === 'failed' || data.status === 'cancelled') {
                    clearInterval(window.pollingInterval);
                    pendingStatusText.textContent = `❌ Payment ${data.status}. ${data.message || 'Please try again or use the manual instructions below.'}`;
                    statusText.textContent = `❌ Payment ${data.status}. ${data.message || 'Please try again or use the manual instructions below.'}`; // Update STK form status too
                    resetButton();
                    showManualPayment();
                } else {
                    pendingStatusText.textContent = data.message;
                }
                
            } catch (error) {
                console.error('Status check error:', error);
                // Don't stop polling on network error, just continue
            }
        }, 2000); // Poll every 2 seconds
    }

    function showManualPayment() {
        pendingOrManualContainer.classList.remove('hidden'); // Ensure parent container is visible
        pendingTransactionMessage.classList.add('hidden'); // Hide pending message
        manualPaymentSection.classList.remove('hidden');
        if (manualPaymentSection) {
            setTimeout(() => {
                manualPaymentSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 100);
        }
    }

    function resetButton() {
        payButton.disabled = false;
        buttonText.classList.remove('hidden');
        buttonLoading.classList.add('hidden');
        // Do not hide the statusMessageDiv here, it should show the error.
        // statusMessageDiv.classList.add('hidden'); 
    }

    // Event listener for "Retry STK Push" button in pending/manual section
    retryStkButton.addEventListener('click', function() {
        stkPushContainer.classList.remove('hidden'); // Show STK form
        pendingOrManualContainer.classList.add('hidden'); // Hide pending/manual container
        manualPaymentSection.classList.add('hidden'); // Ensure manual is hidden
        pendingTransactionMessage.classList.add('hidden'); // Ensure pending is hidden
        
        // Reset STK form elements
        statusMessageDiv.classList.add('hidden');
        statusText.textContent = '';
        phoneNumberInput.value = '{{ old('phone_number', $candidate->phone_number) }}'; // Reset phone number
        resetButton();
    });

    // Event listener for "Try STK Push Again" button in manual section
    showStkFormButton.addEventListener('click', function() {
        stkPushContainer.classList.remove('hidden'); // Show STK form
        pendingOrManualContainer.classList.add('hidden'); // Hide pending/manual container
        manualPaymentSection.classList.add('hidden'); // Ensure manual is hidden
        pendingTransactionMessage.classList.add('hidden'); // Ensure pending is hidden

        // Reset STK form elements
        statusMessageDiv.classList.add('hidden');
        statusText.textContent = '';
        phoneNumberInput.value = '{{ old('phone_number', $candidate->phone_number) }}'; // Reset phone number
        resetButton();
    });

</script>
<style>
    .spinner {
        border-color: #3B82F6 transparent #3B82F6 transparent; /* Blue color */
    }
</style>
@endpush