@extends('layouts.app')

@section('title', $nominee->name . ' - Vote Now')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <a href="{{ route('home') }}" class="inline-flex items-center text-gray-600 hover:text-primary mb-8">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
        </svg>
        Back to Categories
    </a>

    <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
        <div class="md:flex">
            <div class="md:w-1/2 bg-gray-200">
                @if($nominee->photo)
                    <img src="{{ asset($nominee->photo) }}" alt="{{ $nominee->name }}" class="w-full h-full object-cover">
                @else
                    <div class="w-full h-96 bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
                        <svg class="w-32 h-32 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                @endif
            </div>
            <div class="md:w-1/2 p-8">
                <div class="mb-4">
                    <span class="inline-block bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">
                        {{ $nominee->category->name }}
                    </span>
                </div>
                <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ $nominee->name }}</h1>

                @if($nominee->bio)
                    <p class="text-gray-600 mb-6">{{ $nominee->bio }}</p>
                @endif
                
                @php $individual_votes = \App\Models\Vote::where('nominee_id', $nominee->id)->where('status', 'success')->get();
                            $total_individual_votes =$individual_votes->sum('amount');
                 @endphp

                <div class="bg-gray-50 rounded-xl p-6 mb-6">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-gray-600">Total Votes</span>
                        <span class="text-3xl font-bold text-primary">{{ $total_individual_votes }}</span>
                    </div>
                </div>

                <button onclick="openPaymentModal()" class="w-full bg-gradient-to-r from-primary to-secondary text-white py-4 rounded-xl font-bold text-lg hover:opacity-90 transition-opacity flex items-center justify-center">
                    <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                    Vote Now
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div id="paymentModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-8">
        <div class="text-center mb-6">
            <h3 class="text-2xl font-bold text-gray-900">Vote for {{ $nominee->name }}</h3>
            <p class="text-gray-600 mt-2">Enter your vote amount</p>
        </div>

        <form id="paymentForm" onsubmit="initializePayment(event)">
            @csrf
            <input type="hidden" name="nominee_id" value="{{ $nominee->id }}">

            <div class="mb-6">
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Your Email</label>
                <input type="email" id="email" name="email" required
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
                    placeholder="your@email.com">
            </div>

            <div class="mb-6">
                <label for="amount" class="block text-sm font-medium text-gray-700 mb-2">Vote Amount (GHS)</label>
                <input type="number" id="amount" name="amount" required min="5" value="5"
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent">
                <p class="text-sm text-gray-500 mt-2">Minimum amount: GHS 5</p>
            </div>

            <div class="flex space-x-4">
                <button type="button" onclick="closePaymentModal()" class="flex-1 bg-gray-200 text-gray-800 py-3 rounded-xl font-medium hover:bg-gray-300 transition-colors">
                    Cancel
                </button>
                <a type="submit" class="flex-1 bg-gradient-to-r from-primary to-secondary text-white py-3 rounded-xl font-medium hover:opacity-90 transition-opacity">
                    Continue to Pay
                </button>
            </div>
        </form>

        <div id="paymentError" class="hidden mt-4 p-4 bg-red-100 text-red-700 rounded-xl text-sm"></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const paystackPublicKey = '{{ config('services.paystack.public_key') }}';

    function openPaymentModal() {
        document.getElementById('paymentModal').classList.remove('hidden');
        document.getElementById('paymentModal').classList.add('flex');
    }

    function closePaymentModal() {
        document.getElementById('paymentModal').classList.add('hidden');
        document.getElementById('paymentModal').classList.remove('flex');
        document.getElementById('paymentError').classList.add('hidden');
    }

    async function initializePayment(e) {
        e.preventDefault();

        const form = document.getElementById('paymentForm');
        const formData = new FormData(form);
        const errorDiv = document.getElementById('paymentError');

        errorDiv.classList.add('hidden');

        try {
            const response = await fetch('{{ route('payment.initialize') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: formData
            });

            const data = await response.json();

            if (data.status && data.authorization_url) {
                // Open Paystack payment
                const handler = PaystackPop.setup({
                    key: paystackPublicKey,
                    email: formData.get('email'),
                    amount: formData.get('amount') * 100,
                    currency: 'GHS',
                    ref: data.reference,
                    callback: function(response) {
                        window.location.href = '{{ route('vote.callback') }}?reference=' + response.reference;
                    },
                    onClose: function() {
                        closePaymentModal();
                    }
                });
                handler.openIframe();
            } else {
                errorDiv.textContent = data.message || 'Failed to initialize payment. Please try again.';
                errorDiv.classList.remove('hidden');
            }
        } catch (error) {
            errorDiv.textContent = 'An error occurred. Please try again.';
            errorDiv.classList.remove('hidden');
        }
    }

    // Close modal on backdrop click
    document.getElementById('paymentModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closePaymentModal();
        }
    });
</script>
@endpush