@extends('layouts.app')

@section('title', 'Fund Project')
@section('description', 'Support this project and make an impact')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Breadcrumb -->
        <nav class="flex mb-8" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('home') }}" class="text-gray-700 hover:text-csr-blue">
                        <i class="fas fa-home mr-2"></i>
                        Home
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                        <a href="{{ route('projects.index') }}" class="text-gray-700 hover:text-csr-blue">Projects</a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                        <a href="{{ route('projects.show', $project) }}" class="text-gray-700 hover:text-csr-blue">{{ $project->title }}</a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                        <span class="text-gray-500">Fund Project</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Project Summary -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-8">
                    <h2 class="text-xl font-bold text-gray-900 mb-4">Project Summary</h2>
                    
                    <!-- Project Image -->
                    <div class="h-48 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg mb-4 relative overflow-hidden">
                        @if($project->featured_image)
                            <img src="{{ $project->featured_image }}" alt="{{ $project->title }}" class="w-full h-full object-cover">
                        @endif
                        @if($project->is_featured)
                            <div class="absolute top-2 right-2 bg-white px-2 py-1 rounded text-xs font-semibold text-csr-green">
                                Featured
                            </div>
                        @endif
                    </div>

                    <!-- Project Title -->
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ $project->title }}</h3>
                    
                    <!-- Project Owner -->
                    <p class="text-sm text-gray-600 mb-4">by {{ $project->owner->name }}</p>

                    <!-- SDG Tags -->
                    <div class="flex flex-wrap gap-2 mb-4">
                        @foreach($project->sdg_tags as $sdg)
                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                                SDG {{ $sdg }}
                            </span>
                        @endforeach
                    </div>

                    <!-- Funding Progress -->
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-600">{{ $project->formatted_funding_raised }} raised</span>
                            <span class="font-semibold">{{ number_format($project->funding_progress, 1) }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-csr-green h-2 rounded-full transition-all duration-300" 
                                 style="width: {{ min(100, $project->funding_progress) }}%"></div>
                        </div>
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>Goal: {{ $project->formatted_funding_goal }}</span>
                            <span>{{ $project->duration_months ?? 'N/A' }} months</span>
                        </div>
                    </div>

                    <!-- Project Stats -->
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div class="text-center">
                            <div class="text-lg font-semibold text-gray-900">{{ number_format($project->views_count) }}</div>
                            <div class="text-gray-600">Views</div>
                        </div>
                        <div class="text-center">
                            <div class="text-lg font-semibold text-gray-900">{{ number_format($project->likes_count) }}</div>
                            <div class="text-gray-600">Likes</div>
                        </div>
                    </div>

                    <!-- Location -->
                    <div class="mt-4 flex items-center text-sm text-gray-600">
                        <i class="fas fa-map-marker-alt mr-2"></i>
                        {{ $project->location ?? $project->region }}
                    </div>
                </div>
            </div>

            <!-- Funding Form -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">Fund This Project</h2>

                    <form id="fundingForm" method="POST" action="{{ route('projects.fund', $project) }}" class="space-y-6">
                        @csrf

                        <!-- Amount Selection -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-3">Select Amount</label>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
                                <label class="relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-4 shadow-sm focus:outline-none hover:border-csr-blue">
                                    <input type="radio" name="amount" value="10000" class="sr-only" required>
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900">₦10,000</span>
                                        <span class="mt-1 flex items-center text-xs text-gray-500">Basic Support</span>
                                    </span>
                                </label>

                                <label class="relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-4 shadow-sm focus:outline-none hover:border-csr-blue">
                                    <input type="radio" name="amount" value="25000" class="sr-only">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900">₦25,000</span>
                                        <span class="mt-1 flex items-center text-xs text-gray-500">Standard</span>
                                    </span>
                                </label>

                                <label class="relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-4 shadow-sm focus:outline-none hover:border-csr-blue">
                                    <input type="radio" name="amount" value="50000" class="sr-only">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900">₦50,000</span>
                                        <span class="mt-1 flex items-center text-xs text-gray-500">Premium</span>
                                    </span>
                                </label>

                                <label class="relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-4 shadow-sm focus:outline-none hover:border-csr-blue">
                                    <input type="radio" name="amount" value="100000" class="sr-only">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900">₦100,000</span>
                                        <span class="mt-1 flex items-center text-xs text-gray-500">Major Impact</span>
                                    </span>
                                </label>
                            </div>

                            <!-- Custom Amount -->
                            <div>
                                <label for="custom_amount" class="block text-sm font-medium text-gray-700 mb-2">Or enter custom amount</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">₦</span>
                                    </div>
                                    <input type="number" id="custom_amount" name="custom_amount" min="1000" step="1000"
                                           class="block w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-csr-blue focus:border-csr-blue"
                                           placeholder="Enter amount">
                                </div>
                                <p class="mt-1 text-xs text-gray-500">Minimum amount: ₦1,000</p>
                            </div>
                        </div>

                        <!-- Payment Gateway 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-3 gap-3">
                                <label class="relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-4 shadow-sm focus:outline-none hover:border-csr-blue">
                                    <input type="radio" name="payment_gateway" value="paystack" class="sr-only" required>
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center mr-3">
                                            <i class="fas fa-credit-card text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <span class="block text-sm font-medium text-gray-900">Paystack</span>
                                            <span class="block text-xs text-gray-500">Cards, Bank Transfer</span>
                                        </div>
                                    </div>
                                </label>

                                <label class="relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-4 shadow-sm focus:outline-none hover:border-csr-blue">
                                    <input type="radio" name="payment_gateway" value="flutterwave" class="sr-only">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
                                            <i class="fas fa-university text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <span class="block text-sm font-medium text-gray-900">Flutterwave</span>
                                            <span class="block text-xs text-gray-500">Cards, USSD</span>
                                        </div>
                                    </div>
                                </label>

                                <label class="relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-4 shadow-sm focus:outline-none hover:border-csr-blue">
                                    <input type="radio" name="payment_gateway" value="stripe" class="sr-only">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center mr-3">
                                            <i class="fas fa-globe text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <span class="block text-sm font-medium text-gray-900">Stripe</span>
                                            <span class="block text-xs text-gray-500">International</span>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <!-- Payment Method Details -->
                        <div id="paymentMethodDetails" class="hidden">
                            <label for="payment_method" class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                            <select id="payment_method" name="payment_method" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-csr-blue focus:border-csr-blue">
                                <option value="">Select payment method</option>
                                <option value="card">Credit/Debit Card</option>
                                <option value="bank_transfer">Bank Transfer</option>
                                <option value="ussd">USSD</option>
                                <option value="mobile_money">Mobile Money</option>
                            </select>
                        </div>

                        <!-- Message (Optional) -->
                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                                Message (Optional)
                            </label>
                            <textarea id="description" name="description" rows="3"
                                      class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                                      placeholder="Leave a message of support for this project..."></textarea>
                        </div>

                        <!-- Terms and Conditions -->
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="terms" name="terms" type="checkbox" required
                                       class="h-4 w-4 text-csr-blue focus:ring-csr-blue border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="terms" class="text-gray-700">
                                    I agree to the 
                                    <a href="#" class="text-csr-blue hover:text-blue-600">Terms of Service</a>
                                    and
                                    <a href="#" class="text-csr-blue hover:text-blue-600">Privacy Policy</a>
                                </label>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="pt-4">
                            <button type="submit" id="submitBtn"
                                    class="w-full bg-csr-green text-white py-3 px-4 rounded-lg font-semibold hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-csr-green transition-colors">
                                <i class="fas fa-lock mr-2"></i>
                                Proceed to Secure Payment
                            </button>
                        </div>

                        <!-- Security Notice -->
                        <div class="text-center text-sm text-gray-600">
                            <i class="fas fa-shield-alt mr-1"></i>
                            Your payment is secured with SSL encryption
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Handle radio button selection styling
document.querySelectorAll('input[name="amount"]').forEach(radio => {
    radio.addEventListener('change', function() {
        // Remove selected class from all amount labels
        document.querySelectorAll('input[name="amount"]').forEach(r => {
            r.closest('label').classList.remove('border-csr-blue', 'bg-blue-50');
            r.closest('label').classList.add('border-gray-300', 'bg-white');
        });
        
        // Add selected class to checked radio
        if (this.checked) {
            this.closest('label').classList.remove('border-gray-300', 'bg-white');
            this.closest('label').classList.add('border-csr-blue', 'bg-blue-50');
        }
    });
});

document.querySelectorAll('input[name="payment_gateway"]').forEach(radio => {
    radio.addEventListener('change', function() {
        // Remove selected class from all gateway labels
        document.querySelectorAll('input[name="payment_gateway"]').forEach(r => {
            r.closest('label').classList.remove('border-csr-blue', 'bg-blue-50');
            r.closest('label').classList.add('border-gray-300', 'bg-white');
        });
        
        // Add selected class to checked radio
        if (this.checked) {
            this.closest('label').classList.remove('border-gray-300', 'bg-white');
            this.closest('label').classList.add('border-csr-blue', 'bg-blue-50');
            
            // Show payment method details
            document.getElementById('paymentMethodDetails').classList.remove('hidden');
        }
    });
});

// Handle custom amount input
document.getElementById('custom_amount').addEventListener('input', function() {
    // Uncheck all radio buttons when custom amount is entered
    document.querySelectorAll('input[name="amount"]').forEach(radio => {
        radio.checked = false;
        radio.closest('label').classList.remove('border-csr-blue', 'bg-blue-50');
        radio.closest('label').classList.add('border-gray-300', 'bg-white');
    });
});

// Handle radio button selection for custom amount
document.querySelectorAll('input[name="amount"]').forEach(radio => {
    radio.addEventListener('change', function() {
        // Clear custom amount when radio is selected
        if (this.checked) {
            document.getElementById('custom_amount').value = '';
        }
    });
});

// Form validation
document.getElementById('fundingForm').addEventListener('submit', function(e) {
    const amount = document.querySelector('input[name="amount"]:checked')?.value;
    const customAmount = document.getElementById('custom_amount').value;
    const paymentGateway = document.querySelector('input[name="payment_gateway"]:checked')?.value;
    
    if (!amount && !customAmount) {
        e.preventDefault();
        alert('Please select an amount or enter a custom amount.');
        return;
    }
    
    if (customAmount && (customAmount < 1000)) {
        e.preventDefault();
        alert('Minimum amount is ₦1,000.');
        return;
    }
    
    if (!paymentGateway) {
        e.preventDefault();
        alert('Please select a payment method.');
        return;
    }
    
    // Show loading state
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
    submitBtn.disabled = true;
});
</script>
@endpush
@endsection