<div class="internet-payment-details">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-globe me-2"></i>Internet Payment Details
                <small class="ms-2 opacity-75">#{{ $payment->id }}</small>
            </h5>
        </div>
        <div class="card-body">
            <!-- Info Grid -->
            <div class="info-grid">
                <!-- Station Information -->
                <div class="info-card">
                    <div class="section-header">
                        <i class="fas fa-building me-2"></i>Station Information
                    </div>
                    <table class="details-table">
                        <tr>
                            <td><i class="fas fa-tag me-2 text-muted"></i>Station Name:</td>
                            <td><strong>{{ $payment->station->name ?? 'N/A' }}</strong></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-hashtag me-2 text-muted"></i>Station Code:</td>
                            <td><code class="code-block">{{ $payment->station->code ?? 'N/A' }}</code></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-map-marker-alt me-2 text-muted"></i>Location:</td>
                            <td>{{ $payment->station->address ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-phone me-2 text-muted"></i>Contact Phone:</td>
                            <td>
                                <a href="tel:{{ $payment->station->contact_phone }}" class="text-decoration-none">
                                    {{ $payment->station->contact_phone ?? 'N/A' }}
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-envelope me-2 text-muted"></i>Contact Email:</td>
                            <td>
                                <a href="mailto:{{ $payment->station->contact_email }}" class="text-decoration-none">
                                    {{ $payment->station->contact_email ?? 'N/A' }}
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- Provider Information -->
                <div class="info-card">
                    <div class="section-header">
                        <i class="fas fa-broadcast-tower me-2"></i>Provider Information
                    </div>
                    <table class="details-table">
                        <tr>
                            <td><i class="fas fa-building me-2 text-muted"></i>Provider:</td>
                            <td><strong>{{ $payment->provider->name ?? 'N/A' }}</strong></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-credit-card me-2 text-muted"></i>Account Number:</td>
                            <td>
                                <span class="copyable code-block" onclick="copyToClipboard('{{ $payment->account_number }}')" data-tooltip="Click to copy">
                                    {{ $payment->account_number ?? 'N/A' }}
                                    <i class="fas fa-copy ms-1 text-muted" style="font-size: 0.7rem;"></i>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-receipt me-2 text-muted"></i>Paybill Number:</td>
                            <td>
                                <span class="copyable code-block" onclick="copyToClipboard('{{ $payment->provider->paybill_number }}')">
                                    {{ $payment->provider->paybill_number ?? 'N/A' }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-headset me-2 text-muted"></i>Provider Contact:</td>
                            <td>
                                <a href="tel:{{ $payment->provider->support_contact }}" class="text-decoration-none">
                                    {{ $payment->provider->support_contact ?? 'N/A' }}
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- Payment Details -->
                <div class="info-card">
                    <div class="section-header">
                        <i class="fas fa-credit-card me-2"></i>Payment Details
                    </div>
                    <table class="details-table">
                        <tr>
                            <td><i class="fas fa-money-bill-wave me-2 text-muted"></i>Amount:</td>
                            <td><span class="amount-positive">KES {{ number_format($payment->amount ?? 0, 2) }}</span></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-chart-line me-2 text-muted"></i>Previous Balance:</td>
                            <td><span class="{{ ($payment->previous_balance ?? 0) > 0 ? 'amount-negative' : 'amount-positive' }}">
                                KES {{ number_format($payment->previous_balance ?? 0, 2) }}
                            </span></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-calculator me-2 text-muted"></i>Total Due:</td>
                            <td><strong class="amount-negative amount-large">KES {{ number_format(($payment->amount ?? 0) + ($payment->previous_balance ?? 0), 2) }}</strong></td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-calendar-alt me-2 text-muted"></i>Billing Month:</td>
                            <td>{{ $payment->billing_month ? \Carbon\Carbon::parse($payment->billing_month)->format('F Y') : 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-hourglass-half me-2 text-muted"></i>Due Date:</td>
                            <td>
                                {{ $payment->due_date ? \Carbon\Carbon::parse($payment->due_date)->format('d/m/Y') : 'N/A' }}
                                @php
                                    $dueDate = $payment->due_date ? \Carbon\Carbon::parse($payment->due_date) : null;
                                    $daysDiff = $dueDate ? now()->diffInDays($dueDate, false) : null;
                                @endphp
                                @if($dueDate && $dueDate->isPast() && $payment->status != 'paid')
                                    <div class="due-alert due-overdue mt-2">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        Overdue by {{ abs($daysDiff) }} days
                                    </div>
                                @elseif($dueDate && $daysDiff <= 3 && $payment->status != 'paid')
                                    <div class="due-alert due-soon due-soon-pulse mt-2">
                                        <i class="fas fa-bell me-1"></i>
                                        Due in {{ $daysDiff }} days
                                    </div>
                                @elseif($dueDate && $payment->status != 'paid')
                                    <div class="due-alert due-upcoming mt-2">
                                        <i class="fas fa-clock me-1"></i>
                                        Due in {{ $daysDiff }} days
                                    </div>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-chart-simple me-2 text-muted"></i>Status:</td>
                            <td>
                                <span class="status-badge status-{{ $payment->status ?? 'pending' }}">
                                    <i class="fas fa-{{ $payment->status == 'paid' ? 'check-circle' : ($payment->status == 'pending' ? 'clock' : 'times-circle') }}"></i>
                                    {{ ucfirst($payment->status ?? 'pending') }}
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>

                <!-- Transaction Details -->
                <div class="info-card">
                    <div class="section-header">
                        <i class="fas fa-receipt me-2"></i>Transaction Details
                    </div>
                    <table class="details-table">
                        <tr>
                            <td><i class="fas fa-calendar-check me-2 text-muted"></i>Payment Date:</td>
                            <td>
                                {{ $payment->payment_date ? \Carbon\Carbon::parse($payment->payment_date)->format('d/m/Y') : 'Not paid' }}
                                @if(!$payment->payment_date && $payment->status == 'paid')
                                    <span class="text-muted ms-1">(Pending confirmation)</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-credit-card me-2 text-muted"></i>Payment Method:</td>
                            <td>
                                @if($payment->payment_method)
                                    <i class="fas fa-{{ $payment->payment_method == 'M-Pesa' ? 'mobile-alt' : 'university' }} me-1"></i>
                                    {{ $payment->payment_method }}
                                @else
                                    N/A
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-fingerprint me-2 text-muted"></i>Transaction ID:</td>
                            <td>
                                <span class="copyable code-block" onclick="copyToClipboard('{{ $payment->transaction_id }}')">
                                    {{ $payment->transaction_id ?? 'N/A' }}
                                </span>
                            </td>
                        </tr>
                        @if($payment->mpesa_receipt)
                        <tr>
                            <td><i class="fas fa-mobile-alt me-2 text-muted"></i>M-Pesa Receipt:</td>
                            <td>
                                <span class="copyable code-block" onclick="copyToClipboard('{{ $payment->mpesa_receipt }}')">
                                    {{ $payment->mpesa_receipt }}
                                </span>
                            </td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>

            <!-- Notes Section -->
            @if($payment->invoice_notes)
            <div class="info-card mt-3">
                <div class="section-header">
                    <i class="fas fa-sticky-note me-2"></i>Additional Notes
                </div>
                <div class="notes-content">
                    <i class="fas fa-quote-left me-2 text-muted"></i>
                    {{ $payment->invoice_notes }}
                </div>
            </div>
            @endif

            <!-- Action Buttons -->
            <div class="action-buttons">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i> Close
                </button>
                
                <!-- Custom Dropdown (No Bootstrap JS required) -->
                <div class="custom-dropdown">
                    <button type="button" class="btn btn-primary" onclick="toggleCustomDropdown(this)">
                        <i class="fas fa-eye me-1"></i> View Options <i class="fas fa-chevron-down ms-1"></i>
                    </button>
                    <div class="custom-dropdown-menu">
                        <a class="dropdown-item" href="{{ route('payments.internet.show', $payment->id) }}" target="_blank">
                            <i class="fas fa-external-link-alt me-2"></i> Full Details (New Tab)
                        </a>
                        <a class="dropdown-item" href="{{ route('payments.internet.show', $payment->id) }}?partial=1" target="_blank">
                            <i class="fas fa-file-alt me-2"></i> Partial View (New Tab)
                        </a>
                        <a class="dropdown-item" href="{{ route('payments.internet.edit', $payment->id) }}">
                            <i class="fas fa-edit me-2"></i> Edit Payment
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-danger" href="{{ route('payments.internet.destroy', $payment->id) }}" 
                        onclick="return confirm('Delete this payment?')">
                            <i class="fas fa-trash me-2"></i> Delete
                        </a>
                    </div>
                </div>
                
                @if($payment->status == 'pending' || $payment->status == 'overdue')
                    <button type="button" class="btn btn-success" onclick="markInternetAsPaid({{ $payment->id }})">
                        <i class="fas fa-check-circle me-1"></i> Mark as Paid
                    </button>
                    <button type="button" class="btn btn-info" onclick="sendInternetReminder({{ $payment->id }})">
                        <i class="fas fa-bell me-1"></i> Send Reminder
                    </button>
                @endif
            </div>

        </div>
    </div>
</div>

<script>
// Copy to clipboard function
function copyToClipboard(text) {
    if (!text || text === 'N/A') return;
    
    navigator.clipboard.writeText(text).then(function() {
        // Create and show toast notification
        const toast = document.createElement('div');
        toast.className = 'copy-toast';
        toast.innerHTML = '<i class="fas fa-check-circle me-2"></i>Copied to clipboard!';
        document.body.appendChild(toast);
        
        setTimeout(function() {
            toast.remove();
        }, 2000);
    }).catch(function(err) {
        console.error('Failed to copy: ', err);
        alert('Failed to copy to clipboard');
    });
}

// Make copyable elements have cursor pointer
document.querySelectorAll('.copyable').forEach(el => {
    if (el.innerText !== 'N/A' && el.innerText.trim() !== '') {
        el.style.cursor = 'pointer';
        el.title = 'Click to copy';
    }
});

function markInternetAsPaid(paymentId) {
    if (confirm('Mark this payment as paid?')) {
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Processing...';
        button.disabled = true;
        
        $.ajax({
            url: '{{ url("/internet-payments") }}/' + paymentId + '/mark-paid',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                _method: 'PUT'
            },
            success: function(response) {
                if (response.success) {
                    // Show success message
                    const modal = bootstrap.Modal.getInstance(document.getElementById('paymentDetailsModal'));
                    modal.hide();
                    
                    // Show temporary success notification
                    const notification = document.createElement('div');
                    notification.className = 'alert alert-success position-fixed top-0 end-0 m-3';
                    notification.style.zIndex = '9999';
                    notification.innerHTML = '<i class="fas fa-check-circle me-2"></i>Payment marked as paid successfully!';
                    document.body.appendChild(notification);
                    
                    setTimeout(() => notification.remove(), 3000);
                    
                    // Reload the page after a short delay
                    setTimeout(() => location.reload(), 1500);
                } else {
                    alert('Error: ' + (response.message || 'Unknown error'));
                    button.innerHTML = originalText;
                    button.disabled = false;
                }
            },
            error: function(xhr) {
                alert('Error marking payment as paid: ' + (xhr.responseJSON?.message || 'Unknown error'));
                button.innerHTML = originalText;
                button.disabled = false;
            }
        });
    }
}

function sendInternetReminder(paymentId) {
    if (confirm('Send reminder for this payment?')) {
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Sending...';
        button.disabled = true;
        
        $.ajax({
            url: '{{ url("/internet-payments") }}/' + paymentId + '/send-reminder',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    alert('Reminder sent successfully!');
                } else {
                    alert('Error: ' + (response.message || 'Unknown error'));
                }
                button.innerHTML = originalText;
                button.disabled = false;
            },
            error: function(xhr) {
                alert('Error sending reminder: ' + (xhr.responseJSON?.message || 'Unknown error'));
                button.innerHTML = originalText;
                button.disabled = false;
            }
        });
    }
}
</script>