@extends('layout')

@section('title', __('store.payment_bank_transfer_title'))

@section('content')
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4>{{ __('store.payment_bank_transfer_payment') }}</h4>
                    <small class="text-muted">{{ __('store.payment_invoice_number') }}: {{ $invoice->invoice_number }}</small>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <i class="fas fa-university fa-3x text-primary mb-3"></i>
                        <h5>{{ __('store.payment_bank_transfer_instructions') }}</h5>
                        <p class="text-muted">{{ __('store.payment_bank_transfer_info') }}</p>
                    </div>

                    <!-- Payment amount -->
                    <div class="alert alert-primary text-center">
                        <h4 class="mb-0">
                            <strong>{{ __('store.payment_amount') }}: {{ $invoice->total_amount }} {{ $invoice->currency->code ?? 'TRY' }}</strong>
                        </h4>
                    </div>

                    <!-- Bank details -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card ">
                                <div class="card-header">
                                    <h6 class="mb-0">{{ __('store.payment_bank_details') }}</h6>
                                </div>
                                <div class="card-body">
                                    <div class="bank-info">
                                        <div class="mb-3">
                                            <strong>{{ __('store.payment_bank_name') }}:</strong><br>
                                            <span id="bank-name">{{ $bankSettings['bank_name'] ?? 'Örnek Banka A.Ş.' }}</span>
                                            <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('bank-name')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>

                                        <div class="mb-3">
                                            <strong>{{ __('store.payment_account_holder') }}:</strong><br>
                                            <span id="account-holder">{{ $bankSettings['account_holder'] ?? 'Şirket Adı' }}</span>
                                            <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('account-holder')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>

                                        @if(!empty($bankSettings['account_number']))
                                        <div class="mb-3">
                                            <strong>{{ __('store.payment_account_number') }}:</strong><br>
                                            <span id="account-number">{{ $bankSettings['account_number'] }}</span>
                                            <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('account-number')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                        @endif

                                        <div class="mb-3">
                                            <strong>{{ __('store.payment_iban') }}:</strong><br>
                                            <span id="iban">{{ $bankSettings['iban'] ?? 'TR12 3456 7890 1234 5678 9012 34' }}</span>
                                            <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('iban')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>

                                        @if(!empty($bankSettings['swift_code']))
                                        <div class="mb-3">
                                            <strong>{{ __('store.payment_swift_code') }}:</strong><br>
                                            <span id="swift">{{ $bankSettings['swift_code'] }}</span>
                                            <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('swift')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                        @endif

                                        @if(!empty($bankSettings['branch_code']))
                                        <div class="mb-0">
                                            <strong>{{ __('store.payment_branch_code') }}:</strong><br>
                                            <span id="branch-code">{{ $bankSettings['branch_code'] }}</span>
                                            <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('branch-code')">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <!-- Payment instructions -->
                            <div class="card bg-warning bg-opacity-10">
                                <div class="card-header">
                                    <h6 class="mb-0">{{ __('store.payment_important_notes') }}</h6>
                                </div>
                                <div class="card-body">
                                    @if(!empty($bankSettings['payment_instructions']))
                                        <div class="mb-3">
                                            {!! nl2br(e($bankSettings['payment_instructions'])) !!}
                                        </div>
                                    @endif

                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            {{ __('store.payment_transfer_exact_amount') }}
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            {{ __('store.payment_include_invoice_number') }}
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            {{ __('store.payment_processing_time') }}
                                        </li>
                                        <li class="mb-0">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            {{ __('store.payment_contact_support') }}
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Transfer details to copy -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">{{ __('store.payment_payment_reference') }}</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <strong>{{ __('store.payment_reference_description') }}:</strong><br>
                                        <span id="reference-text">{{ $invoice->invoice_number }} - {{ $order->client->first_name }} {{ $order->client->last_name }}</span>
                                        <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard('reference-text')">
                                            <i class="fas fa-copy"></i> {{ __('store.payment_copy') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action buttons -->
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="d-grid">
                                <button class="btn btn-success btn-lg" onclick="window.print()">
                                    <i class="fas fa-print me-2"></i>
                                    {{ __('store.payment_print_instructions') }}
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-grid">
                                <a href="{{ route('store.auth.dashboard') }}" class="btn btn-primary btn-lg">
                                    <i class="fas fa-arrow-left me-2"></i>
                                    {{ __('store.payment_back_to_dashboard') }}
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Contact information -->
                    <div class="alert alert-info mt-4">
                        <i class="fas fa-info-circle"></i>
                        <strong>{{ __('store.payment_need_help') }}</strong>
                        {{ __('store.payment_contact_us_text') }}
                        <a href="{{ lroute('store.contact') }}">{{ __('store.payment_contact_us') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    const text = element.textContent || element.innerText;

    navigator.clipboard.writeText(text).then(function() {
        // Show success feedback
        const button = element.nextElementSibling;
        const originalContent = button.innerHTML;

        button.innerHTML = '<i class="fas fa-check text-success"></i>';
        button.classList.add('btn-success');
        button.classList.remove('btn-outline-secondary');

        setTimeout(function() {
            button.innerHTML = originalContent;
            button.classList.remove('btn-success');
            button.classList.add('btn-outline-secondary');
        }, 2000);
    }).catch(function(err) {
        console.error('Copy failed: ', err);
        alert('{{ __("store.payment_copy_failed") }}');
    });
}

// Print styles
const printStyles = `
    <style>
        @media print {
            .btn, .card-header { display: none !important; }
            .card { border: none !important; box-shadow: none !important; }
            body { font-size: 12pt; }
            .bank-info { font-size: 14pt; }
        }
    </style>
`;
document.head.insertAdjacentHTML('beforeend', printStyles);
</script>
@endsection
