@extends('layouts.mobile')

@section('title', 'Request Money')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-money-bill-wave text-white text-2xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-white mb-2">Request Money</h1>
        <p class="text-gray-400">Send payment requests to anyone via email or phone</p>
    </div>

    <!-- Create Request Form -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Create Payment Request</h3>
        
        <form id="requestForm" class="space-y-4">
            @csrf
            <div>
                <label for="amount" class="form-label">Amount (₦)</label>
                <input type="number" name="amount" id="amount" class="form-input" placeholder="0.00" min="100" required>
                <p class="text-xs text-gray-400 mt-1">Minimum: ₦100</p>
            </div>
            
            <div>
                <label for="payer_identifier" class="form-label">Send to (Email or Phone)</label>
                <input type="text" name="payer_identifier" id="payer_identifier" class="form-input" placeholder="email@example.com or 08012345678" required>
            </div>
            
            <div>
                <label for="description" class="form-label">Description (Optional)</label>
                <input type="text" name="description" id="description" class="form-input" placeholder="What's this for?">
            </div>
            
            <div>
                <label for="expires_in_days" class="form-label">Expires In</label>
                <select name="expires_in_days" id="expires_in_days" class="form-input">
                    <option value="1">1 Day</option>
                    <option value="3">3 Days</option>
                    <option value="7" selected>1 Week</option>
                    <option value="14">2 Weeks</option>
                    <option value="30">1 Month</option>
                </select>
            </div>
            
            <button type="submit" class="w-full btn btn-primary">
                <i class="fas fa-paper-plane mr-2"></i>
                Send Request
            </button>
        </form>
    </div>

    <!-- Sent Requests -->
    @if($sentRequests->count() > 0)
    <div class="space-y-4">
        <h3 class="text-lg font-semibold text-white">Sent Requests</h3>
        
        <div class="space-y-3">
            @foreach($sentRequests as $request)
            <div class="card p-4">
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <p class="text-white font-medium">{{ $request->formatted_amount }}</p>
                        <p class="text-gray-400 text-sm">
                            To: {{ $request->payer?->full_name ?? $request->payer_identifier }}
                        </p>
                        @if($request->description)
                            <p class="text-gray-500 text-xs mt-1">{{ $request->description }}</p>
                        @endif
                        <p class="text-xs text-gray-500 mt-1">
                            Created: {{ $request->created_at->format('M d, Y') }}
                            @if($request->expires_at)
                                • Expires: {{ $request->expires_at->format('M d, Y') }}
                            @endif
                        </p>
                    </div>
                    <div class="text-right">
                        <div class="status-badge {{ $request->status === 'pending' ? 'status-pending' : ($request->status === 'paid' ? 'status-success' : 'status-failed') }}">
                            {{ ucfirst($request->status) }}
                        </div>
                        @if($request->status === 'pending')
                            <div class="mt-2 space-x-2">
                                <button onclick="shareRequest('{{ $request->request_code }}')" class="text-xs text-blue-400 hover:text-blue-300">
                                    <i class="fas fa-share mr-1"></i>Share
                                </button>
                                <button onclick="cancelRequest({{ $request->id }})" class="text-xs text-red-400 hover:text-red-300">
                                    <i class="fas fa-times mr-1"></i>Cancel
                                </button>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Received Requests -->
    @if($receivedRequests->count() > 0)
    <div class="space-y-4">
        <h3 class="text-lg font-semibold text-white">Received Requests</h3>
        
        <div class="space-y-3">
            @foreach($receivedRequests as $request)
            <div class="card p-4">
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <p class="text-white font-medium">{{ $request->formatted_amount }}</p>
                        <p class="text-gray-400 text-sm">
                            From: {{ $request->requester->full_name }}
                        </p>
                        @if($request->description)
                            <p class="text-gray-500 text-xs mt-1">{{ $request->description }}</p>
                        @endif
                        <p class="text-xs text-gray-500 mt-1">
                            Received: {{ $request->created_at->format('M d, Y') }}
                            @if($request->expires_at)
                                • Expires: {{ $request->expires_at->format('M d, Y') }}
                            @endif
                        </p>
                    </div>
                    <div class="text-right">
                        <div class="status-badge {{ $request->status === 'pending' ? 'status-pending' : ($request->status === 'paid' ? 'status-success' : 'status-failed') }}">
                            {{ ucfirst($request->status) }}
                        </div>
                        @if($request->canBePaid())
                            <a href="{{ route('request.pay', $request->request_code) }}" class="block mt-2 text-xs btn btn-primary text-center py-1">
                                Pay Now
                            </a>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    @if($sentRequests->count() === 0 && $receivedRequests->count() === 0)
    <div class="text-center py-12">
        <div class="w-16 h-16 bg-dark-800 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-money-bill-wave text-gray-500 text-2xl"></i>
        </div>
        <p class="text-gray-400 font-medium mb-2">No payment requests yet</p>
        <p class="text-gray-500 text-sm">Create your first payment request above</p>
    </div>
    @endif
