@extends('user::layouts.backend-master')

@section('breadcrumb_title', $breadcrumbTitle ?? 'Bank Transfer')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-university fa-2x me-3"></i>
                        <div>
                            <h3 class="mb-0">{{ trans('payment::translate.Bank Transfer Details') }}</h3>
                            <small class="opacity-75">{{ trans('payment::translate.Complete your payment using bank transfer') }}</small>
                        </div>
                    </div>
                </div>

                <div class="card-body p-4">
                    <!-- Payment Summary -->
                    <div class="alert alert-info border-0 mb-4">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h5 class="alert-heading mb-2">
                                    <i class="fas fa-info-circle me-2"></i>{{ trans('payment::translate.Payment Summary') }}
                                </h5>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <strong>{{ trans('payment::translate.Reference') }}:</strong> 
                                        <code class="bg-white text-primary px-2 py-1 rounded">{{ $paymentData['reference_number'] ?? 'N/A' }}</code>
                                    </div>
                                    <div class="col-sm-6">
                                        <strong>{{ trans('payment::translate.Amount') }}:</strong> 
                                        <span class="h5 text-success mb-0">
                                            {{ $paymentData['currency'] ?? 'USD' }} {{ number_format($paymentData['amount'] ?? 0, 2) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 text-end">
                                <i class="fas fa-money-bill-wave text-success" style="font-size: 3rem; opacity: 0.3;"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Bank Details -->
                    <div class="card border-primary">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-primary">
                                <i class="fas fa-university me-2"></i>{{ trans('payment::translate.Bank Account Details') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                @foreach($paymentData['bank_details'] ?? [] as $label => $value)
                                    @if(!empty($value))
                                    <div class="col-md-6">
                                        <div class="border rounded p-3 h-100 bg-light">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div class="flex-grow-1">
                                                    <label class="form-label text-muted small text-uppercase fw-bold mb-1">
                                                        {{ trans('payment::translate.' . ucwords(str_replace('_', ' ', $label))) }}
                                                    </label>
                                                    <div class="h6 mb-0 text-dark">{{ $value }}</div>
                                                </div>
                                                <button class="btn btn-sm btn-outline-secondary copy-btn" 
                                                        data-copy="{{ $value }}" 
                                                        title="{{ trans('payment::translate.Copy to clipboard') }}">
                                                    <i class="fas fa-copy"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Instructions -->
                    @if(!empty($paymentData['instructions']))
                    <div class="card border-warning mt-4">
                        <div class="card-header bg-warning bg-opacity-10">
                            <h5 class="mb-0 text-warning">
                                <i class="fas fa-exclamation-triangle me-2"></i>{{ trans('payment::translate.Payment Instructions') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-warning border-0">
                                {{ $paymentData['instructions'] }}
                            </div>
                            
                            <div class="mt-3">
                                <h6>{{ trans('payment::translate.Important Notes') }}:</h6>
                                <ul class="list-unstyled mb-0">
                                    <li><i class="fas fa-check text-success me-2"></i>{{ trans('payment::translate.Include the reference number in your transfer description') }}</li>
                                    <li><i class="fas fa-check text-success me-2"></i>{{ trans('payment::translate.Transfer the exact amount mentioned above') }}</li>
                                    <li><i class="fas fa-check text-success me-2"></i>{{ trans('payment::translate.Payment verification may take 1-2 business days') }}</li>
                                    <li><i class="fas fa-check text-success me-2"></i>{{ trans('payment::translate.Keep your transfer receipt for reference') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Action Buttons -->
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <button onclick="window.print()" class="btn btn-outline-primary btn-lg w-100">
                                <i class="fas fa-print me-2"></i>{{ trans('payment::translate.Print Details') }}
                            </button>
                        </div>
                        <div class="col-md-6">
                            <button onclick="copyAllDetails()" class="btn btn-primary btn-lg w-100">
                                <i class="fas fa-copy me-2"></i>{{ trans('payment::translate.Copy All Details') }}
                            </button>
                        </div>
                    </div>

                    <!-- Contact Support -->
                    <div class="text-center mt-4 pt-4 border-top">
                        <small class="text-muted">
                            {{ trans('payment::translate.Having trouble with your payment?') }} 
                            <a href="{{ route('contact') ?? '#' }}" class="text-decoration-none">{{ trans('payment::translate.Contact Support') }}</a>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.copy-btn {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.copy-btn:hover {
    opacity: 1;
}

@media print {
    .btn, .copy-btn {
        display: none !important;
    }
    
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    
    .bg-gradient-primary {
        background: #6c757d !important;
    }
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Copy individual field
    $('.copy-btn').on('click', function() {
        const text = $(this).data('copy');
        copyToClipboard(text);
        
        // Show feedback
        const btn = $(this);
        const originalIcon = btn.html();
        btn.html('<i class="fas fa-check text-success"></i>');
        
        setTimeout(() => {
            btn.html(originalIcon);
        }, 2000);
    });
});

// Copy all bank details
function copyAllDetails() {
    let details = "Bank Transfer Details\n";
    details += "=====================\n\n";
    details += "Reference Number: {{ $paymentData['reference_number'] ?? 'N/A' }}\n";
    details += "Amount: {{ $paymentData['currency'] ?? 'USD' }} {{ number_format($paymentData['amount'] ?? 0, 2) }}\n\n";
    
    @foreach($paymentData['bank_details'] ?? [] as $label => $value)
        @if(!empty($value))
        details += "{{ ucwords(str_replace('_', ' ', $label)) }}: {{ $value }}\n";
        @endif
    @endforeach
    
    @if(!empty($paymentData['instructions']))
    details += "\nInstructions:\n{{ $paymentData['instructions'] }}\n";
    @endif
    
    copyToClipboard(details);
    
    // Show success message
    showNotification('{{ trans("payment::translate.Bank details copied to clipboard") }}', 'success');
}

function copyToClipboard(text) {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text);
    } else {
        // Fallback for older browsers
        const textArea = document.createElement("textarea");
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }
}

function showNotification(message, type) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-info';
    const alertDiv = $(`<div class="alert ${alertClass} alert-dismissible fade show position-fixed" style="top: 20px; right: 20px; z-index: 9999;" role="alert">
        <i class="fas fa-check-circle me-2"></i>${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>`);
    
    $('body').append(alertDiv);
    
    setTimeout(() => {
        alertDiv.alert('close');
    }, 3000);
}
</script>
@endpush