</div>

<!-- Share Modal -->
<div id="shareModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
    <div class="absolute bottom-0 left-0 right-0 bg-dark-900 rounded-t-3xl p-6 slide-up">
        <div class="w-12 h-1 bg-gray-600 rounded-full mx-auto mb-6"></div>
        <h3 class="text-xl font-semibold text-white mb-4">Share Payment Request</h3>
        
        <div class="space-y-4">
            <div>
                <label class="form-label">Share Link</label>
                <div class="flex">
                    <input type="text" id="shareLink" class="form-input rounded-r-none" readonly>
                    <button onclick="copyLink()" class="btn btn-primary rounded-l-none">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button onclick="shareViaWhatsApp()" class="flex-1 btn btn-success">
                    <i class="fab fa-whatsapp mr-2"></i>WhatsApp
                </button>
                <button onclick="shareViaEmail()" class="flex-1 btn btn-secondary">
                    <i class="fas fa-envelope mr-2"></i>Email
                </button>
            </div>
        </div>
        
        <button onclick="closeShareModal()" class="w-full btn btn-secondary mt-4">Close</button>
    </div>
</div>

@push('scripts')
<script>
let currentShareUrl = '';

document.getElementById('requestForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const submitBtn = this.querySelector('button[type="submit"]');
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Creating...';
    
    try {
        const response = await fetch('{{ route('request.create') }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showToast('Payment request created successfully!', 'success');
            currentShareUrl = data.sharing_url;
            document.getElementById('shareLink').value = currentShareUrl;
            document.getElementById('shareModal').classList.remove('hidden');
            this.reset();
        } else {
            showToast(data.message || 'Failed to create request', 'error');
        }
    } catch (error) {
        showToast('An error occurred. Please try again.', 'error');
    } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i>Send Request';
    }
});

function shareRequest(requestCode) {
    currentShareUrl = `{{ url('/') }}/request/pay/${requestCode}`;
    document.getElementById('shareLink').value = currentShareUrl;
    document.getElementById('shareModal').classList.remove('hidden');
}

function closeShareModal() {
    document.getElementById('shareModal').classList.add('hidden');
}

function copyLink() {
    const linkInput = document.getElementById('shareLink');
    linkInput.select();
    document.execCommand('copy');
    showToast('Link copied to clipboard!', 'success');
}

function shareViaWhatsApp() {
    const message = encodeURIComponent(`Hi! Please pay my request: ${currentShareUrl}`);
    window.open(`https://wa.me/?text=${message}`, '_blank');
}

function shareViaEmail() {
    const subject = encodeURIComponent('Payment Request');
    const body = encodeURIComponent(`Hi,\n\nI've sent you a payment request. Please use this link to pay:\n\n${currentShareUrl}\n\nThank you!`);
    window.open(`mailto:?subject=${subject}&body=${body}`);
}

async function cancelRequest(requestId) {
    if (!confirm('Are you sure you want to cancel this payment request?')) return;
    
    try {
        const response = await fetch(`{{ url('/') }}/request/cancel/${requestId}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showToast('Payment request cancelled', 'success');
            location.reload();
        } else {
            showToast(data.message || 'Failed to cancel request', 'error');
        }
    } catch (error) {
        showToast('An error occurred. Please try again.', 'error');
    }
}

function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `fixed top-4 right-4 p-4 rounded-lg text-white z-50 ${type === 'success' ? 'bg-success-600' : type === 'error' ? 'bg-error-600' : 'bg-primary-600'}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    const modal = document.getElementById('shareModal');
    if (event.target === modal) {
        closeShareModal();
    }
});
</script>
@endpush
@endsection